Ancora adattamento altezza div

**cnc** · 23-06-2005, 13:03

Prima di aprire questo topic mi sono spulciato gran parte dei problemi già segnalati non trovando però soluzione al mio.
Ho compreso che è IE a fare casini con CSS e difatti sin dall'inizio ho programmato la pagina per Firefox cercando poi di adattarla. Fatto sta che ora funziona perfettamente con Explorer ma da un problema con Firefox. Veniamo al dunque:

ho creato una pagina html solo con i div così costituita

codice:

<body>

<div class="header">[img]logo3.jpg[/img]</div>
<div class="rigasup">
	<span class="rigasupa">home</span>
	<span class="rigasupb">ultimo aggiornamento: 21 giugno 2005</span>
</div>
<div class="corpo">
	<div class="corposx">
		<div class="menu">
			testo
		</div>
		<div class="main">
		testo
		
		
		
		</div>
	</div>
<div class="dx">testo
</div>
</div>

<div class="rigainf"></div>

<div class="foot">
	<div class="foota">testo</div>
	<div class="footb">testo</div>
</div>

</body>

e relativo css:

codice:

html,body{
	margin:0 auto;
	padding:0;
	width:700px;
}
body {
	font: 100.01% "Trebuchet MS",Verdana,Arial,sans-serif;
	text-align:center;
}
a:link, a:visited { 
	text-decoration: none; 
	color: #000;
}
a:active { 
	text-decoration: none; 
}
a:hover { 
	background-color: #8BB6D8;
	text-decoration: none; 
	color: #FFFFFF; 
}

.header { width:700px; margin: 0; padding: 0; }

.rigasup {
	font-size: 10px;
	height: 10px;
	border: 2px solid #000000;
	background-color: #2B5B81;
}
.rigasupa {
	font-variant: small-caps;
	color: #FFFFFF;
	float: left;
}
.rigasupb {
	color: #FFFFFF;
	float: right;
}

.corpo {
	height: 236px;
	margin-top: 5px;
	background-image: url(sfondo2.gif);
	background-attachment: scroll;
	background-repeat: no-repeat;
	background-position: bottom;
}
.corposx {
	width: 550px;
	float: left;
}
.menu {
	text-align:left;
	float: left;
	padding: 5px;
	white-space: nowrap;
	width: 120px;
}
.main {
	width: 395px;
	float: right;
	overflow: visible;
}
.dx {
	width: 120px;
	float: right;
	font-size: 9px;
	text-align: center;
}


.rigainf {
	font-size: 10px;
	height: 10px;
	border: 2px solid #000000;
	background-color: #C6070F;
}
	
.foot {
	width: 700px;
	margin-top: 2px;
}
.foota {
	width: 440px;
	float: left;
	font-size: 9px;
	text-align: left;
	padding-left: 2px;
}
.footb {
	width: 250px;
	float: right;
	font-size: 9px;
	text-align: right;
	padding-right: 2px;
}

.menu a, .menu a:link, .menu a:visited {
	display:block;
	text-decoration:none;
	padding-left: 5px;
	color: #009;
}

.menu a:hover, .menu a:active {
	background-color: #FBA29F;
	border-right-style: solid;
	border-right-color: #2B5B81;
	border-right-width: 5px;
} /* colori per l'effetto roll-over */

il problema è il seguente.
La parte centrale contiene del testo che se è più lungo del box stesso fa allungare la pagina verso il basso spostando quindi i footer. Questo solo con IE e non con Firefox. Ebbene io vorrei proprio che fosse Firefox a cambiare "atteggiamento" e a prolungarmi la pagina. Invece quest'ultimo mi lascia i footer fissi e continua sotto di loro. Ho provato a togliere l'height del "corpo" e del "main" ma in tal caso il footer si ritrova sotto la rigasup.

qualche consiglio? tnx

**ilduca69** · 23-06-2005, 15:44

Faux-columns: pro.html.it/articoli/id_534/idcat_8/pro.html

**cnc** · 23-06-2005, 16:30

ehm... applicato al mio codice quali tag dovrei cambiare?

**cnc** · 23-06-2005, 19:15

ho riprovato ad adattare la mia pagina a quella delle faux columns. Il problema non si risolve, resta cmq per Firefox:

ecco il codice utilizzato sulla base delle FC:

codice:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Layout Liquido a tre colonne percentuali</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<meta name="generator" content="HAPedit 3.1">
<style type="text/css" media="screen, projection">
html,body{margin: 0 auto;padding: 0; width:90%}
body{font: 76% Verdana,Arial,sans-serif}
h1,h2,h3{font-family: "Trebuchet MS",Arial,sans-serif;margin: 0}
h1{color: #7FA0B1;font-size: 200%}
h2{color: #B8B8B8;font-size: 180%}
h3{color: #A47E6A;font-size: 150%}
p{margin: 0 0 0.8em 0; text-align:justify; }

div#container{min-width: 550px;background: #FFF url(leftP.gif) repeat-y 25%}
div#container2{background:  url(rightP.gif) repeat-y 75%}
div#header{height:auto;line-height: auto;    background: #fff; text-align:center;}
div#rigasup{ height: 12px; line-height:12px; background:#0000CC; border: 1px solid #000; }


div#nav,div#extra{width:20%;\width:22%;w\idth:20%;padding: 0 1%}
div#nav{float:left; margin-top: 10px; height:200px; font-size: large}
div#extra{float:right; font-size:9px;}

div#content{margin: 0 16%}
div#content p{line-height:1.3}

div#rigainf{ height: 12px; line-height:12px; background:#FF0000; border: 1px solid #000; }

div#footer{clear:both; background: #fff url(footer.jpg) repeat-x top;color: #4E768A}
div#footer p{margin: 0;padding: 10px 0;text-align: center;font-size: 80%}

div#nav a, div#nav a:link, div#nav a:visited {
	display:block;
	text-decoration:none;
	padding-left: 5px;
	color: #009;
}

div#nav a:hover, div#nav a:active {
	background-color: #FBA29F;
	border-right-style: solid;
	border-right-color: #2B5B81;
	border-right-width: 5px;
} /* colori per l'effetto roll-over */
</style>
<!--[if lte IE 6]>
<style type="text/css" media="screen, projection">
div#container{ width: expression(document.body.clientWidth<=550 ? "550px" : "auto")}
div#content{height:1%}  /*risolve il peekaboo bug e il 3 pixel jog*/
</style>
<![endif]-->
<style type="text/css" media="print">
body{font: 12pt Arial,sans-serif}
h1,h2,h3{font-family: "Trebuchet MS",Arial,sans-serif}
h1{font-size: 160%}
h2{font-size: 140%}
h3{font-size: 120%}
p{line-height: 1.2}
div#header{border-bottom: 1px solid #000}
div#nav,div#extra, a#skipnav{display:none}
div#footer{border-top: 1px solid #000;font-size: 80%}
</style>

<script type="text/javascript">
<!--
function showhide( targetId ){
if (document.getElementById){
target = document.getElementById( targetId );
 if (target.style.display == "none"){
  target.style.display = "block";
 } else {
  target.style.display = "none";
 
 }
}
}
// -->
</script>
</head>
<body>
<div id="container">
<div id="container2">
    <div id="header">
        <h1>[img]logo3.jpg[/img]</h1>
		<div id="rigasup"></div>
    </div>
    <div id="nav">
       Chi siamo

			Attivit&agrave;

			News

			Scheda Enti

			Contatti

    </div>
<div id="extra">
 testo
    </div>
    <div id="content">
        <a name="startcontent" id="startcontent"></a>
        <table width="100%"  border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td valign="top">
<p class="rilievo">testo/p>
<p class="mostra">Continua</p>
<table width="100%" cellpadding="0" cellspacing="0">
          <tr>

          </tr>
          <tr>
            <td height="2" id="1" style="display:none" >

					  <table border="0" cellpadding="0" cellspacing="0">
                      <tr>
                        <td><p class="testo2">testo 
</p></td>
                    </table>
            </td>
          </tr>
</table>
</td>
  </tr>
</table>
    </div>

    <div id="footer">
				<div id="rigainf"></div>
        

© 1997-2004 - Grafica, layout e guide sono di esclusiva proprietý di HTML.it s.r.l.

        Note e informazioni legali</p>

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

**ilduca69** · 24-06-2005, 01:27

A parte il fatto che potevi evitare di quotare kilometri di codice inutile, bastava vederlo all'indirizzo da me indicato, il problema risiede nell'annidamento dei tag DIV nel tuo codice; risolto quello tutto torna.

**cnc** · 24-06-2005, 17:52

scusa per il lungo quote.

fatto sta che non ho capito quale annidamento dovrei cambiare...

**ilduca69** · 24-06-2005, 18:56

La base da cui devi partire è la sezione dell'articolo a pagina 1 dove viene postato il codice minimale dell'articolo.

**cnc** · 24-06-2005, 19:06

ok... ma se vedi il lungo codice che ti ho quotato corrispond a quello della pagina... eppure non cambia nulla... che sbaglio? :master:

Discussione: Ancora adattamento altezza div

Strumenti discussione

Ricerca discussione

Visualizza

Ancora adattamento altezza div

Permessi di invio