NavBar & Layout Help

[Sacred]

The navbar this site has on the Scyther-Style page is amazing. I was going to make something like it, but ran into many problems. I am not a "master" CSS coder, in fact, I really need to re-learn lots of things. I have been so used to tables, that I need to learn CSS-only layouts/design. If someone could explain or teach me how that works, that would be so awesome. But, back to the navbar. How is something like that done? Like the format? I doubt mine is nearly as good as it should be. Can someone give me an example? Like where the area around the links is small, and all the margins are correct like in that style. I have made a lot of navbars before, but when I tried this one I could never get it right. I was gonna do a website for a school assignment, so learning this would be greatly appreciated if at all possible. Thank you for reading this, hope I'm not asking too much ^^. Examples would be helpful if at all possible, again, thanks for reading.

-Sacred

 

[Negrek]

The HTML Guide on the main site gives an introduction to div layout design (lessons six through nine--lesson nine in particular looks like what you'd want to look at).

As far as examples go... well, you said you liked the navbar for the Scyther Slash style on the main site. By that I'm going to guess you mean the left menu bar (where the page navigation links are). You can just look up the code for that, of course; other than that, you can play with the free stretching div layout on the main site--the code for its menu is the core of what makes the Scyther Slash one, it just doesn't look as pretty. As far as examples go, other than that... I don't know of any off the top of my head, but if you just look around the internet until you see a site whose navbar you like, just going into the source to see how it works is usually the best bet.

Perhaps it would help to explain what sort of trouble you're having with getting your navbar to work and show the code for it; you mention that the margins on the one in Scyther Slash are "all correct," for example, which suggests that you may be having difficulty with that, but... yeah, you don't really define your problems with creating the menu very well at this point.

 

[Sacred]

Problem is, I will assign padding to it, the box gets bigger (which I don't like). I reduce padding but then the text gets too big. I just wish I knew how they made the padding and the margins work in a way to make them slightly spaced, smallish, and centered (as far as top/bottom go) in the navbar). Idk if that helps any, but the way they have it I just couldn't figure out. Maybe I'll continue to try and see what happens. And thanks for the info :).

 

[Negrek]

Could you post the code that you're having trouble with and what you're changing that has the undesirable effects?

 

[Sacred]

Kinda don't know if I have it now, but I'll rewrite it and post it here. It may have to be tomorrow, since it's kind of late here. But, sure, I'll post it when I rewrite it.

 

[Butterfree]

You just put in padding but reduce the width by the same amount (double, since there are paddings on both sides) instead.

 

[Yenaa]

I'm assuming you want the div to be all the way to the side of the page, with no spaces?

Simply set your body in your css to margin: 0px;

That might help, if that's what you wanted.