CSS - Pop-out Menu Text Gets Tiny, Box Gets Too Big When I Link Css Instead Of Embedding It

PROBLEM: I create a nice button using the sliding doors technique for rounded corners. But the button displays with 100% width unless I float it. My layout requires that the buttons be inline with the text, so floating won't work. Anyone know an alternative?

I wouldn't mind floating but I want the button to show inline with the text. When I use float:left, it removes it from the inline flow.

Basically, I want a very modular button that can be used in several different places on a page. In many cases, floating is fine because the mockup has it out of the inline text, but I want to use it there, too.

Here's the HTML:

<a class="button" href="#"><span>Update Profile</span></a>

Here's the css:

a.button:link, a.button:visited {
background:url(button_right.gif) no-repeat right top;
}
a.button span:hover, a.button span:active {
background:url(button_left_hover.gif) no-repeat right top;
}
a.button span {
background:url(button_left.gif) no-repeat left top;
color:#fff;
cursorointer;
display:block;
height:20px;
line-height:20px;
margin:0 2px 0 0;
padding:0 10px;
position:relative;
white-space:nowrap;
}

I have my links defined with a dashed border, but I don't want this on linked images and I'm trying to figure out if I can accomplish this with CSS only without additional markup in my HTML file.

Here is a sample file:

http://www. shawkey.com/test/imagebordertest.html

Any suggestions on how I can get the dashed border to not appear below the image and only appear below the text with just CSS?

i am trying to find anywhere that may have something to describe a collapse and expand link menu in css. I can't find one that use's mainly css it is all javascript of somekind does anyone know where i could find one.

http://www.dudley.nhs.uk/

In I.E. 7, when I click on the links in the right hand menu, the whole link/block turns white.

Although it doesn't strictly matter (as person gets redirected), I'd like to resolve the issue as it's quite annoying.

It works when the code is: Code:

.gallery a {
	text-decoration:none;
	display:block;
	padding:5px 5px 5px 20px;
	width:125px;
	color:black;
	background: url(../images/arrow.gif) no-repeat 10px 10px; /* Light green */
}

.gallery a:hover {
	background: url(../images/arrowr.gif) no-repeat 11px 10px; /* Dark green*/
	color:black;
}

but fails when I add a background colour such as: Code:

.gallery a, .gallery a:visited {
	text-decoration:none;
	display:block;
	padding:5px 5px 5px 20px;
	width:125px;
	color:black;
	background: #cfc url(../images/arrow.gif) no-repeat 10px 10px; /* Light green */
}

.gallery a:hover {
	background: #3c0 url(../images/arrowr.gif) no-repeat 11px 10px; /* Dark green*/
	color:black;
}

Any clues?

Thanks!

Hi,

I have this in the html and so on for each page

<div id="nav">
<ul>
<li class="current"><a href="one.htm">one</a></li>
<li><a href="two.htm">two</a></li>
<li><a href="three.htm">three</a></li>
</ul>
</div>

Then css:

#nav ul li.current a{
background:#CCCCCC;
color:#000000;
}

But I don't want the first page's link to change colour until it is
clicked. Otherwise the menu comes up with first link always
active before anything has been selected. It looks wrong.

Is there anyway around this in css?

Thanks,
jdl

Hi,

I need to adjust only the 1st link(for 1st menu item) of my main menu. I have used pat pat template and have managed to apply a background image for the first item. Here is the css:

Code:

#first-suckerfish-vertical{
background:url(../images/menutop.jpg) no-repeat;
height:75px;
margin-top:-2.5px !important;
margin-top:-3px;
position:relative;
}

Now to apply style on the main menu item, i use a.mainlevel.
but i cant use the a.mainlevel..coz it will adjust all the links. I need to apply style only to the first link of my menu.

I am wondering if there's a way in css to access a class from another class or id. I already have this style(#first-suckerfish-vertical) for the 1st menu item. is it possible now to access the a.mainlevel from it..

Thx

Hello there, im new to the forums. decided to register because im having a bit of a problem with CSS/HTML.(pretty inexperienced with css).

Heres what i wanna do: I have a social website where users can register and comment on things etc. I want to show a drop down menu as soon as users hover their mouse over a user name. So i took this script:

http://javascript-array.com/scripts...drop_down_menu/

And modified it. But i cant figure out how to make it work if the user name is surrounded with other text, it automatically creates a new line. Heres my code:

Code:

<html>
	<head>
		<style> 
			<!--


				#sddm a
				{	display: block;
				}



				#sddm span
				{	position: absolute;
					visibility: hidden;
					margin: 0;
					padding: 0;
					background: #3D97D6;
					border: 1px solid #5970B2}
					

					#sddm span a
					{	position: relative;
						display: block;
						margin: 0;
						padding: 5px 10px;
						width: auto;
						white-space: nowrap;
						text-align: left;
						text-decoration: none;
						background: #3D97D6;
						color: #FFF;
						font: 11px arial}

					#sddm span a:hover
					{	background: #2875DE;
						color: #FFF}

			-->
		</style>
		<script type="text/javascript">
			// Copyright 2006-2007 javascript-array.com

			var timeout	= 500;
			var closetimer	= 0;
			var ddmenuitem	= 0;

			// open hidden layer
			function mopen(id)
			{	
				// cancel close timer
				mcancelclosetime();

				// close old layer
				if(ddmenuitem) ddmenuitem.style.visibility = 'hidden';

				// get new layer and show it
				ddmenuitem = document.getElementById(id);
				ddmenuitem.style.visibility = 'visible';

			}
			// close showed layer
			function mclose()
			{
				if(ddmenuitem) ddmenuitem.style.visibility = 'hidden';
			}

			// go close timer
			function mclosetime()
			{
				closetimer = window.setTimeout(mclose, timeout);
			}

			// cancel close timer
			function mcancelclosetime()
			{
				if(closetimer)
				{
					window.clearTimeout(closetimer);
					closetimer = null;
				}
			}

			// close layer when click-out
			document.onclick = mclose; 

		</script>

	</head>



	<body>

		<span id="sddm">
			<a href="#" onmouseover="mopen('m1')" onmouseout="mclosetime()">This is a username</a>
			<span id="m1" onmouseover="mcancelclosetime()" onmouseout="mclosetime()">
				<img src="linktoav" alt="avatar" /> <font color="#ffffff"><b>Koen</b></font></a>
				<a href="#">Add as Friend</a>
				<a href="#">Send message</a>

				<a href="#">View Profile</a>
				<a href="#">Report</a>
			</span>		
		</span>

		this text comes after the username
	</body>

</html>

So i hope its clear what i wanna do, i always find it hard to explain things

Hello everone, i just joined today in this community and looking forward to enjoying here for a quite long time as i want to develop myself with css.

I have a horizontal menu which is based on an image that has three layers: unvisited link, hover link, active link.

but somehow i cant get my active links to work and cant understand where im making a mistake. you can find php and css codes below. and i appreciate any single comments suggestions.

PHP code:
Code:

<?php

$block = ( is_front_page() ? 'h1' : 'div' );

// arguments for wp_list_pages
$list_args = k2_get_page_list_args(); // this function is pluggable

?>

<?php echo "<$block class='blog-title'>"; ?>
	<a href="<?php echo get_option('home'); ?>/" accesskey="1"><?php bloginfo('name'); ?></a>
<?php echo "</$block>"; ?>

<p class="description"><?php bloginfo('description'); ?>


<ul id="menu">
   <li id="home"><a href=""<?php if(is_home() || is_single() || is_category() || is_tag() || is_author() || is_year() || is_month()) { echo ' class="active"'; }?>>home</a></li>
		 <li id="archives"><a href="?page_id=2"<?php if(is_page('archives')) echo ' class="active"'; ?>>archives</a></li>
         <li id="news"><a href="?page_id=35"<?php if(is_page('news')) echo ' class="active"'; ?>>news</a></li>
         <li id="contact" class="last<?php if(is_page('contact')) echo ' active"'; ?>"><a href="?page_id=31">contact</a></li>

CSS code:
Code:

#menu {
     list-style: none;
     padding: 0;
     margin: -105px 25px;
     width: 332px;
     height: 30px;
     background: url('images/menu.gif');
     position: relative;
}

	ul#menu li { width: 80px;
	            height: 30px;
				padding: 0 4px 0 0;
				text-indent: -900px;
				float: left;
				}

	ul#menu li.last { padding: 0; }

		ul#menu li a, ul#menu li a:visited, ul#menu li a:hover { display: block; width: 80px; height: 30px; background: transparent url('images/menu.gif') no-repeat; outline: none; }

			ul#menu li#home a, ul#menu li#home a:visited { background-position: 0 0; }	

			ul#menu li#archives a, ul#menu li#archives a:visited { background-position: -84px 0; }

			ul#menu li#news a, ul#menu li#news a:visited { background-position: -168px 0; }

			ul#menu li#contact a, ul#menu li#contact a:visited { background-position: -252px 0; }

				ul#menu li#home a:hover { background-position: 0 -30px; }

				ul#menu li#archives a:hover { background-position: -84px -30px; }

				ul#menu li#news a:hover { background-position: -168px -30px; }

				ul#menu li#contact a:hover { background-position: -252px -30px; }

			.home ul#menu li#home a, .home ul#menu li#home a:visited, .home ul#menu li#home a:hover { background-position: 0 -60px; cursor: default; }

			.archives ul#menu li#archives a, .archives ul#menu li#archives a:visited, .archives ul#menu li#archives a:hover { background-position: -84px -60px; cursor: default; }

			.news ul#menu li#news a, .news ul#menu li#news a:visited, .news ul#menu li#news a:hover { background-position: -168px -60px; cursor: default; }

			.contact ul#menu li#contact a, .contact ul#menu li#contact a:visited, .contact ul#menu li#contact a:hover { background-position: -252px -60px; cursor: default; }

i think the problem may be with the last 4 lines of CSS code because they are related to the active links but dont know how i can find out the problem.

thank you for any single suggestions and comments.

I have a menu where the submenu li's have a blue/darker blue background color and hover color.

I have one set of submenu items where I would like to change the background and hover colors for that set only, but haven't been successful in writing the second set of code, the original colors still show up

Here's the part of my styles for the list that I'm trying to change..
Code:

/* original backgrounds for the menu */
ul.menu li ul li a {
  background: #ccc;
  color: #000;
  padding-left: 20px;
}

ul.menu li ul li a:hover {
  background: #aaa;
  border-left: 5px #000 solid;
  padding-left: 15px;
}

Is it the way I tried to rename the style?
Code:

/* change backgrounds to shades of green for one sub menu */
.green ul.menu li ul li a {
  background: #afe4bf;
  color: #000;
  padding-left: 20px;
}

.green ul.menu li ul li a:hover {
  background: #88b796;
  border-left: 5px #000 solid;
  padding-left: 15px;
}

thanks in advance for any help, Kathy

Hi all new member, just learning css! need help targeting my menu system?

Html so far! -its a dynamic menu system, and i have no control of the naming system of the li
Code:

<div class="nav-container">
<ul id="nav">
<li>
<a href="http://localhost/">Home</a>
</li>

<li class="level0 nav-1 level-top first">
<a class="level-top" href="http://localhost/mens.html">
<span>Mens</span>
</a>
</li>


<li class="level0 nav-2 level-top">
<a class="level-top" href="http://localhost/womens.html">
<span>Womens</span>
</a>
</li>

</ul>
</div>

I need to target the li classes - each one individual to bring in a different image for each when rolled over.

Css i have for one of the examples:-

.level0 nav-2 level-top li { float:left; padding:0px; font-size:14px; font-weight:bold; color:#000; text-transform:uppercase;
background-image:url("navigation.gif"); width:85px;}

.level0 nav-2 level-top li a:hover { color:#FDDD15; background-image:url("navigation.gif"); width:85px;background-position:0 -20px;}

But its not right, not targetting it! - what is the correct path to target the different nav's?

Thanks

I know how to position regular text using the in-line style "text-align:right", but when I try to do that with a link I get nowhere. Simplified example:

Code:

<html>
<body>
<td><p style="text-align:right">Google</p></td>
<td><a href="http://www.google.com" style="text-align:right">Google</a></td>
<td><a style="text-align:right" href="http://www.google.com">Google</a></td>
<td><span style="text-align:right"><a href="http://www.google.com">Google</a></span></td>
<td style="text-align:right"><a href="http://www.google.com" style="text-align:right">Google</a></td>
<span style="text-align:right"><td><a href="http://www.google.com" style="text-align:right">Google</a></td></span>
</body>
</html>

The first body line works fine to move the text to the right, but the link in lines 2-5 of the body are stuck on the left. Any suggestions?

(My actual code invokes a class from a css page in a particular <td> and I'm trying to force a link in that <td> to the right using an in-line style; while I can do that for regular text I haven't found the secret of doing that for a link.)

I got this snippet from the Whateverhover website ... Code:

li.folder:hover   { z-index: 10 }		
ul ul, li:hover ul ul   { display: none }
li:hover ul, li:hover li:hover ul   { display: block }

I've managed to get it to work properly in IE and Firefox, but not in Netscape. The problem (rather, the symptom) in Netscape is that when one hovers an anchor that's inside a line item (<li><a ...></a></li>), the submenues don't pop up, but when the line item that contains the anchor is hovered, the menu pops up but won't stay up as the mouse pointer is moved from the line item to the submenu's line item. Again, this works fine in IE and Firefox.

Here's how I've used it: Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<style type="text/css">
body		{ margin: 0; behavior: url("../htcmime.php?file=csshover2.htc") }
*		{ font-family: Tahoma,Arial,Verdana,Helvetica,sans-serif; font-size: 10px }
table.nav	{ border-width: 1px; border-color: #000000; background-color: #FFFFFF }
td.links	{ vertical-align: top; width: 155px }
ul,li,a		{ margin: 0; padding: 0; border: 0 }
ul		{ width: 155px; background-color: #E2E2EF; list-style: none }
li		{ position: relative; border: 1px solid #FFFFFF; text-indent: 3px; padding: 1px; z-index: 9 }
li.folder	{  }		
li.folder ul	{ position: absolute; left: 150px; /* IE */ top: 0px }		
li.folder>ul	{ left: 145px /* others */ }
a		{  }
a.submenu	{  }
li>a		{ width: auto } /* others */
li a.submenu	{  }
/* regular hovers */
a:hover		{ color: #FFFFFF; letter-spacing: 1px; font-variant: small-caps }
li.folder a:hover	{ background-color: #000080 }
/* hovers with specificity */
li.folder:hover				{ z-index: 10 }
ul ul, li:hover ul ul			{ display: none }
li:hover ul, li:hover li:hover ul	{ display: block }</style>
</head>

<body>
<table class="nav">
   <tr>
      <td class="links">
      <!-- Start Navigation Menues -->
      <table>
         <tr>
            <td nowrap>
            <ul>
               <li class="folder">
               <a class="submenu" href="#">Kitchenware ></a> 
               <ul>
                  <li class="folder">
                  <a href="#" class="submenu">Cutlery ></a> 
                  <ul>
                     <li><a class="submenu" href="#">Cased Sets</a> </li>
                     <li><a class="submenu" href="#">Poultry Shears</a> </li>
                     <li><a class="submenu" href="#">Scissors</a> </li>
                     <li><a class="submenu" href="#">Sets</a> </li>
                  </ul>
               </li>
               </ul>
            </li>
            </ul>
            </td>
         </tr>
      </table>
      </td>
   </tr>
</table>

</body>
</html>

I've replace the URLs with #s for readbility. How can I make it so that Netscape knows the mouse pointer is over the line item when it's hovering the anchor?

Hi,

Is there any way to change the color of the menu text for that current page? For example when I'm on the 'About Us' page on my website, I want the text to be blue or #00175d to be precise.

I am not very good at coding or editing HTML/CSS, so I don't know how to do this.

All I know is that my website has a class on the body, and each menu item has a unique ID.

My website is: http://firstcareambulance .org/
Any help is appreciated.

Thanks

Alright - so I just changed my Java Script based navigation menu over to a CSS based menu for better search engine crawling and easy of use.

Here's what I want, and can't seem to do: The original font color of a the links is "white". Easy enough. When you mouse over the link it turns light grey. Looks great! This part works wonders.

Here's the problem...When you visit a page in the navigation, the "hover: change color to grey" doesn't work anymore. Instead of remains solid white.

Is there a fix/trick to making it work so that always always when you hover over these links they change to grey. Whether the link is active, or already visited, it turns grey during hover.

Thank for your help! To see this in action visit Window Film and More.com and take a look at the left navigation.