[css] centrare un box

**Caleb** · 30-04-2004, 14:48

sapete dirmi come devo fare per centrare il box definito da questo codice? (ora è in alto a sinistra e lo vorrei al centro dello schermo)

devo crearne uno nuovo che vada a includere le tre parti che compongono il box, o mettere il tutto in un div?

codice:

<html>
<head>
<style type="text/css">

#top {
	position:absolute;
	left:0px;
	top:0px;
	width:593px;
	height:129px;
}

#centro {
	position:absolute;
	left:0px;
	top:129px;
	width:593px;
	height:243px;
}

#bottom {
	position:absolute;
	left:0px;
	top:372px;
	width:593px;
	height:128px;
}
</style>
</head>
<body style="margin-top: 100px; margin-bottom: 0px; margin-left: 0px; margin-right: 0px;">
<div id="top">
	[img]immagini/top.gif[/img]
</div>
<div id="centro">
	[img]immagini/center.gif[/img]
</div>
<div id="bottom">
	[img]immagini/bottom.gif[/img]
</div>
</body>
</html>

**flanza** · 30-04-2004, 15:04

intanto prova con
text-align:center;

nello stile del body

e poi eventualmente aggiungi margin:auto agli elementi da centrare

**Francis87** · 30-04-2004, 15:05

text-align: funziona solo con IE x centrare gli elementi
metti in un div principale tutto e dagli

codice:

margin-left: auto;
margin-right: auto;

**Caleb** · 30-04-2004, 15:47

ho provato così ma non va... rimane sempre in alto a sx
dove sbaglio?

codice:

<html>
<head>
<style type="text/css">

#top {
	position:absolute;
	left:0px;
	top:0px;
	width:593px;
	height:129px;
}

#centro {
	position:absolute;
	left:0px;
	top:129px;
	width:593px;
	height:243px;
}

#bottom {
	position:absolute;
	left:0px;
	top:372px;
	width:593px;
	height:128px;
}

#box {
        margin-left:auto;
        margin-right:auto;
}

</style>
</head>
<body style="margin-top: 100px; margin-bottom: 0px; margin-left: 0px; margin-right: 0px;">
<div id="box">
        <div id="top">
	         [img]immagini/top.gif[/img]
        </div>
        <div id="centro">
	         [img]immagini/center.gif[/img]
        </div>
        <div id="bottom">
	         [img]immagini/bottom.gif[/img]
        </div>
</div>
</body>
</html>

**flanza** · 30-04-2004, 15:51

metti:

<body style="margin-top: 100px; margin-bottom: 0px; margin-left: 0px; margin-right: 0px;text-align:center;">

**Caleb** · 30-04-2004, 16:13

ho stravolto un pò il codice... dunque, così funziona ma con ie6 mi aggiunge misteriosamente 4px fra uno slice e l'altro, nessun problema con mozilla

codice:

<html>
<head>
<style type="text/css">

#top {
	position:relative;
	left:0px;
	top:0px;
}

#centro {
	position:relative;
	left:0px;
	top:0px;
}

#bottom {
	position:relative;
	left:0px;
	top:0px;
}

</style>
</head>
<body style="margin-top: 100px;text-align:center;">
<div id="top">
         [img]immagini/top.gif[/img]
</div>
<div id="centro">
         [img]immagini/center.gif[/img]
</div>
<div id="bottom">
         [img]immagini/bottom.gif[/img]
</div>
</body>
</html>

problema di box model con ie?
potrei risolvere modificando il valore top in -4 ma in questo modo dovrei fare due css e intercettare la versione del browser all'apertura della pagina...

**Caleb** · 30-04-2004, 16:40

risolto... piccolo escamotage

codice:

#top {
	position:relative;
	left:0px;
	top:0px;

#center {
	position:relative;
	left:0px;
	_top:4px;
}

#bottom {
	position:relative;
	left:0px;
	_top:-4px;
}

spero che dalla versione 7 ie riesca a interpretare finalmente bene sto cavolo di box model...

**flanza** · 30-04-2004, 16:40

usa un hack

**flanza** · 30-04-2004, 16:41

ci siamo sovrapposti! volevo dire proprio così!
Sembra che la versione 7 debba essere molto rispettosa degli standard! Vedremo!

**Caleb** · 30-04-2004, 16:51

incrociamo le dita... intanto grazie dell'aiuto

Discussione: [css] centrare un box

Strumenti discussione

Ricerca discussione

Visualizza

[css] centrare un box

Permessi di invio