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.

Rispondi quotando