By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
437,648 Members | 1,190 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 437,648 IT Pros & Developers. It's quick & easy.

Overlapping text when using css.

P: n/a
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.
Jul 20 '05 #1
Share this Question
Share on Google+
1 Reply


P: n/a
Els
Nick Evans wrote:
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.


Your stylesheet:
body {background:#ECECEC url(18pluslogoback.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:absolute, 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-2...suren.html#q27
http://css.maxdesign.com.au/floatutorial/

--
Els
http://locusmeus.com/
Sonhos vem. Sonhos vo. O resto imperfeito.
- Renato Russo -

Jul 20 '05 #2

This discussion thread is closed

Replies have been disabled for this discussion.