[CSS] Impostare (in modo corretto) i margini degli elementi

sangueimpazzito · 19-09-2005, 09:26

Ciao a tutti.
Ho un problemino con questo codice:

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 (

).
C'è qualcuno in grado di darmi una mano?
Grazie dell'attenzione.

19-09-2005, 21:19

semplice togli i commenti nel CSS.

I commenti nel codice CSS sono:

/* codice da commentare */

e non:



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

Quote:

Originariamente inviato da Sgurbat

semplice togli i commenti nel CSS.

I commenti nel codice CSS sono:

/* codice da commentare */

e non:



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?

v1ruz · 20-09-2005, 10:54

www.w3schools.com

sangueimpazzito · 20-09-2005, 11:40

Quote:

Originariamente inviato da v1ruz

www.w3schools.com

E perchè non www.google.com?

Comunque grazie, provo a cercare un po'.

20-09-2005, 20:47

Quote:

Originariamente inviato da sangueimpazzito

Grazie mille!
Un'altra curiosità: per centrare verticalmente un ipotetico titolo nell''header come faccio?
Devo impostare forse qualcosa nei margini top e bottom?

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

Quote:

Originariamente inviato da Sgurbat

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:

Explorer:

Ecco qui li codice...

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

Quote:

Originariamente inviato da sangueimpazzito

E perchè non www.google.com?

Comunque grazie, provo a cercare un po'.

non volevo "tirarmela", ma li c'e' tutto quello di cui hai bisogno

21-09-2005, 19:09

Quote:

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.

20-09-2005, 10:54	#4
v1ruz Senior Member Iscritto dal: Nov 2004 Città: $HOME Messaggi: 1213	www.w3schools.com __________________ Last.fm: My Profile / GamerTag XBL: Martcus / Flickr / deviantArt iBook 12'' / MacBook Pro 13'' / iPhone 3G 16GB Black / iPod 5G 30GB / iPod Nano 2G 4GB

19-09-2005, 21:19	#2
anonimizzato Messaggi: n/a	semplice togli i commenti nel CSS. 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.

Strumenti
Mostra una versione stampabile Invia questa pagina per email