CSS Navigation

Hello, I have been designing a personal website for myself, Not a css professional by any means. I have mainly been following tutorials online on how to transfer my Photoshop layout to the web. Having a big problem trying to layout the horizontal menu though. I have found a style I really like and would like to implement the style into mine. The style: http://betanightclub.com/ [URL=“http://3.7designs.co/blog/”]http://3.7designs.co/blog/ Right now I have a basic menu that I have been following from a tut and I have been trying to code it to look like the ones I like, but lets just say im still trying!

My site if you would like to take a look and please feel free to give me your input on things that perhaps may be wrong.
http://www.joecampoli.com/test

Most likely you’ll want to use display:inline-block; and set a width and height. Inside of that li, you can use a heading to define the navigation item, and maybe a paragraph or <small> to define the description. Take a look at Veerle’s blog to see how she does her top three boxes like that.

~TehYoyo

Hi. Have you already fixed this? Viewing in Chrome and the top menu (at the right) is already horizontal. The only other menu is the one in the footer, and that’s horizontal as well :).

Hey Ryan, what im trying to do is style it like the ones in the links i provided up top.

It’s nothing special. The <li>'s are floated, basically. That’s it. Then this style is applied to each anchor (they have each anchor defined separately) :).

a#nav_video {
height: 85px;
width: 109px;
display: block;
text-indent: -9999px;
background: url(../GFX/Global/Nav.png) -545px top;
}

The “sexiness” of the menu is just the image there. The text-indent takes away the text you’d put inside the anchor of the HTML and hides it so that it won’t affect the view of it. It’ll come back though if CSS is off :).

Here is the link to the image in question.

The bottom part of the image I linked is used as the hover state. That image I linked to is a CSS sprite. It combines multiple images into one file for less HTTP requests.

is there a way to accomplish the menu with just css? im trying some different examples but really throws my divs out of whack

Well yes, but an image would be a lot easier :).

Show us your current attempt and we will work from there.

Here’s his current attempt:

http://www.joecampoli.com/test/

~TehYoyo

thanks TehYoyo i just did that haha… need to work on spacing and possible separators though. and im not sure why the numbers are indented a slight touch.

The numbers are indented because of the padding you set on the anchors. It affects the first line of text since it’s an inline element. Setting the anchor to display:inline-block would fix this, or remove the padding altogether. I recommend the first option.

Looks like you are doing pretty good. The page hs changed since last I saw it so I assume you’re still making progress on the page. You’re probably going to have to throw some <span>'s in there inside the anchor to replicate the horizontal “break” / border effect.

On your page, the Gallery,Links and VIP can all have spans wrapped around that text and give that a bottom border to replicate that effect.

I am going to take your tips and work on it. Packing it in for the night but I hope you can check back tomorrow if you have time and see how i did. Thank you both for your help and input!

I work tomorrow morning until 1 PM (ET) but if you have it updated with your current attempt by then, I’ll surely be able to help you along with any snags you have :). Or if I don’t get to it, any other member here is sure to help.

My attempt has been done but im thinkin, maaaaybe I might give images a try

It would certainly be easier ;).

I went to your site though, and it’s certainly not a bad attempt.

Any chance you can point me in the right direction? :wink:

In what, making the image? :slight_smile: If so, unfortunately that’s not my area of expertise.

If not, then I don’t know what you could need help on, since after image creation it’s straight forward: placing it on an element :).

I can make the image, if you want. It’s not that I usually outsource myself, but I’ve been looking for a chance to stretch my Photoshop brain and here it is!

I assume that’s what you want (really, b/c Ryan said that). I just skimmed over the thread.

~TehYoyo

Edit: Not to discourage you from doing your own work, of course.

Thank you TehYoyo I appreciate the offer but I have the images :slight_smile: The layout is my own work as well. Im just wondering where i put the image in the css code. I will fiddle around!

Sure, no problem! Good luck with it - if you have questions, you always know where to ask.

~TehYoyo

hmmm, cant seem to get the hover state to show. Link


#navigation {
  float: right;
  display: block;
  background-image:url(../images/nav.png);
  background-repeat:no-repeat;
  overflow:hidden;
  width:528px;
  height:85px;
}

#navigation ul {
  width:528px;
  padding:0px;
  margin:0px;
}

#navigation li, #navigation a {
  height:85px;
  padding:0px;
}

#navigation li {
    float: left;
    list-style: none;
    display: inline-block;
    text-indent: -9999em;
}

#nav-welcome, #nav-gallery, #nav-bio, #nav-links {
	  width:132px;
}

#nav-welcome a:hover {
background-image:url(../images/nav.png) 0px -85px no-repeat;
 }

 #nav-gallery a:hover {
background-image:url(../images/nav.png) -132px -85px no-repeat;
 }

 #nav-bio a:hover {
background-image:url(../images/nav.png) -264px -85px no-repeat;
 }

 #nav-links a:hover {
background-image:url(../images/nav.png) -528px -85px no-repeat;
 }