PDA

View Full Version : CSS: container/top width problem



Khensu
Jan 21st, 2007, 10:51 PM
Guess who's back. I decided to start a new thread for this as I thought editing the previous one would lead to (code) confusion.

The problem is very simple: my "top" division of my CSS container refuses to take a proper width, whether all widths/heights are set in percentages or pixels.

The page is here: http://www.indigetesdii.org/new/topattempt.php .

The CSS code for the container ("wrapper"), the top, menu and main/content parts is as follows:


#wrapper {
width: 100%;
margin: 0 auto;
}

#top
{
width: 700px;
height: 50px;
margin: 0;
padding: 0;
border: 1px solid;
border-color: #333333;
}


#menu {
width: 100px;
height: 400px;
float: left;
border: 1px solid;
border-color: #333333;
border-right-style: none;
}

#main {
width: 600px;
height: 400px;
overflow: auto;
float: left;
border: 1px solid;
border-color: #333333;
font-family: verdana, helvetica, geneva, arial, sans-serif;
font-size: 11px;
color: #000000;
}

If anyone can tell me what's wrong with it, I'd be grateful. I'm stuck and I can't see it.

The container/wrapper width is in percentages, because it totally screwed up the lay-out when I put pixels. Apparantly, that has little to do with the top, but please correct me if I'm wrong.

Again, thanks in advance.

hurloon
Jan 22nd, 2007, 12:00 AM
First of all, you have tables in your layout, I suggest you take those out, because they aren't made for organizing pages. You should use a div layout with your main div centered, then your code is most likely to work better.

Khensu
Jan 22nd, 2007, 12:51 AM
Very good point there; I removed the tables. Guess I got caught up in the late 1990s :)

The removal of the tables also allowed me to define the container in pixels more comfortably. However, the top width is still a problem... and I can't understand it.

Menu width + Main width = 700 px
Top width = 700 px

You'd think the top would be aligned with the menu on one side and the main part on the other, but it's not. It goes over too long. I can't try which amount of pixels puts it right where it belongs, because then it won't be resolution independent anymore.

hurloon
Jan 22nd, 2007, 01:06 AM
I see your problem now, you changed your menu to 80px in your 2nd set of CSS so there is a 20px gap.

<html>

<head>
<style type="text/css">

a:link {
text-decoration: none;
color: #000000;
}
a:visited {
text-decoration: none;
color: #000000;
}
a:hover {
text-decoration: underline overline;
color: #000000;
}

body {
scrollbar-3dlight-color: #FFFFFF;
scrollbar-arrow-color: #000000;
scrollbar-base-color: #FFFFFF;
scrollbar-darkshadow-color: #FFFFFF;
scrollbar-face-color: #FFFFFF;
scrollbar-highlight-color: #FFFFFF;
scrollbar-shadow-color: #FFFFFF;
}

#wrapper {
width: 700px;
margin: 0 auto;
}

#top
{
width: 700px;
height: 50px;
margin: 0;
padding: 0;
border: 1px solid;
border-color: #333333;
}


#menu {
width: 100px;
height: 400px;
float: left;
border: 1px solid;
border-color: #333333;
border-right-style: none;
}

#main {
width: 600px;
height: 400px;
overflow: auto;
float: left;
border: 1px solid;
border-color: #333333;
font-family: verdana, helvetica, geneva, arial, sans-serif;
font-size: 11px;
color: #000000;
}

p.main {
margin-left: 20px;
margin-right: 10px;
margin-top: 10px;
margin-bottom: 5px;
}

p.menu {
margin-left: 10px;
margin-right: 10px;
margin-top: 10px;
margin-bottom: 5px;
}

td.media {
border: 0px;
background-color: #FFFFFF;
font-family: verdana, arial, helvetica, sans-serif;
font-size: 11px;
color: #000000;
}

</style> <style type="text/css">

#menu {
width: 80px;
background: #333333;
}

#menu ul {
margin: 0;
padding: 0;
list-style-type: none;
font-family: verdana, helvetica, geneva, arial, sans-serif;
font-size: 11px;
}

#menu li {
margin: 2px 0 0;
}

#menu a {
display: block;
width:72px;
padding: 2px 2px 2px 6px; /* top, right, bottom, left */
border: none;
background: #333333;
text-align: left;
text-decoration: none;
}

#menu a:link, #menu a:active, #menu a:visited {
color: #FFFFFF;
}

#menu a:hover {
border: none;
background: #FFFFFF;
color: #000000;
}

</style></head>

<body>

<div id="wrapper">

<div id="top">
Brick sure loves them lamps.
</div>

<div id="menu">
<ul>
<li><a href="index.php">home</a></li>
<li><a href="media.php">media</a></li>
<li><a href="samples.php">samples</a></li>
<li><a href="contact.php">contact</a></li>

<li><a href="http://www.myspace.com/indigetesdii" target="_blank">myspace</a></li>
</ul> </div>

<div id="main">
<p class="main">
I LOVE LAMP. I LOVE DESK.
</p>
</div>

</body>
</html>

Khensu
Jan 22nd, 2007, 01:34 AM
I was actually laughing at myself after I saw that. Such think make me believe I should've gone to "special school".

Thanks!


One odd thing, though... To make the right border of the top perfectly align with the right border of the main content, I needed to set the width of the top one extra pixel: (menu width + main width + 1).

It works, so it's not a problem, it just seems odd. But I was never any good at maths.

Again, thanks for pointing it out to me!