Jump to content

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


hellhound121

Recommended Posts

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 .

But aren't your friends using tables? :)Would definitely solve your problem... :) Edited by Dan The Prof
Link to comment
Share on other sites

They both have their strong points, the benefits of CSS became apparent pretty quickly when it came out and people had been using <font> tags and a bunch of crap to format their pages, and realized that stuff was a pain to change.If you want 2 columns that are the same height, you can try this. Think of your divs as boxes. You have 2 boxes there. Now put both boxes in a larger box that only holds the 2 smaller boxes.

<div class="navigation">nav menu</div><div class="content">sweet content</div>

<div class="container"><div class="navigation">nav menu</div><div class="content">sweet content</div></div>

Now the height property (in theory) is supposed to make the element the height of the parent container (if you use percentages). So you set the height of both the navigation box and the content box to be 100%.

.navigation{  height: 100%;}.content{  height: 100%;}

In theory, that should make both boxes the same height (the height of the parent). The height of the parent should grow to fit the largest of the 2 boxes on the inside, and then the other box should grow to fit the parent.Got it? You have a good eye for design btw, the colors and image positioning are clear and well laid out, which is typically not something you see from a beginner.

Link to comment
Share on other sites

In theory, that should make both boxes the same height (the height of the parent).  The height of the parent should grow to fit the largest of the 2 boxes on the inside, and then the other box should grow to fit the parent.

Yeay, precisely :) Sort of better explained as I did here:
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
Link to comment
Share on other sites

Yeay, precisely :) Sort of better explained as I did here:

kk well i tryed to do it :S but didnt do nothing, maybe i coded it wrong.
#navleft{float: left;width: 178px;margin: 0;background-image:url(navbg.gif);background-repeat:repeat-y;height: 300px;padding: 5px;}.navigation{height: 100%;}/* you do not float the content it is like the container, it is what ever you dont use, you change the margin to lign it up */#content{margin-left: 188px;border-left: 0px solid black;background-image:url('conbg.gif');background-repeat: repeat-y;padding: 5px;height:300px;max-width: 36em;}.content{height: 100%;}

and

<div id="navleft"> <div class="navigation"> <p>Naviagtion bar left.</p><br> <p>Naviagtion bar left.</p><br> <p>Naviagtion bar left.</p><br> <p>Naviagtion bar left.</p><br> <p>Naviagtion bar left.</p><br> <p>Naviagtion bar left.</p><br> <p>Naviagtion bar left.</p> </div></div>  <div id="content"> <div class="content"> <p>Content box</p><br> <p>Content box</p><br> <p>Content box</p><br> <p>Content box</p><br> <p>Content box</p><br> <p>Content box</p><br> <p>Content box</p><br> <p>Content box</p><br> <p>Content box</p><br> </div></div>

Link to comment
Share on other sites

OK, one of us got slightly confused. Since you already have two styles defined for the navleft and content IDs, you don't need a new navigation and content class. You can remove the .navigation and .content from the CSS. Change the height inside both #navleft and #content to be "height: 100%;" instead of "height: 300px;". Then change your HTML like so:

<div id="container">  <div id="navleft">  <p>Naviagtion bar left.</p><br>  <p>Naviagtion bar left.</p><br>  <p>Naviagtion bar left.</p><br>  <p>Naviagtion bar left.</p><br>  <p>Naviagtion bar left.</p><br>  <p>Naviagtion bar left.</p><br>  <p>Naviagtion bar left.</p>  </div>  <div id="content">  <p>Content box</p><br>  <p>Content box</p><br>  <p>Content box</p><br>  <p>Content box</p><br>  <p>Content box</p><br>  <p>Content box</p><br>  <p>Content box</p><br>  <p>Content box</p><br>  <p>Content box</p><br>  </div></div>

Later on you can add some properties to the #container style if you want to add things to the whole bunch.

Link to comment
Share on other sites

Well, most people who learned CSS or HTML learned it by looking at what other people did and how they did it. Grab someone else's code and start changing things and playing around with it to get a feel of why they did what they did.That being said, the particular link above might not be the best example. It looks pretty bad in Opera. And it uses some terrible hacks for purposes I'm not quite sure of.

* html #footer-wrapper {  	float: left;  	position: relative;  	width: 100%;  	padding-bottom: 10010px;  	margin-bottom: -10000px;  	background: #FFF;         /*** Same as body background ***/  }

It's great that they use a comment to explain why the background is white, but god forbid they explain why there is a negative 10,000 pixel margin. WTF? Surely CSS should be able to do something like this without resorting to hacks like that. But of course, if the W3C thinks that divs should never be the same height and that pages should never have a footer appear at the bottom of the screen, then you aren't going to have any luck. It's great to have one organization controlling all of the standards for the web, but.. on the other hand.. there's only one organization controlling all of the standards for the web.

Link to comment
Share on other sites

thats called ripping, and if i dont learn it now, when will i ever learn it?

Well yeah look at the code and see how they got it to work, i learned alot from taking pages like that and changing values here and there and seeing what happened. Best way of learning it if you ask me (obviously knowing what each selector{property: value} is helps, but there not hard to figure out)
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...