Spaginamento

**Prill** · 01-02-2014, 13:00

per il menu non hai bisogno di una tabella, puoi usare un elenco, e non è necessario tutto quel codice. Riparti da questo:

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=iso-8859-1" />
<title>Documento senza titolo</title>
<style type="text/css">
<!--
* {margin:0; padding:0;}
#menu {width:auto;list-style:none; height:100px; line-height:100px; border:double 4px #6d5e48; border-radius: 10px; background:#473219; opacity:0.7; overflow:hidden}
#menu li{width:20%; display:block; float:left; text-align:center}

#menu a { color:#fff;text-decoration:none;font-size:48px; font-family:vivaldi;}
#menu a:hover { color:#000;}


-->
</style>
</head>

<body>

<ul id="menu">
<li><a href="./index.html" title="">Home</a></li>
<li><a href="#" title="">Introduzione</a></li>
<li><a href="#" title="">Capitoli</a></li>
<li><a href="#" title="">Gallery</a></li>
<li><a href="#" title="">Contenuti</a></li>

</ul>

</body>
</html>

nota che margini e padding sono stati azzerati su tutti gli elementi e che le impostazioni dei link vanno direttamente sui link (avrei potuto creare anche una classe con la formattazione e poi applicarla a ciascun singolo link - non al div o alla cella che lo contenevano - invece per far prima e avere codice più snello ho definito un id menu, dato all'elenco, e i link contenuti al suo interno).

Ora ricrea la tua struttura, ma considera che se il tuo div contenitore generale deve avere una altezza del 100%, la stessa altezza dovrai impostare su body e html (html, body {height:100})

**Gab3ry** · 01-02-2014, 14:04

Originariamente inviata da Prill

per il menu non hai bisogno di una tabella, puoi usare un elenco, e non è necessario tutto quel codice. Riparti da questo:

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=iso-8859-1" />
<title>Documento senza titolo</title>
<style type="text/css">
<!--
* {margin:0; padding:0;}
#menu {width:auto;list-style:none; height:100px; line-height:100px; border:double 4px #6d5e48; border-radius: 10px; background:#473219; opacity:0.7; overflow:hidden}
#menu li{width:20%; display:block; float:left; text-align:center}

#menu a { color:#fff;text-decoration:none;font-size:48px; font-family:vivaldi;}
#menu a:hover { color:#000;}


-->
</style>
</head>

<body>

<ul id="menu">
<li><a href="./index.html" title="">Home</a></li>
<li><a href="#" title="">Introduzione</a></li>
<li><a href="#" title="">Capitoli</a></li>
<li><a href="#" title="">Gallery</a></li>
<li><a href="#" title="">Contenuti</a></li>

</ul>

</body>
</html>

nota che margini e padding sono stati azzerati su tutti gli elementi e che le impostazioni dei link vanno direttamente sui link (avrei potuto creare anche una classe con la formattazione e poi applicarla a ciascun singolo link - non al div o alla cella che lo contenevano - invece per far prima e avere codice più snello ho definito un id menu, dato all'elenco, e i link contenuti al suo interno).

Ora ricrea la tua struttura, ma considera che se il tuo div contenitore generale deve avere una altezza del 100%, la stessa altezza dovrai impostare su body e html (html, body {height:100})

ma mi rimane sempre bianco sotto il div

e inoltre le voci del menù non son ben allineate...
"introduzione" essendo lunga va poi molto vicino a "capitoli" e si nota parecchio... posso usare uno span?

inoltre ho capito perchè le scritte mi venivano blu -.- avevo messo 0000 e ffff solo 4 invece che 6 xD ho visto che funziona anche con 3 cioè fff o 000 come mai?

poi volevo mettere un hover al logo.. in pratica il mio logo è una frase accorciata, e mi piacerebbe fare 1 over così quando passi li col mouse vedi l hover, e quindi l immagine di hover avrà la scritta per intero... la vorrei senza che comparisse la manina, solo al passar sopra col cursore viene visto l'hover, però non riesco... è diverso il procedimento per mettere 1 hover immagine su un immagine?

**Prill** · 01-02-2014, 15:38

inoltre ho capito perchè le scritte mi venivano blu -.- avevo messo 0000 e ffff solo 4 invece che 6 xD ho visto che funziona anche con 3 cioè fff o 000 come mai?

i link ti venivano blu (allo stato normale) perché quello è il loro colore predefinito, cambiare il colore del testo di un div o di una cella che li contiene non sortisce effetto sul loro colore di partenza. Il tuo codice, quello postato, aveva la giusta indicazione del colore esadecimale, ma non funzionava egualmente

sull'abbreviazione dei colori esadecimali: #ffffff è costituito da tre coppie ff/ff/ff che corrispondono ai canali RGB, dato che le coppie sono formate da uno stesso valore possiamo usare come scorciatoia #fff dove alla coppia è sostituito il singolo valore (se avessi #ff0033 potrei abbreviare in #f03, non posso abbreviare in casi in cui i valori delle singole coppie differiscano fra loro per esempio con #C8C4C7)

e inoltre le voci del menù non son ben allineate...
"introduzione" essendo lunga va poi molto vicino a "capitoli" e si nota parecchio... posso usare uno span?

puoi creare uno stile diverso per ciascuna voce elenco (li) indicando larghezze diverse, ad esempio:

codice HTML:

css:

#menu li#longer {specifico larghezza}
#menu li#shorter {specifico larghezza}

html:

<li id="shorter">.....
<li id="larger">.....

sarà anche il caso di specificare una larghezza minima per ul (devi calcolare più o meno quanto spazio occupano i tuoi link, e impostare un min-width:...)

Sugli altri problemi non mi è molto chiara la struttura della tua pagina, originariamente il menu stava in basso, è lì che deve stare? Perché avevi tanti div con posizionamenti assoluti?

**Gab3ry** · 01-02-2014, 18:29

si il div volevo metterlo in basso rialzato di un pochino dal bottom
ho messo tanti assoluti per far sovrapporre al immagine sottostante.. però magari ho sbagliato io e ho qualche concetto errato in mente.. l'assoluto serve per sovrapporre, quindi se ho un div tabella scritta o immagine da mettere sopra un altra uso l'assoluto giusto? non ho usato il relative per il div perchè ho pensato che andasse sotto l'immagine, invece io volevo che rimanesse sopra leggermente in trasparenza...
comunque posso mettere un immagine senò per far vedere come vorrei che venisse

perchè non sono il massimo nelle spiegazioni

**Prill** · 01-02-2014, 18:39

sì, forse è il caso che tu metta un disegnino

Discussione: Spaginamento

Strumenti discussione

Ricerca discussione

Visualizza

Hybrid View

Permessi di invio