Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 9 of 9
  1. #1
    New to the CF scene
    Join Date
    Jan 2008
    Posts
    9
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Div length trouble

    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.

  • #2
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,852
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    Try something like http://bonrouge.com/2c-hf-fluid(r).php to get the trick.
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #3
    New to the CF scene
    Join Date
    Jan 2008
    Posts
    9
    Thanks
    1
    Thanked 0 Times in 0 Posts
    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.

  • #4
    Senior Coder Arbitrator's Avatar
    Join Date
    Mar 2006
    Location
    Splendora, Texas, United States of America
    Posts
    3,300
    Thanks
    28
    Thanked 275 Times in 269 Posts
    Quote Originally Posted by Estellio View Post
    Here is the code

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

    Quote Originally Posted by Estellio View Post
    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.

    Quote Originally Posted by Estellio View Post
    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.
    For every complex problem, there is an answer that is clear, simple, and wrong.

  • #5
    New to the CF scene
    Join Date
    Jan 2008
    Posts
    9
    Thanks
    1
    Thanked 0 Times in 0 Posts
    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)

  • #6
    Senior Coder tomws's Avatar
    Join Date
    Nov 2007
    Location
    Arkansas
    Posts
    2,644
    Thanks
    29
    Thanked 330 Times in 326 Posts
    Quote Originally Posted by Estellio View Post
    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.

  • #7
    Senior Coder Arbitrator's Avatar
    Join Date
    Mar 2006
    Location
    Splendora, Texas, United States of America
    Posts
    3,300
    Thanks
    28
    Thanked 275 Times in 269 Posts
    Quote Originally Posted by Estellio View Post
    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:

    1. #filler2 (element B) has height: 100% specified.
    2. The parent element of #filler2 is #overall, so the height of #filler2 is a percentage of the height of #overall.
    3. #overall has height: 100% specified so you need to look at the parent element of #overall.
    4. The parent element of #overall is the body element, so the height of #overall is a percentage of the height of the body element.
    5. The body element has height: auto implicitly specified.
    6. 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.)
    7. Likewise, the height of #filler2 can’t be resolved, so it also has no effect.

    Quote Originally Posted by Estellio View Post
    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.

    Code:
    <!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>
    For every complex problem, there is an answer that is clear, simple, and wrong.

  • #8
    New to the CF scene
    Join Date
    Jan 2008
    Posts
    9
    Thanks
    1
    Thanked 0 Times in 0 Posts
    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 ^^

  • #9
    The Apostate Apostropartheid's Avatar
    Join Date
    Oct 2007
    Posts
    3,215
    Thanks
    16
    Thanked 265 Times in 263 Posts
    Hmm.

    If you're using CSS...
    Code:
    <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; }.)


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •