layout css tutorial html.it

**snyperMC** · 12-05-2003, 20:27

forse avevo sbagliato forum, mi scuso se lo stesso 3d è anche nel forum xhtml
leggendo il tutorial di html.it per creare un layout liquido usando css e xhtml non mi è chiaro un passaggio:

L'elemento BODY

body {
margin:0px;
padding:0px;
background-color:#CCCCCC;
height: 100%;
}

Iniziamo impostando le proprietà dell'elemento body. Il margine e il padding vanno settati a 0px per eliminare lo spazio bianco che ogni browser aggiunge, in misura variabile, tra i bordi della finestra principale (il cosiddetto viewport) e l'area del contenuto. Stabiliamo che il colore di sfondo sarà un grigio chiaro e settiamo quindi la proprietà height al 100%. Vedremo poi perchè è necessario impostare questo valore.

###il passaggio è questo:

Subito dopo (vedi codice) impostiamo le proprietà per i titoli principali (h1) e per i paragrafi (p).

perchè devo inserire i blocchi h1 e p?

praticamente dice che devo comunque mettere anke questo:

h1 {
margin:10px 10px 15px 10px;
padding:0px;
font-size:28px;
line-height:28px;
font-weight:bold;
color:#000066;
}

p {
font:12px verdana, arial, helvetica, sans-serif;
margin:10px 10px 16px 10px;
padding:0px;
}

perchè? a cosa servono?
grazie!

**Dennis** · 12-05-2003, 20:30

Originariamente inviato da snyperMC
forse avevo sbagliato forum, mi scuso se lo stesso 3d è anche nel forum xhtml
leggendo il tutorial di html.it per creare un layout liquido usando css e xhtml non mi è chiaro un passaggio:

L'elemento BODY

body {
margin:0px;
padding:0px;
background-color:#CCCCCC;
height: 100%;
}

Iniziamo impostando le proprietà dell'elemento body. Il margine e il padding vanno settati a 0px per eliminare lo spazio bianco che ogni browser aggiunge, in misura variabile, tra i bordi della finestra principale (il cosiddetto viewport) e l'area del contenuto. Stabiliamo che il colore di sfondo sarà un grigio chiaro e settiamo quindi la proprietà height al 100%. Vedremo poi perchè è necessario impostare questo valore.

###il passaggio è questo:

Subito dopo (vedi codice) impostiamo le proprietà per i titoli principali (h1) e per i paragrafi (p).

perchè devo inserire i blocchi h1 e p?

praticamente dice che devo comunque mettere anke questo:

h1 {
margin:10px 10px 15px 10px;
padding:0px;
font-size:28px;
line-height:28px;
font-weight:bold;
color:#000066;
}

p {
font:12px verdana, arial, helvetica, sans-serif;
margin:10px 10px 16px 10px;
padding:0px;
}

perchè? a cosa servono?
grazie!

forum corretto ;-)

h1 si riferisce a un TITOLO (tag <h1>CIao</h1)

p ad un paragrafo(tag

Ciao</p>)

ti serviva questo?

**herrel** · 12-05-2003, 20:35

Originariamente inviato da snyperMC
forse avevo sbagliato forum, mi scuso se lo stesso 3d è anche nel forum xhtml
leggendo il tutorial di html.it per creare un layout liquido usando css e xhtml non mi è chiaro un passaggio:

L'elemento BODY

body {
margin:0px;
padding:0px;
background-color:#CCCCCC;
height: 100%;
}

Iniziamo impostando le proprietà dell'elemento body. Il margine e il padding vanno settati a 0px per eliminare lo spazio bianco che ogni browser aggiunge, in misura variabile, tra i bordi della finestra principale (il cosiddetto viewport) e l'area del contenuto. Stabiliamo che il colore di sfondo sarà un grigio chiaro e settiamo quindi la proprietà height al 100%. Vedremo poi perchè è necessario impostare questo valore.

###il passaggio è questo:

Subito dopo (vedi codice) impostiamo le proprietà per i titoli principali (h1) e per i paragrafi (p).

perchè devo inserire i blocchi h1 e p?

praticamente dice che devo comunque mettere anke questo:

h1 {
margin:10px 10px 15px 10px;
padding:0px;
font-size:28px;
line-height:28px;
font-weight:bold;
color:#000066;
}

p {
font:12px verdana, arial, helvetica, sans-serif;
margin:10px 10px 16px 10px;
padding:0px;
}

perchè? a cosa servono?
grazie!

come ha detto dennis...se posti il codice capiamo meglio!!

**snyperMC** · 12-05-2003, 20:42

eccolo:

<!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>
<title>Layout a due colonne liquido</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">

body {
margin:0px;
padding:0px;
font-family:verdana, arial, helvetica, sans-serif;
color:#333;
background-color:#CCCCCC;
height: 100%;
}

h1 {
margin:10px 10px 15px 10px;
padding:0px;
font-size:28px;
line-height:28px;
font-weight:bold;
color:#000066;
}

p {
font:12px verdana, arial, helvetica, sans-serif;
margin:10px 10px 16px 10px;
padding:0px;
}

#testata {
margin:0px;
padding:0px;
height:70px;
background-color:#0099BB;
background-image: url('sfondo.gif');

}

#menu {
position:absolute;
top:70px;
left:0px;
width:180px;
background-color:#CCCCCC;
height: 100%;
}

#contenuto {
margin:0px 0px 0px 180px;
padding:10px;
background-color: #FFFFFF;
height:100%;
}
</style>
</head>

<body>
<div id="testata">[img]sfondo.gif[/img]</div>
<div id="menu">
<h1>Menu</h1>

Menu 1</p>

Menu 2</p>

Menu 3</p>

..........</p>

..........</p>
</div>
<div id="contenuto">
<h1>Codice</h1>

.......</p>
</div>
</body>
</html>

se ho capito bene serve a dare le informazioni per h1 e p che ho messo in grassetto?

**herrel** · 12-05-2003, 20:56

Originariamente inviato da Dennis
forum corretto ;-)

h1 si riferisce a un TITOLO (tag <h1>CIao</h1)

p ad un paragrafo(tag

Ciao</p>)

ti serviva questo?

ho visto il codice....
allora come è stato detto!!!

**Dennis** · 12-05-2003, 20:57

Originariamente inviato da snyperMC
se ho capito bene serve a dare le informazioni per h1 e p che ho messo in grassetto?

... informazioni sulla formattazione dell'oggetto

**snyperMC** · 12-05-2003, 21:08

ok grazie
ho provato a fare io una pagina praticamente uguale, ma non "fluida"
ma alcune cose non quadrano..
questo è il codice

<html>

<head>
<title>Prova css</title>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<style type="text/css">
body {
margin:0px;
padding:0px;
font-family:verdana;
color:#333;
backgroung-color:#0099CC
height:100%;
width:750px;
}

h1 {
margin:2px 2px 2px 2px;
padding:0px;
font-size:28px;
line-height:28px;
font-weight:bold;
color:#000066;
}

p {
font:12px verdana, arial, helvetica, sans-serif;
margin:10px 10px 16px 10px;
padding:0px;
}

#testata {
margin:0px;
padding:0px;
height:100px;
width:750px;
background-color:#000000;
}

#menu {
position:absolute;
top:100px;
left:0px;
width:140px;
height:100%;
background-color:#0099AA;
}

#contenuto {
margin:0px 0px 0px 140px;
padding:0px;
background-color:#0099CC;
widht:610px;
height:100%;
}
</style>
</head>

<body>
<div id="testata"> </div>
<div id="menu">
<h1>Menu</h1></div>
<div id="contenuto">
<h1>Contenuto</h1></div>

</div>

</body>

</html>

il #contenuto non si ferma al limite di 750px ma occupa tutto il browser, metre la #testata occupa i 750 px da me impostati.. come mai???
un'altra cosa, i due titoli Menu e Contenuto non hanno gli stessi margini eppure sono entrambi h1.. Boh! help!
grazie ancora

**herrel** · 12-05-2003, 21:45

(1)

il #contenuto non si ferma al limite di 750px ma occupa tutto il browser, metre la #testata occupa i 750 px da me impostati.. come mai???

è giusto...nel css è stabilito così:

#testata {
margin:0px;
padding:0px;
height:100px;
width:750px;*
background-color:#000000;
}

*qui ha una lung di 750px

#contenuto {
margin:0px 0px 0px 140px;
padding:0px;
background-color:#0099CC;
widht:610px;*
height:100%;**
}

* qui la larghezza è fissata a 610px;
**qui ha una lunghezza pari al 100% della pagina,
nn hai settato da nessuna parte 750px!

(2)

un'altra cosa, i due titoli Menu e Contenuto non hanno gli stessi margini eppure sono entrambi h1.. Boh! help!

a me sembrano buoni...

**herrel** · 12-05-2003, 21:48

avevo scritto:

:quote:

minkia quanti errori... scusa ma rileggo solo ora quello che gho scritto...diciamo che sarà la fame....
:gren:

ora ho corretto tutto....capita!

**snyperMC** · 13-05-2003, 15:15

eppure guarda come mi viene:

qui

Discussione: layout css tutorial html.it

Strumenti discussione

Ricerca discussione

Visualizza

layout css tutorial html.it

Re: layout css tutorial html.it

Re: layout css tutorial html.it

Re: Re: layout css tutorial html.it

Permessi di invio