Curiosità: div centrato solo sulla carta

**thinkinmonkey** · 19-11-2009, 13:57

Salve a tutti,
ho centrato un div rosso (corpoT) di dimensioni conosciute all'interno di un altro div (outT) che prende tutta la pagina, ma quando visualizzo la pagina in FF (come in Opera e in IE), il div rosso (corpoT) è centrato correttamente orizzontalmente, ma verticalmente sembra spostato in basso e non riesco a capire quale sia la causa.

Questo è il risultato in IE:

Questo è il css:

codice:

html, body {
	background : white;
	margin : 0;
	padding : 0;
	height : 100%;
}

#outT {
	margin-top : 0px;
	position: absolute;
	top: 0px;
	left: 0px;
	width: 100%;
	height: 100%;
	overflow: visible;
}

#corpoT {
	background : red;
	width : 830px;
	height : 550px;
	margin-left : -415px;
	margin-top : -225px;
	position : relative;
	top : 50%;
	left : 50%;
}

Questo è l'html:

codice:

	<body>
	<div id="outT">
		<div id="corpoT">
		</div>
	</div>
	</body>

Qualcuno sa dirmi cosa sbaglio?
Grazie.

**Mich_** · 19-11-2009, 15:44

corpoT deve essere posizionato in modo assoluto, per poter usare quel metodo di centramento.

inoltre nel tuo CSS manca il
width: 100%
al body (altrimenti il width:100% del outT perde significato (non in tutti i browser, pero`)

**miki003** · 19-11-2009, 15:48

Prova invertire di norma position:relative andrebbe nel contenitore e position:absolute nel corpo

**thinkinmonkey** · 19-11-2009, 19:39

Non funziona. Vi ringrazio per il vostro tempo, ma nessun consiglio sembre avere il minimo effetto.
Riporto il codice html, non vorrei aver commesso qualche altro errore:

codice:

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "blah blah blah">
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<title>blah blah blah</title>
		<link type="text/css" rel="stylesheet" href="css/style.css" />
		<script type="text/javascript" src="scripts/mootools-1.2.4-core-yc.js"></script>
		<script type="text/javascript" src="scripts/langScript.js"></script>
		<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
		<meta name="description" content="blah blah blah" /> 
		<meta name="keywords" content="blah blah blah" />
	</head>
	<body>
	<div id="outT">
		<div id="corpoT">
		</div>
	</div>
	</body>
</html>

**chiamatekatia** · 19-11-2009, 22:42

Hai sbagliato i calcoli, la metà di 550 è 275 non 225

Quindi:

codice:

#corpoT {
	background : red;
	width : 830px;
	height : 550px;
	margin-left : -415px;
	margin-top : -275px;
	position : absolute;
	top : 50%;
	left : 50%;
}

**thinkinmonkey** · 20-11-2009, 11:51

D'oh!

Ecco cosa succede a lavorar di notte e a guardare il problema da un punto di vista sbagliato!!!
Grazie, chiamatekatia.

P.S. Tutti i professori dell'autore del presente thread declinano ogni responsabilità sull'accaduto e affermano fermamente di aver fatto tutto il possibile in loro potere per tener sveglio il suddetto autore durante le lezioni.

**serdominik** · 20-11-2009, 14:35

ciao thinkinmonkey ti volevo dire che anche se in teoria hai risolto e fatto bene abbiamo quasi la stessa cosa in comune....

mi spiego prova a mettere nel div rosso anche una sola parola o una frase lascio a te l'immaginazione

e prendi il tuo browsere e inizia a ridurre la finestra col mouse finchè nn ti compare lo scroll del browser vedi che l'inizio della frase verrà mangiato dal browser

provate tutti nn dico fesserie io sto in questo medesimo problema help me

nn avevo letto questa discussione e prima che postavo qui avevo messo il mio problema già

mi scuso con i moderatori vedete voi se optare per cancellarla o meno

**Mich_** · 20-11-2009, 16:31

Se il blocco interno supera le dimensioni del contenitore, chiaramente questo modo di centrare non va piu` bene: e` un difetto intrinseco nei posizionamenti assoluti.

Ma se il blocco e` grande, non conviene centrarlo in verticale, e allora per centrare solo in orizzontale si puo` agire con i margini automatici (senza usare i posizionamenti).

In alternativa si puo` procedere a centrare tramite JS, settando i margini in base alle dimensioni dei vari blocchi.

**serdominik** · 20-11-2009, 17:05

grazie mich della risposta... di aver chiuso il 3d precedente e scusami ancora del disturbo.

Ineffetti dipende dalle risoluzioni che un utente va a vedere il sito... perchè io che tengo un bel monitor 22 pollici 16:9 e ho la risoluzione altissima ma agendo nel registrengere il browser come se cambiassi risoluzione mi ritrovo che cmq c'è questa falla...
adesso che parli di js mi si è accesa la lampadina....

bisognerebbe fare un controllo sull'altezza e/o larghezza del browser in modo di attivare e/o disattivare la regola css perla centratura

dico bene?

**Mich_** · 20-11-2009, 17:20

bisognerebbe fare un controllo sull'altezza e/o larghezza del browser in modo di attivare e/o disattivare la regola css perla centratura

dico bene?

Non esattamente.
Se dai al JS tutto il potere, il sito non funziona piu` in caso che il JS non sia abilitato.

Conviene:
1. fare il sito senza centratura: deve vedersi bene a tutte le risoluzioni/dimensioni della finestra
2. tramite JS verificare le dimensioni del contenitore (immagino che le dimensioni del blocco interno le conosci gia`); a questo punto devi decidere (il JS e` in grado di farlo) quali margini asegnare al blocco interno.
Esempio di comando JS:
document.getElementById('ID_BLOCCO_INTERNO').style .marginLeft = VALORE_CALCOLATO+'px';

Nota1: nella parentesi c'e` tra apici l'id assegnato al blocco da centrare
Nota2: l'attributo CSS margin-left diventa in JS marginLeft (case sensitive)
Nota3: occorre trasformare il valore in stringa ed aggiungere il suffisso 'px' (l'operatore + con almeno una stringa fa da solo quel lavoro)

Discussione: Curiosità: div centrato solo sulla carta

Strumenti discussione

Ricerca discussione

Visualizza

Curiosità: div centrato solo sulla carta

Permessi di invio