Menu Stile HTML.It

**Web01** · 12-06-2006, 14:02

Salve,
mi sapete indirizzare su guide o altro su come realizzare un menu simine a quello di HTML.IT? Mi riferisco a quello che si estende in orizzontale (Siti, Servizi, News...).
Quello che non riesco a fare, è mettere un'immagine di sfondo che si allunghi in base al contenuto.
Sapete aiutarmi?

Ho provato in questo modo (seguendo una guida di html.it)

Codice PHP:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

  <head>

  <meta http-equiv="content-type" content="text/html; charset=windows-1250">

  <meta name="generator" content="PSPad editor, [url]www.pspad.com[/url]">

  <title></title>

  <style type="text/css">

   div#navigation{

    background-color: #9cf;

    border-bottom: 1px solid #787878;

    padding-left: 20px}



div#navigation ul{

    list-style-type: none;

    margin: 0;

    padding: 0;

    white-space: nowrap}



div#navigation li{

    display: inline;

    margin: 0;

    padding: 0}



div#navigation li a{

    

    text-decoration: none;

    padding: 0px 0.3em;

    background-image: url(Immagine.bmp);

    background-repeat: no-repeat;

    

    color: #036}



div#navigation li a:hover{

    background-image: #f0f0f0}



div#navigation li#activelink a{

    border-bottom: 1px solid #fff;

    background-color: #fff;

    color: #603}

  </style>

  </head>

  <body>

    <div id="navigation">

      <ul>

          <li id="activelink">[url="index.html"]Home[/url][*][url="grafica.html"]Grafica[/url][*][url="webdesign.html"]Webdesign[/url][*][url="php.html"]Php[/url][*][url="css.html"]Css[/url][/list]

    </div>

  </body>

</html>

Grazie!

**Web01** · 12-06-2006, 16:54

Nessuno sa come fare?

**Web01** · 12-06-2006, 17:18

Praticamente sono quasi riuscito a fare quello che mi interessava... ma solo con IE.
Firefox non mi considera i valori di "width" & "height" nei "li".

Il codice che uso è questo:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=windows-1250">
<meta name="generator" content="PSPad editor, www.pspad.com">
<title></title>
<style type="text/css">
div#navigation{
border-bottom: 1px solid #787878;
padding-left: 20px;
}
div#navigation ul{
list-style-type: none;
margin: 0;
padding: 0;
white-space: nowrap;
}
div#navigation li{
display: inline;
height: 26px;
width: 120px;
}
div#navigation li a{
height: 26px;
width: 120px;
text-align: center;
text-decoration: none;
background: url(Immagine.bmp) no-repeat top left;
color: #036;
}
div#navigation li a:hover{
height: 26px;
width: 120px;
background-image: #f0f0f0;
}
div#navigation li#activelink a{
height: 26px;
width: 120px;
background-color: #fff;
color: #603;
}
</style>
</head>
<body>
<div id="navigation">
<ul>
<li id="activelink">Home[*]Grafica[*]Webdesign[*]Php[*]Css[/list]
</div>
</body>
</html>

Sapete aiutarmi?
Grazie!!

**Mich_** · 12-06-2006, 17:28

nel tag <a> non puoi definire le dimensioni, in quanto si tratta di un oggetto di tipo inline.

Se vuoi definire le dimensioni, devi trasformarlo in tipo blocco:
display: block;

la stessa considerazione per il[*]: se lo trasformi in inline, non puoi definire le dimensioni.

Se devi metterli affiancati, devi definire invece:
float: left;
o simile.

**Web01** · 12-06-2006, 17:35

Originariamente inviato da Mich_
nel tag <a> non puoi definire le dimensioni, in quanto si tratta di un oggetto di tipo inline.

Se vuoi definire le dimensioni, devi trasformarlo in tipo blocco:
display: block;

la stessa considerazione per il[*]: se lo trasformi in inline, non puoi definire le dimensioni.

Se devi metterli affiancati, devi definire invece:
float: left;
o simile.

Seguendo il tuo consiglio (spero di aver capito bene...), ho trasformato il menu da[*] a <div>
Ora funziona... tranne per una cosa...

Il codice che ti incollo, "dovrebbe" modificiare lo sfondo di tutto il div al passaggio del mouse, invece mi modifica solo quello del link... sapete come posso fare?
div.menu1 a:hover{
text-align: center;
text-decoration: none;
background: url(Immagine2.bmp) no-repeat top left;
display: block;
}

Il codice utilizzato è questo:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=windows-1250">
<meta name="generator" content="PSPad editor, www.pspad.com">
<title></title>
<style type="text/css">
div#navigation{
border-bottom: 1px solid #787878;
display:inline;
}
div.menu1{
float:left;
padding-top:6px;
height: 26px;
width: 120px;
font-family: arial;
font-size: 12px;
text-align: center;
text-decoration: none;
background: url(Immagine.bmp) no-repeat top left;
color: #036;
}
div.menu1 a{
text-align: center;
text-decoration: none;
}
div.menu1 a:hover{
text-align: center;
text-decoration: none;
background: url(Immagine2.bmp) no-repeat top left;
display: block;
}
</style>
</head>
<body>
<div id="navigation">
<div class="menu1">Home</div>
<div class="menu1">Grafica</div>
<div class="menu1">Webdesign</div>
<div class="menu1">Php</div>
<div class="menu1">Css</div>
</div>
</body>
</html>

Grazie!

**Mich_** · 12-06-2006, 17:49

Cosi` hai inserito anche degli erorri sematici. Non va bene!!!!

Il mio consiglio era di lasciare i[*] di tipo blocco, eventaulemtne trasformare anceh gli <a> in tipo blocco e affiancarli invece con il float.

Se definisci il tag <a> grande al 100% sia in larghezza che in altezza (deve essere di tipo blocco, naturalmente), lo sfondo dovrebbe prendere tutto lo spazio.
Potrebbe essere necessario lavorare anche con il line-height.

**Web01** · 13-06-2006, 08:56

Originariamente inviato da Mich_
Cosi` hai inserito anche degli erorri sematici. Non va bene!!!!

Il mio consiglio era di lasciare i[*] di tipo blocco, eventaulemtne trasformare anceh gli <a> in tipo blocco e affiancarli invece con il float.

Se definisci il tag <a> grande al 100% sia in larghezza che in altezza (deve essere di tipo blocco, naturalmente), lo sfondo dovrebbe prendere tutto lo spazio.
Potrebbe essere necessario lavorare anche con il line-height.

Mi potresti fare un esempio?
Grazie!

**Mich_** · 13-06-2006, 09:23

Il tuo ultimo esempio va bene come logica, ma non devi usare tag sbagliati.
Semplicemente lascia i <ul> e[*] come li avevi messi, mentre tieni il CSS (con le opportune modifiche sui selettori, naturalmente).

Per il tag <a>, devi definire tutte le proprieta` nel selettore generale, poi con le pseudoclassi definisci solo le proprieta` che devono cambiare

**Web01** · 13-06-2006, 09:32

Spero di aver capito bene... e sembra funzionare bene...

ecco il codice:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=windows-1250">
<meta name="generator" content="PSPad editor, www.pspad.com">
<title></title>
<style type="text/css">
div#navigation{
border-bottom: 1px solid #787878;
display:inline;
float:left;
height:26px;
}
li.menu1{
float:left;
padding-top:6px;
height: 26px;
width: 120px;
font-family: arial;
font-size: 12px;
text-align: center;
text-decoration: none;
color: #036;
}
li.menu1 a{
display:block;
text-align: center;
text-decoration: none;
padding-top:6px;
background: url(Immagine.bmp) no-repeat top left;
width:100%;
height:100%;
}
li.menu1 a:hover{
display:block;
text-align: center;
padding-top:6px;
text-decoration: none;
width:100%;
height:100%;
background: url(Immagine2.bmp) no-repeat top left;
}
div#navigation ul{
list-style-type: none;
margin: 0;
padding: 0;
white-space: nowrap
}
</style>
</head>
<body>
<div id="navigation">
<ul>
<li class="menu1">Home
<li class="menu1">Grafica
<li class="menu1">Webdesign
<li class="menu1">Php
<li class="menu1">Css[/list]
</div>
</body>
</html>

Come ti sembra?

Grazie!!

**Mich_** · 13-06-2006, 09:47

Direi che va bene. Solo farei una modifica al CSS per il tag <a>:

codice:

 li.menu1 a{
  display:block;
  text-align: center;
  text-decoration: none;
  padding-top:6px;
  background: url(Immagine.bmp) no-repeat top left;
  width:100%;
  height:100%;
}
li.menu1 a:hover{
  background: url(Immagine2.bmp);
}

oppure:

codice:

 li.menu1 a {
  display:block;
  text-align: center;
  text-decoration: none;
  padding-top:6px;
  background: url(Immagine.bmp) no-repeat top left;
  width:100%;
  height:100%;
}
li.menu1 a:link, li.menu1 a:visited {
  background-image: url(Immagine.bmp);
  color: #???;
}
li.menu1 a:hover{
  background-image: url(Immagine2.bmp);
  text-decoration: none;
  color: #???;
}

Ci sono alcune proprieta` che hanno un default nelle varie condizioni dei link (:link, :visted, :hover, :active); in linea di massima sono: color, text-decoration . Tali proprieta` conviene ripeterle nelle pseudoclassi; le altre invece non serve (creano solo confusione, e la confusione e` amica degli errori).

Discussione: Menu Stile HTML.It

Strumenti discussione

Ricerca discussione

Visualizza

Menu Stile HTML.It

Permessi di invio