CSS columns sooooo close

I have been noodling around with a new web design, and have come up to three problems:
1. Currently I have laid out the main body (seen here: http://www.chartoonz.com/test/index.html) but the CSS isn't perfect. I want the two columns underneath the main div=BodyWrapper to line up on the left precisely with the left-side border of the BodyWrapper div and I want to push the columns all the way to match up with the right side. But I am getting weird padding and am not sure what's causing it. I have played with the marigins of all peritenent styles but I'm getting nowhere...
2. Additionally when I load the icons at the bottom of the page they work fine but once I've pressed them the purple link border shows. Blech! I tried getting rid of it on every psuedo selector: a:hover, a link etc... but it's still there. Any way I can kill this off?
3. When I view the page at full monitor height and width I still get a horizonatl scroll despite the fact that the page is epanded as much as possible. I assume this is due to the css input image at the top right which slides a little off screen. How can I kill this?
Any help woudl be appreciated
Thanks,
Aharon

Hello Aharon,
Playing with firebug here is what I did to make this work.
#columnContainer - make width 76.8%
#HalfBodyWrapper should be a class, shouldn't use an ID more than once on a page
on the second HalfBodyWrapper give a second class like hbw-right and float right with 0 margin
Make the width of the HalfBodyWrapper 46%
The purple border is an outline. give these a property - outline:none; Though I didn't see a border. I'm was using Chrome/FireFox.
The horizontal scroll is from your navigation. You can remove the width on #navWrapper.
Hope this helps.
Chad Smith | http://bcgurus.com/Business-Catalyst-Templates for only $7

Similar Messages

CSS columns - Please Help!

I have beaten my brains trying to get a third column to
display correctly. After rereading several tutorials and helps in
Dev Center, I am still stumped! Can you take a look at my code here
http://www.mlundy.net/tigerswrestlingnew/lsTigersTemplate.html
- CSS file is
http://www.mlundy.net/tigerswrestlingnew/css/lsWrestling.css
The "sponsors" div will not align with the top of "headlines"
and "content" divs. Thanks so much for any help.
Mark

Hi Mark --
Rather than using such huge margins (536 px for #sponsors!)
try this layout.
It's basically the same structure as your page.
Hope this helps.
John
<style type="text/css">
body {
font-family: verdana, "Trebuchet MS", Arial;
margin-top: 30px;
text-align: center;
font-size: 100%;
margin-bottom: 20px;
background-color: #97895e;
h1 {
font: bold normal 15px Arial, Helvetica, sans-serif;
color: #b3060c;
text-align: left;
margin: 0px;
padding: 0px;
h2 {
color: #b3060c;
text-align: left;
margin-bottom: 0px;
padding: 0px;
font-family: Arial, Helvetica, sans-serif;
font-size: 100%;
h3 {
color: #b3060c;
text-align: left;
font-family: Arial, Helvetica, sans-serif;
font-size: 90%;
margin-top: 5px;
margin-bottom: 2px;
padding-top: 3px;
h4 {
color: #b3060c;
text-align: left;
font-size: 80%;
margin-top: 7px;
margin-bottom: 0px;
margin-left: 0px;
font-weight: bold;
padding: 0px;
p {
color: #000000;
text-align: left;
margin: 0px 0px 0px 1px;
padding: 5px 0px 0px;
font-size: 80%;
#wrapper {
position: relative;
padding: 0px;
width: 760px;
background-color: #FFFFFF;
margin-left: auto;
margin-right: auto;
text-align: left;
background-repeat: no-repeat;
background-position: left top;
#header {
background-image: url(../assets/page_elements/header.gif);
background-repeat: no-repeat;
height: 106px;
background-position: right;
#content {
float: right;
width: 350px;
margin-left: 32px;
border-right-width: 1px;
border-right-style: solid;
border-right-color: #000000;
padding-right: 5px;
margin-top: 15px;
#leftsidebar {
float: left;
width: 182px;
margin-top: 15px;
#leftsidebar h2 {
font: bolder 10pt Arial, Helvetica, sans-serif;
color: #b3060c;
text-align: left;
padding-left: 20px;
#rightsidebar {
float: right;
width: 172px;
margin-top: 15px;
margin-left: 10px;
padding-right: 5px;
#rightsidebar p {
font-size: 70%;
#rightsidebar h2 {
color: #b3060c;
text-align: left;
font-family: Arial, Helvetica, sans-serif;
font-size: 10pt;
.clearer {
clear:both;
height: 1px;
overflow: hidden;
line-height: 1px;
margin-top:-1px;
background-color: #97895e;
#footer {
background-color: #FFFFFF;
background-image:
url(../assets/page_elements/arch_bottom.gif);
background-repeat: no-repeat;
height: 30px;
#bottomnav {
background: #97895e;
color: #544324;
text-align: center;
font-size: 70%;
padding: 15px;
#bottomnav p {
color: #544324;
text-align: center;
font-size: 85%;
</style>
</head>
<body>
<div id="wrapper">
<div id="header">
</div>

<div id="leftsidebar">
<h2>#leftsidebar DIV </h2>
</div>
<div id="rightsidebar"style="padding-bottom: 20px;">
<h2>#rightsidebar DIV </h2>
</div>

<div id="content">
<h2>#content DIV </h2>
</div>

<br style="clear:both;"/>
<div id="footer"></div>
<div id="bottomnav"><p>Bottom navigation and
copyright notice</p>
</div>
</div>
</body>
</html>

Help with CSS column display

I have beaten my brains trying to get a third column to
display correctly. After rereading several tutorials and helps in
Dev Center, I am still stumped! Can you take a look at my code here
http://www.mlundy.net/tigerswrestlingnew/lsTigersTemplate.html
- CSS file is
http://www.mlundy.net/tigerswrestlingnew/css/lsWrestling.css.
The absolut wierdest thing just happened. After I uploaded it
for you to see, it seems to display correctly! However, inside DW8,
it still shows the sponsors div being pushed down below content.
I'm very confused now! Can anyone give me a hand? Thanks.
Mark

quote:
Originally posted by:
mlundy
I have beaten my brains trying to get a third column to
display correctly. After rereading several tutorials and helps in
Dev Center, I am still stumped! Can you take a look at my code here
http://www.mlundy.net/tigerswrestlingnew/lsTigersTemplate.html
- CSS file is
http://www.mlundy.net/tigerswrestlingnew/css/lsWrestling.css
The absolut wierdest thing just happened. After I uploaded it
for you to see, it seems to display correctly! However, inside DW8,
it still shows the sponsors div being pushed down below content.
I'm very confused now! Can anyone give me a hand? Thanks.
Mark
Actually, it still does not work correctly. Because I have
already applied a background image to the containing div, it
appears correct. The sponsors div content actually still falls
below the center, content div, instead of being top-aligned with
the headlines and content divs.

Table css column-header text color not working

When setting
-fx-text-fill: red;
in a css table, it does not change the header to tex to red. Is there another value? .table-view .column-header {

You have to override the following from the caspian.css:
.table-view .column-header {
    -fx-text-fill: -fx-selection-bar-text;
    /* TODO: for some reason, this doesn't scale. */
    -fx-font-size: 1.083333em; /* 13pt - 1 more than the default font */
    -fx-size: 25;
    -fx-border-style: solid;
    -fx-border-color:
          Inner border: we have different colours along the top, right, bottom and left.
          Refer to RT-12298 for the spec.
        derive(-fx-base, 80%)
        linear-gradient(to bottom, derive(-fx-base,80%) 20%, derive(-fx-base,-10%) 90%)
        derive(-fx-base, 10%)
        linear-gradient(to bottom, derive(-fx-base,80%) 20%, derive(-fx-base,-10%) 90%),
        /* Outer border: */
        transparent -fx-table-header-border-color -fx-table-header-border-color transparent;
    -fx-border-insets: 0 1 1 0, 0 0 0 0;
    -fx-border-width: 0.083333em, 0.083333em;
.table-view .column-header-background {
    -fx-background-color: -fx-body-color;
    -fx-padding: 0;
}

CSS Column problem

When I try to do a 2-columns layout within the main content
of the page, the 2nd column is dropping about 12pixels down in
Firefox2/pc (IE, oddly enough, is working).
Any ideas?
http://www.davidkerrdesign.com/new/index.html
here's the relevant css:
#mainContent .column1 {
width: 224px;
padding-right: 30px;
float: left;
margin-top: 0;
padding-top: 0;
#mainContent .column2 {
width: 224px;
margin-left: 256px;
margin-top: 0;
padding-top: 0;
}

DavidKerr wrote:
> When I try to do a 2-columns layout within the main
content of the page, the
> 2nd column is dropping about 12pixels down in
Firefox2/pc (IE, oddly enough, is
> working).
>
> Any ideas?
>
>
http://www.davidkerrdesign.com/new/index.html
>
> here's the relevant css:
>
> #mainContent .column1 {
> width: 224px;
> padding-right: 30px;
> float: left;
> margin-top: 0;
> padding-top: 0;
> }
>
> #mainContent .column2 {
> width: 224px;
> margin-left: 256px;
> margin-top: 0;
> padding-top: 0;
> }
>
#mainContent .column2 h2, #mainContent .column1 h2{
margin-top: 0;
padding-top: 0;
HTH
chin chin
Sinclair

CSS text in columns

I want to set up some text in 3 CSS columns so that it flows across the columns. I blieve this can be done, as I saw a description of it on a W3C forum but I didn't understand it! I need a 'columns for Dummies' version?!
Thanks
Stephen

I was intrigued, so I googled. You may be a bit ahead of the curve here ;) this article explains it well:
The CSS3 multi-column module
>The W3C multi-column module is a CSS level-three working draft, proposed by the W3C to extend the current CSS box model. The modules intent is to allow content to flow into multiple columns inside an element. It offers new CSS properties that let the designers specify in how many columns an element should be rendered. The browser takes care of formatting the text so that the columns are balanced.

Ie6 CSS left column issue

Hi All,
The left CSS column in ie6 get's a liitle extra width at
http://www.pseudosite.com/.
IIt's anoying. I've seen this stuff before but never found an
answer for it.
I haven't tried it in ie4 or 5.
I've tried the
"html>body" CSS filter. Also the
<-- [if lt IE 7] -->
Who's got the fix?

Cory C. wrote:
> Hi All,
> The left CSS column in ie6 get's a liitle extra width at
>
http://www.pseudosite.com/.
> I could almost care less but it's anoying since I've
seen this stuff before
> but never found an answer for it.
>
> I've tried the
"html>body" CSS filter. Also the
<-- [if lt IE 7]
> -->
>
> Who's got the fix?
>
Hi,
Try making your ulShift class 250px wide.
HTH
chin chin
Sinclair

View always opens in Icon view, not Column view

Hello,
I open Finder and it always opens in Icon view. I set it to open to Column and close Finder. When I reopen Finder, it opens in Icon again. I've tried trashing the Finder plist, repaired permissions, but nothing. Is there anything I can do to keep it opening the same way? It's pretty frustrating.
Thanks.

Hi Danielmak,
This Terminal command is not specifically related to Column View I'm afraid...
I don't fully understand what it does, but what I can tell you is that the script - for me & a few others - got rid of the common problem where the Finder-window only for the Macintosh HD (i.e. double-clicking on the Mac HD icon) always re-set back to Icon-View after a re-start, despite changing the window to List View and un-checking 'Always Open in Icon View' in View Options (Cmd+J).
I'm not sure I fully understand your problem, but..... You can have separate Finder-windows in different view-types (icon/list/column etc), BUT, the view-type does not automatically change between different types as you drill down into the folders in that particular window.
If you want a particular view-type & window-size to stick for each drive or folder on the desktop, you have to make your changes at the first level, then close the window... When you double-click again on that same drive, the view-type (don't forget to un-check the 'Always open in icon view' in View Options) & window position should be the same. If you drill down into the folders in that hard drive, & THEN make changes to view-type & window size, they will not stick (i.e. the next time you double-click on the HD icon, it will re-open in the originally-set position & view-type.)
Hope that helps. Apologies if I've misunderstood the question.
All the best,
Jason

Topics with Two Columns, and ?s about Margins

I've been searching all over and can't quite get the answers I need. I have a robohelp project which will solely be for written documentation. Some of the topics within this project I would like two have two columns, the left column will just have headings and the right side will have content. I did accomplish this by making a table, however I can't remove the borders. I also tried another way by using this, which works great but when I made printed documentation it didn't make it look like I have on my screen (printed the headings all together then the content on later pages).
#container2 { clear: left; float: left; width: 100%; overflow: hidden; } #container1 { float: left; width: 100%; position: relative; right: 50%; } #col1 { float: left; width: 50%; position: relative; overflow: hidden; } #col2 { float: left; width: 50%; position: relative; overflow: hidden; }
So I guess I have a few questions to try and make this project go smoothly. Since I will only be using this project for written documentation, what would be the best way to make sure that each topic I am working on will print the way I want it to (margins, etc.)? Is there a good way to deal with my two column issue? Would making a style that indents the text be a good solution?

You may also want to check out CSS columns. That will allow you to work without using tables and let the browser to take care of the rest. See: http://www.w3schools.com/css/css3_multiple_columns.asp
Kind regards,
Willam

Strange application behaviour after try to sort datagrid column

Hi all
I have a simple Air desktop application with customized DataGrid (Spark version). Problem that users found is when they trying to sort grid by one of the columns applicaiton closes without any messages. I've repeated this bug on my PC but there is a problem - in debug mode (i mean with ADL) it works OK without any tries to crash on sort. So my questions in priority order:
1. Is that possible to obtain live Air application errors log? I mean after installation. Maybe with 3rd party applicaiton. I'm using MonsterDebugger and added few log messages but looks like application just crashes without firing closing or close event.
2. Which part of DataGrid could crash applicaiton in release mode? Just thought debug mode is more strict.
My dev system:
Flash Builder 4.6
Adobe Air 3.2
Win 7 Ultimate 64bit
Best regards, Roman
P.S. Sorry for my bad english

Based on your idea, i've intercepted the click event and I use stopImmediatePropagation.
THen i added an image to sort the column. So if the image is clicked the sort is ok.

Finder Window - Date Modified Column Keeps Changing

When I open a Finder window, change the size of the "Date Modified" column then close the Finder window, the next time I open the same Finder window, the "Date Modified" column will compress the size of the column.
Why isn't Finder 10.9 maintaining my column changes?
Any assitance or insight whould be appreciated.

I solved the scrunched Date Modified column header in a similar fashion but added the Date Added field, which fixed the width of both Date columns.
After doing so, I now find both Date-oriented columns display and read dynamically the actual date and time.
I'm now looking for a solution to that issue, explained here:
finder window date added date modified show date time always

Background Colour in CSS

Hi there,
I'm creating a page in CSS and found that in selecting a
colour for a column, it only applies the colour behind where there
is actual content. After that, it reverts to the default colour of
the whole container. How can I make it so that the colour will
continue on down the page indefinitely? The reason I ask is because
the content in the neighboring box is longer and so it looks ugly
with this sudden cut off box beside it.
Thanks very much!
M

> I'm creating a page in CSS and found that in selecting a
colour for a
> column,
> it only applies the colour behind where there is actual
content. After
> that, it
> reverts to the default colour of the whole container.
How can I make it so
> that
> the colour will continue on down the page indefinitely?
There really isn't a concept of 'columns' in CSS as there is
with tables
(ie, TD).
A CSS column is usually a DIV container. A div will ONLY be
as high as the
content.
This is perhaps one of the main gripes people have creating
columnar layouts
with CSS.
Common workarounds are to apply colors in 'layers' by
wrapping your columns
in container divs, giving them a background color, and then
giving your
longer columns their own background color. The catch is that
you have to
know what the tallest column will be, and that's not always a
given.
Another option is to make a GIF of your column colors and
apply that as a
background to the main wrapper DIV.
Finally, there are some javascript options as well that, upon
page load,
will determine the height of the tallest column and adjust
the others
accordingly.
-Darrel

Excisable Column Disabled

Hi Experts,
Previously i was using SAP B1 2005B PL40. But now i have upgraded to SAP B1 2007B PL10.
Now in 2007 B PL10 i am facing a problem. In the SO, Delivery & A/R Invoice template the Excisable Column is Inactive.
Even in the form setting i have checked , it is showing the Visible column as enable but the Active column is disable.
Is there any idea of SAP behind this change. If not then guide me how to make the Excisable Columns as Active in the SO, Delivery & A/R Invoice template.
Thanks and Regards,
S Manikandan

Hi Mani,
Check this link
Excisable Column Disabled
Close th thread , if issue solved
Regards
Jambulingam.P
Edited by: Jambulingam P on Jun 18, 2009 6:56 AM

How to fix the width of sorting column about adf table ?

I develop project with ADF in jdeveloper.
When click on the sorting column header in adf table,it will adjust the width of the sorting column header.It will make page shifting.
How can I do to avoid the adjusting ?
How can I do to fix the width of soting table header?
Any hint will be appreciated.
Thank you!
Message was edited by:
user618145

I have set the column width like this:
in style.css:
/** Column Settings **/
af|column::header-text
background-color:#F0EDE1;
color:#000000;
font-family:Arial,Helvetica,sans-serif;
font-size:12px;
font-weight:bold;
padding-left: 2px;
padding-right: 2px;
padding-top: 3px;
padding-bottom:3px;
border-color: #B5B5B5;
WIDTH: 120px;
af|column::sortable-header-text
background-color:#F0EDE1;
color:#000000;
font-family:Arial,Helvetica,sans-serif;
font-size:12px;
font-weight:bold;
padding-left: 2px;
padding-right: 2px;
padding-top: 3px;
padding-bottom:3px;
border-color: #B5B5B5;
WIDTH: 120px;
and in jsp page,write like this:
<af:panelBox text="test" width="1000" background="dark" >
<af:table emptyText="" value="#{ftOverview.listOfTransefersVect}" var="transfers" width="100%" banding="row" bandingInterval="1">
<af:column sortable="true" sortProperty="transactionId" headerText="#{resources['ft_overview.ref']}" formatType="text" width="39"
noWrap="true">
<af:outputText value="#{transfers.transactionId}" escape="false"/>
</af:column>
</af:table>
</af:panelBox>
but it seems doesn't work well.

Problem with column view

When, in Finder, I move items from one column to another - after adding file to the target column, *the target column always closes (jumps back!) to the source column?!*
+It didn't happen in Tiger+, and it is very annoying because I cannot see and I cannot confirm if I added file into correct folder.
Does anybody know what is going on and, perhaps, the solution for this?
Thank you,
DEJMAC

It is annoying isn't it. The only way forward it seems is to hold the 'drop' over the foldername for one second until the folder opens and displays its contents, then release the 'drop' and you'll see the added files.
A shorter time delay would be nice.

CSS columns sooooo close

Similar Messages

Maybe you are looking for