Jump to content

Search the Community

Showing results for tags 'menu with background image'.

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


  • W3Schools
    • General
    • Suggestions
    • Critiques
  • HTML Forums
    • CSS
  • Browser Scripting
    • JavaScript
    • VBScript
  • Server Scripting
    • Web Servers
    • Version Control
    • SQL
    • ASP
    • PHP
    • .NET
    • ColdFusion
    • Java/JSP/J2EE
    • CGI
  • XML Forums
    • XML
    • Schema
    • Web Services
  • Multimedia
    • Multimedia
    • FLASH

Find results in...

Find results that contain...

Date Created

  • Start


Last Updated

  • Start


Filter by number of...


  • Start





Website URL








Found 1 result

  1. 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...
  • Create New...