css positioning of information in window

[runnerjp]

Hi,

 

I'm facing problems setting up CSS for simple layout:

 

What I have now works ok, when working in full screen, but when I make window smaller, all the content seems to get messed up... can any 1 help fix this

 

div#logo
{
position:absolute;
left:20%;
top: 5%;

}
div#register
{
position:absolute;
left:81%;
top: 2%;
}
div#content
{
position:absolute;
left:20%;
top: 50%;
}
div#trainingpic
{
position:absolute;
left:4%;
top: 2%;	
}
div#info
{
position:absolute;
left:81%;
top: 5%;	
}
div#login
{
position:absolute;
left:82%;
top: 8%;	
}
div#menu
{
position:absolute;
left:2%;
top: 27%;	
}

  that is what i have got for my css layout.....

[lando]

Do you have a link we can view this at?

[runnerjp]

http://www.runnerselite.com

[lando]

Okay, well that confirms that it is the absolute positioning you are using.  With a fluid layout you don't want to use absolute positioning, it will prevent things from flowing as the browser is resized.

 

As I look at your code, your site (specifically the header) is not laid out in a logic manor.  Take your header for instance, each element should appear in your code in the order in which you want them to appear in the browser.  Once you have done that you will need to use floats to get them to stack side by side.  More css will be needed to get them the way you want them.  You are using absolute positioning to place them in what appears to be a random order.

[runnerjp]

gonna go gt some books on css thanks

 

so oyur sayin dont use absolute positioning..

 

 

 

[lando]

I'm not saying NEVER use them, just not in that situation.  I personally would never do an entire layout in absolute.  It is fine to use absolute to place elements within a layout, just not the layout itself.

[runnerjp]

ah ok i get you

 

so for my header use summats like 

{height:60px; background-colour:#ffc; text-align:center;}

[runnerjp]

or i could just use center lol

[dbrimlow]

Close your body and html tags!

 

</body>

</html>

 

A fairly good beginners css book is

 

"integrated html and CSS"

 

By Virginia DeBolt

 

It will help you with the basics at first.

 

DON'T get into advanced stuff until you have this down.

 

A great tutorials link for beginners to understand general concepts (that I still go back to after all these years) is http://css.maxdesign.com.au/selectutorial/