SitePoint Sponsor

User Tag List

Results 1 to 11 of 11
  1. #1
    SitePoint Wizard
    Join Date
    Apr 2002
    Posts
    2,322
    Mentioned
    3 Post(s)
    Tagged
    0 Thread(s)

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

    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:
    Code:
    <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:
    Code:
    #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.
    Last edited by johnyboy; May 10, 2007 at 13:23.

  2. #2
    padawan silver trophybronze trophy markbrown4's Avatar
    Join Date
    Jul 2006
    Location
    Victoria, Australia
    Posts
    4,118
    Mentioned
    28 Post(s)
    Tagged
    2 Thread(s)
    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.

  3. #3
    SitePoint Wizard
    Join Date
    Apr 2002
    Posts
    2,322
    Mentioned
    3 Post(s)
    Tagged
    0 Thread(s)
    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.

  4. #4
    SitePoint Wizard bronze trophy Centauri's Avatar
    Join Date
    May 2007
    Location
    Newcastle, Australia
    Posts
    3,718
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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
    Code:
    <li><img src="images/contact_image.jpg"><a href="#">Contact</a></li>
    and the css relating to it is
    Code:
    #nav img {
    	position: absolute;
    	top: -30px;
    	left: -10px;
    }
    Cheers
    Graeme

  5. #5
    SitePoint Wizard
    Join Date
    Apr 2002
    Posts
    2,322
    Mentioned
    3 Post(s)
    Tagged
    0 Thread(s)
    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.

  6. #6
    SitePoint Wizard bronze trophy Centauri's Avatar
    Join Date
    May 2007
    Location
    Newcastle, Australia
    Posts
    3,718
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.

  7. #7
    SitePoint Wizard
    Join Date
    Apr 2002
    Posts
    2,322
    Mentioned
    3 Post(s)
    Tagged
    0 Thread(s)
    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

  8. #8
    SitePoint Wizard bronze trophy Centauri's Avatar
    Join Date
    May 2007
    Location
    Newcastle, Australia
    Posts
    3,718
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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....

  9. #9
    SitePoint Wizard
    Join Date
    Apr 2002
    Posts
    2,322
    Mentioned
    3 Post(s)
    Tagged
    0 Thread(s)
    thanks for the info. what am i doing wrong here, in trying to do that?:
    html:
    Code:
    <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:
    Code:
    #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.

  10. #10
    SitePoint Wizard bronze trophy Centauri's Avatar
    Join Date
    May 2007
    Location
    Newcastle, Australia
    Posts
    3,718
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I would do it this way
    Code:
    	<li><em></em><a href="#">Contact</a></li>
    and css
    Code:
    #nav em {
    	display: block;
    	width: 77px;
    	height: 30px;
    	position: absolute;
    	top: -30px;
    	left: -10px;
    	background-image: url(images/nav-test-image.jpg);
    }

  11. #11
    SitePoint Wizard
    Join Date
    Apr 2002
    Posts
    2,322
    Mentioned
    3 Post(s)
    Tagged
    0 Thread(s)
    yes, excellent -- that works well by the looks of it. thanks very much


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •