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...
