Overlapping text when using css.

[Nick Evans]

Hello group!
On a webpage I am working on, which is at the moment, just a template for a
site I am going to be setting up. I do intend to use xhtml 1.1 and css. The
problem is that I can't get the layout to work, I have tried various
techniques but they just don't seem to work (hey i am a newbie to web design
:-D). The address in question is
http://www.huff.org.uk/bs18/18layouttemplate.html. It validates and all
works correctly, but I want to get the copyright message etc pushed right
down to the bottom of the page (centre). I have set it up as div "footer".
It does look at big ugly at the moment, but I want to get the actual
positioning of the elements out the way before I start prettying it up.

Thanks all in advance

Nick.

[Els]

Re: Overlapping text when using css.

Nick Evans wrote:
[color=blue]
> The address in question is
> http://www.huff.org.uk/bs18/18layouttemplate.html. It validates and all
> works correctly, but I want to get the copyright message etc pushed right
> down to the bottom of the page (centre). I have set it up as div "footer".
> It does look at big ugly at the moment, but I want to get the actual
> positioning of the elements out the way before I start prettying it up.[/color]

Your stylesheet:
body {background:#EC ECEC url(18pluslogob ack.gif;) no-repeat
fixed;}
#menu {position: absolute; top: 250px left: 2%;}
#menu a {display:block; }
#content {position: absolute; top 0px; left: 30%;}
#footer {position: absolute; bottom: 0%; left: 30%;}
h1 {color:#01172E}

By setting all elements to position:absolu te, you take them
out of the normal flow, hence, they won't 'see' each other,
and will overlap whenever they like.
Make the window smaller and bigger and see how they stick to
the place you gave them, no matter what.

Have a look at floating.

http://www.w3.org/TR/2004/CR-CSS21-20040225/visuren.html#q27

http://css.maxdesign.com.au/floatutorial/

--
Els

http://locusmeus.com/

Sonhos vem. Sonhos vão. O resto é imperfeito.
- Renato Russo -