|
CSS - Css Horizontal Sprite Menu Using One Background Image. Please Help!
I am looking to make a navigation menu similar to the following:
http : / / www . coremediadesign.co.uk/website_design_company/about_core_media_design.html This is the sprite image they use. http : / / img819.imageshack.us/img819/8185/menuo.png I would like to accomplish the same thing. I am NOT looking for one long image with my entire menu in image format. I want a three-part background image/sprite like the one I posted above that is used as the background/hover/active by repeating it on the x-axis. I have tried for a long time to get this working but have not been able to. Please help me out. Similar TutorialsIm struggling here trying to replace this code. any help would be appreciated. Now To go into details I have a magento template. Im trying to replace the default navigation text menu to a css sprite top image menu. the default navigation text menu css code is stated below 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; cursorointer; } #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 after viewing the code above i was wondering how can i add the css sprite image code that i made to replace the default navigation text menu. Below is the css code i made for the sprite images. 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 below i also have inserted the HTML that correspond to the css sprite image menu code. I link the css code into the html. so my final 2 questions is. can anyone replace the css code i made in the default css code. and after thats done which root do i upload the html code to. Code: <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> Hello, I'm trying to create an list menu like the one in attached image and I have 2 problems. 1. In IE 6,IE 7 the list is ordered verticaly and not horizontaly (in Opera and FF it is ok) 2. I need to align the text on the bottom of the list like inattached image. Here is what I manage to do till now : http://www.sibiul.net/test/list-align.php Anyone knows what I must do ? 10x I currently have a menu sprite set up that works. I also have a css dropdown menu set up as well in conjunction with the sprite menu. Issue: The dropdown does not work in IE6. It drops down behind the div just below it (never to see it until I hid the contents in the div below) even after adding z-index to nearly every attribute. After hiding the contents in the div below, I see the drop down, but as soon as I mouse over it, it disappears. This has been a headache for me and I need to get this resolved asap. Here is the CSS: aunkor.com/css.html Here is the HTML: aunkor.com/html.html Please help! >_< I would like to align left images so that they touch against each other. Here is a capture of my problem. dollhedz.com/test [CODE] <style type="text/css"> body{ background-color:#000033; color:#00cc33; } #wrapper{ background-color:#000000; margin:15px auto 0px; width:700px; height:800px; } #sitenav{ background-image:url(sitegrax/sitenavback.jpg); background-repeat: no-repeat; height:55px; padding-left:213px; border: 0px; margin:0px; text-align:left; } #one{ float:left; text-align:left; align:left; margin:0px; padding:0px; } </style> </head> <body> <div id="wrapper"> <div id="banner"><img src="sitegrax/banner.jpg" alt=" yellow Jacket dodging a 355 smoothbore slug" border="0" /> </div> <div id="sitenav" > <div id="one"><a href=""><img src="sitegrax/bt_game_nav.jpg" alt="site navigation games" border="1" /></a> <a href="" align="left"><img src="sitegrax/bt_history_nav.jpg" alt="site navigation history" border="1" /></a> <a href=""><img src="sitegrax/bt_pilot_nav.jpg" alt="site navigation pilot"border="1" /></a></div> </div> </div> </body> </code> Problem: There is a 5 to 6 pixel space between each image that I would like gone. The 1px border around each image is there to show the edge of each image. thank you for your time I am using a single gif file as an image sprite and want to link the file name in another style sheet so i can reuse this sheet without having to have many copys of the style sheet with a different file names example: Currently like this Code: #store{left:-200px;width:158px;}
#store{background:url('mred.gif') -150px -161px;}
#store a:hover{background: url('mred.gif') -150px 0;}
#fourms{left:0px;width:158px;}
#fourms{background:url('mred.gif') -304px -161px;}
#fourms a:hover{background: url('mred.gif') -304px 0;}
want like this
#home{left:-200px ;width:150px;}
#home{background:inherit;background-position: 0 -161px;}
#home a:hover{background-position: 0 0;}
with the background:url('mred.gif') specified in another style sheet once insted of repeating over the entire sheet. effectively so i can just change the other external style sheet to change the gif file and keep this one the same. HOW? possible? I'm new with this image sprite method, at least with the type of image I have copied. I have it mostly working, but for some reason it word wraps the two word text that appears over the image. Here is a link to the example: ... EDIT: It seems I can't post a URL. I'll try on the second post. It is located in the Test Data tab on this product page. The button that says View More. View on one line, More on the other. I'm thinking it is an issue with my HTML more than the CSS. I've tried many different variations with not much like. I can break it more, but can't seem to fix it. Any help or guidance is appreciated. Hey everyone, I'm trying to convert a jscript rollover setup to using CSS sprites. I have setup the following sprite: [IMG]eagleonedims.com/images/navmap.jpg[/IMG] I cannot figure out how to have the <li> sections replace the entire ba6nner with a shifted-down sprite upon rollover. The shifted sprite just appears within the boundaries of the respective<li> section. The reason for needing this is to include the cloud effect which overlap the other li sections. Basically, upon rollover I need the ENTIRE navmap.jpg image to be shifted by 88px down. The image is 1000px wide and each sprite is 88px tall. Thanks for any help! CSS: Code:
#navmap {
width: 1000px;
height: 88px;
background: url("images/navmap.jpg");
margin: 0;
padding: 0;
position: relative;
}
#navmap li {
margin: 0;
padding: 0;
list-style: none;
position: absolute;
top: 0;
}
#navmap li, #navmap a {
height: 88px;
display: block;
}
#home {left: 141px; width: 110px;}
#about {left: 251px; width: 120px;}
#pricing {left: 371px; width: 120px;}
#quote {left: 491px; width: 120px;}
#contact {left: 611px; width: 120px;}
#login {left: 731px; width: 128px;}
#home a:hover {background: url("images/navmap.jpg") 0px -88px no-repeat;}
#about a:hover {background: url("images/navmap.jpg") 0 -176px no-repeat;}
HTML: Code: <ul id="navmap"> <li id="home"><a href="index.php">Home</a></li> <li id="about"><a href="about.php">About</a></li> <li id="pricing"><a href="pricing.php">Pricing</a></li> <li id="quote"><a href="quote.php">Quote</a></li> <li id="contact"><a href="contact.php">Contact</a></li> <li id="login"><a href="login.php">Login</a></li> </ul> Hi: I am having some problems getting the background image of a drop-down menu to do what I want. The drop-down menus have different lengths, and I have a gradient image which I would like to have repeat across (repeat-x) but on the y-axis, I want it to be scaled to fit the menu height which differs from drop-down to drop-down. I have the following code in my CSS file. Code: transparent url(../images/style1/submenu_bg.png) repeat-x 0 bottom I cannot figure out how to have the image scale on the y-axis. Any assistance would be appreciated. I've tried everything, with no luck. It's pointing to the right address, the css is loading. Why does the image not appear? div#main_menu { float: left; clear: both; width: 100%; height: 73px; background-image: url (images/button-banner.png) no-repeat; } div#main_menu ul { float: left; list-style: none; margin: 0; padding: 0; } div#main_menu ul li { float: left; height: 73px; margin: 0 15px; } div#main_menu ul li a { color: #7A5A46; float: left; margin-top: 17px; text-decoration: none; text-align: center; HTML: <div id="main_menu"> <ul> <li><a class="" href="#">Menu<br/></a></li> <li><a class="" href="/ordering/">Ordering Info<br/></a></li> <li><a class="" href="/photos/">Photos<br/></a></li> <li><a class="" href="/blog/">Blog<br/></a></li> <li><a class="" href="/about/">About Me<br/></a></li> <li><a class="" href="/contact/">Contact Info<br/></a></li> } Hi, I learned css a couple of years ago but am real rusty...anyways, here is an image that i wanted as the background to the top of the page. in the white space, i simply want a horizontal menu with 4 links. i cannot figure out how to position my links in that space correctly. any help appreciated! [/IMG]http://img251.imageshack.us/img251/1333/toplogoinfo.jpg[/IMG] here is the code i have so far: Code: !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>Precision Truck Painting and Repair</title> <style type="text/css"> .body{ margin:0; padding:0; } #page { width: 800px; margin: 0 auto 0 auto; } #banner { background-image:url(images/jpegs/top_logo_info.jpg); height: 140px; background-repeat:no-repeat; } ul.nav { list-style-type: none; padding-left: 0; margin:0px 0 0 360px; font-family:Arial, Helvetica, sans-serif; } ul.nav li { display: inline; width:115px;} ul.nav a { text-decoration:none; } </style> </head> <body> <div id="page"> <div id="banner"> <div id="top"> <ul class="nav"> <li class="index"><a href="index.html">Home</a></li> <li class="painting"><a href="pages/painting_collision.html">Painting/Collision</a></li> <li class="painting"><a href="pages/body_trailer_repairs.html">Trailer & Body Repairs</a></li> <li class="index"><a href="pages/Contact_us.html">Contact Us</a></li> </ul> </div> </div> </div> </body> </html>
Hi all, I've got a horizontal menu that is working just fine in every browser but IE 6 and 7. In IE it's almost there, except that the submenus will only appear one level deep. The menu is created with nested lists. The :hover functionality is simulated via JavaScript for IE 6. The IE developer toolbar shows the 3rd level menu is correctly being changed to display: block when its parent is hovered, and the border the dev toolbar draws even puts it in the correct place, it just doesn't actually appear. You can find the page he http://www.perceptes.com/topdog/ The CSS and JS (uses jQuery) can be found he http://www.perceptes.com/topdog/css/screen.css http://www.perceptes.com/topdog/css/ie.css (loaded with a conditional comment) http://www.perceptes.com/topdog/js/tdps.js http://www.perceptes.com/topdog/js/ie.js (loaded with a conditonal comment) For a specific example of what I'm talking about, try hovering over the second item, Filters & Parts. This will give you another level with four choices. Each of those also has child elements, but when hovered over, the next level doesn't appear. Try it in something other than IE 6 or 7 to see how it's supposed to look. Thanks very much in advance! Ok, I know virtually nothing about css, but realized that that a css menu is better for SEO. Anyway I found this vertical menu that works the way I want it. But I also need a horizontal version of it with dropdown submenus. Can someone help with this? I have been trying a bunch of things but it just looks awful and doesn't work right. It has 3 basic componets; Html, Javascript, and css. Here they are below. drop_down.js: Code: // JavaScript Document
startList = function() {
if (document.all&&document.getElementById) {
navRoot = document.getElementById("nav");
for (i=0; i<navRoot.childNodes.length; i++) {
node = navRoot.childNodes[i];
if (node.nodeName=="LI") {
node.onmouseover=function() {
this.className+=" over";
}
node.onmouseout=function() {
this.className=this.className.replace(" over", "");
}
}
}
}
}
window.onload=startList;
HTML: Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Horizontal Drop Down Menus</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<script type="text/javascript" src="drop_down.js"></script>
<style type="text/css">
@import "style2.css";
</style>
</head>
<body>
<ul id="nav">
<li><a href="#">Home</a></li>
<li><a href="#">About</a>
<ul>
<li><a href="#">History</a></li>
<li><a href="#">Team</a></li>
<li><a href="#">Offices</a></li>
</ul>
</li>
<li><a href="#">Services</a>
<ul>
<li><a href="#">Web Design</a></li>
<li><a href="#">Internet Marketing</a></li>
<li><a href="#">Hosting</a></li>
<li><a href="#">Domain Names</a></li>
<li><a href="#">Broadband</a></li>
</ul>
</li>
<li><a href="#">Contact Us</a>
<ul>
<li><a href="#">United Kingdom</a></li>
<li><a href="#">France</a></li>
<li><a href="#">USA</a></li>
<li><a href="#">Australia</a></li>
</ul>
</li>
</ul>
</body>
</html>
Style2.CSS: Code: body {
font: normal 11px verdana;
}
ul {
margin: 0;
padding: 0;
list-style: none;
width: 150px; /* Width of Menu Items */
border-bottom: 1px solid #ccc;
}
ul li {
position: relative;
}
li ul {
position: absolute;
left: 149px; /* Set 1px less than menu width */
top: 0;
display: none;
}
/* Styles for Menu Items */
ul li a {
display: block;
text-decoration: none;
color: #777;
background: #fff; /* IE6 Bug */
padding: 5px;
border: 1px solid #ccc;
border-bottom: 0;
}
/* Fix IE. Hide from IE Mac \*/
* html ul li { float: left; height: 1%; }
* html ul li a { height: 1%; }
/* End */
ul li a:hover { color: #E2144A; background: #f9f9f9; } /* Hover Styles */
li ul li a { padding: 2px 5px; } /* Sub Menu Styles */
li:hover ul, li.over ul { display: block; } /* The magic */
Has anyone created a CSS horizontal fly-out menu list? I have a 3 level navigation list. The level 1 has 5 items, the first item of which has no sub-list. How can I get the level 2 and 3 lists to fly-out at the same level as its parent item? what i want as horizontal fly out menu BUT I want the list of items to appear horizontally in a line below. These menus have the items appear vertically from a horizontal menu i looked at these and could find one http://www.cssdrive.com/index.php/menudesigns/category/C20/ I have a horizonatal menu on my webise and the list items that drop down, are all jumbled into a single block of text. How do I create a new line fore each list item? Hi, I have the following menu that is currently laid out with a table: http://www.ianarmstrong.com/menutest/ I want to switch this to be styled in CSS somehow. I've looked at using a styled unordered list to do this, but that doesn't seem like the best idea as each image in my menu is different. Thus I can't have 5 different <li> elements, each with a different bg image. I need a way to handle the 5 different images, and have a mouseover effect as well. Could someone offer some direction on this problem? |
|||||||