PDA

View Full Version : CSS absolute positioning problem, scrolling fluid layout



ian_iam
Jan 26th, 2010, 11:02 PM
Hi guys,

I'm racking my brain on this one. I'm trying to make a fluid 2 column layout with the navigation at the bottom. I would like the navigation and right column to keep their positions as the user scrolls through the content of the page housed in the left column, but without just making the left column div (overflow:auto). I would like the main page's scrollbar to do the work. Hope that makes sense.

the code is below, and you can see it here: http://nymacias.com/drawings.html

A first it seems to work, as you scroll just the content in the left div moves, but if you resize your page while scrolled to any place other than the top, all of the absolute positioned divs move or disappear.

I'm also doing something wrong with the div order, or z index or something. I feel like it could be simplified. This has caused the two image links in the right column to not registering as links (maybe there is a Div on top of them?).

I really appreciate the help on this!
Thanks in advance folks,
ian


[]




<body style="background-image: url(gratercrop1.jpg); background-repeat: no-repeat; background-position: right bottom;">



<!--left side text container-->
<div style="float:left; height: 85%; width: 30%; border: 0px solid blue;">
<p style="margin-left: 0px; margin-top: 0%;">
<br>
Lorem ipsum. all the content here.
</p>
</div>


<div style="position:absolute; width: 30%; height: 100%; float: left; border: 0px dashed pink;">
<div style=" height: 86%; width: 100%; border: 0px solid green;"></div>
<div style="width: 100%; height: 15%; border: 0px solid red; background-color: white;"></div>
</div>

<div style="position:absolute; margin-left:0%; height:96%; width:96%; border:0px solid aqua;">
<!--right side container-->

<div style="position:absolute; margin-left:31%; height:90%; width:68%; border:0px solid green;">
<div id="main_cont_wrap">
<ul id="main_cont">
<li>
<a href="about.html">
<img class="thumbs" src="menus/drawingsbooksthumbs/drawingsthumb.jpg" /></a>
</li>

<li style="float:right;">
<a href="drawingsbooks/books/books.html">
<img class="thumbs" src="menus/drawingsbooksthumbs/booksthumb.jpg" />
</a>
</li>
</ul>
</div>
</div>

<!--navigation-->

<div style="border:0px solid black; width:100%; height:100%; position:absolute;">
<div style="height: 90%;border:0px solid gray"></div>
<div id="main_nav_wrap">
<ul id="main_nav">
<li style="width: 20%; border: 0px dotted purple; margin-left: 0px;"><a href="about.html"><h1>Nanette&nbsp;Yannuzzi Macias</h1></a></li>
<li stlye="float: right;"><a href="video.html">video</a></li>
<li stlye="float: right;"><a href="drawings.html">drawings</a></li>
<li stlye="float: right;"><a href="books.html">books</a></li>
<li stlye="float: right;"><a href="installation.html">installation/ performance</a></li>
<li stlye="float: right;"><a href="writing.html">writing</a></li>
<li stlye="float: right;"><a href="about.html">about <br>&nbsp;</a></li>
</ul>
</div>
</div>
</div>


</body>
</html>


and the css:



/* ========NAVIGATION========= */


#main_nav_wrap
{
padding: 0px 0 0 0;
width: 100%;
float:left;
border: 0px solid blue;
background-image: url('opacityline.png');
background-repeat: repeat;
}

#main_nav
{

list-style: none; /* remove the bullets */
margin: 0; padding: 0; /* no need for margins or padding */
width: 100%;/* important for later */
}



#main_nav li
{
float: left; /* we want these to display inline, but we want them block level for later so no display: inline; */
width: 13%;
text-align: center; /* center all text */
border: 0px dotted red;
}





/* ========RIGHT CONTAINER========= */
#main_cont_wrap
{
margin: 8% 10% 10% 10%;
padding: 8% 0 8% 0;
width: 80%;
float:left;
border: 0px solid fuchsia;

}



#main_cont
{
list-style: none; /* remove the bullets */
margin: 0; padding: 0; /* no need for margins or padding */
width: 100%;/* important for later */
}



#main_cont li
{
float: left; /* we want these to display inline, but we want them block level for later so no display: inline; */
width: 49%;
text-align: center; /* center all text */
border: 0px dotted red;
}

Excavator
Jan 27th, 2010, 12:52 AM
Hello ian_iam,
Some of what you're doing has limited support in older browsers and most of what your doing will not work unless you present it in valid form. You are lacking a DocType and using too much absolute positioning.

Read every link in my signature line below! They will all help you.

Here is a start at getting your page to work, pay particular attention to the DocType at the top -
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
html, body {
width: 100%;
height: 100%;
font: 100% "Comic Sans MS";
background: url(http://nymacias.com/gratercrop1.jpg) no-repeat fixed right bottom;
}
* {
margin: 0;
padding: 0;
border: 0;
}
#container {
width: 100%;
font-size: 0.8em;
}
#left_column {
width: 30%;
height: 2000px;
margin: 30px 0 20px 20px;
padding-top: 50px;
background: #999;
}
#footer {
height: 45px;
width: 100%;
position: fixed;
bottom: 50px;
left: 0;
background: #000;
}
</style>
</head>
<body>
<div id="container">
<div id="left_column">
<p>
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna
aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no
sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam
nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo
duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
</p>
<p>
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna
aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no
sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam
nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo
duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
</p>
<p>
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna
aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no
sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam
nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo
duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
</p>
<p>
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna
aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no
sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam
nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo
duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
</p>
<!--end left_column--></div>
<div id="footer">
<!--end footer--></div>
<!--end container--></div>
</body>
</html>

Of course, IE6 is probably going to choke on that. I have a demo page that shows how to get position:fixed; to work in IE6 here (http://nopeople.com/CSS/position%20fixed/).

Good luck :thumbsup:

ian_iam
Jan 27th, 2010, 07:20 AM
wow, awesome.. thank you!! I have this idea that this took you 20 minutes. you have no idea how long it took me (sigh). I'm still learning, and slowly.

I haven't had a chance to go through all the links in your signature yet, but i will and I may come back with another q in this thread if that's ok! :)

thanks again!
ian

ian_iam
Jan 27th, 2010, 07:36 PM
Hi again,

With your help Excavator, I tried again to finish this layout.. this is sooo much better cleaner and simpler. Unfortunately I'm still having a little trouble.. on the bright side I've validated my css and html! and added the correct doctype. thanks for those tips!

My second attempt is below:

http://nymacias.com/drawingsFromCF.html

Problem 1:
The "toggle border" is adding pixels to the size of each <li> making all the images move to accommodate the extra height/width. I could just add the same width border to the images, but is their a better way? preferably the border would be "clear", though i know that's not a real value.

Problem 2:
The width of the right column is working great (the image widths change with the size of the browser window). BUT the height is NOT, and so the content is overflowing the height of the div. In different size browser windows the content gets clipped.

In the different pages of this site, the content (e.g. number of images) in the right column will change. So I'm trying to make layout in which i can add more or less images whose size will change with the size of the browser window (use percentages right?) and all stay above "the fold". Any ideas folks?


thank you a million!


the code:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>

<style type="text/css">

html, body {
width: 100%;
height: 100%;
font: 100% "Arial";
background: url(http://nymacias.com/gratercrop1.jpg) no-repeat fixed right bottom;
}
* {
margin: 0;
padding: 0;
border: 0;
}
#container {
width: 100%;
font-size: 0.8em;
}
#left_column {
width: 30%;
height: 2000px;
margin: 30px 0 20px 20px;
padding-top: 50px;
background: #999;
}


#right_column {
position: fixed;
top: 0px;
bottom: 100px;
left: 30%; /* remove the bullets */
right: 15px;
padding-top: 20px;
border: 1px solid green;
}


#right_column li {
float:left; /* we want these to display inline, but we want them block level for later so no display: inline; */
width: 48%; /* divide 100 by number of images */
height: 30%;
text-align: center; /* center all text */
list-style: none;
border: 1px dotted red;
}


.thumbs {
width: 50%;
margin: 10%;
}

.toggleborder:hover img {
border: 5px solid #ccc;
}



#footer {
height: 45px;
width: 100%;
position: fixed;
bottom: 50px;
left: 0;
background: url(http://nymacias.com/opacityline.png) repeat;
}

#footer li {
float: left; /* we want these to display inline, but we want them block level for later so no display: inline; */
width: 13%;
text-align: center; /* center all text */
list-style: none;
border: 0px dotted red;
}

a {
color: black;
font-family: "Arial";
font-size: 15px;
}

a:link {
text-decoration:none;
}

a:visited {
text-decoration:none;
}

a:active {
font-weight:bold;
}

a:hover {
font-weight: bold;
text-decoration:none;
}

h1
{
font-family: "Arial";
font-size: 15px;
letter-spacing: 3px;
margin: 0 0 0 6px;
font-weight: bold;
}


</style>
</head>
<body>
<div id="container">
<div id="left_column">
<p>
FLorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna
aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no
sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam
nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo
duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
</p>
<p>
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna
aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no
sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam
nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo
duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
</p>
<p>
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna
aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no
sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam
nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo
duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
</p>
<p>
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna
aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no
sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam
nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo
duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
</p>
<!--end left_column--></div>

<div id="right_column">
<ul>
<li>
<a class="toggleborder" href="#"><img class="thumbs" src="http://nymacias.com/image.gif" alt="image" /></a>
</li>

<li>
<a class="toggleborder" href="#"><img class="thumbs" src="http://nymacias.com/image.gif" alt="image" /></a>
</li>


<li>
<a class="toggleborder" href="#"><img class="thumbs" src="http://nymacias.com/image.gif" alt="image" /></a>
</li>

<li>
<a class="toggleborder" href="#"><img class="thumbs" src="http://nymacias.com/image.gif" alt="image" /></a>
</li>

<li>
<a class="toggleborder" href="#"><img class="thumbs" src="http://nymacias.com/image.gif" alt="image" /></a>
</li>

<li>
<a class="toggleborder" href="#"><img class="thumbs" src="http://nymacias.com/image.gif" alt="image" /></a>
</li>
</ul>
<!--end right_column--></div>

<div id="footer">
<ul>
<li style="width: 20%; border: 0px dotted purple; margin-left: 0px;"><h1><a style="font-weight: 600;" href="about.html">Nanette&nbsp;Yannuzzi Macias</a></h1></li>
<li><a href="video.html">video</a></li>
<li><a href="drawings.html">drawings</a></li>
<li><a href="books.html">books</a></li>
<li><a href="installation.html">installation/ performance</a></li>
<li><a href="writing.html">writing</a></li>
<li><a href="about.html">about</a></li>
</ul>

<!--end footer--></div>
<!--end container--></div>
</body>
</html>

Excavator
Jan 27th, 2010, 08:39 PM
Hi again,

With your help Excavator, I tried again to finish this layout.. this is sooo much better cleaner and simpler. Unfortunately I'm still having a little trouble.. on the bright side I've validated my css and html! and added the correct doctype. thanks for those tips!
Looks good - good job on the valid code too!


Problem 1:
The "toggle border" is adding pixels to the size of each <li> making all the images move to accommodate the extra height/width. I could just add the same width border to the images, but is their a better way? preferably the border would be "clear", though i know that's not a real value.

When you hover there is 10 pixels added to width and height. That will move things around a lot. If you have something not visible taking up that 10px until you hover then it won't move because nothing is being added.
Try a margin like this -

.toggleborder:link img, .toggleborder:visited img {margin: 5px;}
.toggleborder:hover img {
margin: 0;
border: 5px solid #ccc;
}


Problem 2:
The width of the right column is working great (the image widths change with the size of the browser window). BUT the height is NOT, and so the content is overflowing the height of the div. In different size browser windows the content gets clipped.

Right now you controlling the div that contains the ul. When the size of the page grows to where the ul expands, it blows right out of the containing div.
Instead of have a div at all, see divitis (http://www.apaddedcell.com/div-itis), maybe you'll be able to control the ul better.
Try this -
duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
</p>
<!--end left_column--></div>


<ul id="right_column">
<li>
<a class="toggleborder" href="#"><img class="thumbs" src="http://nymacias.com/image.gif" alt="image"></a>
</li>

<li>
<a class="toggleborder" href="#"><img class="thumbs" src="http://nymacias.com/image.gif" alt="image"></a>
</li>


<li>
<a class="toggleborder" href="#"><img class="thumbs" src="http://nymacias.com/image.gif" alt="image"></a>
</li>

<li>
<a class="toggleborder" href="#"><img class="thumbs" src="http://nymacias.com/image.gif" alt="image"></a>
</li>

<li>
<a class="toggleborder" href="#"><img class="thumbs" src="http://nymacias.com/image.gif" alt="image"></a>
</li>

<li>
<a class="toggleborder" href="#"><img class="thumbs" src="http://nymacias.com/image.gif" alt="image"></a>
</li>

<!--end right_column--></ul>

<div id="footer">
<ul>
<li style="width: 20%; border: 0px dotted purple; margin-left: 0px;"><h1><a styl



ul#right_column {
position: fixed;
top: 0px;
bottom: 100px;
background: #0f0;
left: 30%; /* remove the bullets */
right: 15px;
padding-top: 20px;
border: 1px solid green;
}

I'm not even sure that will work but it's another approach anyway.

ian_iam
Jan 28th, 2010, 06:49 PM
that worked great! thank you for all the help Excavator!
ian