...
PDA

Simple CSS website. Problem with scrolling bars!

valentine
08-17-2010, 08:18 PM
Hi, I have created a website with a simple layout. There is a title on the top left corner, a description area for each project on the top which overlaps the images when scrolling and stays there. and a menu which i want to be anchored to the bottom left of the page, regardless of the size of the browser. However the main part of the page should scroll so we can see all the images that dont fit in the window. I have achieved this by putting all these elements in separate absolute positioned divs, with the main one (with the images in it) padded left and top so it starts in the right place.

http://i22.photobucket.com/albums/b304/heliosvk/Picture8.png

This seems to work now, but whenever I have only one image in the page I and i make the browser smaller i get a scroll bar on the edge of the image, and not the edge of the page. Why is this? The main container has a this code applied to it
overflow-x: hidden; overflow-y: auto;
http://i22.photobucket.com/albums/b304/heliosvk/Picture10.png

Can anyone tell me if they can see anything wrong with the code, or how you would recommend I build it?


here is the code for it


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Title</title>
<link href="helioscsstest.css" rel="stylesheet" type="text/css" />
<style type="text/css">
<!--
p.basic-paragraph {}
-->
</style>
</head>

<body>


<div id="container">



<div id="title">Title of Page</div>

<div id="workdescription">
<span class="category"> Title</span><br />
<br />
<span class="category">Format</span>: X<br />
<span class="category">Client</span>: X<br />

</p>
<p class="basic-paragraph">Description</p>
</div>

<div id="workimages">
<div id="imagecontainer"> <img src="http://www.owdna.org/graphics/history/brookshicks/d040.jpg" width=650 px/></div>
<div id="imagecontainer"> <img src="http://englishrussia.com/images/moscow_old_2/16.jpg" width=650 px/></div>


</div>


<div id="workmenu">

<div id="workmenucontent">
<p class="indentedtitle">ABOUT / CONTACT<br />
<p class="indentedtitle">PROJECTS<br />
<a href="project1.html">Project 1<br />
<a href="project2.html">Project 2<br />
<a href="project3.html">Project 3<br />

<a href="project4.html">Project 4<br />
<a href="project4.html">Project 5<br />
<a href="project6.html">Project 6<br />



</div>


</div>

</body>
</html>
here is the css style sheet
@charset "UTF-8";
/* CSS Document */

html, body {
margin: 0;
padding: 0;
}

#page-container {
height: 100%;
}

#title {
width: 250px;
height: 50px;
position: absolute;
top: 10px;
left: 10px;
}

#temporary {
position:absolute;
top:50%;
height:240px;
left:50%;
width:50%;
margin-left:-250px;
margin-top:-120px;
z-index:-1;
}

#thumbs {
float:left;
height:200px;
width:auto;
padding-right:10px;
padding-bottom:20px;
}



#workdescription {
background: white;
padding-top: 10px;
float: left;
position: absolute;
left: 350px;
top: 0px;
width: 650px;
height: 200px;
vertical-align:top;
z-index: +1
}

#workdescriptionindex {
padding-top: 10px;
float: left;
position: absolute;
left: 350px;
top: 0px;
width: 650px;
height: 20px;
vertical-align:top;
z-index: +1
}

#workimages {
padding-top: 210px;
position: absolute;
float: left;
left: 350px;
top: 0px;
bottom: 0px;
overflow-x: hidden;
overflow-y: auto;
border-color:#000;
border-width:2px;
}

#workmenu {
position: absolute;
bottom: -4px;
left: 10px;
width: 250px;
height: 500px;
vertical-align:bottom;
z-index:+10;
}

#imagecontainer {
float: left;
background: transparent;
width: 650px;
overflow: hidden;
padding-bottom: 15px;
}

#fullwidthimagecontainer {
floatpadding-bottom:10px;
width:100%;
;
}

#twoimagecontainerleft {
width: 320px;
height: 452px;
padding-right:10px;
float:left;
}

#twoimagecontainerright {
width: 320px;
float:right;
}

#workmenucontent {
position: absolute;
bottom: 0;
}

BODY, TD {
font-family:"Helvetica","Arial","Monaco", "sans serif";
font-size: 12px;
letter-spacing:1px;
line-height: 16px;
margin:0px;
padding:0px;
overflow:hidden;
color:black;
}

A {
padding-bottom:0px;
border-bottom-width:1px;
border-bottom-style:transparent;
text-decoration:none;
color:black;
padding-bottom:1px;
margin-bottom:1px;
line-height: 18px;

}

A:hover {
color:black;
padding-bottom:0px;
border-bottom-color:red;
border-bottom-width:1px;
border-bottom-style:solid;
text-decoration:none;
margin-bottom:1px;
padding-bottom:1px;
}

.indentedtitle {
text-indent: 10px;
}

.category {
text-indent: 10px;
padding-bottom:0px;
border-bottom-width:1px;
border-bottom-style:solid;
text-decoration:none;
color:black;
padding-bottom:1px;
margin-bottom:1px;
line-height: 18px; }
ahayzen
08-17-2010, 08:30 PM
Hi and welcome to the forums.

you could try putting a

<br style="clear:both">

after the last image as a quick fix.

So you would put it here.


<div id="workimages">
<div id="imagecontainer"> <img src="http://www.owdna.org/graphics/history/brookshicks/d040.jpg" width=650 px/></div>
<div id="imagecontainer"> <img src="http://englishrussia.com/images/moscow_old_2/16.jpg" width=650 px/></div>
<br style="clear:both;">
</div>


Andy
ahayzen
08-17-2010, 08:35 PM
Or you could change


#workimages {
padding-top: 210px;
position: absolute;
float: left;
left: 350px;
top: 0px;
bottom: 0px;
overflow-x: hidden;
overflow-y: auto;
border-color:#000;
border-width:2px;
}


to


#workimages {
margin-top: 210px;
position: absolute;
float: left;
left: 350px;
top: 0px;
bottom: 0px;
overflow-x: hidden;
overflow-y: auto;
border-color:#000;
border-width:2px;
}
valentine
08-17-2010, 11:26 PM
hi, thanks for your answers. i've tried both things but neither of them seem to do the trick. changing padding to margin makes the scrollbar start where the images start, but i actually want it to cover the whole height of the page.

as for clear:both it doesnt seem to do anything?

any other ideas? maybe i could rebuild the whole thing if this structure doesnt make sense? i've never built a website before so i have no idea what i could be doing wrong.
mikehandersons
08-18-2010, 11:58 AM
I am in a similar place... :confused: and would also like to here additional ideas! Anyone?
ahayzen
08-18-2010, 06:01 PM
Add right:0px; to the #workimages

so this


#workimages {
padding-top: 210px;
position: absolute;
float: left;
left: 350px;
top: 0px;
bottom: 0px;
overflow-x: hidden;
overflow-y: auto;
border-color:#000;
border-width:2px;
}


becomes this


#workimages {
padding-top: 210px;
position: absolute;
float: left;
left: 350px;
top: 0px;
bottom: 0px;
right:0px;
overflow-x: hidden;
overflow-y: auto;
border-color:#000;
border-width:2px;
}


Andy
valentine
08-19-2010, 01:09 AM
I think this is a case of taking a broken toy back to the shop only to find it actually worked: I did try right:0 but i seem to remember that causing another problem. But in this instance it seems to have fixed it, I must have changed something else along the way that made it work in combination with this.

Thank you very much for your help!!

EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum