[Webpro] Help with DIVs in CSS Layout

[Philip Weller]

Jeanne, I think Mark hit the nail on the head with the notion that your unwanted gaps come from your paragraph margins. Lately, to avoid problems like this I've taken to including this declaration at the beginning of my stylesheets:

* {margin: 0;
   padding: 0;}

The asterisk serves as a CSS wild card that will remove all margin and padding from every element on your page. With this you can override any browser defaults which might cause inconsistencies in your layout. Any margin or padding declarations you make later in your stylesheet for individual elements will overwrite the zeros.

Hope this helps. The road to CSS wisdom is a long one, but so very worthwhile.

Philip Weller
themanhimself at philipweller.com
http://www.philipweller.com/



Mark Groen wrote:

>----- Original Message ----- 
>From: "Jeanne" <jeanne at tech-ease.net>
>To: <webpro at webdesign-list.com>
>Sent: July 20, 2004 7:06 PM
>Subject: [Webpro] Help with DIVs in CSS Layout
>
>
>  
>
>>I'm trying to make the leap from tables to CSS layout and I'm not
>>    
>>
>having a
>  
>
>>lot of luck. It seems so much less intuitive than HTML with all
>>    
>>
>these little
>  
>
>>things you have to have remember... I suppose I'll get the hang of
>>    
>>
>it sooner
>  
>
>>or later, but in the meantime I could use some help.
>>    
>>
>
>HTML wasn't intuitive when you first started that either - in the
>long run there is less of the "little things" you have to remember
>with CSS-p once you are over the learning curve, imho of course ;-)
>
>  
>
>>.........Here's what I've got so far:
>>http://tech-ease.net/classwork/3-col_static.htm
>>
>>I want the topnav and bottomnav DIVs to meet in the middle so that
>>    
>>
>there
>  
>
>>isn't any dark-blue space in between. Is this possible with the
>>    
>>
>method I'm
>  
>
>>using?
>>    
>>
>
>The space is there not from your div elements but the from the
>default spacing on the top/bottom of a paragraph element. Either make
>you paragraph margins: margin: 0px; or dump either the div or the
>paragraph element, no need to use both in your example, especially as
>the redundancy creates extra headaches, ditto for the h1 elements.
>
>  
>
>>Also, any good resources you know of that are geared more toward
>>    
>>
>designers
>  
>
>>than programmers would be appreciated.
>>    
>>
>
>Well, the css in these examples are a bit more complicated than what
>you are dealing with at the moment, but for inspiration you can't
>beat: http://www.csszengarden.com/
>
>For how to deal with the box model differences there are two or three
>really good sites, but you might as well start here as everything is
>covered and there are links to where you want to go in the future:
>http://www.positioniseverything.net/
>
>hth!
>
>cheers,
>
>               Mark
>
>MG Web Services
>Web Site Hosting and Development
>www.markgroen.com
>mark at markgroen.com
>604-780-6917
>Bowen Island, B.C., Canada
>
>------------------------------------------------------------------
>send message to the list:         mailto:webpro at webdesign-list.com
>[WebPro] list info, subscribe, archive: http://webdesign-list.com/
>There's also a FlashPro mailing list:       http://flash-list.com/
>cutting-edge sounds for flash:            http://flash-sounds.com/
>
>
>
>  
>