il container che non contiene...

**ValentinZuko** · 19-06-2007, 06:18

...e il footer che se ne va ovviamente a spasso.

Scusate ma sto uscendo di senno con questo problema.
Le ho provate tutte.
Se funziona con FF non funziona con IE e viceversa.

Sembra che il container non riesca ad essere elastico, come dovrebbe.
So che sto sbagliando una o forse diverse cose, ma onestamente non riesco a venirne a capo.

Ecco il codice CSS

codice:

body {
background:url(../images/backgr-body.png);
background-repeat:repeat;
margin-left:0px;
margin-top:0px;
font-family:Arial, Helvetica, sans-serif;
font-size:10px;
color:#333333;
text-align:justify;
height:100%;
width:99%;
padding:0;
}

a,a:visited,a:link {
color:#99CC00;
text-decoration:underline;
}

a:hover {
color:#00FF33;
text-decoration:overline;
}


#container {
position:relative;
margin-left:0px;
margin-top:0px;
width:100%;
height:100%;
}

#logoarea {
position:absolute;
left:0px;
top:0px;
width:387px;
height:166px;
background:url(../images/backgr-logo2.png);
background-repeat:no-repeat;
overflow:hidden;
float:right;
}


#photoslogan {
position:absolute;
left:0px;
top:166px;
width:158px;
height:602px;
float:left;
overflow:hidden;
background:url(../images/leftslot-slogan.png);
background-repeat:no-repeat;
}

#navigationarea {
background:#c2d238;
background-repeat:repeat;
position:absolute;
left:158px;
top:166px;
float:right;
width:172px;
height:600px;
overflow:visible;
vertical-align:top;
}

#navlocation {
position:absolute;
top:5px;
left:auto;
right:0px;
background:url(../images/titles-location.png);
background-repeat:no-repeat;
background-position:top right;
width:400px;
height:50px;
color:#999999;
font-size:9px;
text-align:right;
vertical-align:text-bottom;
}

#pagetitle {
position:absolute;
left:400px;
top:80px;
background:url(../images/signals-titlesect.png);
background-repeat:no-repeat;
background-position:left top;
text-indent:70px;
color:#999999;
font-size:14px;
text-align:left;
overflow:hidden;
vertical-align:text-bottom;
z-index:100;
width:auto;
height:30px;
}

#sublinks {
position:absolute;
top:130px;
left:auto;
right:0px;
background:url(../images/backgr-sublinks.png);
width:auto;
height:25px;
background-repeat:no-repeat;
color:#666666;
font-size:9px;
text-decoration:none;
z-index:30;
}

#footer {
background:url(../images/signals-footer.jpg);
position:fixed;
top:auto;
left:auto;
right:0px;
bottom:0px;
width:383px;
height:13px;
z-index:150;
}

/* CONTENT AREA */

#contentarea {
position:absolute;
top:166px;
left:360px;
right:0px;
width:auto;
height:100%;
text-align:justify;
color:#333333;
font-size:10px;
text-indent:20px;
background:#ebecec;
}

/* TEXTES STYLES */

.gray-normal {
text-indent:20px;
margin-right:10px;
color:#333333;
font-family:Arial, Helvetica, sans-serif;
font-size:10px;
text-align:justify;
width:auto;
height:auto;
}

.green-normal {
text-indent:0px;
margin-right:10px;
color:#99CC00;
font-family:Arial, Helvetica, sans-serif;
font-size:10px;
text-align:justify;
text-decoration:none;
width:auto;
height:auto;
}

.green-line {
background:#c2d238;
width:500px;
height:30px;
margin-left:auto;
margin-right:0px;
color:#333333;
font-size:14px;
text-align:left;
}


.generaltext {
margin-right:5px;
vertical-align:middle;
}

/* MAIN MENU NAVIGATION */

#nav-box {
background:url(../images/backgr-navigation.png);
background-repeat:no-repeat;
width:172px;
height:289px;
position:absolute;
top:0px;
left:0px;
overflow:hidden;
vertical-align:top;
}

#nav-top_ {
	position:absolute;
	left:0px;
	top:0px;
	width:172px;
	height:7px;
}

#buttons-accueil_ {
	position:absolute;
	left:0px;
	top:7px;
	width:172px;
	height:21px;
}

#buttons-presentation_ {
	position:absolute;
	left:0px;
	top:28px;
	width:172px;
	height:20px;
}

#buttons-missions_ {
	position:absolute;
	left:0px;
	top:48px;
	width:172px;
	height:21px;
}

#nav-05_ {
	position:absolute;
	left:0px;
	top:69px;
	width:172px;
	height:9px;
}

#buttons-dossiers_ {
	position:absolute;
	left:0px;
	top:78px;
	width:172px;
	height:20px;
}

#buttons-biens_ {
	position:absolute;
	left:0px;
	top:98px;
	width:172px;
	height:19px;
}

#nav-middle_ {
	position:absolute;
	left:0px;
	top:117px;
	width:172px;
	height:16px;
}

#buttons-recherche_ {
	position:absolute;
	left:0px;
	top:133px;
	width:172px;
	height:31px;
}

#buttons-renseign_ {
	position:absolute;
	left:0px;
	top:164px;
	width:172px;
	height:31px;
}

#buttons-creance_ {
	position:absolute;
	left:0px;
	top:195px;
	width:172px;
	height:32px;
}

#buttons-irrecouv_ {
	position:absolute;
	left:0px;
	top:227px;
	width:172px;
	height:41px;
}

#nav-bottom_ {
	position:absolute;
	left:0px;
	top:268px;
	width:172px;
	height:21px;
}

/* ESPACES NAVIGATION */

#espaces-nav {
	position:absolute;
	left:0px;
	top:350px;
	width:172px;
	height:150px;
}

#espaces-top_ {
	position:absolute;
	left:0px;
	top:0px;
	width:172px;
	height:37px;
}

#buttons-espdir_ {
	position:absolute;
	left:0px;
	top:37px;
	width:172px;
	height:14px;
}

#buttons-espsal_ {
	position:absolute;
	left:0px;
	top:51px;
	width:172px;
	height:14px;
}

#buttons-espacque_ {
	position:absolute;
	left:0px;
	top:65px;
	width:172px;
	height:15px;
}

#buttons-espcrean_ {
	position:absolute;
	left:0px;
	top:80px;
	width:172px;
	height:16px;
}


#buttons-contacts_ {
	position:absolute;
	left:0px;
	top:111px;
	width:172px;
	height:14px;
}

**ValentinZuko** · 19-06-2007, 06:19

e questo il codice della pagina

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=ISO-8859-1" />
<title>TITOLO</title>
<link rel="stylesheet" href="style/main.css" media="screen" />
<!--[if lt IE 7.]>
<script defer type="text/javascript" src="js/pngfix.js"></script>
<![endif]-->
<script type="text/javascript" src="js/rollover-mainmenu.js"></script>
<script type="text/javascript" src="js/rollover-espacemenu.js"></script>
</head>

<body onload="preloadImages();">
<div id="container" align="left">

<div id="logoarea" align="right">
[img]images/buttons/blank-button.gif[/img]
</div>
<div id="photoslogan" align="left">

</div>
<div id="navlocation" align="right">


<p class="generaltext">home&gt;benvenuto</p>
</div>
<div id="pagetitle" align="left">
<p class="generaltext">BENVENUTO</p>
</div>
<div id="sublinks" align="right">
<p class="gray-normal">benvenuto|link 1|link 2|link 3|link 4|</p>
</div>

<div id="navigationarea" align="center">

<div id="nav-box" align="left">
<div id="nav-top_">
		[img]images/buttons/nav_top.gif[/img]
	</div>
	<div id="buttons-accueil_">
		<a href="#"
			onmouseover="changeImages('buttons_accueil', 'images/buttons/buttons-accueil-over.gif'); return true;"
			onmouseout="changeImages('buttons_accueil', 'images/buttons/buttons-accueil.gif'); return true;"
			onmousedown="changeImages('buttons_accueil', 'images/buttons/buttons-accueil-over.gif'); return true;"
			onmouseup="changeImages('buttons_accueil', 'images/buttons/buttons-accueil-over.gif'); return true;">
			[img]images/buttons/buttons-accueil.gif[/img]</a>
	</div>
	<div id="buttons-presentation_">
		<a href="#"
			onmouseover="changeImages('buttons_presentation', 'images/buttons/buttons-presentation-over.gif'); return true;"
			onmouseout="changeImages('buttons_presentation', 'images/buttons/buttons-presentation.gif'); return true;"
			onmousedown="changeImages('buttons_presentation', 'images/buttons/buttons-presentation-over.gif'); return true;"
			onmouseup="changeImages('buttons_presentation', 'images/buttons/buttons-presentation-over.gif'); return true;">
			[img]images/buttons/buttons-presentation.gif[/img]</a>
	</div>
	<div id="buttons-missions_">
		<a href="#"
			onmouseover="changeImages('buttons_missions', 'images/buttons/buttons-missions-over.gif'); return true;"
			onmouseout="changeImages('buttons_missions', 'images/buttons/buttons-missions.gif'); return true;"
			onmousedown="changeImages('buttons_missions', 'images/buttons/buttons-missions-over.gif'); return true;"
			onmouseup="changeImages('buttons_missions', 'images/buttons/buttons-missions-over.gif'); return true;">
			[img]images/buttons/buttons-missions.gif[/img]</a>
	</div>
	<div id="nav-05_">
		[img]images/buttons/nav_05.gif[/img]
	</div>
	<div id="buttons-dossiers_">
		<a href="#"
			onmouseover="changeImages('buttons_dossiers', 'images/buttons/buttons-dossiers-over.gif'); return true;"
			onmouseout="changeImages('buttons_dossiers', 'images/buttons/buttons-dossiers.gif'); return true;"
			onmousedown="changeImages('buttons_dossiers', 'images/buttons/buttons-dossiers-over.gif'); return true;"
			onmouseup="changeImages('buttons_dossiers', 'images/buttons/buttons-dossiers-over.gif'); return true;">
			[img]images/buttons/buttons-dossiers.gif[/img]</a>
	</div>
	<div id="buttons-biens_">
		<a href="#"
			onmouseover="changeImages('buttons_biens', 'images/buttons/buttons-biens-over.gif'); return true;"
			onmouseout="changeImages('buttons_biens', 'images/buttons/buttons-biens.gif'); return true;"
			onmousedown="changeImages('buttons_biens', 'images/buttons/buttons-biens-over.gif'); return true;"
			onmouseup="changeImages('buttons_biens', 'images/buttons/buttons-biens-over.gif'); return true;">
			[img]images/buttons/buttons-biens.gif[/img]</a>
	</div>
	<div id="nav-middle_">
		[img]images/buttons/nav_middle.gif[/img]
	</div>
	<div id="buttons-recherche_">
		<a href="#"
			onmouseover="changeImages('buttons_recherche', 'images/buttons/buttons-recherche-over.gif'); return true;"
			onmouseout="changeImages('buttons_recherche', 'images/buttons/buttons-recherche.gif'); return true;"
			onmousedown="changeImages('buttons_recherche', 'images/buttons/buttons-recherche-over.gif'); return true;"
			onmouseup="changeImages('buttons_recherche', 'images/buttons/buttons-recherche-over.gif'); return true;">
			[img]images/buttons/buttons-recherche.gif[/img]</a>
	</div>
	<div id="buttons-renseign_">
		<a href="#"
			onmouseover="changeImages('buttons_renseign', 'images/buttons/buttons-renseign-over.gif'); return true;"
			onmouseout="changeImages('buttons_renseign', 'images/buttons/buttons-renseign.gif'); return true;"
			onmousedown="changeImages('buttons_renseign', 'images/buttons/buttons-renseign-over.gif'); return true;"
			onmouseup="changeImages('buttons_renseign', 'images/buttons/buttons-renseign-over.gif'); return true;">
			[img]images/buttons/buttons-renseign.gif[/img]</a>
	</div>
	<div id="buttons-creance_">
		<a href="#"
			onmouseover="changeImages('buttons_creance', 'images/buttons/buttons-creance-over.gif'); return true;"
			onmouseout="changeImages('buttons_creance', 'images/buttons/buttons-creance.gif'); return true;"
			onmousedown="changeImages('buttons_creance', 'images/buttons/buttons-creance-over.gif'); return true;"
			onmouseup="changeImages('buttons_creance', 'images/buttons/buttons-creance-over.gif'); return true;">
			[img]images/buttons/buttons-creance.gif[/img]</a>
	</div>
	<div id="buttons-irrecouv_">
		<a href="#"
			onmouseover="changeImages('buttons_irrecouv', 'images/buttons/buttons-irrecouv-over.gif'); return true;"
			onmouseout="changeImages('buttons_irrecouv', 'images/buttons/buttons-irrecouv.gif'); return true;"
			onmousedown="changeImages('buttons_irrecouv', 'images/buttons/buttons-irrecouv-over.gif'); return true;"
			onmouseup="changeImages('buttons_irrecouv', 'images/buttons/buttons-irrecouv-over.gif'); return true;">
			[img]images/buttons/buttons-irrecouv.gif[/img]</a>
	</div>
	<div id="nav-bottom_">
		[img]images/buttons/nav_bottom.gif[/img]
	</div>
</div>


<div id="espaces-nav">
	<div id="espaces-top_">
		[img]images/buttons/espaces-top.gif[/img]
	</div>
	<div id="buttons-espdir_">
		<a href="#" target="_self"
			onmouseover="changeImages('buttons_espdir', 'images/buttons/buttons-espdir-over.gif'); return true;"
			onmouseout="changeImages('buttons_espdir', 'images/buttons/buttons-espdir.gif'); return true;"
			onmousedown="changeImages('buttons_espdir', 'images/buttons/buttons-espdir-over.gif'); return true;"
			onmouseup="changeImages('buttons_espdir', 'images/buttons/buttons-espdir-over.gif'); return true;">
			[img]images/buttons/buttons-espdir.gif[/img]</a>
	</div>
	<div id="buttons-espsal_">
		<a href="#" target="_self"
			onmouseover="changeImages('buttons_espsal', 'images/buttons/buttons-espsal-over.gif'); return true;"
			onmouseout="changeImages('buttons_espsal', 'images/buttons/buttons-espsal.gif'); return true;"
			onmousedown="changeImages('buttons_espsal', 'images/buttons/buttons-espsal-over.gif'); return true;"
			onmouseup="changeImages('buttons_espsal', 'images/buttons/buttons-espsal-over.gif'); return true;">
			[img]images/buttons/buttons-espsal.gif[/img]</a>
	</div>
	<div id="buttons-espacque_">
		<a href="#" target="_self"
			onmouseover="changeImages('buttons_espacque', 'images/buttons/buttons-espacque-over.gif'); return true;"
			onmouseout="changeImages('buttons_espacque', 'images/buttons/buttons-espacque.gif'); return true;"
			onmousedown="changeImages('buttons_espacque', 'images/buttons/buttons-espacque-over.gif'); return true;"
			onmouseup="changeImages('buttons_espacque', 'images/buttons/buttons-espacque-over.gif'); return true;">
			[img]images/buttons/buttons-espacque.gif[/img]</a>
	</div>
	<div id="buttons-espcrean_">
		<a href="#" target="_self"
			onmouseover="changeImages('buttons_espcrean', 'images/buttons/buttons-espcrean-over.gif'); return true;"
			onmouseout="changeImages('buttons_espcrean', 'images/buttons/buttons-espcrean.gif'); return true;"
			onmousedown="changeImages('buttons_espcrean', 'images/buttons/buttons-espcrean-over.gif'); return true;"
			onmouseup="changeImages('buttons_espcrean', 'images/buttons/buttons-espcrean-over.gif'); return true;">
			[img]images/buttons/buttons-espcrean.gif[/img]</a>
	</div>
	<div id="buttons-contacts_">
		<a href="#" target="_self"
			onmouseover="changeImages('buttons_contacts', 'images/buttons/buttons-contacts-over.gif'); return true;"
			onmouseout="changeImages('buttons_contacts', 'images/buttons/buttons-contacts.gif'); return true;"
			onmousedown="changeImages('buttons_contacts', 'images/buttons/buttons-contacts-over.gif'); return true;"
			onmouseup="changeImages('buttons_contacts', 'images/buttons/buttons-contacts-over.gif'); return true;">
			[img]images/buttons/buttons-contacts.gif[/img]</a>
	</div>
</div>

</div>


<div id="contentarea" align="right">
<p class="gray-normal">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p>
</p>

<div id="footer"></div>
</div>
</div>
</body>
</html>

grazie per qualsiasi dritta

**Myaku** · 19-06-2007, 07:12

primo: position absolute e float nello stesso elemento?! :master:

secondo: forse mi è sfuggito, ma non vedo alcun elemento con clear

**ValentinZuko** · 19-06-2007, 07:24

ho anche provato ad inserire clear:both sul footer.
Niente.
Il problema è che sembra che il container non segua l'estensione della pagina.
Non capisco perchè
Di conseguenza qualsiasi posizionamento del footer in coda al container è del tutto inutile

**ValentinZuko** · 19-06-2007, 10:50

ho fatto prima a riprogettare tutto

Discussione: il container che non contiene...

Strumenti discussione

Ricerca discussione

Visualizza

il container che non contiene...

Permessi di invio