|
CSS - Css Sprite Top Image Menu Help (in Magento)
Im 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> Similar TutorialsI 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. 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 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> Hello, I have created a CSS Sprite containing the many different list bullets, in a vertical form. I have then defined the different li styles. This all works, however, the bullet background is showing the other bullet styles when the li spans more than one line. It's probable best if I show you what I mean: http://snkhan.co.uk/origami.php The corresponding CSS is: Code: #content ul {margin: 0 0 20px 0; padding: 0;}
#content li {list-style: none; background: url(../images/list.png) no-repeat scroll 0px -34px; padding-left: 20px;}
and Code: #community > li {background: url(../images/list.png) no-repeat scroll 0px -18px !important;}
#music > li {background: url(../images/list.png) no-repeat scroll 0px -16px !important;}
#twitter > li {background: url(../images/list.png) no-repeat scroll 0px -18px !important;}
Is there anyway I can prevent the li background showing more than 16px x 16px at a time? Thank you for your time. hi.... i'm currently having this issue with ie6. I have a png sprite image. In the sprite there is a rounded corner frame. When i apply the neccessary css.. it work perfectly with ff.. but for ie.. i can not seem to move/translate the background to the correct path.. i've tried using background-position. it works with ff but not with ie6.. here is the code snipplet Code:
#image{
background:url(images/160x120_image.jpg) no-repeat;
width:160px;
height:120px;
position:relative;
}
#frame{
width:160px;
height:120px;
background:url(images/sprite.png) no-repeat -59px 0;
_background:none;
_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/sprite.png',sizingMethod='crop');
}
</style>
<div style="width:200px; margin:20px auto;">
<div id="image">
<div id="frame"></div>
</div>
</div>
here is the sprite does anyone have any clues to move the sprite to the correct position?? Thanks in advance Hi, I'm trying to transmogrify a Listamatic menu http://css.maxdesign.com.au/listamatic2/vertical06.htm by adding my own graphic. But I'm not able to take out the borders or get my header to 'touch' the list. I've removed the borders from the CSS but I'm left with a gap between my images. See the file he http://cftest.mccormick.com/mc3stage/listbox.htm What I really want is the rollover images to butt up against each other. Of course it looks fine in FF! Can you help? Glen Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<title>Listamatic2: Subtle box list</title>
<style type="text/css">
#rnav {
padding: 0px;
margin: 0px;
width: 223px;
border-left: 1px solid #b48932;
border-bottom: 1px solid #b48932;
border-right: 1px solid #b48932;
}
#navcontainer { margin: 0px; }
#navcontainer ul
{
margin: 0;
padding: 0;
list-style-type: none;
font-family: verdana, arial, Helvetica, sans-serif;
}
#navcontainer li { margin: 0; }
#navcontainer a
{
display: block;
padding: 5px 10px;
width: 203px;
color: #000;
background-color: #ADC1AD;
text-decoration: none;
font-weight: bold;
font-size: .8em;
background-image: url(assets/mc3_rnav_arrowon.gif);
background-repeat: no-repeat;
background-position: 0 0;
}
#navcontainer a:hover
{
color: #000;
background-color: #889E88;
text-decoration: none;
background-image: url(assets/mc3_rnav_arrowoff.gif);
background-repeat: no-repeat;
background-position: 0 0;
}
#navcontainer ul ul li { margin: 0; }
#navcontainer ul ul a
{
display: block;
padding: 5px 5px 5px 30px;
width: 185px;
color: #000;
background-color: #C5D8C5;
text-decoration: none;
font-weight: normal;
}
#navcontainer ul ul a:hover
{
color: #000;
background-color: #889E88;
text-decoration: none;
}
#rnavheader {
padding: 0px;
margin: 0px;
}
</style>
</head>
<body>
<div id="rnavheader">
<img src="assets/mc3_rnav_header.gif" />
</div>
<div id="rnav">
<div id="navcontainer">
<ul id="navlist">
<li id="active"><a href="#" id="current">Item one</a></li>
<li><a href="#">Item two</a></li>
<li><a href="#">Item three</a></li>
<li><a href="#">Item four</a></li>
<li><a href="#">Item four</a></li>
</ul>
</div>
</div>
</body>
</html>
So I have been trying to troubleshoot this issue for days and can't come up with a solution. I hope someone out there can help!! So my navigation image sprite is not displaying correctly in IE7 or 6. It basically shows the whole sprite image scrunched up into the defined 100px height of the <ul>. Also, the sprite image has a width of 930px but in Firefox it begins to repeat the image even though the <ul> width is 930px. So I added the no-repeat to the background image sprite. Now it's not centered on the page. What's up with this? Also, I am trying to display the pictures on the page with one large pic on the left and then 4 images to the right of the large image. You'll have to see it to understand. It displays perfectly how i want in Firefox...and of course IE7 and 6 are all out of wack. Not sure what I am doing wrong here as well. I used a grid system, but it is not locking it in like it normally does. You can see the sprite and alignment issues if you view in IE 7 and how I want it to look in Firefox. Here's my coding: HTML: Code: <body id="pretty-pics"> <div id="container"> <div id="navigation"> <ul id="nav"> <li id="home"><a href="/">home</a></li> <li id="essence"><a href="../essence.html">essence</a></li> <li id="pictures"><a href="/pretty-pictures.html">pretty pictures</a></li> <li id="treasures"><a href="/treasures.html">treasures</a></li> <li id="contact"><a href="/contact.html">contact</a></li> </ul> </div><!--end nav--> <div class="clear"></div> <div class="pic-wrap col12"> <div class="col5 float-left"> <a href="images/products/product-1.jpg" rel="shadowbox[products]" title="Necklace"><img id="product-1" src="images/products/product-1-t.png" /></a> </div> <div class="col7 float-right"> <div class="col4 float-left"> <a href="images/products/product-2.jpg" rel="shadowbox[products]" title="Bracelet"><img id="product-2" src="images/products/product-2-t.png" /></a> <a href="images/products/product-4.jpg" rel="shadowbox[products]" title="Bracelets"><img id="product-4" src="images/products/product-4-t.png" /></a> </div> <div class="col3 float-right"> <a href="images/products/product-3.jpg" rel="shadowbox[products]" title="Necklaces"><img id="product-3" src="images/products/product-3-t.png" /></a> <a href="images/products/product-5.jpg" rel="shadowbox[products]" title="Necklaces"><img id="product-5" src="images/products/product-5-t.png" /></a> </div> <div class="clear"></div> </div> </div><!--end main wrapper--> CSS: Code: #pretty-pics{
background: #32b4c9 url(images/wall-bg.jpg) no-repeat scroll center 0px;
}
/* Main Navigation */
#nav{
width: 930px;
height: 100px;
background: url(images/sprite.png) no-repeat;
margin: 20px auto;
position: relative;
}
#nav li{
margin: 0;
padding: 0;
list-style: none;
position: absolute;
top: 0;
text-indent: -9999px;
}
#nav li, #nav a{
height: 100px;
display: block;
}
#home{
left: 0;
width: 186px;
}
#essence{
left: 186px;
width: 186px;
}
#pictures{
left: 372px;
width: 186px;
}
#treasures{
left: 558px;
width: 186px;
}
#contact{
left: 744px;
width: 186px;
}
#home a:hover{
background: transparent url(images/sprite.png) 0 -104px no-repeat;
}
#essence a:hover{
background: transparent url(images/sprite.png) -186px -104px no-repeat;
}
#pictures a:hover{
background: transparent url(images/sprite.png) -372px -104px no-repeat;
}
#treasures a:hover{
background: transparent url(images/sprite.png) -558px -104px no-repeat;
}
#contact a:hover{
background: transparent url(images/sprite.png) -744px -104px no-repeat;
}
#essence a.current{
background: transparent url(images/sprite.png) -186px -208px no-repeat;
}
#pictures a.current{
background: transparent url(images/sprite.png) -372px -208px no-repeat;
}
#treasures a.current{
background: transparent url(images/sprite.png) -558px -208px no-repeat;
}
#contact a.current{
background: transparent url(images/sprite.png) -744px -208px no-repeat;
}
/* Pictures */
.pic-wrap{
height: 550px;
margin: 50px auto;
}
#product-1{
margin: 10px 0 0;
}
#product-2{
margin: 10px 50px 0;
}
#product-3{
margin: -40px 20px 0;
}
#product-4{
margin: 20px 70px 0;
}
#product-5{
margin: 30px 0 0;
}
ANY help is appreciated. I am tired of pulling my hair out over this one! Thanks in advance!!! Hi everyone I recently stumbled upon the CSS sprite idea and i've been loving it! Makes changing and adding graphics so much easier. However i've run into a concern. My image sprite is becoming quite large (>150KB) and my HTML code has many divs who's background refers to this sprite (can get upto 100 divs). With this i've started to notice slight sluggishness of my HTML page and got me thinking weather i should divide my large sprite into a number of smaller ones to enhance performance. This is mainly because i have quite a lot of hover effects (which merely shift the background position) and i suspect this is causing the sluggishness and high memory usage. It's far too time consuming to try this myself so i'm wondering if anyone has any experience with such an action. Many thanks Hello folks, I am trying to get a basic sprite working. I have been reading on this for over a week and I think I am missing something very basic. I made a couple sprite png's in photo shop could not get them to display correctly and I found a place online that makes them for U, it displays just like the ones I made... so http://www.realestateozarks.com/mcnally/mcn.png Ok what is happening when I try and call the sprite and display a pic on it, it does correct width and height but divides the height by the 6 pictures on it and displays all of them instead of 1. http://www.realestateozarks.com/rsstest.htm and U can see what I am trying to say. I am not trying to do anything fancy here only display 1 pic out of the 6 correctly. if I call the sprite in a image statement like <img class="sprite mcn1 mc5"> it does display the img correctly... but that is not correct html code and if alt statment is added it displays it on top of pic. css code passes w3c.org test NOTE: if I try and display a individual pic in a td statment like <td class="sprite mcn1 mc5"> it displays the picture correctly... well as a backround image anyway... here is my html code to call sprite... In head statment Code: <link href="mcsprite.css" rel="stylesheet" type="text/css" > in body to call pic Code: <img src="../mcnally/mcn.png" class="sprite mcn1 mc5"> Here is code in my mcsprite.css file Code: .sprite {background:url(../mcnally/mcn.png);
background-repeat:no-repeat; }
.mcn1 {height:125px;}
/* mcn1 */
.mc1 {width:200px; background-position: 0px 0px;}
.mc2 {width:200px; background-position: 0px -135px;}
.mc3 {width:200px; background-position: 0px -270px;}
.mc4 {width:200px; background-position: 0px -405px;}
.mc5 {width:200px; background-position: 0px -540px;}
.mc6 {width:200px; background-position: 0px -675px;}
If I can get it to display 1 pic correctly then I can change my code and display all 6 pics correctly. I have 24 pic's on my home page so using a couple sprites with 6 pic's each on them with .2 sec latency on grabbing each individual pic will save me about 2 sec load time on my home page. thanks in advance for any suggestions/help whonoes Hi, I am trying to create a menu, and I would like to try to do it without using Javascript. I a number of menu items, that each has three states - first state is just white text, second state needs to fade from white to blue text when mouse is rolled over. Third state needs to fade from blue to white text when mouse is taken off each menu item. I have the three images for that (white, white-blue, blue-white). I have read up on a few image rollover guides using CSS, but they all involve putting outlines around an existing image etc. As the images need to be links, they can't be background images (can they?), they have to be just images. So, can anyone point me in the right direction on how to swap an image with another when one a) an image is rolled over, and also b) when the mouse is removed from over the image. Thanks 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. Hi, I have a few problems... some regarding compatibility and some regarding css basics. lesconstructionsjeanbrunetDOTcom/2011/flicker.html This page is a little messy 1. Slider works perfect in Firefox and NOT in IE 2. CSS menu sub items works in Firefox but NOT in IE 3. CSS menu sub items don't show over the image slider (probably normal but asking anyway...) Any Ideas Thanks 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> } Hello; I'm trying to create a dropdown nav menu which drops down into in three levels. When I put a mouseover on my main nav, it changes it's image. However when I move away from it to a lower level of the menu it changes back. I want to main nav to stay the same image when I move down to lower levels of the menu. Thank you Here is my code: Code: body {
font-family:verdana, arial, helvetica, sans-serif;
font-size:76%;
color:#000;
padding:0;
border:0;
margin:0;
background:#fff repeat-x 0 0px;
text-align:left;
}
.clear {
clear:both;
}
.play {
font-family:"trebuchet ms", sans-serif;
}
.hiddenfromview {
display:none;
}
/* control mouseover functions for main menu navs */
#menu1 a {
width:129px;
background: url("1.jpg") 0 0 no-repeat;
}
#menu1 a:hover {
display:block;
background: url("1-1.jpg") 0 0 no-repeat;
}
#menu2 a {
width:129px;
background: url("2.jpg") 0 0 no-repeat;
}
#menu2 a:hover {
display:block;
background: url("2-1.jpg") 0 0 no-repeat;
}
#menu3 a {
width:129px;
background: url("3.jpg") 0 0 no-repeat;
}
#menu3 a:hover {
display:block;
background: url("3-1.jpg") 0 0 no-repeat;
}
#menu4 a {
width:129px;
background: url("4.jpg") 0 0 no-repeat;
}
#menu4 a:hover {
display:block;
background: url("4-1.jpg") 0 0 no-repeat;
}
#menu5 a {
width:127px;
background: url("5.jpg") 0 0 no-repeat;
}
#menu5 a:hover {
display:block;
background: url("5-1.jpg") 0 0 no-repeat;
}
#menu6 a {
width:129px;
background: url("6.jpg") 0 0 no-repeat;
}
#menu6 a:hover {
display:block;
background: url("6-1.jpg") 0 0 no-repeat;
}
.menu {
font-size:0em;
position:relative;
z-index:100;
border-right:1px solid #000;
}
/* hack to correct IE5.5 faulty box model */
* html .menu {
}
/* remove all the bullets, borders and padding from the default list styling */
.menu ul {
padding:0;
margin:0;
list-style-type:none;
}
.menu ul ul {
}
/* float the list to make it horizontal and a relative positon so that you can control the dropdown menu positon */
.menu li {
float:left;
position:relative;
}
/* style the links for the top level */
.menu a, .menu a:visited {
display:block;
font-size:11px;
text-decoration:none;
font:arial;
font-weight:550;
height:40px;
border:0px solid #b17323;
border-width:0px 0 0px 0px;
padding-left:0px;
line-height:0px;
}
/* style the second level background */
.menu ul ul a.drop, .menu ul ul a.drop:visited {
background:#798fb1 url(arrow1.gif) bottom right no-repeat;
}
/* style the second level hover */
.menu ul ul a.drop:hover {
background:#ffffff url(arrow1.gif) bottom right no-repeat;
}
.menu ul ul :hover > a.drop {
background:#ffffff url(arrow2.gif) bottom right no-repeat;
}
/* style the third level background */
.menu ul ul ul a, .menu ul ul ul a:visited {
background:#ffffff;
color:#3d4058;
width:160px;
}
/* style the third level hover */
.menu ul ul ul a:hover {
background:#de9639;
color:#ffffff;
}
/* hide the sub levels and give them a positon absolute so that they take up no room */
.menu ul ul {
visibility:hidden;
position:absolute;
height:0;
top:25px;
left:0;
border-top:1px solid #798fb1;
}
/* another hack for IE5.5 */
* html .menu ul ul {
top:25px;
t\op:25px;
}
/* position the third level flyout menu */
.menu ul ul ul {
left:126px;
top:-1px;
}
/* position the third level flyout menu for a left flyout */
.menu ul ul ul.left {
left:-60px;
}
/* style the table so that it takes no ppart in the layout - required for IE to work */
.menu table {
position:absolute;
top:0;
left:0;
border-collapse:collapse;
;
}
/* style the second level links */
.menu ul ul a, .menu ul ul a:visited {
background:#798fb1;
color:#ffffff;
height:auto;
line-height:1em;
padding:5px 10px;
width:105px;
border-width:0 1px 1px 1px;
}
/* style the second level links */
.menu2 ul ul a, .menu2 ul ul a:visited {
background:#f4eed3;
color:#b17323;
height:auto;
line-height:11em;
padding:5px 10px;
width:100px;
border-width:0 1px 1px 1px;
}
/* yet another hack for IE5.5 */
* html .menu ul ul a, * html .menu ul ul a:visited {
width:100px;
w\idth:100px;
}
/* style the top level hover */
.menu a:hover, .menu ul ul a:hover {
color:#3d4058;
background:#ffffff;
}
.menu :hover > a, .menu ul ul :hover > a {
color:#3d4058;
background:#ffffff;
}
/* make the second level visible when hover on first level list OR link */
.menu ul li:hover ul, .menu ul a:hover ul {
visibility:visible;
}
/* keep the third level hidden when you hover on first level list OR link */
.menu ul :hover ul ul {
visibility:hidden;
}
/* make the third level visible when you hover over second level list OR link */
.menu ul :hover ul :hover ul {
visibility:visible;
}
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>
tomm[.]bnesfinest[.]net/underattackwebsite/test/menu.html tomm[.]bnesfinest[.]net/underattackwebsite/test/menu.css For some reason, it refuses to rollover... in the actual site I've tried implementing it, all of them come up in the secondary start (black text, blue bg) rather than the default state (white text, transparent bg). Neither times does it actually "rollover". What am I doing wrong? Code from: webvamp[.]co[.]uk/blog/coding/graphical-css-rollover-menu/#example Hey guys, Can someone help me with the following code? I've attempted two fixes, one that alters caching with JavaScript, and another fix with apache, but the server admin is restricting access to the config file. Does anyone know a work around besides these two methods (even if it's semantically incorrect)? 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>Untitled Document</title>
<style type="text/css">
/*- Menu Tabs I--------------------------- */
#tabsI {
float:left;
width:100%;
/*background:#EFF4FA;*/
font-size:93%;
line-height:normal;
border-bottom:1px solid #DD740B;
}
#tabsI ul {
margin:0;
padding:10px 10px 0 50px;
list-style:none;
padding-bottom: 1px;
}
#tabsI li {
display:inline;
margin:0;
padding:0;
}
#tabsI a {
float:left;
background:url("http://exploding-boy.com/images/cssmenus/tableftI.gif") no-repeat left top;
margin:0;
padding:0 0 0 5px;
text-decoration:none;
}
#tabsI a span {
float:left;
display:block;
background:url("http://exploding-boy.com/images/cssmenus/tabrightI.gif") no-repeat right top;
padding:5px 15px 4px 6px;
color:#FFF;
}
/* Commented Backslash Hack hides rule from IE5-Mac \*/
#tabsI a span {float:none;}
/* End IE5-Mac hack */
#tabsI a:hover span {
color:#FFF;
}
#tabsI a:hover {
background-position:0% -42px;
}
#tabsI a:hover span {
background-position:100% -42px;
}
</style>
</head>
<body>
<ul>
<div id="tabsI">
<ul>
<li><a href="#" title="Link 1"><span>Link 1</span></a></li>
<li><a href="#" title="Link 2"><span>Link 2</span></a></li>
<li><a href="#" title="Link 3"><span>Link 3</span></a></li>
</ul>
</div>
</body>
</html>
Hi, I really help someone could help me accomplish what I need in order to finish a project for a friend I started, I am still a newb at CSS and HTML, so if you could explain to me in simple terms this would be ideal. I want to place a button located here in the menu of the website. The image will link to a booking page, I would also like a hover image too if possible. Maybe even have just text with Bold formatting then have an arrow or icon next to it, either way would be fine. If any body could help me this would be great. This is what the index.html file looks like; <body> <div id="wrapper"> <div id="topwrapper"></div> <div id="mainwrapper"> <!-- Header Start --> <div id="header"> <div class="center"> <!-- Logo Start --> <div id="logo"> <a href="./index.html"><img src="./images/logo.png" alt="logo" /></a> </div> <!-- Logo End --> <div id="headerright"> <!-- Menu Navigation Start --> <div id="mainmenu"> <div id="myslidemenu" class="jqueryslidemenu"> <ul> <li><a href="http://" class="selected">Home</a> <li><a href="./about.html">About</a> <ul> <li><a href="#">Our Company</a></li> <li><a href="#">Vision and Mission</a></li> <li><a href="#">Testomonials</a></li> </ul> </li> <li><a href="#./.html">Services</a> <li><a href="./.html">Vehicles</a> <ul> <li><a href="#"></a></li> <li><a href="#"></a></li> <li><a href="#"></a></li> <li><a href="#"></a> </li> </ul> </li> <li><a href="./.html">Testomonials</a> <ul> </ul> <li><a href="./html">Contact</a></li> </ul> </div> </div> <!-- Menu Navigation End --> </div> </div> </div> Thanks so much in advance, I cant place an image to show you so if anyone understands this confusing posts and still wants to help, email me so I can send you an example. |
|||||||