colore sfondo menu

**psykopear** · 26-06-2008, 20:50

Mi spiego. Ho fatto un menu coi css, e gli ho impostato come colore di sfondo quando il mouse ci passa sopra (a:hover) uno diverso da quello dello sfondo normale. Però il colore cambia solo nella parte intorno al testo, mentre io vorrei che cambiasse in tutta l'altezza del div (ma ovviamente rimanendo nella larghezza del testo). Per capirci ora è così

e appunto vorrei che il blu della scritte home copra tutta l'altezza della barra nera. Come faccio?

**Lathspell** · 27-06-2008, 08:48

come hai strutturato il menu via html e css? puoi postarci la parte di codice inerente?

**gengix** · 27-06-2008, 09:00

Abituati a postare il codice che fai, altrimenti diventa difficile aiutarti.

Ora il motivo per cui accade questo è perchè il link è un elemento inline e quindi l'area di contenuto è definita dal riquadro che genera il font più eventuali margini bordi o padding.

Se vuoi attribuire una larghezza o un'altezza al link devi dargli la proprietà display:block.

**psykopear** · 27-06-2008, 14:18

Originariamente inviato da gengix
Abituati a postare il codice che fai, altrimenti diventa difficile aiutarti.

Ora il motivo per cui accade questo è perchè il link è un elemento inline e quindi l'area di contenuto è definita dal riquadro che genera il font più eventuali margini bordi o padding.

Se vuoi attribuire una larghezza o un'altezza al link devi dargli la proprietà display:block.

si, ma se metto display block all'a:hover, quando ci passo soprai link me li mettea tutta larghezza lasciando sotto gli altri, nsomma brutto e inusabile. Si avete ragione, ecco i codici

index.html

codice:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html><head>



<title>Psykopear's websapce</title><meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<style type="text/css">
@import url("syle.css");
a#viewcss{color: #00f;font-weight: bold}
</style>


</head><body>
<div id="container">
    <div id="header">
            [img]header.png[/img]

    </div>
    <div id="navigation">
	<ul>[*]Home[*]Sirm2[*]Radio On Shell[*]Download[*]Musica[/list]
    </div>
    <div id="content">
	<iframe src="homepage.html" id="iframe1" frameborder="0" name="iframe1"></iframe>
    </div>
    <div id="footer">Grafica e layout sono liberamente utilizzabili. Per info
        <a href="http://jigsaw.w3.org/css-validator/">
            
        </a>
    </div>
</div>
</body></html>

ed ecco invece il css

codice:

html,body{margin: 0;padding: 0;height: 100%}
body{font-family: arial,sans-serif;font-size: 76%}
div#container{position: relative; width:727px; margin: 0 auto;text-align: left;border-left: 2px solid #2988b9;border-right: 2px solid #2988b9; border-top: 2px solid #2988b9;}

body>div#container{height: auto; min-height: 100%}

/*stili generici, su header e footer*/
div#header{margin: 0 auto; /*padding: 0 auto;*/ color: #ff0; text-align: center}
h1,h2{margin: 0;padding:0}
h1{padding-left:0.5em;font: bold 2.3em/80px arial,serif}
h2{color: #999;font-size: 1.5em}
div#footer{position:absolute; bottom: 0; width: 716px}
div#footer{text-align:center;padding: 0.5em;
    background-color: #2988b9; color: #000}
div#footer a{color: #fff;font-weight: bold;text-decoration: underline}

/*stili specifici per il layout*/
div#navigation{background-color:#000000; text-align: center}
div#content{padding: 0 1.5em 5em}
iframe{width: 100%}


/*stili per la navigazione*/

div#navigation ul{display: inline; margin: 0; padding: 0; list-style-type: none;}
/*div#navigation ul:hover{background: #2988b9}*/
div#navigation li{display: inline; margin: 0 0 0 1em; padding: 0} 
div#navigation a{color:#ffffff; font: normal bold 1.2em/2.5em arial,sans-serif; text-decoration: none}
div#navigation a:hover, div#navigation a:focus, div#navigation a:active{color: #fff; background: #2988b9}
div#navigation a#activelink{background: #2988b9;text-decoration: none}

**gengix** · 27-06-2008, 14:29

si, ma se metto display block all'a:hover, quando ci passo soprai link me li mettea tutta larghezza lasciando sotto gli altri, nsomma brutto e inusabile

display:block lo devi dare a div#navigation a e non solo allo stato di hover. Per affiancarli uno all'altro utilizzi la proprietà float:left.

Non è questione di piacere o meno, se vuoi l'effetto che hai detto sul link e non vuoi che lo sfondo si riduca al testo il link DEVE diventare un elemento di blocco, altrimenti non puoi attribuirgli un'altezza o una larghezza.

Altrimenti puoi dare lo sfondo al li, ma in questo caso non avrai l'effetto di hover (o meglio puoi, ma non è supportato da tutti i browser).

**sezenec** · 27-06-2008, 14:38

prova aggiungendo "padding:5px;" in fondo alle classi:
div#navigation a
div#navigation a:hover, div#navigation a:focus, div#navigation a:active

In pratica:
div#navigation a{color:#ffffff; font: normal bold 1.2em/2.5em arial,sans-serif; text-decoration: none;padding:5px;}
div#navigation a:hover, div#navigation a:focus, div#navigation a:active{color: #fff; background: #2988b9; padding:5px;}

Penso che sarebbe comunque meglio fare come dice gengix e riscrivere un codice migliore e che non ti darà mai sorprese.

**psykopear** · 27-06-2008, 14:49

Originariamente inviato da gengix
display:block lo devi dare a div#navigation a e non solo allo stato di hover. Per affiancarli uno all'altro utilizzi la proprietà float:left.

Non è questione di piacere o meno, se vuoi l'effetto che hai detto sul link e non vuoi che lo sfondo si riduca al testo il link DEVE diventare un elemento di blocco, altrimenti non puoi attribuirgli un'altezza o una larghezza.

Altrimenti puoi dare lo sfondo al li, ma in questo caso non avrai l'effetto di hover (o meglio puoi, ma non è supportato da tutti i browser).

ok, capito. Sto provando, ma ancora non è preciso:

intanto ecco il codice

codice:

div#navigation{background-color:#000000; text-align: center; display: block; float: left; width: 727px}
div#content{padding: 0 1.5em 5em}
iframe{width: 100%}


/*stili per la navigazione*/

div#navigation ul{display: inline; margin: 0; padding: 0; list-style-type: none;}
div#navigation li{display: inline; margin: 0 0 0 1em; padding: 0}
div#navigation a{color:#ffffff; font: normal bold 1.2em/2.5em arial,sans-serif; text-decoration: none; float:left}
div#navigation a:hover, div#navigation a:focus, div#navigation a:active{color: #fff; background: #2988b9; display: block; float:left}

Ho anche provato senza quelle due opzioni al div#navigation, ma non va. Così il menù si mette a sinistra, però la voce home è leggermente più alta rispetto alle altre, il div diventa più alto, e quindi l'effetto non è ancora praciso. Allego anche un screen gia che ci siamo.

**psykopear** · 27-06-2008, 15:35

Originariamente inviato da psykopear
ok, capito. Sto provando, ma ancora non è preciso:

intanto ecco il codice

codice:

div#navigation{background-color:#000000; text-align: center; display: block; float: left; width: 727px}
div#content{padding: 0 1.5em 5em}
iframe{width: 100%}


/*stili per la navigazione*/

div#navigation ul{display: inline; margin: 0; padding: 0; list-style-type: none;}
div#navigation li{display: inline; margin: 0 0 0 1em; padding: 0}
div#navigation a{color:#ffffff; font: normal bold 1.2em/2.5em arial,sans-serif; text-decoration: none; float:left}
div#navigation a:hover, div#navigation a:focus, div#navigation a:active{color: #fff; background: #2988b9; display: block; float:left}

Ho anche provato senza quelle due opzioni al div#navigation, ma non va. Così il menù si mette a sinistra, però la voce home è leggermente più alta rispetto alle altre, il div diventa più alto, e quindi l'effetto non è ancora praciso. Allego anche un screen gia che ci siamo.

problema risolto mettendo il display: block anche al li

**psykopear** · 27-06-2008, 15:39

ho agigunto un po di margine alle varie voci che altrimenti erano attaccate con

div#navigation a{margin: 0 1em 0 0div#navigation a{margin: 0 1em 0 0........

Ora è perfetto, grazie mille dei consigli

Discussione: colore sfondo menu

Strumenti discussione

Ricerca discussione

Visualizza

colore sfondo menu

css

Permessi di invio