CSS menu fun [Archive]

ollie-

January 11th, 2007, 01:54 PM

Hey Guys, I'm creating a website for a friend and am struggling getting the menu that he has designed to work. You can see the mockup here: http://img.photobucket.com/albums/v292/state-of-terror/Temp/SED_blackchromeRedux-01.jpg

and here is my html:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>

<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta http-equiv="imagetoolbar" content="no" />
<meta name="description" content="" />
<meta name="author" content="" />

<meta name="copyright" content="" />
<meta name="company" content="" />
<meta name="revisit-after" content="3 days" />

<style type="text/css">
body {
background:#fff;
}
ol, ul, li {
list-style-image:none;
list-style-type:none;
}
#holder {
position: absolute;
top:50%;
left:50%;
width:750px;
height:auto;
margin:-237px 0px 0px -375px;

}
#menu {
width:750px;
height:auto;
display:block;
font:10px Arial, Helvetica, Geneva, sans-serif;
color:#fff;

}
#menu ul {
list-style: none;
padding: 0;
margin: 0;
}
#menu ul li {
height:53px;
width:125px;
float: left;
margin: 0 0.15em;
}
#menu ul li a {
line-height: 2em;
float: left;
display: block;
text-decoration: none;
text-align: center;
}
#menu ul li a .menuLeft{
height: 53px;
width: 125px;
background: url(siteImages/button_left_normal.png) no-repeat left top;

}
#menu ul li a .menuMiddle{
height: 53px;
width: 125px;
background: url(siteImages/button_middle_normal.png) no-repeat left top;
}
#menu ul li a .menuRight{
height: 53px;
width: 125px;
background: url(siteImages/button_right_normal.png) no-repeat left top;
}
#nav-menu
{
width:30em
}
#content {
width:100%;
height:370px;
}
#footer {
width:100%;
height:25px;
}
</style>


</head>

<body>

<div id="holder">
<div id="menu">
<ul>
<li class="menuLeft"><a href="#">Welcome</a></li><li class="menuMiddle"><a href="#">Client Work</a></li><li class="menuMiddle"><a href="#">Design // Art</a></li><li class="menuMiddle"><a href="#">Products // Shop</a></li><li class="menuMiddle"><a href="#">Info // Contact</a></li><li class="menuRight"><a href="#">Links // Exposure</a></li>

</ul>
</div>
<div id="content">

</div>
<div id="footer">
</div>
</div>
</body>
</html>
I would appreciate it if someone could help me to get this working correctly.

cheers,

-ollie

fasterthanlight™

January 11th, 2007, 02:14 PM

Uploading your html to a server so we can see it rendered always helps for questions like this

ollie-

January 11th, 2007, 03:27 PM

Uploading your html to a server so we can see it rendered always helps for questions like this

http://superevildesign.bambambam.co.uk/tester.html
(http://www.bambambam.co.uk/tester.co.uk)

fasterthanlight™

January 11th, 2007, 03:55 PM

You've got a loooooooot of styling to do before that menu is the way it should be.

Maybe its just me, but the link you provided doesn't have any background images or colours or any of that good stuff, if you weren't using inline styles i would have guessed your link to the external style sheet was wrong........

ollie-

January 11th, 2007, 04:49 PM

You've got a loooooooot of styling to do before that menu is the way it should be.

Maybe its just me, but the link you provided doesn't have any background images or colours or any of that good stuff, if you weren't using inline styles i would have guessed your link to the external style sheet was wrong........

wow! thanks. I didn't realise that none of the images were showing up, it was great of you to alert me to the problem....

The images not showing up is one of the main things i'm having trouble with; there is no reason (from what i can see) why they shouldn't be displaying. Thats why i posted this here, for a second opinion, perhaps some advice on a different way of creating the menu.

The page doesn't have and other styling as i was wanting to tackle the menu first as it would take the longest.

Once again; I would appreciate any advice on how to get the menu so that the background images (which are linked to in the css) display correctly. Failing that, perhaps suggestions as to an alternate solution.

mikkomikko

January 11th, 2007, 08:54 PM

the link you provided is leading nowhere. making it very hard to help :egg:

fasterthanlight™

January 11th, 2007, 09:07 PM

wow! thanks. I didn't realise that none of the images were showing up, it was great of you to alert me to the problem....

Hehe, I dont know if that was sarcasm or not, either way you never specified your problem in your post... We can't read minds!! :azn:

I'd go in and double, triple, quadruple check that your image paths are indeed correct, and make sure your syntax is good to go as well, maybe you forgot a ; or a { somewhere/

the link you provided is leading nowhere. making it very hard to help :egg:

Copy and paste the text of the link, the link it goes through to is, indeed, absolutely wrong.

fasterthanlight™

January 12th, 2007, 11:21 AM

Try adding the "transparent" attribute to your background defintions:

background: transparent url(siteImages/button_middle_normal.png) no-repeat left top;

When defining your backgrounds in one line like this, its best to define all attributes, the browser might be trying to find what colour to colour the background, and it can't find one soo... that might be it, not too sure.

**try changing all your png images to jpgs or gifs.....

Theres no reason for them to be pngs I dont think, you aren't using any alpha transparency are you?

ollie-

January 12th, 2007, 02:00 PM

Try adding the "transparent" attribute to your background defintions:

background: transparent url(siteImages/button_middle_normal.png) no-repeat left top;
When defining your backgrounds in one line like this, its best to define all attributes, the browser might be trying to find what colour to colour the background, and it can't find one soo... that might be it, not too sure.

**try changing all your png images to jpgs or gifs.....

Theres no reason for them to be pngs I dont think, you aren't using any alpha transparency are you?

Adding that property wont affect whether the images show or not, neither will changing the image types to .gif or .jpg. Obviously you havent got any idea how to solve the problem, so i'm going to try somewhere else.

Thanks for your time :)

fasterthanlight™

January 12th, 2007, 02:10 PM

Something about the way you post your messages really bugs me. Feels very "Na na na na boo boo" -ish

JoshuaJonah

January 12th, 2007, 02:45 PM

lol...... ollie, maybe you should click on his footer. He might know a little more than you give him credit for.... (and a little nokrev help too:))

fasterthanlight™

January 12th, 2007, 04:17 PM

Hrmm, I don't know if he was questioning my abilities as a whole, rather, more specifically, my knowledge related to his problem, which, he is correct, I have no idea about.

I'd rebuild it without all those ugly negative margins and clean up the code, there are a lot of redundancies you can ditch. ie: having to define the height and width of the three ul li a classes can be trashed if you define the width in the master ul li a definition, and not the left right and middle classes

*afterthought: why aren't you using display: inline to get your ul to display across the page?

mikkomikko

January 12th, 2007, 08:48 PM

images are not showing, because...

1. in your css #menu ul li a .menuLeft is referencing nothing, there is no such element with class=menuLeft inside a. it should be #menu ul li.menuLeft, or something...

2. middle image does not exist on the server: http://superevildesign.bambambam.co.uk/siteImages/button_middle_normal.png gives you file not found

Hope that helps...

Ollie should have triplechecked everything, just like mr. fastlight :P said :thumb:

ollie-

January 15th, 2007, 02:21 PM

yeah, sorry for being a bit shirty. I've just been putting off creating this site for a while now. Looking back through my code I can see that there are alot of silly mistakes. Once again; I'm sorry for being flippant with you faster. I was just getting frustrated with myself for not being able to sort out something as simple as this. Cheers for the help both of you.

fasterthanlight™

January 15th, 2007, 02:22 PM

No worries mate, been there done that :thumb: :D