13 replies [Last post]
jace1319
jace1319's picture
Offline
Regular
Last seen: 4 years 13 weeks ago
Timezone: GMT-4
Joined: 2011-01-10
Posts: 41
Points: 61

i need help... im trying to change the navigation menu "text" into an menu image tab. attach is the before menu and after. For example any guest that hovers over the menu i want it to highlight the tab in blue like in the image. Heres the code i found but im not sure what i have to do as far as the images url. since i have to cut it from a psd file.

AttachmentSize
before.png23.76 KB
after.png23.98 KB
jace1319
jace1319's picture
Offline
Regular
Last seen: 4 years 13 weeks ago
Timezone: GMT-4
Joined: 2011-01-10
Posts: 41
Points: 61

sorry heres the code

heres the code in an image format

AttachmentSize
codee.PNG 43 KB
jace1319
jace1319's picture
Offline
Regular
Last seen: 4 years 13 weeks ago
Timezone: GMT-4
Joined: 2011-01-10
Posts: 41
Points: 61

-_-

anyone???

Verschwindende
Verschwindende's picture
Offline
Guru
Last seen: 14 weeks 1 day ago
Timezone: GMT-4
Joined: 2009-10-09
Posts: 2043
Points: 2268

jace1319 wrote: heres the

jace1319 wrote:

heres the code in an image format

Um, why? Puzzled

Deuce
Deuce's picture
Offline
Guru
Somewhere, USA
Last seen: 3 years 9 weeks ago
Somewhere, USA
Timezone: GMT-5
Joined: 2005-11-20
Posts: 4424
Points: 1843

You can look up "css image

You can look up "css image replacement" or "css sprites" on the Googles.
Please let us know if you have any problems implementing these techniques.

all ยป http://dictionary.reference.com/browse/all

Google isn't a bunch of guys reading and grading web sites, it's more like a bunch of monkeys sniffing food and putting the good bananas at the top. -Triumph

jace1319
jace1319's picture
Offline
Regular
Last seen: 4 years 13 weeks ago
Timezone: GMT-4
Joined: 2011-01-10
Posts: 41
Points: 61

ok

ok I finally found a tutorial that helped me out a lot. I created the css code from scratch as well as the html. now all I need help with is implement the code into the code I already have here is the current code I have

Quote:

/********** < Navigation */
.nav-container {}
#nav {padding:0; margin:0; font-size:11px; border-bottom:1px solid #000; }

/* All Levels */
#nav li { text-align:left; position:relative; border-right:1px solid #000;}
#nav li a,
#nav li a span{background:url(../images/menu_bg.gif) left top repeat-x #141314;}

#nav li.first{background:url(../images/menu_corner_left.png) left top no-repeat; padding-left:5px;}
#nav li.first a span{padding-left:42px;}
#nav li.over.first,
#nav li.active.first{background:url(../images/menu_corner_left_active.png) left top no-repeat;}

#nav li.last a{background:url(../images/menu_corner_right.png) right top no-repeat; padding-right:5px;}
#nav li.last a span{padding-right:38px; padding-left:45px;}
#nav li.over.last a,
#nav li.active.last a{background:url(../images/menu_corner_right_active.png) right top no-repeat;}

#nav li.over a span,
#nav li.active a span{background:url(../images/menu_bg_active.gif) left top repeat-x #1E1F1F; padding-bottom:16px;}
#nav li.over,
#nav li.active{border-bottom:1px solid #2C2B2C;}

#nav li.over { z-index:999; }
#nav li.parent {}
#nav li a { display:block; text-decoration:none; }
#nav li a:hover { text-decoration:none; }
#nav li a span { display:block; padding:20px 43px 17px 47px; text-transform:uppercase; white-space:nowrap; cursor:pointer; }
#nav li ul a span { white-space:normal; }

/* 1st Level */
#nav li { float:left; }
#nav li a { float:left; padding:0; color:#FFF; }
#nav li a:hover { color:#FFF; }
#nav li.over a,
#nav li.active a { color:#FFF; }

/* 2nd Level */
#nav ul { position:absolute; width:17em; top:50px; left:-10000px; border:1px solid #202020; border-bottom:0; background:#070707; font-size:9px; }
#nav ul li { float:none; border-bottom:1px solid #202020!important; background:0; }
#nav ul li.last { border-bottom:0; }
#nav ul li a { float:none; padding:3px 9px; font-weight:normal; color:#888 !important; background:0!important; }
#nav ul li a:hover { color:#FFF !important; }
#nav ul li a span{padding:3px 5px!important; background:0!important;}
#nav ul li.active > a,
#nav ul li.over > a { color:#FFF !important; }

/* 3rd+ leven */
#nav ul ul { top:7px; }

/* Show Menu */
#nav li.over > ul { left:0; }
#nav li.over > ul li.over > ul { left:100px; }
#nav li.over ul ul { left:-10000px; }
/********** Navigation > */

and here's the code I created that needs to be implemented in the above code and I'm not sure what i need to do with the html code or in which directory root it needs to go in. any help would be very appreciated

Quote:

#navigation { margin: 0; padding: 0; width: 969px; height: 53px;
Background-image: url(lastone.gif) ; }

#navigation li { margin: 0; padding: 0; list-style-type: none; display: inline;
height:53px; text-align: center; float:left; line-height:53px; }

#navigation a { display:block; height:52px; }
#navigation a:hover { background-image: url(lastone.gif) ; }

#nav-home { width:161px; }
#nav-home a:hover { background-position:bottom 0; }

#nav-Service { width:161px; }
#nav-Service a:hover { background-position:bottom -162px; }

#nav-Quicklinkz { width:161px; }
#nav-Quicklinkz a:hover { background-position:bottom -323px; }

#nav-Advertise { width:161px; }
#nav-Advertise a:hover { background-position:bottom -484px; }

#nav-Contact { width:161px; }
#nav-Contact a:hover { background-position:bottom -645px; }

#nav-About { width:161px; }
#nav-About a:hover { background-position:bottom -806px; }

#navigation span { display: none; }

regia
regia's picture
Offline
Enthusiast
San Diego
Last seen: 5 years 19 weeks ago
San Diego
Timezone: GMT-4
Joined: 2010-10-24
Posts: 313
Points: 360

That's all CSS code, not

That's all CSS code, not HTML. You need to put your HTML code into all your .html files and link to the .css file from the "head" section of the html file. If you don't know how to do that, then I'm afraid you will have to go back to basics and study some more.

jace1319
jace1319's picture
Offline
Regular
Last seen: 4 years 13 weeks ago
Timezone: GMT-4
Joined: 2011-01-10
Posts: 41
Points: 61

i know

yea the codes i posted before were all css. I was asking how can i replace the current css code with the css sprite image code I made. Also attached i have the html code as an image since I wasnt allowed to post the head tag etc.

AttachmentSize
html.PNG 13.28 KB
jace1319
jace1319's picture
Offline
Regular
Last seen: 4 years 13 weeks ago
Timezone: GMT-4
Joined: 2011-01-10
Posts: 41
Points: 61

re:

Ok let me try to rephrase this again.. I have a magento template. Im trying to replace the navigation text menu into a css sprite image menu. the default navigation css code is the code below this sentence

Quote:

/********** < Navigation */
.nav-container {}
#nav {padding:0; margin:0; font-size:11px; border-bottom:1px solid #000; }

/* All Levels */
#nav li { text-align:left; position:relative; border-right:1px solid #000;}
#nav li a,
#nav li a span{background:url(../images/menu_bg.gif) left top repeat-x #141314;}

#nav li.first{background:url(../images/menu_corner_left.png) left top no-repeat; padding-left:5px;}
#nav li.first a span{padding-left:42px;}
#nav li.over.first,
#nav li.active.first{background:url(../images/menu_corner_left_active.png) left top no-repeat;}

#nav li.last a{background:url(../images/menu_corner_right.png) right top no-repeat; padding-right:5px;}
#nav li.last a span{padding-right:38px; padding-left:45px;}
#nav li.over.last a,
#nav li.active.last a{background:url(../images/menu_corner_right_active.png) right top no-repeat;}

#nav li.over a span,
#nav li.active a span{background:url(../images/menu_bg_active.gif) left top repeat-x #1E1F1F; padding-bottom:16px;}
#nav li.over,
#nav li.active{border-bottom:1px solid #2C2B2C;}

#nav li.over { z-index:999; }
#nav li.parent {}
#nav li a { display:block; text-decoration:none; }
#nav li a:hover { text-decoration:none; }
#nav li a span { display:block; padding:20px 43px 17px 47px; text-transform:uppercase; white-space:nowrap; cursor:pointer; }
#nav li ul a span { white-space:normal; }

/* 1st Level */
#nav li { float:left; }
#nav li a { float:left; padding:0; color:#FFF; }
#nav li a:hover { color:#FFF; }
#nav li.over a,
#nav li.active a { color:#FFF; }

/* 2nd Level */
#nav ul { position:absolute; width:17em; top:50px; left:-10000px; border:1px solid #202020; border-bottom:0; background:#070707; font-size:9px; }
#nav ul li { float:none; border-bottom:1px solid #202020!important; background:0; }
#nav ul li.last { border-bottom:0; }
#nav ul li a { float:none; padding:3px 9px; font-weight:normal; color:#888 !important; background:0!important; }
#nav ul li a:hover { color:#FFF !important; }
#nav ul li a span{padding:3px 5px!important; background:0!important;}
#nav ul li.active > a,
#nav ul li.over > a { color:#FFF !important; }

/* 3rd+ leven */
#nav ul ul { top:7px; }

/* Show Menu */
#nav li.over > ul { left:0; }
#nav li.over > ul li.over > ul { left:100px; }
#nav li.over ul ul { left:-10000px; }
/********** Navigation > */

Ok now this is the css sprite image code that i made to replace the current navigation menu code

Quote:

#navigation { margin: 0; padding: 0; width: 969px; height: 53px;
Background-image: url(lastone.gif) ; }

#navigation li { margin: 0; padding: 0; list-style-type: none; display: inline;
height:53px; text-align: center; float:left; line-height:53px; }

#navigation a { display:block; height:52px; }
#navigation a:hover { background-image: url(lastone.gif) ; }

#nav-home { width:161px; }
#nav-home a:hover { background-position:bottom 0; }

#nav-Service { width:161px; }
#nav-Service a:hover { background-position:bottom -162px; }

#nav-Quicklinkz { width:161px; }
#nav-Quicklinkz a:hover { background-position:bottom -323px; }

#nav-Advertise { width:161px; }
#nav-Advertise a:hover { background-position:bottom -484px; }

#nav-Contact { width:161px; }
#nav-Contact a:hover { background-position:bottom -645px; }

#nav-About { width:161px; }
#nav-About a:hover { background-position:bottom -806px; }

#navigation span { display: none; }

AS you can see i also have attached the HTML that correspond to the css sprite image menu code. I did link the css code into the html as you can see in the image. OK the part im having trouble with is placing the css sprite code into the default css code. and which root do i upload the html code to as well as the sprite image itself using ftp.

AttachmentSize
html.PNG 13.28 KB
regia
regia's picture
Offline
Enthusiast
San Diego
Last seen: 5 years 19 weeks ago
San Diego
Timezone: GMT-4
Joined: 2010-10-24
Posts: 313
Points: 360

Sorry, but I am not going to

Sorry, but I am not going to spend time deciphering code from a photo. There is a code button above the input box when you reply, please click on it and then paste your html code inside the tags.

jace1319
jace1319's picture
Offline
Regular
Last seen: 4 years 13 weeks ago
Timezone: GMT-4
Joined: 2011-01-10
Posts: 41
Points: 61

k

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Navigation Menu</title>
 
<link rel="stylesheet" type="text/css" href="menu.css"/>
 
</head>
 
 
<body>
<ul id="navigation">
 
  <li id="nav-home"><a href="#"><span>Home</span></a></li> 
  <li id="nav-Service"><a href="#"><span>Service</span></a></li>  
  <li id="nav-Quicklinkz"><a href="#"><span>Quicklinkz</span></a></li>
  <li id="nav-Advertise"><a href="#"><span>Advertise</span></a></li>  
  <li id="nav-Contact"><a href="#"><span>Contact</span></a></li>
  <li id="nav-About"><a href="#"><span>About</span></a></li>
</ul>
</body>
</html>

jace1319
jace1319's picture
Offline
Regular
Last seen: 4 years 13 weeks ago
Timezone: GMT-4
Joined: 2011-01-10
Posts: 41
Points: 61

any help??

any help anyone?? all i need is replace the old css text navigation menu to a top image sprite navigation menu. i have all the codes its just a matter of replacing it and im not sure what needs to be done. any suggestions appreciated .

nikos777
nikos777's picture
Offline
newbie
rhodes
Last seen: 9 years 34 weeks ago
rhodes
Timezone: GMT+2
Joined: 2011-01-22
Posts: 1
Points: 1

thanks for the above code. i

thanks for the above code. i will try it to see if its ok and will reply back.

http://rhodesmarket.blogspot.com/

jace1319
jace1319's picture
Offline
Regular
Last seen: 4 years 13 weeks ago
Timezone: GMT-4
Joined: 2011-01-10
Posts: 41
Points: 61

ok

let me know if you got any luck. thanks