[CSS] Problema con menu help me :-( [Archivio]

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/archivio/creativamente/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 è:

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

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

</li>
<li>


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

</li>
<li>

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

</li>
<li>


</li>
</ul>

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

</div>

</body>
</html>

mentre il codice CSS è:

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:
#fab corrisponde ad un #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 :)

#menu dd a{
background:#fdf8bf;

color: #ff324

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