[CSS] Problema con menu help me :-(

D4rkAng3l · 12-09-2008, 17:51

Ciao,
stò adattando un menu css ma mi stò impiccando con un problema che mi manda ai pazzi.
Se andate su: http://www.siatec.net/andrea/archivi...nte/home3.html potete vedere il menu in questione.
Passando il mouse sopra i bottoni appaiono le varie tendine con sfondo giallino\panna. Come potrete notare il testo non si legge perchè è dello stesso colore. Ecco, non riesco a cambiare il colore di questo testo per renderlo visibile e non ne riesco ad uscire...probabilmente non è una cosa molto difficile ma mi sono proprio bloccato...mi dareste una mano?

Il codice HTML è:

Codice:

<!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=utf-8" />
<title>Documento senza titolo</title>
<link rel="stylesheet" href="default3.css" type="text/css" />
</head>

<body>

  <div id="centrato">
  
     <ul id="menu">
<li>
<!--[if lte IE 6]><a href="#nogo"><table><tr><td><![endif]-->
<dl class="one">

	<dt><a href="../menu/index.html">CHI SIAMO</a></dt>
	<dd><a href="../menu/zero_dollars.html" title="The zero dollar ads page">zero dollars</a></dd>
	<dd><a href="../menu/embed.html" title="Wrapping text around images">wrapping text</a></dd>
	<dd><a href="../menu/form.html" title="Styling forms">styled form</a></dd>
	<dd><a href="../menu/nodots.html" title="Removing active/focus borders">active focus</a></dd>
	<dd><a href="../menu/shadow_boxing.html" title="Multi-position drop shadow">shadow boxing</a></dd>

	<dd><a href="../menu/old_master.html" title="Image Map for detailed information">image map</a></dd>
	<dd><a href="../menu/bodies.html" title="fun with background images">fun with backgrounds</a></dd>
	<dd><a href="../menu/fade_scroll.html" title="fade-out scrolling">fade scrolling</a></dd>
	<dd><a href="../menu/em_images.html" title="em size images compared">em sized images</a></dd>
</dl>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li>
<!--[if lte IE 6]><a href="#nogo"><table><tr><td><![endif]-->

<dl class="two">
	<dt><a href="index.html">GALLERY</a></dt>
	<dd><a href="spies.html" title="a coded list of spies">spies menu</a></dd>
	<dd><a href="vertical.html" title="a horizontal vertical menu">vertical menu</a></dd>
	<dd><a href="expand.html" title="an enlarging unordered list">enlarging list</a></dd>
	<dd><a href="enlarge.html" title="an unordered list with link images">link images</a></dd>
	<dd><a href="cross.html" title="non-rectangular links">non-rectangular links</a></dd>

	<dd><a href="jigsaw.html" title="jigsaw links">jigsaw links</a></dd>
	<dd><a href="circles.html" title="circular links">circular links</a></dd>
</dl>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li>
<!--[if lte IE 6]><a href="#nogo"><table><tr><td><![endif]-->
<dl class="three">
	<dt><a href="../layouts/index.html">CONTATTI</a></dt>
	<dd><a href="../layouts/bodyfix.html" title="Cross browser fixed layout">Fixed 1</a></dd>

	<dd><a href="../layouts/body2.html" title="Cross browser fixed layout">Fixed 2</a></dd>
	<dd><a href="../layouts/body4.html" title="Cross browser fixed layout">Fixed 3</a></dd>
	<dd><a href="../layouts/body5.html" title="Cross browser fixed layout">Fixed 4</a></dd>
	<dd><a href="../layouts/minimum.html" title="A simple minimum width layout">minimum width for Internet Explorer</a></dd>
</dl>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li>
<!--[if lte IE 6]><a href="#nogo"><table><tr><td><![endif]-->


</li>
</ul>
     
     <div id="logo"></div>
  
  </div>

</body>
</html>

mentre il codice CSS è:

Codice:

body, html{
  margin: 0;
  padding: 0;
  text-align: center;
  background-color: #cbd200;
  font-family: Verdana, Arial, Helvetica, sans-serif;
  height:100%;
}


#centrato{
  width: 80%;
  margin-left: auto;
  margin-right: auto;
}

#logo{
   background-image: url(http://www.bbcsite.com/immagini/creativa-mente/33_home-835x600-sfondo.gif);
   background-repeat: no-repeat;
   width: 835px;
   height: 600px;
   position:absolute;
   top:50%;
   left:50%;
   margin-top: -300px;
   margin-left: -480px;
}

#menu{
    list-style-type: none; 
	margin: 40px 0 200px 15px; 
	padding:0;
}

#menu li{
    float: left; 
	padding: 0; 
	margin: 0 1px 0 0; 
	position: relative; 
	width: 150px;
	height: 1px; z-index:100;
}

#menu li a, #menu li a:visited{
   text-decoration: none;
}

#menu dl{ 
   position: absolute; 
   top: 0; 
   left: 0;
   width: 150px;
   margin: 0; 
   padding: 0; 
   background: transparent url(transparency.gif);
   font-family: Verdana, Arial, Helvetica, sans-serif;
}


#menu dt{
   background: #e3004a;
   margin: 0;
   font-size: 13px;
   text-align: left;
   border-bottom:1px solid #b2ff60; 
   width: 150px; 
   float: left;
}

#menu dd{
   display: none; 
   background: transparent; 
   border-bottom: 1px solid #b2ff60; 
   clear: left; 
   margin: 0; 
   padding: 0; 
   color: #fff;
   font-size: 13px; 
   text-align: left;
}

#menu dt a{
   display: block; 
   color: #fff; 
   padding: 5px 5px 5px 20px; 
   width: 125px;
}


#menu dt a:visited{
   display: block; 
   color: #fff; 
   padding: 5px 5px 5px 20px; 
   width: 125px;
   }


#menu dd a{
   background:#fdf8bf; 
   color:#ff8; 
   text-decoration:none; 
   display:block; 
   padding:4px 5px 4px 20px; 
   width:276px;
}

#menu dd a:visited {
   background:#fdf8bf; 
   color:#ff8; 
   text-decoration:none; 
   display:block; 
   padding:4px 5px 4px 20px; 
   width:276px;
}

#menu li a:hover {border:0;}

#menu li:hover dd, #menu li a:hover dd {display:block;}
#menu li:hover dl, #menu li a:hover dl {width:301px; border-bottom:15px solid #e2dfa8;}
#menu li:hover dt a, #menu li a:hover dt a, #menu dd a:hover {background: #e2dfa8; color:#e22bc6;}

Grazie
Andrea

Oceans11 · 12-09-2008, 18:58

Il problema è proprio nei colori che dai....sono troppo simili.

Non sono una cima con Css ma, se non ricordo male, posso affermare che usa (almeno) 2 tipi di notazione per i colori: a 3 e a 6 cifre esadecimali.

se non vado errato un codice del tipo:

Codice:

#fab

corrisponde ad un

Codice:

#ffaabb

nel tuo stylesheet se guardi i vari color: sono tutti #fff ed i tuoi background invece sono #fdf8bf.....praticamente sono uguali!!!!

xciaoatuttix · 12-09-2008, 19:12

ciao prova a sostituire questo pezzo nel CSS
cosi lo vedi blu

Codice:

#menu dd a{
   background:#fdf8bf; 

   color: #ff324
   
   text-decoration:none; 
   display:block; 
   padding:4px 5px 4px 20px; 
   width:276px;
}

12-09-2008, 18:58	#2
Oceans11 Senior Member Iscritto dal: Sep 2005 Città: Torino Messaggi: 606	Il problema è proprio nei colori che dai....sono troppo simili. Non sono una cima con Css ma, se non ricordo male, posso affermare che usa (almeno) 2 tipi di notazione per i colori: a 3 e a 6 cifre esadecimali. se non vado errato un codice del tipo: Codice: #fab corrisponde ad un Codice: #ffaabb nel tuo stylesheet se guardi i vari color: sono tutti #fff ed i tuoi background invece sono #fdf8bf.....praticamente sono uguali!!!! __________________ "Se proprio dovete piratare un prodotto, preferiamo che sia il nostro piuttosto che quello di qualcun altro." [Jeff Raikes] "Pirating software? Choose Microsoft!"

12-09-2008, 19:12	#3
xciaoatuttix Member Iscritto dal: Jul 2008 Messaggi: 255	ciao prova a sostituire questo pezzo nel CSS cosi lo vedi blu Codice: #menu dd a{ background:#fdf8bf; color: #ff324 text-decoration:none; display:block; padding:4px 5px 4px 20px; width:276px; } Ultima modifica di xciaoatuttix : 12-09-2008 alle 19:20.

Strumenti
Mostra una versione stampabile Invia questa pagina per email