[themes] Three columns. One fixed-width sidebar for your navigation, a liquid center for the real substance.

Nick Lewis nick at smartcampaigns.com
Tue Jan 31 19:04:58 UTC 2006


Mark Fredrickson wrote:

>Will this suffer from the classic drupal.css ".clear" problem (that is,
>content "jumps" below the side bars when a clear: all attribute is applied)?
>I've taken to removing drupal.css for this reason.
>
>Alternatively, is there a solid work around for that problem (tables need
>not apply)?
>  
>
I'm working on a contributed theme that makes use of the following 
layout. I've found this layout to be the most *robust*. And seeing as 
how I have deadlines, am under payed, and not doing the conference 
circuits as a CSS guru yet, I'm not really too concerned about the 3 
non-semantic divs. I'm concered about having a well ordered, table free 
layout that has a footer, can expand and contract with drupal's 
oddities, works on the  rest of the world's web browsers, and has 
min-max width support for IE as well as firefox.

http://www.webproducer.at/flexible-layout

What really attracts me about this layout (which Kieran's like may not 
do as gracefully, but I need to test that...) is that using PHP to 
calculate the sidebars, I can remove, and add columns on both or all 
sides cleanly by setting seperate classes for the #columns div.

Generally, I've found that most of the overriding of drupal.css can be 
done by zeroing in more specifically on the elements. Example:

.block .content .item-list li,
.block .content .menu li  {
    padding:0;
    margin:0;
    list-style-type:none;
    list-style-image:none;
}

removes the drupal.css formatting for menus and item lists in blocks in 
a box_grey-like theme. drupal.css specifies ".item-list li", so you can 
override it by getting more specific: e.g. " #content .sidebar .block 
.item-list li" if you were crazy. Similarly, the .clear (which I find 
necessary given the floats for logo, and navigation that are often in 
the header) could theoretically be overriden by specifying #header 
br.clear {clear:none;}

When in doubt, use the ID -- as they have precedence over classes.

Best,
Nick Lewis
http://nicklewis.smartcampaigns.com

>-Mark Fredrickson
>
>
>
>  
>
>>From: Kieran Lal <kieran at civicspacelabs.org>
>>Reply-To: A list for theme developers <themes at drupal.org>
>>Date: Tue, 31 Jan 2006 10:04:21 -0800
>>To: "themes at drupal.org theme developers" <themes at drupal.org>
>>Subject: [themes]  Three columns. One fixed-width sidebar for your navigation,
>>a liquid center for the real substance.
>>
>>http://www.alistapart.com/articles/holygrail
>>_______________________________________________
>>themes mailing list
>>themes at drupal.org
>>http://lists.drupal.org/mailman/listinfo/themes
>>
>>
>>    
>>
>
>_______________________________________________
>themes mailing list
>themes at drupal.org
>http://lists.drupal.org/mailman/listinfo/themes
>
>
>
>  
>



More information about the themes mailing list