Go Back   CodingForums.com > :: Client side development > HTML & CSS

Before you post, read our: Rules & Posting Guidelines

Reply
 
Thread Tools Rate Thread
Enjoy an ad free experience by logging in. Not a member yet? Register.
Old 06-15-2010, 12:18 AM   PM User | #1
TopBuyPC
New to the CF scene

 
Join Date: Jun 2010
Posts: 2
Thanks: 0
Thanked 0 Times in 0 Posts
TopBuyPC is an unknown quantity at this point
How to make box expand without overlay as content expands

Hello all,
I am very new to CSS and have a bit of an issue although I am pretty sure this is an easy fix. I have a website with the following CSS

#container {
position: center;
width: 954px;
height: auto;
}

#leftb {
padding: 5;
position: absolute;
left: 0;
height: auto;
width: 234px;
margin-top: 145px;
text-align: left;
}


#leftb .nav {
padding: 5;
position: absolute;
width: 234px;
left: 0;
background-color: #DCE6FB;
margin-top: 24px;
text-align: left;
}

#leftb .navbg {
padding: 5;
position: absolute;
width: 234px;
background-color: #184684;
font-weight: bold;
color: #FFFFFF;
left: 0;
text-align: left;
}


#leftb .mlist {
padding: 5;
position: absolute;
width: 234px;
left: 0;
background-color: #DCE6FB;
margin-top: 24px;
text-align: left;
}

#leftb .mlistbg {
padding: 5;
position: absolute;
width: 234px;
background-color: #184684;
font-weight: bold;
color: #FFFFFF;
left: 0;
text-align: left;
}

and the html is here http://topbuypc.com/index.php?s=config

I am trying to get the mailing list right under the navigation, and when the navigation expands with more links I would like the mailing list to move down with it. I can position the mailing list with margin-top: #px; but then I would have to change the number everytime I add more links to the navigation box. Please help, thanks everyone!
TopBuyPC is offline   Reply With Quote
Old 06-15-2010, 01:35 PM   PM User | #2
Bar2aYunie
New Coder

 
Join Date: Dec 2009
Posts: 96
Thanks: 1
Thanked 2 Times in 2 Posts
Bar2aYunie is an unknown quantity at this point
I actually would suggest using a table layout, so you can use the cells for the menu's. That way, the menu's will move up and down depending on the amount of links in it. You can even center the layout if you wish.

The way you've got it right now, the menu's are positioned on a specific place of the page, so you'd have to recalculate the position of the mailing list every time after adding a link. Do you know how to create a table layout?

Last edited by Bar2aYunie; 06-15-2010 at 01:42 PM..
Bar2aYunie is offline   Reply With Quote
Old 06-15-2010, 02:15 PM   PM User | #3
SB65
Senior Coder

 
Join Date: Feb 2009
Location: West Yorkshire
Posts: 2,827
Thanks: 9
Thanked 685 Times in 679 Posts
SB65 will become famous soon enoughSB65 will become famous soon enough
There's no need at all for a table here.

The problem with the css you've posted is that it's using a lot of absolute positioning. So if one of your elements gets bigger, you need to change the absolute position of all the other elements. If you remove the absolute positioning then the elements in the page will automatically align as they extend or shrink. That said, your link doesn't have the absolute positioning - so maybe you've already done that?

You might also want to have a look here for a three column layout.
SB65 is offline   Reply With Quote
Reply

Bookmarks

Jump To Top of Thread


Thread Tools
Rate This Thread
Rate This Thread:

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off

Forum Jump


All times are GMT +1. The time now is 02:32 AM.


Advertisement
Log in to turn off these ads.