Jump to content

Hey :) back with a "not so noob" question.


hellhound121

Recommended Posts

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 by Jonas
Link to comment
Share on other sites

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

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

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

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 by Dan The Prof
Link to comment
Share on other sites

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 :)

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

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

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

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 by Dan The Prof
Link to comment
Share on other sites

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 account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...