...

View Full Version : Div length trouble



Estellio
01-09-2008, 11:52 AM
Okay, I've been searching the web for almost an hour and I still can't find the soloution to this problem and I don't know what I'm doing wrong (though admittedly I've only been using CSS a few weeks) What I'm trying to do is make a bar that runs down the side of my main body. I can't set a height on the body because the content varies from page to page so it'll be longer or shorter depending on which page I'm on, it's because of this I think setting the height on the nav bar to a percentage isn't working. I just need it to go from the header to the footer. Here is the code

<div id="filler2">
<span class="linky"><A HREF="#Fanart"><br><u><b> Fan Art</b></u></a></span>

<span class="linky"><A HREF="#Original"><br><u><b> Original </b></u></a></span>

<span class="linky"><A HREF="#Commission"><br><u><b> Commission</b></u></a></span>

</div>

and the CSS is:

div#filler2 {
width:104px;
color:#3366FF;
background-image:url("navbar.bmp");
background-repeat:repeat-y;
padding:2px 0px 2px 5px;
float:right;
}




I've really just hit a brick wall, I thought having the image repeat would work but...I'm at a loss of what I've done wrong.

abduraooft
01-09-2008, 12:12 PM
Try something like http://bonrouge.com/2c-hf-fluid(r).php to get the trick.

Estellio
01-09-2008, 12:19 PM
I already tried this method :( that's what stumps me. The CSS I used was:

div#overall {
width:765px;
height:100&#37;;
position:relative;
margin:auto;
background-color:black;

}

div#filler2 {
width:104px;
height:100%;
color:#3366FF;
background-image:url("navbar.bmp");
background-repeat:repeat-y;
padding:2px 0px 2px 5px;
float:right;
}

The overall encompasses all other divs on my page. I'm sure I'm just missing something tiny, and it's probably glaringly obvious but I've been wrestling with this all morning and I can't figure it out.

Arbitrator
01-09-2008, 12:40 PM
Here is the code

[code]Actually, thatís only part of your code. You also forgot the image(s).


I'm at a loss of what I've done wrong.If I had to take a guess (since you didnít provide all of the code), it would be that youíre specifying the background on the wrong element.


The CSS I used was:

[code]I note that you have two elements with height: 100% declarations specified. Ask yourself, ďWhat is that 100% of?Ē A typical problem is authors trying to specify a percentage of what turns out to be height: auto, the default, and results in the percentage value being ignored.

Estellio
01-09-2008, 01:11 PM
http://boldpenguin.livejournal.com/577.html

All the code for my index page is here (I chose this page because this was the shorter) Since every page is different, however, I'm not sure how to specify what it should be a percentage of, because few things have heights. Also, I didn't specify the background in the wrong place, that much I know :) My nav bar is called filler because originally I wasn't going to put anything there (I'm sorry, the images aren't included here but that's only the header and the nav background, if it helps the navbar image is a dark blue image 109px across and 452px high)

tomws
01-09-2008, 03:25 PM
http://boldpenguin.livejournal.com/577.html

...
however, I'm not sure how to specify what it should be a percentage of, because few things have heights.
...



That may be what Arbitrator is hinting at.

Start with the div that has the height problem and look successively at the heights of its outer containers (all the way to the body tag). If a height isn't set on one of those, you're setting the inner div height as 100% of that unset (aka, auto) height, and that won't work as you expect.

This one got me several times until I found the answer.

Arbitrator
01-09-2008, 03:32 PM
I'm not sure how to specify what it should be a percentage of, because few things have heights.You need to specify a non‐auto, non‐percentage height for an ancestor element (element A) of the element with a percentage‐based height (element B). Element A must be the parent element of element B except when all of the elements between A and B have their heights defined in terms of percentages.

Maybe you didnít get that, but this is your problem. Well, itís one of them, anyway. You have the following situation:


#filler2 (element B) has height: 100% specified.
The parent element of #filler2 is #overall, so the height of #filler2 is a percentage of the height of #overall.
#overall has height: 100% specified so you need to look at the parent element of #overall.
The parent element of #overall is the body element, so the height of #overall is a percentage of the height of the body element.
The body element has height: auto implicitly specified.
Since you canít take a percentage of the value auto, the percentage‐based height specified for #overall has no effect. (In other words, element A is missing.)
Likewise, the height of #filler2 canít be resolved, so it also has no effect.


Also, I didn't specify the background in the wrong place, that much I know :)Oh? Let me direct you to an example that I created: http://www.jsgp.us/demos/cf130954.html. Take particular note of where I specified the background images.


<!doctype html public "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html401/strict.dtd">

<html lang="en-Latn">
<head>

<!-- This code was dumbed down for the benefit of Microsoft Internet Explorer 6 users. -->

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Demo for CodingForums.com Thread 130954</title>
<meta name="Author" content="Patrick Garies">
<meta name="Created" content="2008-01-09">
<meta name="Revised" content="2008-01-09">
<style type="text/css" media="all">
* { margin: 0; padding: 0; }
html { background: black; color: #99d; font: 16px/1.2 Lucida Sans, Lucida Grande, Lucida Sans Unicode, sans-serif; }
p { margin: 1em; }
#container { width: 765px; margin: 0 auto; }
#header { overflow: auto; height: 136px; text-align: center; font: italic 63px/136px Palatino Linotype, Palatino, serif; }
#header img { display: block; }
#navigation { overflow: auto; padding: 5px 0; }
#navigation li { list-style: none; float: left; width: 69px; border-top: 5px solid; padding: 0 20px; text-align: center; }
#navigation li a { color: #39f; text-decoration: none; font: bold 12px Times New Roman, Times, serif; }
#navigation li a:hover { color: white; text-decoration: underline; }
#navigation .one { border-color: #009; }
#navigation .two { border-color: #33c; }
#navigation .three { border-color: #60f; }
#navigation .four { border-color: #66f; }
#navigation .five { border-color: #99f; }
#navigation .six { border-color: #ccf; }
#navigation .seven { width: 71px; border-color: #ddf; }
#navigation .sel a { color: #ccf; text-decoration: underline; }
#filler1, #filler2 { width: 150px; margin: 1em 0; padding: 1em 0; color: white; text-align: center; }
#filler1 { float: left; }
#filler2 { float: right; }
#content { margin: 1em 0 0; background: url(article_b.png) top right repeat-y; }
#content .inner { padding: 1px 150px; background: url(article_a.png) repeat-y; }
#footer { clear: both; height: 35px; padding: 0 1em; background: #59f; color: black; text-align: right; line-height: 35px; }
</style>

</head>
<body>

<div id="container">
<h1 id="header"><img alt="Estellio" width="765" height="136" src="fail.png"></h1>
<ul id="navigation">
<!-- -IE6: Use of adjacent sibling selectors are preferred to use of these class attributes. -->
<li class="one sel"><a href="Index.html">Home</a></li>
<li class="two"><a href="Gallery.html">Gallery</a></li>
<li class="three"><a href="Fiction.html">Fiction</a></li>
<li class="four"><a href="nonfic.html">Non-Fiction</a></li>
<li class="five"><a href="Games.html">Games</a></li>
<li class="six"><a href="Links.html">Links</a></li>
<li class="seven"><a href="mailto:vickatron@hotmail.com">Contact</a></li>
</ul>
<div id="filler1"><code>#filler1</code></div>
<div id="filler2"><code>#filler2</code></div>
<div id="content">
<div class="inner" lang="la-Latn"> <!-- -IE6: Use of a child selector is preferred to use of this class attribute. -->
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed in ante vitae turpis rutrum blandit. Maecenas tempus, nulla non molestie tincidunt, velit lectus feugiat nisl, sed ultricies tellus nunc in ante. Duis erat. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aliquam sodales. Nam consequat nisl non mi. Quisque at nibh. Ut ac erat. Integer et purus quis odio laoreet sagittis. Quisque turpis quam, nonummy non, tristique id, lacinia in, nunc. Donec nunc est, mollis eu, fringilla non, tristique nec, nulla. Vestibulum varius lacus vitae ligula. Quisque sit amet erat. Mauris nulla. Nunc tortor sem, volutpat at, ullamcorper at, molestie a, pede. Proin eu est sit amet quam aliquam mattis.</p>
<p>Aliquam ullamcorper libero sodales metus. Vestibulum quis leo id arcu ullamcorper fermentum. Cras orci. In ut leo. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Fusce blandit, nisl sed pretium laoreet, neque lacus euismod est, id fringilla metus erat non eros. Duis dolor tortor, egestas eu, suscipit sit amet, aliquet quis, odio. Morbi aliquam, nisi a varius scelerisque, nisl tellus vestibulum nisl, ut fringilla elit urna in lectus. Cras feugiat sapien eu orci. Vivamus vitae est. Proin ac ipsum et diam hendrerit vulputate.</p>
<p>Praesent mollis. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Sed in urna ut libero dignissim egestas. Ut dui. Ut nunc leo, imperdiet ac, congue at, semper ac, purus. In eu ante. Pellentesque hendrerit. Etiam mauris. Duis ut orci. Vivamus molestie, magna sed scelerisque dapibus, lorem ligula gravida felis, sed viverra quam velit non augue. Fusce purus velit, vestibulum quis, pulvinar non, varius quis, enim. Vivamus non enim nec magna malesuada commodo. Donec ultrices dolor at tortor. Donec scelerisque, felis nec pulvinar tempor, mi mi porttitor orci, vitae euismod justo nibh quis libero.</p>
<p>Aliquam ullamcorper libero sodales metus. Vestibulum quis leo id arcu ullamcorper fermentum. Cras orci. In ut leo. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Fusce blandit, nisl sed pretium laoreet, neque lacus euismod est, id fringilla metus erat non eros. Duis dolor tortor, egestas eu, suscipit sit amet, aliquet quis, odio. Morbi aliquam, nisi a varius scelerisque, nisl tellus vestibulum nisl, ut fringilla elit urna in lectus. Cras feugiat sapien eu orci. Vivamus vitae est. Proin ac ipsum et diam hendrerit vulputate.</p>
</div>
</div>
<div id="footer">© 2008 Estellio</div>
</div>

</body>
</html>

Estellio
01-09-2008, 04:16 PM
I found away around it by creating another div encompassing both fillers and the body with a black background that had the dark blue edge where I wanted the bar to be. It's a cheaters way around it but it works.

Thank you for your advice though, it's cleared up a few things for me. I've only been using CSS the last 3 weeks so I'm still a little messy with my code but ye did help me understand a few places where I was going wrong. Much obliged ^^

Apostropartheid
01-09-2008, 06:41 PM
Hmm.

If you're using CSS...

<span class="linky"><A HREF="#Fanart"><br><u><b> Fan Art</b></u></a></span>
Why b and u? & the span can be dropped too: add the class directly to the a, or, even better, not at all (a { properties: values; }.)



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum