help with CSS - Horizontal navbar

Neildo_64 · Post by **Neildo_64** » Tue Jul 08, 2008 3:31 pm

Well, I've been working on my website lately (It's not online yet) and I've been playing around with css a little and I was wondering how many of you might be able to help me out a little. I know html pretty well and I took 2 web design classes in college about css(didn't finish one of them) but I've forgotten most of it. Any help would be great. I could go figure it out, but if someone were to help me through it, it would go much faster and I would still learn it. I've been brushing up on my css lately though, so I'm not quite css-retarded.

Anyway, if anyone wants to help (I would credit you on the site btw) hit me up here or via PM.

Post by **gannon** » Tue Jul 08, 2008 4:16 pm

css is a broad topic, anything in particular you need?

Neildo_64 · Post by **Neildo_64** » Tue Jul 08, 2008 4:25 pm

Oops, I forgot to even say what I wanted.

Well, I have a picture of what I want done and I have some of it chopped up already, but I'm not sure how to put things exactly how I want them. Just really basic stuff that I just can't seem to remember. Basically, a layout with a header, horizontal navbar, with 3 columns under that (left and right for links and stuff and middle for content) then a copyright box under all that. I just know there are different ways to do all of this, so I thought I'd ask someone more familiar with it. I don't want to post my layout anywhere until its online, but I could make an exact-size replica of empty boxes if that would help, like a layout of everything.

Post by **gannon** » Tue Jul 08, 2008 4:56 pm

If you post a picture it'd be a bit easier, I'd probably use absolute positioning or similar, maybe a list for the menu with css to define the shape.

Neildo_64 · Post by **Neildo_64** » Tue Jul 08, 2008 5:33 pm

I'll get to a pic here in a little bit. I'm working on my N64 now, otherwise I would right now. I don't want anything to move, so It shouldn't be very difficult.

Post by **bicostp** » Tue Jul 08, 2008 5:39 pm

Well, you could use an automated tool to put the basic layout together for you, then go in and modify it for your needs. (In my experience, this saves quite a bit of time.)

http://csscreator.com/tools/layout

There's only one pitfall to using CSS:

INTERNET. %$@*&%#. EXPLORER.
(IT MANGLES CSS.)

Post by **gannon** » Tue Jul 08, 2008 7:31 pm

Yes, dealing with unintended quirks mode can be annoying

Neildo_64 · Post by **Neildo_64** » Tue Jul 08, 2008 7:48 pm

About the IE, thats okay, most people interested in this type of stuff know better than to be using IE.

That CSS creator might help, thanks. Anybody have msn that can maybe help walk me through some of this?

Post by **gannon** » Tue Jul 08, 2008 9:36 pm

Well, here's a quick version of how I made the layout, could be different of course. Left the doctype off because of the quirks mode bug it gets in IE (IIRC)

Code: Select all

<html>
<head>
<style>
body {
	margin: 0px;
	padding: 0px;
	width: 100%;
	height: 100%;
}
#header, #footer {
	position: absolute;
	margin: auto;
	text-align: center;
	width: 100%;
}
#header {
	top: 0px;
	height: 15%;
}
#footer {
	bottom: 0px;
	height: 5%;
}
#leftcol, #rightcol, #center {
	position: absolute;
	top: 15%;
	width: 15%;
	height: 80%;
}
#leftcol {
	left: 0px;
}
#rightcol {
	right: 0px;
}
#center {
	left: 15%;
	width: 70%;
	text-align: center;
}
</style>
</head>
<body>
	<div>
		HEADER
	</div>
	<div>
		FOOTER
	</div>
	<div>
		LEFT COL
	</div>
	<div>
		RIGHT COL
	</div>
	<div>
		MAIN CONTENT
	</div>
</body>
</html>

Edit: seems the board strips the id info, so add back into the divs

Neildo_64 · Post by **Neildo_64** » Tue Jul 08, 2008 9:42 pm

What do you mean add back into the divs?

Post by **gannon** » Tue Jul 08, 2008 9:59 pm

The id="header"/etc info that would attach the css. Can't really show you inline as the board strips it out when I type it.

Neildo_64 · Post by **Neildo_64** » Fri Jul 11, 2008 1:48 am

Well, I've been playing with stuff a little and I've roughly gotten the basic layout down. I am just getting a little stuck at how to make my navbar. It is a horizontal navbar made of images with rollover images and it has to be centered in the screen. The images are 88 x 22px, there are 7 of them, and they all touch eachother. Can anyone give me a quick code or tell me what to do here? Any help would be greatly appreciated.

Post by **gannon** » Fri Jul 11, 2008 2:36 pm

something like:

Code: Select all

<div>
<ul>
<li><a href=""></li>
</ul>
</div>

for HTML
and

Code: Select all

#navbar {
  margin: auto;
}
#navbar ul {
  list-style: none;
  float: left;
}
#navbar a {
  background-image: URL();
}
#navbar a:hover {
  background-image: URL();
}

for CSS
Ofcourse, fixing the id issues again as phpbb took out the id of the div.

Neildo_64 · Post by **Neildo_64** » Fri Jul 11, 2008 3:25 pm

Thanks a lot. I'm at my grandma's now so I'll get to actually using it later. Would it be okay to PM you if I have some questions?

Neildo_64 · Post by **Neildo_64** » Mon Jul 14, 2008 12:58 am

Bump! I have most everything else (layout wise) done and this navbar is the only thing holding me up. My code is as follows.

Code: Select all

#navbar {
	font-family:tahoma;
	font-size:12px;
	font-weight:bold;
	padding:0px 0px;
	height: 22px;
	width: auto;
	margin:0 auto;
}
#navbar li {
	list-style:none;
	display:inline;
	margin:0 auto;
        width:88px;
	float:center;
}
#navbar a {
	width:88px;
	color:#fff;
	text-decoration:none;
	background:url("images/navbar_links.png") no-repeat;
	float:center;
	padding:8px 15px 0px;
	spacing:15px 0px 0px;
	margin:0 auto;
}
#navbar a:hover { 
	background-position:0 -22px;
	color:#FFFFFF;
}
#navbar a:active {
	background-position:0 -44px;
	color:#000;
}

That is the css. The html looks like:

Code: Select all

<div>
      <ul>
	<li><a href="#">Home</a></li>
	<li><a href="#">Forums</a></li>
	<li><a href="#">Photoshop</a></li>
	<li><a href="#">Games</a></li>
	<li><a href="#">Tutorials</a></li>
	<li><a href="#">Music</a></li>
	<li><a href="#">Portables</a></li>
      </ul>   
   </div>

EDIT: the ids are there, but as said before, the board takes them out.

The images load fine and work but the size of them is all wrong. It crops them down to the size of the text. They are all supposed to be the same size (88x22) and be touching each other centered in the page. Could anyone help?