1 reply [Last post]
tamarab
Offline
Regular
Last seen: 15 years 2 weeks ago
Joined: 2005-07-28
Posts: 36
Points: 0

Hi Everyone, I am very new to this.. so forgive me if this is obvoious, I have been struggling for days with it.

The problem I have is that a container I made that holds a <li> menu system doesn't want to scroll (move) when you drag the browser window. (the container and list are within another 'container' that is centered within the page.

Can someone please tell me how to fix this and get it moving again like the other elements on the page?

You can see the page here:
http://tamarabrooks.com/csspositioning/polis3.html

(I think this may have something to do with the way the <li> is structured, but can't figure it out)

THANKS TO EVERYONE in advance!!!

CSS CODE:
body {
text-align: center;
background: #ccc url(images/background.jpg) fixed;
}

#nav {
position: absolute;
top: 0px;
left: -3px;
list-style: none;
margin: 0;
padding: 0;
height: 40px;
display: inline;
overflow: hidden;
width: 650px;
z-index: 1;
}

#nav li {
margin: 0;
padding: 0;
display: inline;
list-style-type: none;
}

#nav a {
float: left;
padding: 25px 0 0 0;
overflow: hidden;
height: 0px !important;
height /**/:35px; /* for IE5/Win */
}

#nav a:hover {
background-position: 0 -25px;
}

#nav a:active, #nav a.selected {
background-position: 0 -25px;
}

#thome a {
width: 173px;
background: url(images/custom_software1.jpg) top left no-repeat;
}

#tguides a {
width: 124px;
background: url(images/licensing_options1.jpg) top left no-repeat;
}

#tmag a {
width: 133px;
background: url(images/product_description1.jpg) top left no-repeat;
}

#tarchives a {
width: 75px;
background: url(images/non_profit1.jpg) top left no-repeat;
}

#container {
margin: 0 auto;
width: 735px;
text-align: left;
}

#whitebox1 {
position: absolute;
font-size:0px;
height: 400px;
width: 540px;
top: 150px;
left: 333px;
background-color: #FFFFFF;
z-index: 0;
}

#container1 {
position: absolute;
top: 5px;
left: 5px;
width: 57px;
height: 25px;
padding: 0;
margin: 0px 0 0px 0;
background: #7FA0B1;
}
#header{
width:735px;
height:129px;
background-image: url(images/header.jpg);
}

#bluerectangle {
font-size: 0px;
position: static;
height: 5px;
width: 735px;
top: 134px;
background-color: #000000;
}

#blueline {
font-size:0px;
position: static;
height: 5px;
width: 192px;
top: 270px;
background-color: #000000;
}

#menuitem1 {
font-size:0px;
padding-top: 2px;
width: 542px;
height: 23px;
position: absolute;
left: 260px;
top: 142px;
background-repeat: repeat;
background-image: url(images/rollover1b.jpg);
}

/* Left Images */

#image1 {
position: static;
top: 170px;
width:192px;
height:130px;
background-image:url(images/group_work.jpg);
}
#image2 {
width:192px;
height:161px;
background-image:url(images/spider_web.jpg);
}
#image3 {
width:192px;
height:153px;
background-image:url(images/puzzle_piece.jpg);
}

HTML CODE:

<body>
<div id="container">
<div id="header"></div>
<div id="bluerectangle"></div>
<div id="whitebox1">
<div id="container1">
<ul id="nav">
<li id="thome"><a href="#"></a>
<li id="tguides"><a href="#"></a></a>
<li id="tmag"><a href="#"></a>
<li id="tarchives"><a href="#"></a>
</ul>
</div>
</div>
<div id="image1"></div>
<div id="blueline"></div>
<div id="image2"></div>
<div id="blueline"></div>
<div id="image3"></div>
</div>
</body>

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 5 years 31 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

why no scroll with the browser window...

I'm afraid that your falling into the absolute position trap. The box is not moving as you have told it to be a certain height and width and then to be positioned a definite number of pixels from the edge of the viewport, in other words you have totaly constrained the element.

You will need to loose the absolutes and re-structure the layout around default position static or position relative with the left column a floated element. Position absolute is a bad way of conceiving the main layout of a page, until you understand how it really works and even then it needs to be used with care as it easily breaks a layout.

It would help to have a read up on some guides to CSS and positioning especially in respect to the natural 'Flow' of elements on a page.

Hugo.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me