Spaginamento

**Gab3ry** · 01-02-2014, 11:11

Buongiorno a tutti, sono un novellino e sto cercando di far un sitino così da prendere confidenza con i linguaggi intanto che seguo un corso professionale,
Non sono molto bravo quindi ho qualche problemino.

ho tentato di adattare il sito, mettendo quindi il tutto in percentuale ma mi ritrovo dinnanzi a qualche problema.

-ho messo un div con bordi smussati, ma se lo metto con "length:100%;" mi spagina di poco sulla destra, infatti io l ho messo a 99% ma si nota la differenza se si guarda sinistra e destra, perchè a destra mi rimane 1-2px di sfondo prima di arrivar a fine schermo

-ho messo il div di schermo colore nero 100% e 100% altezza larghezza, poi ho inserito un div contenente un immagine leggermente + stretta sopra, in "absolute", il problema è che sotto sborda, ma non capisco perchè... l'immagine sarà maggiore della risoluzione del mio schermo ma se io uso lo scroll dovrei vedere tutto normale no? invece di sotto vedo la parte eccedente del immagine con sfondo bianco

-ho fatto una tabella dove ho inserito delle voci del menu, l'ho messa dentro a un div, ma le scritte mi sbordano tutte di sotto, inoltre son venute di un colore blu, che non ho inserito.. ho detto che tutti i td della tabella fossero { cursor

ointer; } e al primo di essi "home" ho dato l'ancoraggio, e me lo da di un colore violaceo, che io non vorrei perchè farei un rollover

grazie in anticipo, se devo inserire il codice ditemi pure che lo posto

**Prill** · 01-02-2014, 11:46

-ho messo un div con bordi smussati, ma se lo metto con "length:100%;" mi spagina di poco sulla destra, infatti io l ho messo a 99% ma si nota la differenza se si guarda sinistra e destra, perchè a destra mi rimane 1-2px di sfondo prima di arrivar a fine schermo

Ciao, intendevi width e non length immagino. Comunque se il tuo div ha dei bordi, questi si aggiungono alle dimensioni impostate per larghezza e altezza (lo stesso accade con i margini e con i padding). Per quanto riguarda la larghezza puoi non impostarla oppure avere un width:auto, che farà sì che il div prenda tutto lo spazio disponibile

-ho messo il div di schermo colore nero 100% e 100% altezza larghezza, poi ho inserito un div contenente un immagine leggermente + stretta sopra, in "absolute", il problema è che sotto sborda, ma non capisco perchè... l'immagine sarà maggiore della risoluzione del mio schermo ma se io uso lo scroll dovrei vedere tutto normale no? invece di sotto vedo la parte eccedente del immagine con sfondo bianco

un elemento (nel tuo caso l'immagine) con posizionamento assoluto viene sottratto al normale flusso della pagina, per evitare tagli dovrai nel caso in cui sia necessario lo scrolling dovrai rivedere il tuo codice (posizionarla in base al div che la contiene che potrà avere un position:relative e farla ridimensionare in base a quello, oppure assegnare al div delle dimensioni minime corrispondenti a quelle dell'immagine, ma vedere il tuo codice sarà utile)

per quanto riguarda i link, essi hanno delle impostazioni predefinite (la sottolineatura, il colore nei vari stati) che possono essere sovrascritti tramite il css

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

Css

*.non_sottolineato { text-decoration:none; }
*.bianco { color:#ffffff; }
*.assoluto { position:absolute; }

/* Elementi generali */
div#schermo { width:100%; height:100%; background:#070707;}

/* Elementi Home */
div#capo { width:1280px; height:768px; left:2.5%; background:url(..) center no-repeat;}
div#fascia {width:99%; height:100px; bottom:30px; border:double 4px #6d5e48;
border-radius: 10px 10px 10px 10px; background:#473219; opacity:0.7;}
div#logo { width:182px; height:80px; left:5%; top:2%; background:url(../) center no-repeat; opacity:0.67;}
table#box_menu { width:99%; height:100px; font-size:48px; font-family:vivaldi; line-height:48px;}
table#box_menu td.voce_menu { cursor: pointer; }
table#box_menu:hover {font-size:48px #000000;}

Html

<body>

<div class="assoluto toale" id="schermo">
<div class="assoluto" id="capo">
<div class="assoluto" id="fascia">
<div class="assoluto" id="menu">
<table class="assoluto bianco non_sottolineato" id="box_menu" cellspacing="90" cellpadding="0">
<tr>
<td class="voce_menu"><div><a class="" href="./index.html" title="">Home</a></div></td>
<td class="voce_menu"><div><a class="" href="#" title="">Introduzione</a></div></td>
<td class="voce_menu"><div><a class="" href="#" title="">Capitoli</a></div></td>
<td class="voce_menu"><div><a class="" href="#" title="">Gallery</a></div></td>
<td class="voce_menu"><div><a class="" href="#" title="">Contenuti</a></div></td>
</tr>
</table>
</div>
</div>
<div class="assoluto" id="logo">
</div>
</div>

</body>

scusa se non è indentato ma non prende gli spazi :S

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

**Gab3ry** · 01-02-2014, 19:10

2jeaesl.jpg

**Prill** · 01-02-2014, 21:51

stai allestendo una pagina evidentemente per la tua risoluzione. Usi larghezze in percentuale per i div ma in realtà sei legata a quel 1280px dell'immagine, e allora lasciamo da parte il width:100% e usiamo una larghezza fissa per semplificare.
Anche le altezze in percentuale non sono l'ideale, comunque: dobbiamo innanzitutto impostare l'altezza su body e html, d'altra parte vuoi un'altezza pari al 100% ma fra il div con l'immagine che è alto 768px + la barra del menu + il padding che vuoi in basso arriviamo a circa 900px. Il body dovrà avere quindi un'altezza minima di 900px
Rivedendo il codice avremo quindi:

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;}
html, body {height:100%; min-height:900px; /* 768px dell'immagine + i 100 e rotti del menu + lo spazio che vogliamo lasciare in basso */ background:#070707;}
#wrapper {width:1280px; height:100%;min-height:900px; /* occorre rispecificare di nuovo il min-height per non avere problemi con Opera e Safari */ position:relative; margin:auto;}
#menu { position:absolute; bottom:30px; z-index:1} 
#menu ul{width:1272px; /* con i bordi 4px+4px arriviamo a 1280*/ list-style:none; height:100px; line-height:100px; border:double 4px #6d5e48; border-radius: 10px; background:#473219; opacity:0.7; overflow:hidden; margin:0 auto}
#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;}

#immagine {width:auto; height:100%;  min-height:900px; background:#fff; margin:0 auto}

#logo { width:182px; height:80px; left:5%; top:2%; background:url(../) center no-repeat; opacity:0.67; z-index:1}
-->
</style>
</head>

<body>
<div id="wrapper">
<div id="immagine"><img src="" ... /></div>
<div id="menu">
<ul>
<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>
</div>
</div>
</body>
</html>

ora aggiungi il tuo logo (ho indicato uno z-index che serve ad indicare il livello su cui viene a trovarsi, superiore al div in cui lo includerai)

Inoltre: usi un font che non si trova tra i font di sistema e che molti non visualizzeranno (aggiungi delle alternative). Mi fermo qui, ora studiati un po' il codice. Buon lavoro

Discussione: Spaginamento

Strumenti discussione

Ricerca discussione

Visualizza

Spaginamento

Permessi di invio