Jump to content

menu with background images


ShadStar
 Share

Recommended Posts

Hi I'm new to the forums and reasonably new to css so please forgive any newbie stupidity on my part :) That having been said, I need a little guidance on something please. I am trying to create a little vertical css styled menu, using a horizontally-graded background gif image instead of a solid color. The menu will use a "rounded" style header and footer image to enclose the top and bottom of the menu section. The menu itself will be variable in length so I am not happy about using a fixed-height div element and background image to contain the menu items. I can create the main sub-menu sections using a single div element and displaying inline-block with no margin and padding no problem, looks great, but unfortunately when I add the header and footer "rounded" images to create a nice-looking top and bottom to the menu, I am getting line-break issues between the header/footer images and the main menu element, which looks nasty. If I may show some css coding here:

#menu {	  margin: 0;	  padding: 0;	  border:none;	  width: 136px;	  font-size:8pt;}#menu ul {		 list-style: none;		 margin: 0;		 padding: 0;}#menu li {		 width:136px;		 display:inline-block;		 background-image:url('./images/suback.gif');		}#menu a {		width:136px;		display: inline-block;		text-decoration: none;}

And the associated xhtml strict code:

<div id="menu">   <img src="./images/subhead.gif" alt="Sub Menu Header Image" />	  <ul>		 <li>Menu Title</li>		 <li><a href="#" title="First Menu Item">Item 1</a></li>		 <li><a href="#" title="Second Menu Item">Item 2</a></li>		 <li><a href="#" title="Third Menu Item">Item 3</a></li>	  </ul>   <img src="./images/subfoot.gif" alt="Sub Menu Footer Image" /></div>

I am using ul and li elements for speed, I understand that there are better css methods, at the moment I am just trying to make the menu work ;) I would also like to keep to xhtml 1 strict if possible, just a personal preference. I suppose my initial question is am I using the correct method to create a header/footer image by trying to use seperate images for header and footer? I could use a single image for the menu background but I need to change the length of the menu from time to time, and adding a header/footer image separately would allow me the flexibility to change the length of the main menu element as needed, without re-creating the background image separately every time. All I need to do is to remove the line-breaks between the header/footer images and the main menu element, is this possible or am I completely on the wrong line of thought here? All suggestions and guidance very welcome, and thanks for reading...

  • Like 1
Link to comment
Share on other sites

My apologies, I have uploaded the index page to a dump area on my personal website at: http://www.boredwith...names.co.uk/w3c You will see what I mean with the yellow menu on the left. I have just put a rough shell of a page together for a moment to allow me to try out different coding teqniques and stuff... Many thanks for the replies so far, I will get around to trying some coding either later tonight (uk time) or tomorrow :)

Edited by ShadStar
Link to comment
Share on other sites

#menu img {float:left;}

Thank you dsonesuk :) Float left on both header / footer images and in the li definition works beautifully. Happy bunny :) I have updated the test site with a before and after, new after link is: http://www.boredwith...w3c/index2.html Now I understand how that works I can start tidying up the coding... thanks again. Edited by ShadStar
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...