problema margini negativi [era: E' proprio giornata]

**kaze** · 18-01-2006, 15:47

Applicando la tecnica dei margini negativi per posizionare al centro un div:

codice:

#boxmaster{
width:80%; 
height:500px;
position:absolute;
top:50%;
left:50%;
margin:-250px 0 0 -40%;
background:#000000;
}

perchè se al posto di height:500px metto height:60% (e ovviamente il margin a -30%) il box invece di stare al centro mi và a finire in alto ???

Cosa significa che se si utilizzano percentuali maggiori del 50% si sballa tutto ???

ATTENZIONE se metto, per esempio, height:30% (con relativo margin:-15%) il box si posiziona a dovere al centro della pagina.

:master: :master: :master: :master:

**kaze** · 18-01-2006, 16:48

uppete

**seed_squall_it** · 18-01-2006, 21:27

Hai provato assegnando esplicitamente height: 100% agli elementi html e body?

**kaze** · 19-01-2006, 10:39

Certo che sì è la prima cosa che ho fatto !!!

Posto tutto il codice....CSS:

codice:

body, html{
padding:0;
margin:0;
width:100%;
height:100%;
background: #6F6F6F;
}

#boxmaster{
width:80%; 
height:500px;
position:absolute;
top:50%;
left:50%;
margin:-250px 0 0 -40%;
background:#000000;
background-image: url(dionea_giant.jpg);
background-repeat: no-repeat;
background-position: bottom right;
border:1px solid #B7B7B7;
font-family:verdana, sans-serif;
font-size:0.7em;
font-weight:700;
color:#ffffff;
}

#boxslave{
padding:10px;
top:20%;
left:5%;
width:70%;
position:absolute;
background: #000000;
border:1px solid #B7B7B7;
color: #ffffff;
text-align:justify;
filter:alpha(opacity=70);
-moz-opacity:0.7;
opacity:0.7; 
min-height: 100px;
height: auto !important;
height: 100px;
font-family:verdana, sans-serif;
font-size:0.6em;
font-weight:700;
color:#ffffff;
}


ul.menu{
width:100%;
list-style:none;     
margin:0;           
padding:0;
}

ul.menu li{
margin:0.1em;
float:left;
}

ul.menu li a{
display:block;        
text-decoration:none; 
padding:0.7em;
line-height:0.4em;
height:0.4em;
border: 1px solid #000000;
color:#00FF00;
float:left;
width:120px;
}

ul.menu li a:hover{
background: #000000;
color:#FFFF00;
border: 1px solid #ffff00;
float:left;
text-transform: uppercase;
width:120px;
}

Corpo:

codice:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
  <title></title>
  <style type="text/css">
  @import url(testcss.css);
  </style>
</head>
<body>
<div id="boxmaster">
  <ul class="menu">[*]Sezione Link 1[*]Link 2[*]Sezione Link 3[*]Sezione Link 4[*]Sezione Link 5[/list]
</div>
<div id="boxslave">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vivamus tincidunt. 
Curabitur orci. Donec in diam at tellus vestibulum blandit. 
In a est at arcu malesuada venenatis. Pellentesque mattis felis a ipsum. 
Nam vel felis non dui vestibulum egestas. Donec nec ipsum. Vivamus luctus dui id leo. 
Nulla facilisi. Proin eu est. Etiam vulputate aliquam lacus. Vestibulum nec tortor. 
Integer neque nunc, venenatis quis, laoreet in, tincidunt sed, lorem. Lorem ipsum dolor 
sit amet, consectetuer adipiscing elit. Nunc eu sapien. Sed adipiscing nonummy erat. 
Aenean risus turpis, fermentum sed, luctus id, aliquam vitae, odio.
</div>
</body>
</html>

Messo così funziona ma, come mi ripeto, se metto:

codice:

#boxmaster{
width:80%; 
height:80%; 
position:absolute;
top:50%;
left:50%;
margin:-40% 0 0 -40%; 
background:#000000;
background-image: url(dionea_giant.jpg);
background-repeat: no-repeat;
background-position: bottom right;
border:1px solid #B7B7B7;
font-family:verdana, sans-serif;
font-size:0.7em;
font-weight:700;
color:#ffffff;
}

Il box mi si spara in alto invece che al centro !! :master:
questo sia con FF che con IE

**seed_squall_it** · 19-01-2006, 14:11

Sai che ho paura che sia un "gioco" di percentuali? Provando con IE5 il CSS che dovrebbe funzionare, ho notato che sbaglia a centrare il box orizzontalmente (infatti hai una width: 80% e un margin-left: -40%), posizionandolo tutto a destra e anche oltre la larghezza della pagina. In effetti, i valori percentuali dei margini, come tutti i valori percentuali, non si riferiscono alle dimensioni del box ma a quelle del suo elemento padre. Quindi il tuo margin: -40% 0 0 -40% è riferito all'elemento body, non a #boxmaster. I box da centrare nella pagina andrebbero sempre impostati con dimensioni fisse in pixel...può darsi che con dimensioni percentuali inferiori ad un certo valore (magari proprio 50%) ti funzioni, mentre se imposti un'altezza superiore (e quindi un margin-top negativo superiore), FF e IE sballano tutto (e ovviamente FF è quello che "sbaglia" nel modo corretto...mentre IE ne fa di tutti i colori).

**kaze** · 19-01-2006, 15:56

Comunque rimane un comportamento come dire bizzarro :master:
ho provato con varie percentuali e praticamente funziona da 43% in giù

Il perchè rimane un mistero !!!

Discussione: problema margini negativi [era: E' proprio giornata]

Strumenti discussione

Ricerca discussione

Visualizza

E' proprio giornata

Permessi di invio