PDA

View Full Version : [CSS] Impostare (in modo corretto) i margini degli elementi

sangueimpazzito
19-09-2005, 09:26
Ciao a tutti.
Ho un problemino con questo codice:

<!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" />
<meta name="keywords" content="" />
<title></title>
<style type="text/css">


body {
background-color: #589bd2;
}

h3 {
font-weight : bold;
font-size : 11px;
}

a:link {
color: #666666;
text-decoration: none;
}

a:visited {
color: #800080;
text-decoration: none;
}

a:hover {
color: #72BCC6;
text-decoration: none;
}

input,textarea {
background-color: #E4EFF1;
color: #5C99A2;
}


#boxesterno {
background-color: #000000; <!-- nero -->
width: 760px;
}

#header {
background-color: #00c000; <!--verde-->
height: 200px;
}

#footer {
background-color: #ff0000; <!--rosso-->
height: 200px;
}

#boxinterno {
background-color: #ffffff; <!-- bianco -->
color: #800080; <!-- colore del testo -->
font-family: Geneva, Arial, Helvetica, sans-serif;
font-size: 11px;
width: 390px;
margin-left: auto;
margin-right: auto;

}


#menusx {
background-color: #ff40ff; <!-- fucsia -->
float: left;
color: #666666;
font-family: Geneva, Arial, Helvetica, sans-serif;
font-size: 11px;
width: 180px;

}


.testo_sx {
text-align: justify;
}

.scritti {
text-align: justify;
}

.titolo{
font-family: Arial, sans-serif;
font-size: 40px;
font-style: normal;
color: #FFFFFF; <!-- titolo -->
}



</style>
</head>

<body>



<!-- START BOX ESTERNO -->
<div id="boxesterno">



<!-- START HEADER -->
<div id="header">
<div class="titolo">
<DIV ALIGN="center">Header</DIV>
</div>
</div>
<!-- END HEADER -->



<!-- START COLONNA -->
<div id="menusx">
<div class="testo_sx">
Curabitur eget turpis. Nulla dapibus ultricies augue. Nunc mollis tristique leo. Fusce et felis non ligula rhoncus sollicitudin. Aenean tortor libero, egestas eget, consequat ac, iaculis quis, metus. Cras vehicula eleifend dui. Ut gravida, tortor eget rhoncus nonummy, leo lacus euismod orci, eu congue pede lacus sed nisi. Maecenas velit. Nulla pharetra leo tempus orci. Morbi hendrerit, nibh sed commodo accumsan, risus erat pharetra pede, aliquam convallis velit orci ut mauris. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Praesent nibh pede, malesuada sit amet, porta quis, auctor in, metus. Maecenas viverra tincidunt pede. Fusce et purus. Aliquam justo. Sed ut lorem. Nunc aliquam odio luctus dui. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Mauris in orci vitae lorem suscipit rhoncus.
</div>
</div>
<!-- END COLONNA -->



<!-- START BOX INTERNO -->
<div id="boxinterno">
<div class="scritti">
Curabitur eget turpis. Nulla dapibus ultricies augue. Nunc mollis tristique leo. Fusce et felis non ligula rhoncus sollicitudin. Aenean tortor libero, egestas eget, consequat ac, iaculis quis, metus. Cras vehicula eleifend dui. Ut gravida, tortor eget rhoncus nonummy, leo lacus euismod orci, eu congue pede lacus sed nisi. Maecenas velit. Nulla pharetra leo tempus orci. Morbi hendrerit, nibh sed commodo accumsan, risus erat pharetra pede, aliquam convallis velit orci ut mauris. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Praesent nibh pede, malesuada sit amet, porta quis, auctor in, metus. Maecenas viverra tincidunt pede. Fusce et purus. Aliquam justo. Sed ut lorem. Nunc aliquam odio luctus dui. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Mauris in orci vitae lorem suscipit rhoncus.
</div>
</div>
<!-- FINE BOX INTERNO -->



<!-- START FOOTER -->
<div id="footer">
<div class="titolo">
<DIV ALIGN="center">Footer</DIV>
</div>
</div>
<!-- END FOOTER -->



</div>
<!-- END BOX ESTERNO-->



</body>
</html>


Vorrei che il box bianco fosse allineato in alto con quello fucsia, ma non riesco a capire come fare ( :cry: ).
C'è qualcuno in grado di darmi una mano?
Grazie dell'attenzione.
anonimizzato
19-09-2005, 21:19
semplice togli i commenti nel CSS. :D

I commenti nel codice CSS sono:

/* codice da commentare */

e non:

<!-- codice da commentare -->

ciò ovviamente ti sballava la lettura delle proprietà da parte del browser e faceva saltare il floating dei box.
sangueimpazzito
20-09-2005, 08:57
semplice togli i commenti nel CSS. :D

I commenti nel codice CSS sono:

/* codice da commentare */

e non:

<!-- codice da commentare -->

ciò ovviamente ti sballava la lettura delle proprietà da parte del browser e faceva saltare il floating dei box.


Grazie mille!
Un'altra curiosità: per centrare verticalmente un ipotetico titolo nell''header come faccio?
Devo impostare forse qualcosa nei margini top e bottom?
:mbe:
v1ruz
20-09-2005, 10:54
www.w3schools.com
sangueimpazzito
20-09-2005, 11:40
www.w3schools.com

E perchè non www.google.com? :asd:
Comunque grazie, provo a cercare un po'.
:D
anonimizzato
20-09-2005, 20:47
Grazie mille!
Un'altra curiosità: per centrare verticalmente un ipotetico titolo nell''header come faccio?
Devo impostare forse qualcosa nei margini top e bottom?
:mbe:

supponiamo che il tuoi header sia alto 50px e hai un titolo di UNA SOLA riga, ti basta indicare al titolo un line-height di 50px e verrà centrata in verticale.

l'importante è che sia solo su una riga altrimenti la seconda verrebbe troppo spaziata.

In altro modo puoi giocare ad occhio con il padding-top e padding-bottom sempre del titolo.
sangueimpazzito
21-09-2005, 11:18
supponiamo che il tuoi header sia alto 50px e hai un titolo di UNA SOLA riga, ti basta indicare al titolo un line-height di 50px e verrà centrata in verticale.

l'importante è che sia solo su una riga altrimenti la seconda verrebbe troppo spaziata.

In altro modo puoi giocare ad occhio con il padding-top e padding-bottom sempre del titolo.


Grazie mille, di nuovo.
Questa volta ho risolto 'giocando' con i padding.

Nonostante tutto, ho trovato delle differenze nella visualizzazione ottenuta con Firefox e con Explorer.
Non riesco a capire a cosa siano dovute e come risolverle.

Firefox:
http://img380.imageshack.us/img380/3265/ff6hk.th.png (http://img380.imageshack.us/my.php?image=ff6hk.png)

Explorer:
http://img380.imageshack.us/img380/4116/ie6wv.th.png (http://img380.imageshack.us/my.php?image=ie6wv.png)

Ecco qui li codice...

<!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" />
<meta name="keywords" content="" />
<title></title>
<style type="text/css">


body {
background-color: #589bd2;
text-align: center; /*centra in IE 5.x*/
}

h3 {
font-weight : bold;
font-size : 11px;
}

a:link {
color: #666666;
text-decoration: none;
}

a:visited {
color: #800080;
text-decoration: none;
}

a:hover {
color: #72BCC6;
text-decoration: none;
}

input,textarea {
background-color: #E4EFF1;
color: #5C99A2;
}


#boxesterno {
background-color: #E6E6E6; /*grigio*/
width: 760px;
margin: 0px auto; /*centra negli altri browsers*/
text-align: left; /*ripristina l' allineamento*/
}

#header {
height: 200px;
background-color: #00c000; /*verde*/
}

#footer {
height: 200px;
clear: left;
background-color: #ff0000; /*rosso*/
}

#boxinterno {
background-color: #ffffff; /*bianco*/
color: #800080; /*colore del testo*/
font-family: Geneva, Arial, Helvetica, sans-serif;
font-size: 11px;
width: 390px;
margin-left: auto;
margin-right: auto;
margin-top: 40px;
}


#menusx {
background-color: #ff40ff; /*fucsia*/
color: #666666;
float: left;
font-family: Geneva, Arial, Helvetica, sans-serif;
font-size: 11px;
width: 180px;
margin-left: 10px;
margin-top: 40px;
}


.testo_sx {
text-align: justify;
}

.scritti {
text-align: justify;
}

.titolo{
font-family: Arial, sans-serif;
font-size: 40px;
font-style: normal;
text-align: center;
color: #FFFFFF; /*titolo*/
padding-top: 77px;
padding-bottom: 77px;
}



</style>
</head>

<body>



<!---START BOX ESTERNO-->
<div id="boxesterno">



<!---START HEADER-->
<div id="header">
<div class="titolo">
Titolo
</div>
</div>
<!---END HEADER-->



<!---START COLONNA-->
<div id="menusx">
<div class="testo_sx">

Curabitur eget turpis. Nulla dapibus ultricies augue. Nunc mollis tristique leo. Fusce et felis non ligula rhoncus sollicitudin. Aenean tortor libero, egestas eget, consequat ac, iaculis quis, metus. Cras vehicula eleifend dui. Ut gravida, tortor eget rhoncus nonummy, leo lacus euismod orci, eu congue pede lacus sed nisi. Maecenas velit. Nulla pharetra leo tempus orci. Morbi hendrerit, nibh sed commodo accumsan, risus erat pharetra pede, aliquam convallis velit orci ut mauris. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Praesent nibh pede, malesuada sit amet, porta quis, auctor in, metus. Maecenas viverra tincidunt pede. Fusce et purus. Aliquam justo. Sed ut lorem. Nunc aliquam odio luctus dui. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Mauris in orci vitae lorem suscipit rhoncus.

</div>
</div>
<!---END COLONNA-->



<!---START BOX INTERNO-->
<div id="boxinterno">
<div class="scritti">

Curabitur eget turpis. Nulla dapibus ultricies augue. Nunc mollis tristique leo. Fusce et felis non ligula rhoncus sollicitudin. Aenean tortor libero, egestas eget, consequat ac, iaculis quis, metus. Cras vehicula eleifend dui. Ut gravida, tortor eget rhoncus nonummy, leo lacus euismod orci, eu congue pede lacus sed nisi. Maecenas velit. Nulla pharetra leo tempus orci. Morbi hendrerit, nibh sed commodo accumsan, risus erat pharetra pede, aliquam convallis velit orci ut mauris. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Praesent nibh pede, malesuada sit amet, porta quis, auctor in, metus. Maecenas viverra tincidunt pede. Fusce et purus. Aliquam justo. Sed ut lorem. Nunc aliquam odio luctus dui. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Mauris in orci vitae lorem suscipit rhoncus.

</div>
</div>
<!---FINE BOX INTERNO-->



<!---START FOOTER-->
<div id="footer">
<div class="titolo">
Fondo
</div>
</div>
<!---END FOOTER-->



</div>
<!---END BOX ESTERNO-->



</body>
</html>


...e in allegato ho messo anche il file già pronto.

Grazie di nuovo a tutti dell'attenzione.
:)
v1ruz
21-09-2005, 11:44
E perchè non www.google.com? :asd:
Comunque grazie, provo a cercare un po'.
:D

non volevo "tirarmela", ma li c'e' tutto quello di cui hai bisogno :)
anonimizzato
21-09-2005, 19:09
Nonostante tutto, ho trovato delle differenze nella visualizzazione ottenuta con Firefox e con Explorer.
Non riesco a capire a cosa siano dovute e come risolverle.

Se le differenze sono minime vai tranquillo che è fisiologico e dipende dal diverso motore di rendering dei browser.

Nel caso ci siano discrepanze evidenti allora è probabile che stia commettendo un errore o che ti trovi difronte ad un bug specifico a cui spesso si può porre rimedio con uno dei tantissimi hack o workaround esistenti.