Flat list menu BG image

HTML & CSS
1

I have spent hours online looking at many different tutorials and examples, I even tried a list apart sliding doors method but it didn’t work either!!

Ideally i want a rectangle with rounded corners that resizes depending on how long the menu item is. Like on this site

http://www.forsten-pentti.com/site/?q=our-stable

I only want it to highlight the current page? Is there a simple solution here? Can anyone point me to any other info or tutorials

Thanks

2

Current page can be achieved simply by a class :slight_smile:
http://www.visibilityinherit.com/code/current-page.php
Do you have an attempt at this so far? If it’s a fixed width element, you could apply an image (of hte topleft / top right rounded corners) to a parent, and then in another nested element, have the bottom part. This should make sense

<div id=“topLeftTopRightCornerElement”>
<div id=“bottomLeftBottomRightCornerElement”>
<p>text</p>
</div>
</div>

Images on appropriate elements (and of course update the ID’s to a class or whatever you see fit.

3

Thanks for your reply

I have the current page class working, At the moment it just changes the background. My website is a joomla website that uses a plugin" etxended menu" to output a flatlist. I need my css to style a rounded corner backround for current page. Heres the code and my CSS. Really appreciate any help!!

CSS

#mainlevelmainnav {
width: 100%;
float: left;
margin: 0 0 0em 0;
padding: 0;
list-style: none;
background-color: transparent;

}
#mainlevelmainnav li {
float: left; }
#mainlevelmainnav li a {
display: block;
padding: 8px 15px;
text-decoration: none;
font-weight: normal;
color: #036;
font-size:16px

}
#mainlevelmainnav li a:hover {
color: #000;
background-color: #fff;
text-decoration: underline;
}

a#active_menumainnav {
background:#CCC}

#mainlevelmainnav li a#active_menumainnav:hover {
background:#CCC
}

XHTML

<!–Begin Horizontal Menu–>
<div id=“horiz-menu” class=“module”>
<div class=“wrapper”>
<div class=“padding”>
<div id=“horizmenu-surround”>
<ul id=“mainlevelmainnav”><li><a href=“/selplus3/index.php?option=com_content&view=frontpage&Itemid=1” class=“mainlevelmainnav” id=“active_menumainnav”>Merchant Enquiries & Testimonials</a></li><li><a href=“/selplus3/index.php?option=com_content&view=article&id=19&Itemid=27” class=“mainlevelmainnav”>Company/Personal Bio</a></li><li><a href=“/selplus3/index.php?option=com_content&view=article&id=5&Itemid=2” class=“mainlevelmainnav”>Product Info</a></li><li><a href=“/selplus3/index.php?option=com_content&view=section&id=4&Itemid=37” class=“mainlevelmainnav”>Articles & Publishing</a></li><li><a href=“/selplus3/index.php?option=com_content&view=section&id=3&Itemid=41” class=“mainlevelmainnav”>Competition Horses for Sale</a></li></ul>

											&lt;/div&gt;
				&lt;div class="clr"&gt;&lt;/div&gt;
				&lt;/div&gt;
			&lt;/div&gt;
		&lt;/div&gt;
					&lt;!--End Horizontal Menu--&gt;