CSS - Image Menu Adjusts With Font Resize?!?

I have just moved to working with layers as opposed tables/cells.
Previously i had a table with three cells, at 86%, 4%, and 16% widths so it spanned the screen. The first cell's content only partly fills the cell, so when the browser is resized (made smaller), each cell stays on the same line and the table happily resize to the point where it can no longer get smaller before it wraps text I have tried to replicate this using 3 div's of the same width as the cells, with float left, however, the browser can hardly be resized at all from full screen without the third div moving onto the next line. If i make the 2nd and third divs larger it works slightly better, however the content does not look right in the layers Therefore can anyone point out how i might be able to achieve better DIV resize when the browser resizes please. Thanks very much

Ed

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 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 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

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,

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.

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;
}

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>

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>

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

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.

Im trying to make a link that is based on 2 images, one for the un-hovered or normal state, and the other for the hover state. I just did 2 of these at 3dotmedia.com/redesign and now I'm trying to do the same thing at greedydogkennel.com/redesign but it WILL NOT WORK.
I am totally stumped, it has to be something to do with the positioning inside my css I assume...

on the page, I want the pictures of the dogs to be normal, but when hovered I have a frosty shaded grey image (as in some kind of lighting) to serve as the hover state..I am masking the a href with a class with a transparent .gif (since SOMETHING has to serve as the object of the anchor yes?) but here is my css:

.rock-link {background-image: url(looks/Rock_small_w_frame.jpg); }

.rock-link:hover {background-image: url(looks/Rock_small_w_frame-up.jpg); }

.suade-link {background-image: url(looks/Suadey_Ladysmall_w_frame.jpg); }

.suade-link:hover {background-image: url(looks/Suadey_Ladysmall_w_frame-up.jpg); }

and the HTML is as follows:

<a href="suade.html" class="suade-link"><img src="looks/seethru2.gif" border="0"/></a>
<img src="looks/spacer2.gif" border="0" />
<a href="rock.html" class="rock"><img src="looks/seethru.gif" border="0" /></a></div>

but there is nothing that displays, only the transparent .gif

on the index page you will not see any images under the heading "The Dogs" because this is where the problem is, but if you click on any of the links you will see the pages where I have not applied the class for the a href to take on the hover states, just so you can see how the images look and where they appear.

I have done this so many times, and my code is IDENTICAL at 3dotmedia.com/redesign and it works fine...any help would be GREATLY appreciated...it has to be something Im missing, but WHAT?!?!?

thanks.

Hey everyone.

I'm trying to create a cool menu system for my site and I wanted it to be images only.

Its he -
http://www.how-to-pass.info/topf2.html

I wanted this to have cool mouse over images, as well as displaying drop down menus.

Unfortunately, there are two problems:
1. Mouseover images don't display
2. Drop down menu disapears when you move over the menus.


Can anyone tell me how I can get this to work in a simple way?
I dont much hardly anything about style sheets and javascript etc.

Many Thanks.

I have a menu within my content thus:

Code:

div class="contentMenu">
<ul>
<li>
<a href="#" title="Find out more"><img src="images/stories/memories/FamilyLife/thumb/familyFWHarveysBuildingsDorchester.jpg" alt="" />
<span>Family life</span></a>
</li>
.
.
.
<li>
<a href="#" title="Find out more"><img src="images/stories/memories/SightsAndSounds/thumb/sightsMOOsmington1963.jpg" alt="" />
<span>Sights/Sounds</span></a>
</li>
</ul>
</div>

I want the menu items not to spill onto the next line when I shrink the browser. I have tried overflow:hidden; but does not stop the last one taking up a new "line". There are 7 menu items across the page. The CSS so far is:

Code:

.contentMenu {
background-color:#FFFFCC;
border:1px solid #B9C0F7;
margin-bottom:6px;
padding:8px 0 5px;
}
#main .contentMenu ul, #main2 .contentMenu ul {
margin:0 auto;
overflow:hidden;
width:95%;
}
#main ul, #main2 ul {
list-style-position:outside;
list-style-type:square;
margin:0 0 0 20px;
padding:10px 0;
}
#main ul li, #main2 ul li {
margin:0;
padding:0 0 0 10px;
}
.contentMenu li {
float:left;
list-style-image:none;
list-style-position:outside;
list-style-type:none;
margin:0;
text-align:center;
width:15%;
}
.contentMenu a {
padding-top:4px;
text-decoration:none;
}
.contentMenu img {
border:medium none;
height:62px;
width:55px;
}

Of course the meni images need to be evenly spaced across the page. Would appreciate if someone could point me in the right direction.