Il padding non funziona 0.0

22-03-2007, 14.49.52

Ciao a tutti
stavo sviluppando un layout, quando mi sono accorto di due stranezza incredibili:

- Il contenuto della pagina web esce dai suoi margini, sebbene io abbia indicato un blocco dalla larghezza di 760px come contenitore (opportunamente richiamato nella pagina web
- Il padding non funziona ... invece di distanziare il contenuto nella pagina, mi fa allungare i bordi sia in altezza che in laghezza

Vi posto il codice, sperando che qualcuno ci capisca (è stato passato al validator e non ha nessun errore):

Codice HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
 <title>itWeb - </title>
 <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
 <meta name="description" content="" />
 <meta name="keywords" content="" />
 <meta name="robots" content="index, follow" />
 <link rel="stylesheet" href="style2.css" type="text/css" />
</head>

<body>
 <div id="contenitore">
 
 <div id="testata">
  <img src="immagini/logo_dn.png" alt="Logo" />
 </div>
 
 <div id="menu">
  <a href="index2.html"><img src="immagini/home.png" alt="Menu" /></a>
  <a href="guide.html"><img src="immagini/guide.png" alt="Menu" /></a>
  <a href="grafica.html"><img src="immagini/grafica.png" alt="Menu" /></a>
  <a href="whoami.html"><img src="immagini/whoami.png" alt="Menu" /></a>
 </div>
 
 <div id="corpo">
  <p>Testo di prova... aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</p>
 </div>
 
 </div>
</body>
</html>

Codice:

body {
 background-color: white; 
 margin: 0px;}

h4 {
 font-family: "Verdana Ref", Verdana, sans-serif; 
 font-size: 14px; color: #009900; 
 text-align: left; 
 margin: 0px; }
h3 {
 font-family: "Verdana Ref", Verdana, sans-serif; 
 font-size: 18px; color: #2586C0; 
 text-align: left; 
 margin: 0px; }
h1 {
 font-family: "Verdana Ref", Verdana, sans-serif; 
 font-size: 24px; color: #009900; 
 text-align: left; 
 margin: 0px; }
p {
 font-family: "Verdana Ref", Verdana, sans-serif; 
 font-size: 12px; color: #555555; 
 text-align: left; 
 margin: 0px 10px 0px 10px;}
a {
 font-family: "Verdana Ref", Verdana, sans-serif; 
 font-size: 12px; color: #66CC66; 
 text-align: left; 
 margin: 0px 10px 0px 10px; }
 
li {
 font-family: "Verdana Ref", Verdana, sans-serif; 
 font-size: 12px; color: #555555; 
 text-align: left; 
 margin: 0px; }

#contenitore {
 width: 760px;
 margin: auto;
 border-left: 1px solid #A3A3A3;
 border-right: 1px solid #A3A3A3;}

#testata {
 width: 760px; 
 height: 100px; 
 background-color: transparent; }
 
#testata img {
 border: 0px; }

#corpo {
 width: 760px;
 height: auto; 
 padding: 0px;
 background-color: transparent;
 border-top: 1px solid #A3A3A3;
 padding: 15px 15px 15px 15px; }
 
#menu {
 width: 760px;
 height: 50px;
 text-align: right;
 border-top: 1px solid #A3A3A3; }
 
#menu img {
 border: 0px; }

Vi ringrazio anticipatamente per l'aiuto

**dreadnaut** · 22-03-2007, 15.35.04

mi piace come la gente dice una certa cosa non funziona invece di non fa quello che voglio oppure non so usare --

il tuo problema è la ridondanza di codice che metti nel css. Ripeti e ripeti le stesse linee in ogni selettore, quando non serve. Questo ti porta a definire #contenitore come largo 760px, e a metterci dentro #corpo che è largo 760px.

Già, ma #corpo ha 2 bordi di 1px ciascuno, e un padding di 15px per lato, per un totale di 792px... e quindi sfora dal #contenitore, senza alcun dubbio

soluzione: impara che il css funziona a cascata e a gerarchia. Le regole sono applicate una dopo l'altra a tutti gli elementi a cui corrispondono, ed elementi all'interno di altri ereditano lo stesso valore (e.g. background) oppure assumono un valore in automatico rispetto all'elemento padre (e.g. width).

Perciò, una volta assegnato al #contenitore una certa larghezza, tutti gli elementi in esso contenuti si adatteranno a quella larghezza (se possono), senza che sia necessario specificarla di nuovo.

In breve, un css che produce il risultato corretto, ottenuto riordinando un po' il tuo:

Codice:

body {
 margin: 0px;
 background-color: white;
 font-family: "Verdana Ref", Verdana, sans-serif;
 font-size: 12px;
 text-align: left;
}

h1, h3, h4 { margin: 0px; }

h1 { font-size: 24px; color: #009900; }

h3 { font-size: 18px; color: #2586C0; }

h4 { font-size: 14px; color: #009900; }


p {
 color: #555555;
 margin: 0px 10px 0px 10px;
}

a {
 color: #66CC66;
 margin: 0px 10px 0px 10px;
}

li {
 color: #555555;
 margin: 0px;
}

#contenitore {
 width: 760px;
 margin: auto;
 border-left: 1px solid #A3A3A3;
 border-right: 1px solid #A3A3A3;
}

#testata {
 height: 100px;
}

#testata img {
 border: 0px;
}

#corpo {
 padding: 0px;
 border-top: 1px solid #A3A3A3;
 padding: 15px 15px 15px 15px;
}

#menu {
 height: 50px;
 text-align: right;
 border-top: 1px solid #A3A3A3;
}

#menu img {
 border: 0px;
}

edit: potrei dire qualcosa anche sull'html, ma non è gravissimo, è forse pignoleria, quindi me la tengo

22-03-2007, 17.04.10

Ciao
Intanto è doveroso ringraziarti per avermi addirittura steso un CSS ^^

Ho sempre letto che il padding distanzia gli elementi dai bordi interni del blocco in cui sono contenuti, ma non capisco (ti sarei grato se me lo spiegassi) perchè hai sommato la dimensione del blocco corpo a quella dichiarata in larghezza come padding per calcolare se sforava o meno. Mi spiego meglio, il padding non dovrebbe "togliere" spazio al contenuto di un blocco invece che allargare il blocco stesso?

Se ho dichiarato la larghezza di "corpo" è semplicemente perchè avevo in mente di posizionare una colonna di X pixel a destra, per inserire altre info differenti da quelle del contenuto principale. Non era tanto un errore quanto un "appunto" di inserire una dimensione al blocco corpo dopo l'inserimento della colonna laterale. Non pensavo però che dichiarare due larghezze uguali in blocchi uno dentro l'altro comportasse tali problemi 0.0

Il problema del testo comunque era dovuto al fatto che continua a scrivere sulla stessa riga finchè non c'è uno spazio... insomma non va a capo da solo, giustamente XD

Ti ringrazio molto per avermi dato queste informazioni, che in parte già avevo studiato ma vergognosamente non ho applicato (doh!). Ti sarei grato se mi dicessi anche cosa non va (o è ottimizzabile) nel documento html, anche perchè dove si può ottimizzare, perchè non farlo ;)

Unica cosa che mi dispiace è la frecciatina all'inizio del post. Ho sempre usato il padding ottenendo il risultato voluto, questa volta mi è sembrato di applicarlo correttamente, evidentemente mi sbagliavo. Purtroppo il non avere a disposizione molti mezzi di studio validi (i libri di testo più costosi purtroppo non sono proprio... alla mia portata, ecco... sennò me li comprerei volentieri tutti; ed il web è l'unica risorsa, e devi prendere per "vero" quello che ci trovi). Lo dico a te come lo dico a molti nei luoghi di discussione telematici: frasi del genere, seppur dette in modo scherzoso (come probabilmente avrai voluto dire tu, ed io palesemente frainteso) andrebbero evitate non tanto per chi nel web ci bazzica da tempo, ma per i newbie, che possono sentirsi "esclusi" da chi sa più di loro. E, tra l'altro, si tiene basso il rischio flame, che si sà, se lo conosci lo eviti.

Ti ringrazio ancora per quanto scritto sopra, spero mi aiuterai anche nel resto. Bye ^^

**dreadnaut** · 22-03-2007, 17.51.35

mi scuso in partenza per la frase che potevo evitarmi, ma che non voleva essere una frecciatina: l'ho scritta subito, senza neanche leggere il post, e non è collegata tanto al caso particolare quanto all'abitudine di dare ai pc colpe: quando uno scrive non funziona afferma più o meno sbaglia lui, ma nella stragrande maggioranza dei casi, è l'esatto opposto

Tornando al css: il padding aggiunge spazio attorno ad un elemento, ma all'interno del suo bordo. Un elemento con padding avrà quindi meno spazio al suo interno di uno senza padding, ma questo se la larghezza non è specificata! (i.e. ereditata o auto).

Il box model infatti definisce width come la larghezza effettiva dell'elemento, quella in cui puoi mettere qualcosa -in alcuni linguaggi la chiameresti client-width- e quindi va sommata a padding, bordi e margine per ottenere la larghezza complessiva (secondo lo standard - IE5 ha proprio questo bug).

Ricapitolando: il padding aggiunge spazio ai lati dell'elemento, ma se le dimensioni di quest'ultimo possono variare in automatico, l' effetto visivo sarà quello di "togliere spazio all'interno" - ma è un'impressione

Il testo che sfora, lo fa perché non può andare a capo a metà di una parola, ma solo quando arriva a degli spazi bianchi.

per l'HTML, a mio parere, userei meno div e più tag con un "significato", così da fare più felici motori di ricerca ed altri tool automatici. Esempio: un menu è una lista - puoi mettere <ul><li>... al posto di <div> e il css funzionerà esattamente come prima, ma -senza- css sarà più evidente che quello è un menu, invece di quattro link in fila

22-03-2007, 22.21.54

E pensare che io ho sempre creduto che il padding levasse dello spazio interno XDDD
Grazie mille per tutto, specialmente per la spiegazione del padding che mi ha fatto molta chiarezza sull'argomento ^^

Alla prox!

Edit: Un solo dubbio, UL non lo posso usare per il menu se lo metto esteso in orizzontale, ci sono soluzioni alternative e migliori al DIV?

**dreadnaut** · 22-03-2007, 22.49.44

perché no ?

LI { display: inline; }

Discussione: Il padding non funziona 0.0

LinkBack

Strumenti discussione

Display

Il padding non funziona 0.0

Regole di scrittura