centrare due box in div #content

**dies** · 02-01-2004, 19:09

il css è:

codice:

html {
	height:100%;
	margin:0px;
	overflow:auto;
}

body { 
	height:100%;
	margin:0px;
	text-align:center;
	background-poistion:absolute;
	background-image:url(bg.gif);
	background-repeat:repeat-x;
}

#content {
	width:90%;
	height:100%;
	margin:0px auto;
	background:#FFF;
}

.box {
	background-poistion:absolute;
	background-image:url(image/box.gif);
	width:320px; height:140px;
	padding:5px;
	float:left;
	position:relative;
	margin:5px;
}

l'html è:

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>
<title>CENTRARE 2 BOX</title>
<style type=text/css>@import url("box.css");
</style>
</head>
<body>
<div id="content">
<div class="box">BOXONE</div>
<div class="box">BOXTWO</div>
</div>
</body>
</html>

ma non ne sto venendo a capo. I due box rimangono sempre sul lato sinistro del div id="content"...

grazie a tutti per la collaborazione

dies

**Francis87** · 02-01-2004, 20:19

Originariamente inviato da dies
il css è:

codice:

html {
	height:100%;
	margin:0px;
	overflow:auto;
}

body { 
	height:100%;
	margin:0px;
	text-align:center;
	background-poistion:absolute;
	background-image:url(bg.gif);
	background-repeat:repeat-x;
}

#content {
	width:90%;
	height:100%;
	margin:0px auto;
	background:#FFF;
        align: center;
        text-align: center; 
}

.box {
	background-poistion:absolute;
	background-image:url(image/box.gif);
	width:320px; height:140px;
	padding:5px;
	/* float:left; */ 
	position:relative;
	margin:5px;
}

l'html è:

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>
<title>CENTRARE 2 BOX</title>
<style type=text/css>@import url("box.css");
</style>
</head>
<body>
<div id="content">
<div class="box">BOXONE</div>
<div class="box">BOXTWO</div>
</div>
</body>
</html>

ma non ne sto venendo a capo. I due box rimangono sempre sul lato sinistro del div id="content"...

grazie a tutti per la collaborazione

dies

**Pasco** · 03-01-2004, 00:11

ma align: center; è standard? :master:

**dies** · 03-01-2004, 02:26

Originariamente inviato da Francis87

grazie per la risposta Francis87, ma non è quello che cercavo... mi spiego con un esempio:

guarda l'allegato, la parte in "arancione" rappresenta i box centrati.

io voglio centrare nel div #content i due box allineati su di un unica linea.

grazie a tutti per l'attenzione

dies

**Pasco** · 03-01-2004, 02:57

il codice corretto è 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>
<title>CENTRARE 2 BOX</title>
<style type="text/css">
html {
        height:100%;
        margin:0px;
        overflow:auto;
}

body { 
        height:100%;
        margin:0px;
        text-align:center;
        background-position:absolute;
        background-image:url(bg.gif);
        background-repeat:repeat-x;
}

div#content {
        width:90%;
        height:100%;
        margin:0px auto;
        background:#FFF;
        text-align: center;
        border: 3px dotted #000;
}

div.box {
        display: inline-block;
        background-position:absolute;
        background-image:url(image/box.gif);
        width:320px;
        height:140px;
        padding:5px;
        margin:5px;
        border: 2px solid #000;       
}
</style>
</head>
<body>
<div id="content">
<div class="box">BOXONE</div>
<div class="box">BOXTWO</div>
</div>
</body>
</html>

il problema è: non so se I.E riesce a vedere display: inline-block; , con Apple Safari vedo una cosa di questo tipo:

la stessa cosa dovresti vederla con Mozilla

**dies** · 03-01-2004, 03:41

Originariamente inviato da Pasco
...
il problema è: non so se I.E riesce a vedere display: inline-block; , con Apple Safari vedo una cosa di questo tipo:

la stessa cosa dovresti vederla con Mozilla

Infatti con I.E6 non va, stessa cosa con Mozilla 1.5.

Mentre funziona alla perfezione (e non avevo dubbi:-)) su Opera 7

Ora provo a vedere se riesco ad uscirne... dopo i tuoi suggerimenti.

grazie.

dies

**dies** · 03-01-2004, 03:46

ho provato a cambiare la riga evidenziata in neretto:

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>
<title>CENTRARE 2 BOX</title>
<style type="text/css">
html {
        height:100%;
        margin:0px;
        overflow:auto;
}

body { 
        height:100%;
        margin:0px;
        text-align:center;
        background-position:absolute;
        background-image:url(bg.gif);
        background-repeat:repeat-x;
}

div#content {
        width:90%;
        height:100%;
        margin:0px auto;
        background:#FFF;
        text-align: center;
        border: 3px dotted #000;
}

div.box {
        display: inline; 
        background-position:absolute;
        background-image:url(image/box.gif);
        width:320px;
        height:140px;
        padding:5px;
        margin:5px;
        border: 2px solid #000;       
}
</style>
</head>
<body>
<div id="content">
<div class="box">BOXONE</div>
<div class="box">BOXTWO</div>
</div>
</body>
</html>

ora sembra funzionare sia su I.E.6 che su Mozilla 1.5.
Il problema è che i box si ridimensionano in funzione del contenuto, guarda l'allegato.

Avevo letto da qualche parte, che era possibile "bloccare" le dimensioni del box... cerco di capirne di più.

ciao

dies

**Pasco** · 03-01-2004, 10:11

infatti avevo usato display: inline-block propio per quello

ma poichè esistono browser fatti con il ->

, purtroppo dovremo adattarci ad un altra soluzione , più lunga ma efficace , ovvero mettere i due div.box dentro un altro div , centrare il nuovo div (rispetto a content) e posizionare con float i div.box all'interno , capito?

più tardi se trovo il tempo ti faccio un esempio

**makeZoner's** · 03-01-2004, 13:10

Prova a dare alla classe BOX la proprietà margin (a destra e a sinistra) in automatico (auto).

**dies** · 03-01-2004, 13:49

Originariamente inviato da makeZoner's
Prova a dare alla classe BOX la proprietà margin (a destra e a sinistra) in automatico (auto).

ciao makeZoner's, grazie per la risposta.

ho provato a seguire il tuo suggerimento, ma non ne vuol sapere di "funzionare"

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>
<title>CENTRARE 2 BOX</title>
<style type="text/css">
html {
        height:100%;
        margin:0px;
        overflow:auto;
}

body { 
        height:100%;
        margin:0px;
        text-align:center;
        background-position:absolute;
        background-image:url(bg.gif);
        background-repeat:repeat-x;
}

div#content {
        width:90%;
        height:100%;
        margin:0px auto;
        background:#FFF;
        text-align: center;
        border: 3px dotted #000;
}

div.box {
        display: inline-block;
        background-position:absolute;
        background-image:url(image/box.gif);
        width:320px;
        height:140px;
        padding:5px;
        margin:5px auto;
        border: 2px solid #000;       
}
</style>
</head>
<body>
<div id="content">
<div class="box">BOXONE</div>
<div class="box">BOXTWO</div>
</div>
</body>
</html>

ciao

dies

Discussione: centrare due box in div #content

Strumenti discussione

Ricerca discussione

Visualizza

centrare due box in div #content

Re: centrare due box in div #content

Re: Re: centrare due box in div #content

Permessi di invio