Welcome to WebmasterWorld Guest from 18.205.246.238

Forum Moderators: not2easy

Message Too Old, No Replies

How to use a background image in a horizontal menu

menu, css, backgorund image

     
5:44 pm on Jul 22, 2009 (gmt 0)

New User

5+ Year Member

joined:July 22, 2009
posts: 39
votes: 0


I have coded (from a sample) a CSS based (no javascript) horizontal menu in a web page; menu buttons are left floated each other so they lay horizontally on the same "line".

The problem is that the menu items are built dynamically: as a result, menu width changes.

I wish I could keep the menu width constant and I thought I could solve the problem placing a "menubar" background image (same as the buttons\menu-item background) at the maximum allowed width, in a way it lays below the menu buttons.... but I don't know how to do that!

I have tried to create fixed width DIV whose background is a picture acting as the menubar, and inside this DIB block, place the code for the CSS menu, but it wouldn't work.

Any hint?

CSS Code:

@charset "utf-8";

.fixed{

 clear:both;

}

#idwrapper {

 padding:0px;

 width:1200px;

}

#container {

 width:100%;

}

#hmenu {

 text-decoration: none;

}

#hbuttons a{

 display: block;

 text-decoration: none;

 font-family: Verdana,"BitStream vera Sans",Helvetica,Sans-serif;

 font-size:18px;

 font-weight:bold;

 color: white;

 width:auto;

 height: auto;

 float: left;

 display: inline;

 margin-right: 1px;

 background:url(img/tabsquare.jpg) no-repeat ;

 padding: 5px 2.5% 8px 2.5%;

 text-align:center;

}

#hbuttons a:hover{

 background:url(img/tabsquareover.jpg);

}

HTML Code

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

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

<head>

<title>title</title>

 <link rel="stylesheet" type="text/css" href="style.css"/>

</head>

<body>

<div id="idwrapper">

 <!-- mený START -->

 <div class="fixed"></div> <!-- clears floats -->

 <div id="hmenu">

 <div id="hbuttons">

 <a href="/item1">Menu Item 1</a>

<a href="/item2">Menu Item 2</a>

<a href="/item3">Menu Item 3</a>

 </div>

 </div> 

 <div class="fixed"></div> <!-- clears floats -->

 <!-- mený END --> 

</div>

</body>

</html>

Rendering is done in FF 3.5, IE7 and Opera 9.64