Layout ....problema con div contenitore..

**a.felix** · 31-03-2009, 13:22

Sto' realizzando una pagina, principalmente i contenitori sono 2 ... il top dove e' il menu' e il sottostante che tiene tutto il resto ....dentro quest'ultimo ci sono 3 colonne con dentro altri "x" div

Ho principalmente 2 problemi:
vorrei che il div Main (quello che contiene il corpo della pagina), arrivi in fondo alla pagina
inoltre non capisco perche' non "sente" neanche i div al suo interno rimanendo con altezza praticamente 0...

Html

codice:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html><head>
<title>Emiliano Orlandi</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link href="Css/global.css" rel="stylesheet" type="text/css">
<link href="Css/Nav.css" rel="stylesheet" type="text/css">
<meta name="Category" content="company">
<meta name="Description" content="">
</head><body>

<div id="globalheader">
	<ul id="globalnav">
		<li id="gn-Home">Home
		<li id="gn-Giocatori">Giocatori
		<li id="gn-Servizi">Servizi
		<li id="gn-News">News
		<li id="gn-Newsletters">Newsletters
		<li id="gn-Contatti">Contatti
	[/list]
</div>


<div id="main">
		<div id="side-a">
			<div id="blog"></div>
			<div id="blog"></div>
		</div>
		<div id="content">
			<div id="Content1"></div>
			<div id="Content2"></div>
		</div>
		<div id="side-b">
			<div id="YouTube">
				<object width="260" height="220"><param name="movie" value="http://www.youtube.com/v/4D6Awp6755g&hl=en&fs=1&color1=0x3a3a3a&color2=0x999999&border=1"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube.com/v/4D6Awp6755g&hl=en&fs=1&color1=0x3a3a3a&color2=0x999999&border=1" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="260" height="220"></embed></object>
			</div>
			<div id="playList">
				<object width="260px" height="260px"> <param name="movie" value="http://www.profileplaylist.net/mc/mp3player_new.swf"></param> <param name="allowscriptaccess" value="never"></param> <param name="wmode" value="trasparent"></param> <param name="flashvars" value="config=http%3A%2F%2Fwww.indimusic.us%2Fext%2Fpc%2Fconfig_black.xml&amp;mywidth=260&amp;myheight=260&amp;playlist_url=http%3A%2F%2Fwww.indimusic.us%2Floadplaylist.php%3Fplaylist%3D58474915%26t%3D1237493064&amp;wid=os"></param> <embed style="width:260px; visibility:visible; height:260px;" allowScriptAccess="never" src="http://www.profileplaylist.net/mc/mp3player_new.swf" flashvars="config=http%3A%2F%2Fwww.indimusic.us%2Fext%2Fpc%2Fconfig_black.xml&amp;mywidth=260&amp;myheight=260&amp;playlist_url=http://www.indimusic.us/loadplaylist.php?playlist=58474915&t=1237493064&amp;wid=os" width="260px" height="260px" name="mp3player" wmode="trasparent" type="application/x-shockwave-flash" border="0"/> </object>        
			</div>
		</div>
</div>

</body>
</html>

Css

codice:

body{
height: 100%;
padding:0 0 0 0;
margin:0 0 0 0;
text-align:center;
background: url('../Img/Back_1.gif') #000000 no-repeat fixed center top ; 
font: 12px 'Lucida Grande', Geneva, Arial, Verdana, sans-serif; 
color: #000;
}

#main{
width: 840px; 
height: 100%;
margin: 0px auto;
border: 1px solid #fff;
background:transparent url('../Img/transbg.png') repeat;
z-index:1;
}

#main #side-a { float: left;  width: 185px; margin:10px 0px 10px 20px;}
#main #content { float: left; width: 305px; margin:10px 0px 10px 20px;}
#main #side-b { float: right; width: 260px; margin:10px 20px 10px 20px;}

#main #side-a #blog { float: left;  width: 185px; height:211px; margin:10px 0px 0px 0px; background: url('../Img/BoxBlog.png') transparent no-repeat !important; }
#main #content #Content1 { float: left; width: 308px; height:192px; margin:10px 0px 0px 0px; background: url('../Img/CentraleOrizz.png') transparent no-repeat !important; }
#main #content #Content2 { float: left; width: 308px; height:192px; margin:10px 0px 0px 0px; background: url('../Img/CentraleVert.png') transparent no-repeat !important; }

#main #side-b #playList{ float: left;  width: 261px; height:261px; margin:10px 0px 0px 0px; background: url('../Img/spinner.gif') transparent no-repeat center center !important; }
#main #side-b #YouTube{ float: left;  width: 261px; height:220px; margin:10px 0px 0px 0px; background: url('../Img/spinner.gif') transparent no-repeat center center !important; }

img, div{behavior: url(iepngfix.htc);}

**a.felix** · 31-03-2009, 14:19

facendo cosi' funziona ma mi pare una porcata...

codice:

html, body{
width: 100%;
height: 100%;
max-height: 100%;
margin: 0;
padding: 0;
text-align:center;
background: url('../Img/Back_1.gif') #000000 no-repeat fixed center top ; 
font: 12px 'Lucida Grande', Geneva, Arial, Verdana, sans-serif; 
color: #000;
}

#main{
width: 840px; 
height: 100%;
min-height:100%;
margin: 0px auto;
border: 1px solid #fff;
background:transparent url('../Img/transbg.png') repeat;
z-index:1;
}

Cosiderando anche che va' al 100% poi gli avanza il menu' sopra...quindi attiva lo scroll prima

Discussione: Layout ....problema con div contenitore..

Strumenti discussione

Ricerca discussione

Visualizza

Layout ....problema con div contenitore..

Permessi di invio