Problema div non centrato

**playROK** · 18-01-2013, 22:44

Ciao a tutti voi di HTML.it!
Ho un problema con un mio progetto HTML e CSS con i un div che non riesco a centrare. Su internet ci sono un sacco di guide, ma tutti risolvono il problema con dei div con dimensioni fisse mentre io ho tutti div adattati automaticamente al contenuto.

La mia situazione grafica la trovate a questo LINK.

Il mio problema è che il contenitore dell'iframe non è centrato nella colonna centrale e non so davvero come fare! :/

Questo e' il codice HTML:

<!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=utf-8" />
<link rel="stylesheet" type="text/css" href="Senzatitolo-1.css">
<title>Homepage - JoystickGeneration</title>
</head>
<body bgcolor="#999999">
<div id="header">
<div id="main-h">
<div id="box1-h" align="center"> istintodelcalcio </div>
</div>
</div>
<div id="col-centr"> <div id="video"> <iframe width="853" height="480" src="http://www.youtube.com/embed/steRHd_cyV8" frameborder="0" allowfullscreen></iframe>
</div>
</div>
</body>
</html>

E questo è il codice CSS:

body {
margin:0;
}

#header {
width: 100%;
height: auto;
padding: 0 0 0 0;
background-image: -ms-linear-gradient(top, #717171 0%, #000000 100%);
background-image: -moz-linear-gradient(top, #717171 0%, #000000 100%);
background-image: -o-linear-gradient(top, #717171 0%, #000000 100%);
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #717171), color-stop(1, #000000));
background-image: -webkit-linear-gradient(top, #717171 0%, #000000 100%);
background-image: linear-gradient(to bottom, #717171 0%, #000000 100%);
float:left;
}

#main-h {
position:relative;
width:100%;
float:left;
}

#box1-h {
margin: 0 5px 5px 5px;
width:auto;
height:auto;
font-size:72px;
color:#FFF;
font-family:Verdana, Geneva, sans-serif;
}

#col-centr {
margin: 0 auto;
width:940px;
height: 1000px;
padding: 10px;
background:#FFF;
}

#video {
width:auto;
height: auto;
margin: 10px auto;
padding: 10px;
background:#CCC;
float:left;
border-radius: 10px;
}

Qualcuno sa come aiutarmi? D:

Grazie anticipatamente,

Roberto.

**Prill** · 19-01-2013, 09:48

Il div video non può essere centrato orizzontalmente per via del suo float. I margini sinistro e destro su auto gli dicono di disporsi al centro, il float:left invece di posizionarsi a sinistra

**playROK** · 19-01-2013, 10:36

Il problema è che se tolgo float:left; il box si attacca all'header e la colonna centrale sparisce...

**Prill** · 19-01-2013, 13:13

E' perché hai dei float non interrotti nei div precedenti. La domanda è: a cosa ti servono quei float? e perché usi altri due div all'interno di header?
Dovresti creare un contenitore generale che includa tutti i contenuti, su cui specifichi le dimensioni e assegni l'allineamento centrato coi margini laterali settati su auto, al suo interno un div header, senza float, contenente un tag h1 con il tuo titolo, e successivamente un div con gli altri contenuti.

In generale comunque, quando si usano elementi flottanti, il float può essere interrotto usando un clear:both, questo eviterà che siano coinvolti nel float precedente i div che non devono flottare e d'altra parte farà sì che il contenitore di un div flottante si estenda ad inglobarlo

**playROK** · 19-01-2013, 14:19

Ora ho caricato i file su un mio server di Altervista.

Questo è link alla pagina con la mia attuale situazione --> (http://minecraftjg.altervista.org/page.html)

Ecco i vari fix che ho fatto in base a quello che mi hai detto tu:

-Ho tolto un div inutile all'interno di header.
-ho tolto tutti i float presenti del file css.

Non capisco una cosa: perché se metto width: auto; al box video deve estendere le dimensioni a tutto il div #col-centr? La stessa cosa vale per #title: perché deve estendere le proprie dimensioni a tutto il div #video? Non dovrebbero adattarsi al contenuto?

**Prill** · 19-01-2013, 15:46

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=utf-8" />

<title>Homepage - omesso</title>
<link rel="stylesheet" type="text/css" href="http://minecraftjg.altervista.org/stile.css" />

</head>

<body>
<div id="main">
	<div id="header">
		<h1>istintodelcalcio</h1>
	</div>

	<div id="col-centr">
		<div id="video">
			<div id="title">nome omesso - 2012/2013</div>
			<iframe width="853" height="480" src="link omesso" frameborder="0"></iframe>
		</div>

	</div>
</div>
</body>
</html>

css:

codice:

body {
	margin:0;
	background-color:#999;
}

#header {
	width: 100%;
	background-image: -ms-linear-gradient(top, #717171 0%, #000000 100%);
	background-image: -moz-linear-gradient(top, #717171 0%, #000000 100%);
	background-image: -o-linear-gradient(top, #717171 0%, #000000 100%);
	background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #717171), color-stop(1, #000000)); 
	background-image: -webkit-linear-gradient(top, #717171 0%, #000000 100%); 
	background-image: linear-gradient(to bottom, #717171 0%, #000000 100%);
}

#header h1 {
	width:100%;
	font-size:72px;
	font-weight:normal;
	color:#fff;
	font-family:Verdana, Geneva, sans-serif;
	text-align: center;
	margin:0;
}

#col-centr {
	width:960px;
	margin: 0 auto;
	padding: 10px;
	background:#fff;
}

#video {
	width:853px;
	margin: 0 auto;
	padding: 10px;
	background:#ccc;
	border-radius: 10px;
}

#title {
	font-family:Verdana, Geneva, sans-serif;
	text-align:center;
	margin: 0 0 10px 0;
	padding: 5px;
	background:#fff;
	border-radius: 5px;
	text-shadow: 1px 1px 1px #000;
}

con Explorer non vedo alcun colore di sfondo su header

**playROK** · 19-01-2013, 16:49

Avevo utilizzato i gradienti. Ora ho fixato e si dovrebbe vedere...

**playROK** · 19-01-2013, 20:12

Non capisco una cosa: perché se metto width: auto; al box video deve estendere le dimensioni a tutto il div #col-centr? La stessa cosa vale per #title: perché deve estendere le proprie dimensioni a tutto il div #video? Non dovrebbero adattarsi al contenuto?

Qualcuno ha qualche idea?
Link alla pagina --> http://minecraftjg.altervista.org/page.html

**Prill** · 19-01-2013, 23:10

Il codice della tua pagina è esattamente come era prima che ti postassi il codice, che correggeva pure qualcosa che non andava. Perché chiedere aiuto se poi si insiste per la propria strada?
Il valore di default della larghezza di un div o di un altro elemento blocco, se non se ne specifica uno diverso, è auto, il che implica che il div prende tutto lo spazio disponibile in larghezza, per questo il tuo div è largo quanto il contenitore (960 pixel meno il padding)

**playROK** · 19-01-2013, 23:43

Cacchio! Non avevo capito che tu mi avessi sistemato il codice! Grazie Mille!

Altra domanda: come dovrei fare per poter avere la colonna centrale alta quanto tutta la pagina? Mettendo height: 100%; al div #col-centr, quest'ultimo non fa altro che adattarsi al contenuto...

Discussione: Problema div non centrato

Strumenti discussione

Ricerca discussione

Visualizza

Problema div non centrato

Permessi di invio