Secondo riempimento...

**Andrea Binix** · 31-07-2006, 22:45

Ho costruito la testata del mio sito creando un Padding in alto. Non riesco a capire come si fa a crearlo un altro da inserire sotto con diversi colori . Come lo devo chiamare div1? Grazie

}
div {
padding: 20px;
padding-top: 8%;
padding-left: 25%;
background: #7FDFAA;
width:800px;
height:auto;
color:#FF9900;
font: bold 30px/18px verdana, arial;}

http://www.portaleromano.com

**IDS** · 01-08-2006, 07:56

Se utilizzi il selettore generico DIV tutti i DIV della pagina assumeranno lo stile che hai dichiarato nel foglio CSS, per differenziare differenti tipi di DIV devi utilizzare classi o ID, ad esempio nella pagina HTML avrai qualcosa del genere:

codice:

<div id="pippo">


bla bla e bla</p>
<div class="pluto">


bla bla bla</p>
</div>
</div>

E nel foglio di stile andrai a dichiarare lo stile relativo:

codice:

#pippo {
padding: 0 0;
margin:0 0;
...
}

.pluto {
font-family:arial,verdana,sans-serif;
font-size:13em;
...
}

In questo sito troverai sicuramente qualche guida più dettagliata al riguardo.

**Andrea Binix** · 01-08-2006, 13:52

Ho seguito i tuoi consigli sulle classi, era quello che volevo fare, ho letto anche la guida sulle classi e finalmente sono arrivato ad inserire i due padding uno sotto l'altro. Ora vorrei capire due cose..perchè anteprima su Dreamweaver con Firefox viene visualizzato solo un padding? Con IE invece entrambi. Poi come faccio a non lasciare lo spazio tra i due padding? Uno sopra l'altro senza spazio in mezzo. Grazie

<html>
<head>
<title>HOME PAGE PORTALE ROMANO</title>
<style>
body {
background: #004040;
}
.Strisciaverde {
padding: 20px;
padding-top: 1%;
padding-left: 25%;
background: #7FDFAA;
width:800px;
height:auto;
color:#FF9900;
font: bold 30px/18px verdana, arial;}
A:hover {Color: red;}
}
.Strisciaoliva {
padding: 0px;
padding-top: 0px;
padding-left: 0%;
background: #7FBF55;
width:800px;
height:auto;
color:#FF9900;
font: bold 30px/18px verdana, arial;}
</style>
<html>
<head>
<font color="#7FBF55"></font>
<p class="Strisciaverde"><font color="#030000" size="-1">Benvenuti nel sito dedicato
alla Città di Roma</font>
<p class="Strisciaoliva"><font color="#FFFBF0" size="-1">QUANTO SEI BELLA ROMA
QUANN'E' SERA </font>
<p align="center"></p>
</body>
</html>

Sito http://www.portaleromano.com

**Andrea Binix** · 01-08-2006, 14:19

Margin: 0px; per entrambe le classi- Sembrerebbe qs il modo i padding si avvicinano fino quasi a toccarsi. Perchè non si toccano e rimano uno spazio seppure piccolo?
Per i browser il problema roimane visualizzazioni diverse.

http://www.provocando.com

**erredeco** · 01-08-2006, 14:24

Hai notato quanti errori hai nell'HTML???

Manca la dichiarazione del DOCTYPE !
<html>
<head>
<title>HOME PAGE PORTALE ROMANO</title>
<style> <------ Si scrive <style type="text/css"> !
body {
background: #004040;
}
.Strisciaverde {
padding: 20px;
padding-top: 1%;
padding-left: 25%;
background: #7FDFAA;
width:800px;
height:auto;
color:#FF9900;
font: bold 30px/18px verdana, arial;}
A:hover {Color: red;}
} <------ Questo è di troppo !
.Strisciaoliva {
padding: 0px;
padding-top: 0px;
padding-left: 0%;
background: #7FBF55;
width:800px;
height:auto;
color:#FF9900;
font: bold 30px/18px verdana, arial;}
</style>
<html> <------ Questo non deve essere riaperto !
<head> <------ Questo non deve essere riaperto! Forse volevi scrivere </head> !

Manca l'apertura del <Body> !
<font color="#7FBF55"></font>
<p class="Strisciaverde"><font color="#030000" size="-1">Benvenuti nel sito dedicato
alla Città di Roma</font> <------ Manca la chiusura del paragrafo !

<p class="Strisciaoliva"><font color="#FFFBF0" size="-1">QUANTO SEI BELLA ROMA
QUANN'E' SERA </font> <------ Manca la chiusura del paragrafo !
<p align="center"> </p>
</body>
</html>

**Andrea Binix** · 01-08-2006, 14:48

Ho cercato di ripulire il codice, in IE ora la visualizzazione è perfetta. In Firefox no, la seconda striscia continua a non vedersi. Come si fa a vedere gli errori?

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>HOME PAGE PORTALE ROMANO</title>
<style type="text/css">
body {
background: #004040;
}
.Strisciaverde {
padding: 40px;
padding-top: 1%;
padding-left: 25%;
background: #7FDFAA;
margin: 0px;
width:800px;
height:auto;
color:#FF9900;
font: bold 30px/18px verdana, arial;}
A:hover {Color: red;}

.Strisciaoliva {
padding: 0px;
padding-top: 0px;
padding-left: 0%;
background: #7FBF55;
margin: 0px;
width:800px;
height:auto;
color:#FF9900;
font: bold 30px/18px verdana, arial;}
</style>
<html>
<p class="Strisciaverde"><font color="#030000" size="-1">Benvenuti nel sito dedicato
alla Città di Roma</font></p>
<p class="Strisciaoliva"></p>
<p align="center"> ]</p>
</body>
</html>

**erredeco** · 01-08-2006, 15:02

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>HOME PAGE PORTALE ROMANO</title>
<style type="text/css">
body {
background: #004040;
}
.Strisciaverde {
padding: 40px;
padding-top: 1%;
padding-left: 25%;
background: #7FDFAA;
margin: 0px;
width:800px;
height:auto;
color:#FF9900;
font: bold 30px/18px verdana, arial;}
A:hover {Color: red;}

.Strisciaoliva {
padding: 0px;
padding-top: 0px;
padding-left: 0%;
background: #7FBF55;
margin: 0px;
width:800px;
height:auto;
color:#FF9900;
font: bold 30px/18px verdana, arial;}
</style>
<html> <------- Ma perchè??? Non va riaperto! Semmai dovrai chiudere lhead (</head>) e aprire il body (<body>)
<p class="Strisciaverde"><font color="#030000" size="-1">Benvenuti nel sito dedicato
alla Città di Roma</font></p>
<p class="Strisciaoliva"></p>
<p align="center"> ]</p>
</body>
</html>

la seconda striscia continua a non vedersi.

Forse perchè adesso è vuota?

Come si fa a vedere gli errori?

Un qualunque editor di HTML è in grado di verificare la correttezza del codice

**Andrea Binix** · 01-08-2006, 15:08

Per vuota credo intendi senza testo, infatti se provo a scrivere si vede, ma se io volessi lasciarla senza scritte come dovrei fare?

**erredeco** · 02-08-2006, 09:23

Originariamente inviato da Andrea Binix
Per vuota credo intendi senza testo, infatti se provo a scrivere si vede, ma se io volessi lasciarla senza scritte come dovrei fare?

Sigh....

Se intendi che deve essere *sempre* senza testo dentro, allora è inutile utilizzare un paragrafo solo per questo. Piuttosto ti consiglio di modificare lo stile del paragrafo in questo modo:

.Strisciaverde {
padding: 40px;
padding-top: 1%;
padding-left: 25%;
background: #7FDFAA;
margin: 0px;
width:800px;
height:auto;
color:#FF9900;
font: bold 30px/18px verdana, arial;

border-bottom: 20px solid #7FBF55;
}

Dove al posto di "20px" metti pure l'altezza che ti aggrada.

Se ti vuoi tenere il paragrafo... puoi forzarne l'altezza

padding: 0px;
padding-top: 0px;
padding-left: 0%;
background: #7FBF55;
margin: 0px;
width:800px;
height: 20px;
color:#FF9900;
font: bold 30px/18px verdana, arial;}

oppure lasciare tutto com'è e mettere nel paragrafo uno spazio (&nbsp

Discussione: Secondo riempimento...

Strumenti discussione

Ricerca discussione

Visualizza

Secondo riempimento...

Permessi di invio