hellhound121 Posted May 16, 2006 Share Posted May 16, 2006 (edited) ok, after making a basic column layout, i desided i wanted to add images, now i have added them all, they all look good, cept one part. the content. it doesnt follow the hole page down when either one of the columns is the longest. ill give you a pic of what i man, and the CSS.IMG:http://img.photobucket.com/albums/v155/xlsasuke/line1.gifCSS: #container{width: 750px;margin: auto;margin-top: -8px;background-color:#FFFFFF;color:#000066;border: 0px solid #8da6ac;line-height: 130%;}#header{padding: .5em;height: 0;background-image:url('header.gif');border-bottom: 0px solid black;}#header div{position:relative;top: -10px;padding: 0;margin: 0;}#header2{height: 53px;background-image:url('header2.gif');}#navleft{float: left;width: 178px;margin: 0;background-image:url('navbg.gif');padding: 5px;}#content{margin-left: 187px;border-left: 1px solid black;background-image:url('conbg.gif');background-repeat: repeat-y;padding: 5px;max-width: 36em;}#footer{clear: both;margin: 0;padding: .5em;height: 0;color:#00FF00;background-image:url('footer.gif');border-top: 0px solid black;}#footer div{position:relative;top: -10px;margin: 0;padding: 0;}#navleft p { margin: 0 0 2px 0; }#content p { margin: 0 0 2px 0; } Edited to keep format. Edited May 16, 2006 by Jonas Link to comment Share on other sites More sharing options...
skym Posted May 16, 2006 Share Posted May 16, 2006 It would have been easier to also see the HTML source (idealy online), but try first to add border-right: 1px solid black; to #content Link to comment Share on other sites More sharing options...
Jack McKalling Posted May 16, 2006 Share Posted May 16, 2006 Would not work I think.You should also define the height of the contentbox, I presume, something like this occurred to me too Link to comment Share on other sites More sharing options...
skym Posted May 16, 2006 Share Posted May 16, 2006 The problem is we don't know without the HTML source what is the upper fragment of that right border. Is it background-image:url('conbg.gif'); ? Then I think (like Dan said) adding the height should help. Link to comment Share on other sites More sharing options...
hellhound121 Posted May 16, 2006 Author Share Posted May 16, 2006 adding a height? i tryed that last time, and it didnt work on the old layout. when the content goes down more than the navigation it happens with that too . http://www.lhost.info/hh121/ Link to comment Share on other sites More sharing options...
Jack McKalling Posted May 16, 2006 Share Posted May 16, 2006 Maybe, you could also add the scroll property, or whatever controlls when scrollbars will show up (like overflow-y, clip, and height) Link to comment Share on other sites More sharing options...
hellhound121 Posted May 16, 2006 Author Share Posted May 16, 2006 Maybe, you could also add the scroll property, or whatever controlls when scrollbars will show up (like overflow-y, clip, and height)<{POST_SNAPBACK}> yeah and how you do that dan :S, ffs i should just stick to tables Link to comment Share on other sites More sharing options...
Jack McKalling Posted May 16, 2006 Share Posted May 16, 2006 Yeah, tables are easier Link to comment Share on other sites More sharing options...
hellhound121 Posted May 16, 2006 Author Share Posted May 16, 2006 Yeah, tables are easier <{POST_SNAPBACK}> guess ill have to stick with tables/positioning :S seen as no one wants to help me Link to comment Share on other sites More sharing options...
Jack McKalling Posted May 16, 2006 Share Posted May 16, 2006 I do want to help you with this div way, but I seem not to be able to find a sollution for you without recommending tables Link to comment Share on other sites More sharing options...
boen_robot Posted May 16, 2006 Share Posted May 16, 2006 Height of being the bringer of bad news, but in FF this line looks great BUT the navigation is only blue untul the content stops and that's it (or at least that's on FF and IE7).Tables are easier, but hey, CSS layouts have many other advantages. There are other topics on this, so I'll stop here.I'll try looking deeper into this, but I just have to ask... is the navigation supposed to stop being blue after there is no more content for it, or should it be blue all the way down (I bet it's the second, but anyway). Link to comment Share on other sites More sharing options...
hellhound121 Posted May 16, 2006 Author Share Posted May 16, 2006 its suppose to be blue all the way down, and it only gone white because the content is larger than the navigation, it does the same with the content.maybe a background repeat? or somthing i dunno Link to comment Share on other sites More sharing options...
Jack McKalling Posted May 16, 2006 Share Posted May 16, 2006 Yes that is the sollution. When a div has an image at its back, it is only repeated while it has content. After its content it does not show any images, unless you specifically specify the repeat like this: #something { background-image:url(something); background-repeat:repeat-y; }But you may shorten it like this:#something { background:url(something) repeat-y; } Link to comment Share on other sites More sharing options...
hellhound121 Posted May 16, 2006 Author Share Posted May 16, 2006 even so, that is that div bg, but once that div is finished, there is still a white space, because the content is longer than the nav bar. its the same if the nav bar was longer than the content box. Link to comment Share on other sites More sharing options...
Jack McKalling Posted May 16, 2006 Share Posted May 16, 2006 (edited) Yeah, could be, but then you should define the height of both divs, so they are properly aligned :)If you add div.navbar, div.content { height:400px; } it should not leave white space behind Edited May 16, 2006 by Dan The Prof Link to comment Share on other sites More sharing options...
hellhound121 Posted May 16, 2006 Author Share Posted May 16, 2006 zomg you got skills dan love you! it worked, i finally done it o_o! i do like using CSS but its pretty hard in some places. but total easy in others. thanks for all your help Link to comment Share on other sites More sharing options...
Jack McKalling Posted May 16, 2006 Share Posted May 16, 2006 You're fully welcome, I am glad I was able to help you Link to comment Share on other sites More sharing options...
hellhound121 Posted May 16, 2006 Author Share Posted May 16, 2006 zomg you got skills dan love you! it worked, i finally done it o_o! i do like using CSS but its pretty hard in some places. but total easy in others. thanks for all your help <{POST_SNAPBACK}> WOWOOWOWW wait , here is another problem, http://www.lhost.info/hh121/ have a look, the content text just avoids the width or w.e and jumps out of the table thing Link to comment Share on other sites More sharing options...
Jack McKalling Posted May 16, 2006 Share Posted May 16, 2006 What happens if you also set height to #container? Link to comment Share on other sites More sharing options...
scott100 Posted May 16, 2006 Share Posted May 16, 2006 WOWOOWOWW wait , here is another problem, http://www.lhost.info/hh121/ have a look, the content text just avoids the width or w.e and jumps out of the table thing<{POST_SNAPBACK}> Are you testing this site in Internet Explorer, Firefox and Opera???Because you have a double header/footer in IE and the content jumps out the box for FF and Opera Just to make you aware Link to comment Share on other sites More sharing options...
hellhound121 Posted May 16, 2006 Author Share Posted May 16, 2006 nothing happens dan :)and scott, i know about the ie one, and we trying to fix the FF and opera one ^^ Link to comment Share on other sites More sharing options...
hellhound121 Posted May 16, 2006 Author Share Posted May 16, 2006 nothing happens dan :)and scott, i know about the ie one, and we trying to fix the FF and opera one ^^<{POST_SNAPBACK}> BUMP Link to comment Share on other sites More sharing options...
Jack McKalling Posted May 16, 2006 Share Posted May 16, 2006 (edited) Sorry, I was searching...I too noticed both your header and footer are not properly heighted, tested in IE...Did you already defined the height of both the navigation and the content? Like 100% of their shared parent?What I mean, is if you force the shared parent of the navigation and the content to be with a certain height, the contentbox would get a scrollbar if it overflows that height. And when the navigation has the full amount of height its parent has, the empty area should be filled with the bakground of the navigation, I presume Edited May 16, 2006 by Dan The Prof Link to comment Share on other sites More sharing options...
scott100 Posted May 16, 2006 Share Posted May 16, 2006 Ok i think i've fixed it for both IE and FF: http://scott100.atspace.com/hh121.htm Link to comment Share on other sites More sharing options...
hellhound121 Posted May 16, 2006 Author Share Posted May 16, 2006 Ok i think i've fixed it for both IE and FF: http://scott100.atspace.com/hh121.htm <{POST_SNAPBACK}> sorry to be a b**ch and all but, i dont want a scrollbar on the content, just want it like my friends site http://drkhaven.com/anime,trigun . Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now