Few questions

[Booooze]

hey, its me again,

i got a few questions, when using css are you supposed to avoid using <br> ?? and two, what can i use to a "table" or "layout box" at the very bottom. if you go to my site you can c it, but i have to use a lot of <br>'s. plus it if i add new info in one box, i would have to keep changing the px's on the bottom box. it's very hard to explain, here's the CSS code, go to my site and you will c what i mean
I just want to make sure im doing this right, cause i dont want to have to be chaing it constantly.
------------------cp.css

#title {position: absolute; top: 0px; right: 2%; left: 1%; background:Black; width: 100%}

#bar1 {position: absolute; top: 78px; left: 1%;
background:#00a8ec url(blue143.jpg) ; width: 100%; border-top: 1px solid black; border-left: 1px solid black; border-bottom: 1px solid black; border-right: 1px solid black;}


#nav {position: absolute; top: 100px; left: 1%; background:009cda; border-top: 2px solid black; border-left: 2px solid black; border-bottom: 2px solid black; border-right: 2px solid black; width: 15%}
#nav a {display:block;}
#nav a:visited {color:121212; background:009cda; font-weight: bold; text-decoration: none; border-bottom: 1px solid black; border-left: 1px solid black; border-top: 1px solid black}
#nav a:link {color:black; font-weight: bold; text-decoration: none; border-bottom: 1px solid black; border-left: 1px solid black; border-top: 1px solid black;}
#nav a:hover {background-color: black; font-weight: bold; color:white; text-decoration:underline}

li {list-style-type:none;}


#right {position: absolute; top: 234px; left: 1%; background:#00a8ec url(blue007.jpg); border-top: 2px solid Black; border-left: 2px solid Black; border-bottom: 2px solid Black; border-right: 2px solid Black; width: 15%}


#main {position: absolute; top: 101px; left: 16%; background:Black; width: 64%; border-right: 3px solid #00a8ec; border-left: 3px solid #00a8ec; border-bottom: 3px outset #00a8ec;}

#main a:visited {color:c0c0c0; background:transparent; font-weight: bold; text-decoration: none;}
#main a:link {color:6ec6f1; font-weight: bold; text-decoration: none;}
#main a:hover {background-color: black; font-weight: bold; color:white; text-decoration:underline}

#main h1,h2{font-family:"Arial Black", sans-serif; color: ebf5fc; font-weight:normal;}



#ad {position: absolute; top: 100px; left: 79%; padding: 1px; width: 20.5%; border-top: 2px solid black; border-left: 2px solid black; border-bottom: 2px solid black; border-right: 2px solid black; background:#00a8ec url(blue007.jpg)}

#footer {position: absolute; right: 2%; left: 1%; width: 100%; border-top: 1px solid black; border-left: 1px solid black; border-bottom: 1px solid black; border-right: 1px solid black; background:#00a8ec url(lblue055.gif); margin-top: 90.5%; }


--------------


http://www.freewebs.com/cptestcentral/

----
Thanks again


---:rolleyes:

[PeOfEo]

It is a lil bit off in mozilla. Basically yes, avoid the br tag for layout. The br is fine if it is being used as a line break for text, I use it all the time for that, but to be used for positioning is a nono becuase it depends on the font size which may be determined by the user. Instead use margin-top and margin-bottom to space inbetween your elements. For menus and content like that you might consider relative positioning.

[ray326]

I think all your absolute positioning is getting you. I'd recommend you start out with the Layout-o-Matic (http://www.inknoise.com/experimental/layoutomatic.php) and do your changes from there.

[Booooze]

wow, whoever thought of that is a genius, thx guys!