Image Based CSS Menu

  • zaiah
  • Proficient
  • Proficient
  • zaiah
  • Posts: 375

Post 3+ Months Ago

Hi all. Need some help. Not sure if I am asking this correcting. But I'm looking for a tutor on image based css menus. I found one but I just don't really get it. I need one from start to finish. When I say start like the best way to create in Photoshop. I have seen them done where you have two or three images of each word and then when you rollover or click you see a different image. When I disected the images, it looks like they create 2 or 3 images very close in design and then the CSS helps with the position of the image. I understand part of it, but there is something that I'm not getting. Here is a link to the one I found: http://www.webdesignerwall.com/tutorial ... -css-menu/ , if someone can find a more descriptive one, I would be very appreciative.

Thanks in advance!
  • Anonymous
  • Bot
  • No Avatar
  • Posts: ?
  • Loc: Ozzuland
  • Status: Online

Post 3+ Months Ago

  • seularts
  • Graduate
  • Graduate
  • User avatar
  • Posts: 153
  • Loc: Romania

Post 3+ Months Ago

The idea is very simple:

Here is the CSS:

ul{
list-style: none;
}

li{
position:relative;
align:left;
}

#home{
background:url(home1.jpg) no-repeat;
}

#home:hover{
background:url(home2.jpg) no-repeat;
}

#contact{
background:url(contact1.jpg) no-repeat;
}

#contact:hover{
background:url(contact2.jpg) no-repeat;
}

Here is the XHTMl:

<ul>
<li id="home"></li>
<li id="contact"></li>
</ul>

you only have to make home1.jpg and home2.jpg 2 different buttons and the same goes for contact and when you hover over the li the button changes, and of course other atributes can be added such as width and height so the li have the same dimmensions as the images!:)
Hope this hellps..
  • zaiah
  • Proficient
  • Proficient
  • zaiah
  • Posts: 375

Post 3+ Months Ago

Below is what I used. And it works in IE and breaks up in everything else. It puts these weird white spaces next to each image. I think I am going to try your way shortly. Just gettting a little frustrated. :)


CSS:

.menu {
margin: 0;
padding: 0;
list-style: none;
background: #fff;
position: relative;
left: 188px;
top: 231px;
}
.menu li {
padding: 0;
margin: 0;
margin-right: 37px;
list-style: none;
background-repeat: no-repeat;
height: 28px;
}
.menu li a, .menu li a:visited {
display: block;
text-decoration: none;
text-indent: -3000px;
height: 28px;
background-repeat: no-repeat;
}
.home {background-image: url(images/homeHover_btn.jpg); width: 84px;}
.home a {background-image: url(images/home_btn.jpg);}
.entertainment {background-image: url(images/entHover_btn.jpg);width: 216px;}
.entertainment a {background-image: url(images/ent_btn.jpg);}
.designers {background-image: url(images/designHover_btn.jpg); width: 148px;}
.designers a {background-image: url(images/design_btn.jpg);}
.models {
background-image: url(images/modelsHover_btn.jpg);
width: 113px;
}
.models a {
background-image: url(images/model_btn.jpg);
}
ul.menu li a:hover {background: none;}
.menu li {float: left;}
.menu:after {content: "."; display: block; height: 0; clear: both; visibility: hidden;}

HTML:

<ul class="menu">
<li class="home"><a href="#">Home</a></li>
<li class="entertainment"><a href="#">Entertainment</a></li>
<li class="designers"><a href="#">Designers</a></li>
<li class="models"><a href="#">Models</a></li>
</ul>

By the way I need to put these in an exact location. Having issues logging on to my server but here is a screenshot:
Image
  • zaiah
  • Proficient
  • Proficient
  • zaiah
  • Posts: 375

Post 3+ Months Ago

Resolved. Thanks

Post Information

  • Total Posts in this topic: 4 posts
  • Users browsing this forum: Veeramanikandan and 87 guests
  • You cannot post new topics in this forum
  • You cannot reply to topics in this forum
  • You cannot edit your posts in this forum
  • You cannot delete your posts in this forum
  • You cannot post attachments in this forum
 
 

© 1998-2014. Ozzu® is a registered trademark of Unmelted, LLC.