Aiuto nel creare un box centrale nel sito che si adatti in altezza automaticamente

**Yuppies** · 01-12-2010, 13:35

Un saluto a tutti.

Premessa:
è la mia prima esperienza con la realizzazione di un sito basato su div allorchè su tabelle e devo dire che la cosa non mi sta entusiasmando più di tanto anche perchè.... altro che portabilità... qui pare che ogni browser interpreti a proprio piacimento i comandi e che alcuni vadano in contrasto l'un l'altro .... comunque, non essendo pratico, non insisto con commenti negativi all'uso dei css per la realizzazione della struttura del sito e proseguo con il chiedervi un aiuto...

Sto realizzando la struttura su cui si baserà l'intero sito ma non riesco a far si che la parte centrale di questo, si adatti in altezza in base al contenuto.

Ho pensato di chiedere aiuto qui perchè trovo sempre persone molto competenti.

Allego il codice che sto editando (sfortunatamente a mano, rigo per rigo, non trovando un software che mi aiuti nell'operazione):

Parte CSS: file style.css

codice:

@charset "iso-8859-15";
body {
	background-image: url(/img/s_s/bg_s.jpg);
	background-repeat: repeat;
	background-position: left top;
}

#contenitore {
	height: auto;
	width: 942px;
	margin-right: auto;
	margin-left: auto;
}
#contenitorevero {
	height:auto;
	margin:0px 0pt 0px 0px;
	position:relative;
	width:942px;
}
.header {
	background-image: url(/img/s_s/1_t_h.jpg);
	background-repeat: repeat-x;
	background-position: left top;
	border-right-width: 1px;
	border-right-style: solid;
	border-right-color: #666;
	width:942px;
	height:210px;
}
.logo {
	background-image: url(/img/l/lo.png);
	background-repeat: no-repeat;
	background-position: center top;
	border-top-style: none;
	border-right-style: none;
	border-bottom-style: none;
	border-left-style: none;
	height: 192px;
	width: 168px;
	left: 52px;
	top: 3px;
	position: relative;
}
.titolo {
	height: 25px;
	width: 340px;
	left: 250px;
	top: -170px;
	position: relative;
	color: #003399;
	font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
	font-weight: bold;
	font-size: 18px;
	letter-spacing: 2px;
}
.img_d_o {
	top: -173px;
	position: relative;
	left: 248px;
	height: 5px;
	width: 337px;
	background-image: url(/img/l/b_s.png);
	background-repeat: no-repeat;
}
.sottotitolo {
	height: auto;
	width: 400px;
	left: 250px;
	top: -170px;
	position: relative;
	font-family: Verdana, Geneva, sans-serif;
	color: #330000;
	font-size: 12px;
	font-weight: bold;
	letter-spacing: 1.5px;
	font-style: normal;
}
.pub {
	background-image: url(/img/s_s/bg_a_p.jpg);
	background-repeat: repeat;
	background-position: left top;
	border-right-width: 1px;
	border-right-style: solid;
	border-right-color: #666;
	width:942px;
	height:inherit;
	height: auto :important;
	height: 100%;
	min-height: 80px;
}
.ombrapub {
	background-image: url(/img/s_s/o_b.jpg);
	background-repeat: repeat-x;
	background-position: left top;
	border-right-width: 1px;
	border-right-style: solid;
	border-right-color: #666;
	width:942px;
	height:8px;
}
.box_r_t {
	background-image: url(/img/b_r/r_t.png);
	background-position: left top;
	width:330px;
	height: 204px;
	position: absolute;
	left:9px;
	top:230px;
}
.box_o_l {
	background-image: url(/img/b_r/o_l.png);
	background-position: left top;
	width:330px;
	height: 358px;
	position: absolute;
	left:9px;
	top:425px;
}
.img_h_l_s {
	background-image: url(/img/h_l_s.png);
	background-position: left top;
	width:64px;
	height: 58px;
	position: absolute;
	left:25px;
	top:790px;
}
.img_i_e_s {
	background-image: url(/img/e_s.png);
	background-position: left top;
	width:64px;
	height: 58px;
	position: absolute;
	left:20px;
	top:840px;
}
.img_d_v {
	background-image: url(/img/s_s/b_s_v.png);
	background-position: left top;
	width:5px;
	height: 300px;
	position: absolute;
	left:350px;
	top:420px;
}
.corposito {
	background-image: url(/img/s_s/b_a_4.jpg);
	background-repeat: repeat;
	background-position: left top;
	border-right-width: 1px;
	border-right-style: solid;
	border-right-color: #666;
	width:942px;
	height:inherit;
	height:auto!important;
	height: 100%;
	min-height: 600px;
}
.end_corposito {
	background-image: url(/img/s_s/f_p_c.jpg);
	background-repeat: repeat-x;
	background-position: left top;
	border-right-width: 1px;
	border-right-style: solid;
	border-right-color: #666;
	width:942px;
	height:75px;
}
.footer {
	background-image: url(/img/s_s/bg_f.jpg);
	background-repeat: repeat;
	background-position: left top;
	border: 1px solid #666;
	width:941px;
	height:145px;
}
.box_tit_serv{
	border: 1px solid #999;
	width:540px;
	height:50px;
	position:relative;
	left:370px;
	top:25px;
	background-color: #FFF;
	}
.box_txt_serv{
	border: 1px solid #999;
	background-color: #FFF;
	width:540px;
	height:inherit;
	height:auto!important;
	height: 100%;
	min-height: 490px;
	position:relative;
	left:370px;
	top:40px;
	overflow: auto;
	}

Parte HTML:

codice:

<%@LANGUAGE="VBSCRIPT" CODEPAGE="1252"%>
<!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-15" />
<title>Prova</title>
<link href="/css/style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="contenitore">
<div id="contenitorevero">
<div class="header">
    <div class="logo"></div>
    <div class="titolo">XXXXXXXXXXX</div>
    <div class="img_d_o"></div>
    <div class="sottotitolo">xxxxxxxx xxxxxxxxx xxxxxxxxxx</div>
</div>
<div class="pub"></div>
<div class="box_r_t"></div>
<div class="box_o_l"></div>
<div class="img_d_v"></div>
<div class="img_h_l_s"></div>
<div class="img_i_e_s"></div>
<div class="ombrapub"></div>
<div class="corposito">
<div class="box_tit_serv"></div>
<div class="box_txt_serv">



































































































































</div>
</div>
<div class="end_corpo_sito">
</div>
<div style="height:15px;"></div>
<div class="footer"></div>
</div>
</div>
</body>
</html>

**Yuppies** · 01-12-2010, 16:24

complicata la mia domanda oppure troppi errori nel css?

o forse i div autodimensionati non si possono realizzare?

**Mich_** · 02-12-2010, 10:22

Anzitutto quando posti codice lato client, evita di postare il sorgente lato server (ASP?): crea confusione e a volte non da` le info necessarie a capire il problema.

Comunque se usi una DTD transitional dici espressamente ad IE di interpretare in modo retrocompatibile (quirks) che si rifa alla sintassi sviluppata al tempo della "guerra dei browser (Netscape - IE)", per cui non segue quello che fanno gli altri browser che sono molto piu` simili allo standard W3C
Prova a vedere come viene interpretata la pagina con una DTD Strict (consiglilato: XHTML 1.0 Strict)

Forse quallo che ti serve e` il trucco detto "false colonne" (faux columns).
Il forum e` pieno di spiegazioni (per cui ti rimando ad una ricerca); e c'e` anche un riferimento tra i "link utili".

Discussione: Aiuto nel creare un box centrale nel sito che si adatti in altezza automaticamente

Strumenti discussione

Ricerca discussione

Visualizza

Aiuto nel creare un box centrale nel sito che si adatti in altezza automaticamente

Permessi di invio