Stylesheets - Help me with this layout tutorial

Author

Help me with this layout tutorial

varois83

2006-04-17, 10:49 pm

Hi

I am heavily experiencing with layouts at the moments as part of
learning CSS. The following link has a tutorial for a 3 columns layout
with header and footer using floats. It is simple but something bugs
me.

Here is the link:

http://builder.com.com/5100-6371_14-5160911.html

Once you got the page loaded, scroll down to "view this example" which
is a blue link, click on it, you now see his example. View the source,
copy and paste it in whatever you use for that and run it on your HD.
So far so good, you get just like him. Now in your source add <p></p>
to the middle <div> where it says "Middle column text..."
So you now have for that middle <div>:

<div id="middle">
<p>Middle column text...</p>

Now save and run it and you will see a white gap between the header and
the middle <div>.
I have tested this in IE6, NN8 and firefox 1.0.7

What does this? The <p></p> element to code properly should be there,
but it displays better without it. Can anyone explain this or provide a
fix?
To somewhat provide a fix which I don't like, I added background-color:
aqua to the css of the body element and it filled the gap with aqua,
still I want to see my text starting right below the header and using
<p></p>.

Thanks to the pros

Patrick

Wÿrm

2006-04-17, 10:49 pm

"varois83" <varois83@netzero.net> kirjoitti
viestissä:1145321290.102065.126980@i39g2000cwa.googlegroups.com...

<snip>
> Now save and run it and you will see a white gap between the header and
> the middle <div>.

Margin or padding of <p>

try

p
{
margin: 0;
padding: 0 0 1em 0;
}

Or something in CSS and see what happens...

Neredbojias

2006-04-17, 10:49 pm

To further the education of mankind, "varois83" <varois83@netzero.net>
vouchsafed:

> Hi
>
> I am heavily experiencing with layouts at the moments as part of
> learning CSS. The following link has a tutorial for a 3 columns layout
> with header and footer using floats. It is simple but something bugs
> me.
>
> Here is the link:
>
> http://builder.com.com/5100-6371_14-5160911.html
>
> Once you got the page loaded, scroll down to "view this example" which
> is a blue link, click on it, you now see his example. View the source,
> copy and paste it in whatever you use for that and run it on your HD.
> So far so good, you get just like him. Now in your source add <p></p>
> to the middle <div> where it says "Middle column text..."
> So you now have for that middle <div>:
>
> <div id="middle">
> <p>Middle column text...</p>
>
> Now save and run it and you will see a white gap between the header and
> the middle <div>.
> I have tested this in IE6, NN8 and firefox 1.0.7
>
> What does this? The <p></p> element to code properly should be there,
> but it displays better without it. Can anyone explain this or provide a
> fix?
> To somewhat provide a fix which I don't like, I added background-color:
> aqua to the css of the body element and it filled the gap with aqua,
> still I want to see my text starting right below the header and using
> <p></p>.

I think it's the default (top and bottom) margins on <p>. You can:

p { margin:0 auto; }

in css, etc.

--
Neredbojias
Infinity can have limits.

varois83

2006-04-19, 6:44 pm

Wyrm & Neredbojias

Thanks to both of you for fixing it.

Best regards

Patrick