how to add an image to a page so it's attached to a scaleable menu item?

[johnyboy]

hi,

i've got a menu bar that's done fine (basically a horizontal, floated left, ul), but i want to add an image above one of the menu bar items so that it sticks to it regardless of zoom size, if possible, as indicated in these two modified in photoshop screen shots:





here's the html:

<div id="nav">
<ul>
	<li><strong>Main</strong></li>
	<li><span>Keep what hot?</span>
		<ul>
			<li><a href="#">Bananas</a></li>
			<li><a href="#">Apples</a></li>
			<li><a href="#">Pairs</a></li>
		</ul>
	</li>
	<li><a href="#">How It All Kind Of Works</a></li>
	<li><a href="#">Services</a></li>
	<li><a href="#">Another Item</a></li>
	<li><a href="#">Something</a></li>
	<li id="contact"><a href="#">Contact</a></li>
</ul>
</div><!-- nav -->

css:

#nav {
	margin-left: 15px;
	margin-right: 15px;
}
#nav ul {
	padding: 0;
	margin: 10px 0 0 0;
	clear: both;
	list-style: none;
	border: 1px solid #446688;
	border-width: 0 0 0 1px;
	background: #526E95 repeat-x url(images/buttonbg.png) top left;
	float: left;
	width: 100%;
}
#nav ul ul {
	border: none;
	background: none;
	clear: both;
	width: auto;
}
#nav ul li {
	display: block;
	float: left;
	background: #526E95 repeat-x url(images/buttonbg.png) top left;
	position: relative;
}
#nav ul li a, #nav ul li strong, #nav ul li span {
	font-size: 85%;
	font-family: Tahoma, Verdana, Arial, sans-serif;
	color: #fff;
	font-weight: normal;
	text-decoration: none;
	white-space: nowrap;
}
#nav ul li a, #nav ul li strong {
	display: block;
	float: left;
	padding: 3px 3px;
	border: 1px solid #446688;
	border-width: 0 1px 0 0;
	word-spacing: -.2em;
}
#nav ul li strong { background: #36642E repeat-x url(images/buttonbggreen.png) top left; }
#nav ul li span {
	position: absolute;
	top: -1.5em;
	margin-left: 2.3em;
	color: #fff;
	left: 0;
	z-index: 2;
}
#nav ul li ul {
	background-color: #95B2DC;
	margin-top: -1.3em;
	padding-top: 1.3em;
	position: relative;
	z-index: 1;
	float: left;
}
#nav li a:hover { background: #446688 repeat-x url(images/buttonbgrollover.png) top left; }
#nav li a:focus, #nav li a:active {
	background-color: #fff;
	background-image: none;
	color: #365177;
}

here it is on a web page: http://www.hdbatik.co.uk/ectemp/b/navbar

i've tried using content:url(... to add an image above #contact:before and combinations of various padding and margins on #contact but haven't been able to get it to work.

so how to add an image above the Contact menu bar item? am i trying to do something that's not on? or is there a better way than using content:url(.. ? any suggestions would be great.

thanks.

[markbrown4]

Hi,

The top of the nav bar never moves, so you can absolutely position an image to sit on top, and it will always stay on top.

[johnyboy]

hi,

that's not going to get the image to stick to a particular button though. also the top of the menu probably does move a bit because the height of the sticking up tab bit gets bigger thus pushing the menu down i think, so an absolutely positioned image isn't going to work i don't think.

any other ideas? be great to be able to do this somehow (preferably by css).

thanks.

[Centauri]

Assuming the image is 77px x 30px as in your sample menu graphics, it can be applied as an <img> in the particular <li> and styled similar to your <span> as far as postioning goes. So html for the contact menu is

<li><img src="images/contact_image.jpg"><a href="#">Contact</a></li>

and the css relating to it is

#nav img {
	position: absolute;
	top: -30px;
	left: -10px;
}

Cheers
Graeme

[johnyboy]

thanks for the suggestion. i assume you meant position:relative not absolute? unfortunetely it makes a bit of a mess of the nav bar:



i tried a number of variations of your suggestion, changing various things but none worked.

this is a similar kind of problem that was happening with my attempts using ...:before { content: url(...

any other suggestions'd be great, thanks.

[Centauri]

No, position:absolute - an absolutely positioned object will be positioned in relation to the first parent element above it which is relatively positioned, which in this case is the <li>. Retry it with the absolute positioning.

[johnyboy]

oh yes, you're absolutely right. it works well. it just so happened to not work in my very old version of safari. that, coupled with my lack of understanding (i thought position:absolute;top:-30px;left:-10px; would likely send it off the page) made me think you must have meant relative. great, thanks for correcting me.

you don't think there's anyway to do it by adding the image entirely by css and achieving the same visual result as your way does? i guess not but just want to make sure.

thanks

[Centauri]

The image could be added via css, but you still need something to attach it to in the html - as span has already been used within an <li>, pick another element (<i>, <b>, <em> etc) and style it the same way and use the image as a background to this element. Use of empty elements in this way is not semantically correct though....

[johnyboy]

thanks for the info. what am i doing wrong here, in trying to do that?:
html:

<div id="nav">
<ul>
	<li><strong>Main</strong></li>
	<li><span>Keep what hot?</span>
		<ul>
			<li><a href="#">Bananas</a></li>
			<li><a href="#">Apples</a></li>
			<li><a href="#">Pairs</a></li>
		</ul>
	</li>
	<li><a href="#">How It All Kind Of Works</a></li>
	<li><a href="#">Services</a></li>
	<li><a href="#">Another Item</a></li>
	<li><a href="#">Something</a></li>
	<li id="contact"><em><a href="#">Contact</a></em></li>
</ul>
</div><!-- nav -->

css:

#nav #contact em:before {
	position: absolute;
	bottom: -30px;
	left: -10px;
	content:url(images/nav-test-image.jpg);
}

on a page: http://www.hdbatik.co.uk/ectemp/b/navbar3

what it looks like (in firefox 1.5 mac):



i'm obviously doing something very wrong but i'm not sure what?

thanks.

[Centauri]

I would do it this way

	<li><em></em><a href="#">Contact</a></li>

and css

#nav em {
	display: block;
	width: 77px;
	height: 30px;
	position: absolute;
	top: -30px;
	left: -10px;
	background-image: url(images/nav-test-image.jpg);
}

[johnyboy]

yes, excellent -- that works well by the looks of it. thanks very much