dimensione automatica content

**codicealpha** · 06-06-2007, 10:09

come posso evitare questo?

il div di quel menù è in float: left
vorrei che il container (la colonna centrale) fosse in automatico allungata se il menù è più lungo..

grazie mille ragazzi!

**fcaldera** · 06-06-2007, 10:34

hai settato un'altezza prefissata al contenitore con il bordo rosso?

**codicealpha** · 06-06-2007, 10:52

nain

sto cercando in giro ma non riesco a trovare la soluzione.. tutti i layout template hanno il contenuto della colonna centrale più alto dei menù

**fcaldera** · 06-06-2007, 10:55

posta il link alla pagina

**codicealpha** · 06-06-2007, 11:22

non ho un account ancora per metterlo online.. posto il codice..

codice:

body {
	font-size: .8em ! important;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	background-color: #f4f4f4;	
	color: #000000;
	margin: 0;
	padding: 0;
}

body a:link,
body a:visited  	{
	background-color: #FFF;
	font-size: .8em;
	color: #603400;
	text-align: center;
	font-weight: bold;
	text-decoration: underline;
}

body a:active,
body a:hover 	{
	background-color: #603400;
	font-size: .8em;
	color: #FFFCF2;
	text-align: center;
	font-weight: bold;
	text-decoration: none;
}
/* BODY - - END */



/* HEAD - - BEGIN */
#head {
	background-color:#FFFFFF;
	background-image: url(head.jpg);
	background-repeat: repeat-x;
	height: 100px;
	border: 0px #FF0000 solid;
	margin-left: 3%;
	margin-right: 3%;
}

#head-2 {
	background-color:#D0BA00;
	background-image: url(gradient.jpg);
	background-repeat: repeat;
	margin-left: 5%;
	margin-right: 5%;
	padding: 0.2%;
	border-left: 2px #B34759 solid;
	border-right: 2px #B34759 solid;
	border-bottom: 1px #B34759 dashed;
	text-align: center;
}
/* HEAD - - END */


#container {
	margin-left: 5%;
	margin-right: 5%;
	background-color: #FFF;
	border-left: 2px #B34759  solid;
	border-right: 2px #B34759  solid;
	border-bottom: 2px #B34759  solid;
}



/* BOX LEFT - - BEGIN */
#left-box{
	float:left;
	width:165px;
	display: inline;  /* bug? */
}

#left-box .menuleft {
	margin: 1em;
	padding: 0;
	border: 0px #000 solid;
	background-image: url(sfuma1.jpg);
	background-repeat: repeat-x;
	background-color: #F4F4F0;
}

#left-box ul{
	list-style: url(punto.gif);
	margin: 0;
	padding-left: 23px;
}

#left-box .menuleft_head { 
}

#left-box a:link .menuleft_head,
#left-box a:visited .menuleft_head {
	color: #6D0000;
	display: block;
	text-align: center;
	font-weight: bold;
	font-size: 1.3em;
	text-decoration: underline;

}

#left-box a:hover .menuleft_head,
#left-box a:active .menuleft_head {
	color: #C10000;
}

#left-box a:link,
#left-box a:visited {
	font-size: .8em;
	text-align: left;
	color: #730000;
	text-decoration: none;
	font-weight: normal;
	background: none;
}

#left-box a:active,
#left-box a:hover 	{
	color: red;
}
/* BOX LEFT - - END */





/* BOX RIGHT - - BEGIN */
#right-box{
	float:right;
	width: 15%;
	padding: 0;
	background-color: #fff;
	border: 1px #B34759 dashed;
}
/* BOX RIGHT - - END */



#content{
	/* margin:0 170px; per fare tutto quadrato */
	margin-left: 170px;
	margin-right: 15%;
	margin-top: 0;
	margin-bottom: 0;
	padding:1em 10px;
	background-color: #fff;
	clear: inherit;
}


#content h1 {
	font-size: 3em;
	background-image: url(l1ogo.jpg);
	background-repeat: repeat-x;
	background-position: bottom;
}




/* Footer - - BEGIN*/
#footer{
	clear: both;
	background-color: #F4F4F4;
	text-align: center;
}

#footer p { 
	text-align: center;
	margin: 0;
	padding: 0;
	font-size: .7em;
	font-weight: bold;
}

#footer a:link,
#footer a:visited  	{
	background-color: #FFF;
	font-size: .8em;
	color: #000;
	text-align: center;
	font-weight: bold;
	text-decoration: none;
	border-bottom: 1px #000 solid;
}

#footer a:active,
#footer a:hover 	{
}
/* Footer - - END*/

HTML

codice:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="it">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta http-equiv="imagetoolbar" content="no">
<link rel="stylesheet" href="style1.css" media="screen">
</head>
<body>

<div id="head"></div>
<div id="head-2"></div>

<div id="container">
	<div id="left-box">
		<div class="menuleft">
			<span class="menuleft_head">Il Comune</span>
			<ul>
				[*]Amministrazione comunale
				[*]Lo Statuto e lo Stemma
				[*]I Regolamenti
				[*]Atti Amministrativi
				[*]Bandi e Concorsi
				[*]Organigramma
				[*]Scarica il logo
				[*]Il Bilancio
				[*]Contributi Associazioni
				[*]Difensore Civico
				[*]Chivasso informazioni generali
			[/list]
		</div>
		<div class="menuleft">
			<span class="menuleft_head">Il Cittadino</span>
			<ul>
				[*]Amministrazione comunale
				[*]Lo Statuto e lo Stemma
				[*]I Regolamenti
				[*]Atti Amministrativi
				[*]Bandi e Concorsi
				[*]Organigramma
				[*]Scarica il logo
				[*]Il Bilancio
				[*]Contributi Associazioni
				[*]Difensore Civico
				[*]Chivasso informazioni generali
			[/list]
		</div>
	</div>




	<div id="right-box">
		<ul>
		[*]Menù1
		[*]Menù2
		[*]Menù31
		[*]Menù4
		[/list]			
	</div>

					


	<div id="content">
	<h1>Titolo della cartella</h1>
		ypian quarrels et gorilla congolium sic ad nauseum. Souvlaki ignitus carborundum e pluribus unum. Epsum factorial non deposit quid pro quo hic escorol. Olypian quarrels et gorilla congolium sic ad nauseum. Souvlaki ignitus carborundum e pluribus unum. Defacto lingo est igpay atinlay. Marquee selectus non provisio incongruous feline nolo contendre. Gratuitous octopus niacin, sodium glutimate. Quote meon an estimate et non interruptus stadium. Sic tempus fugit esperanto hiccup estrogen. Glorious baklava ex librus hup hey ad infinitum. Non sequitur condominium facile et geranium incognito. Epsum factorial non deposit quid pro quo hic escorol. Marquee selectus non provisio incongruous feline nolo contendre Olypian quarrels et gorilla congolium sic ad nauseum. Souvlaki ignitus carborundum e pluribus unum. Epsum factorial non deposit quid pro quo hic escorol. Olypian quarrels et gorilla congolium sic ad nauseum. Souvlaki ignitus carborundum e pluribus unum. Defacto lingo est igpay atinlay. Marquee selectus non	 	provisio incongruous feline nolo contendre. Gratuitous octopus niacin, sodium glutimate. Quote meon an estimate et non interruptus stadium. Sic tempus fugit esperanto hiccup estrogen. Glorious baklava ex librus hup hey ad infinitum. Non sequitur condominium facile et geranium incognito. Epsum factorial non deposit quid pro quo hic escorol. Marquee selectus non provisio incongruous feline nolo contendre Olypian quarrels et gorilla congolium sic ad nauseum. Souvlaki 
	</div>
</div>
	


	<div id="footer"> - Iscritto al T....

	Home Page | Redazione	
	</div>
</body>
</html>

**fcaldera** · 06-06-2007, 12:21

andiamo per gradi : prova ad aggiungere qui dentro

codice:

#container {
	margin-left: 5%;
	margin-right: 5%;
	background-color: #FFF;
	border-left: 2px #B34759  solid;
	border-right: 2px #B34759  solid;
	border-bottom: 2px #B34759  solid;
        height : auto;
        overflow : hidden;
}

**codicealpha** · 06-06-2007, 12:29

perfetto.. avevo solo provato con height: auto e non aveva funzionato.. e per quello che poi ho chiesto qui..
grazie mille davvero per la pazienza e il tempo perso..

la soluzione era:

height : auto;
overflow : hidden;
nel contenitore centrale

adesso il problema è che IE non lo supporta e continua a fare la stessa cosa

è sicuro una male interpretazione del CSS... la conoscevi già?

**codicealpha** · 11-06-2007, 08:53

up

**fcaldera** · 11-06-2007, 09:17

quello che cerchi di fare è il clearing di un contenitore con blocchi floattati all'interno: cerca clearing o easyclearing nel forum

**codicealpha** · 11-06-2007, 09:26

ho scoperto solo che se metto un width al container, tutto va a posto.. ma facendo così mi sballa le altre misure..

cmq cerco ora clearing.. grazie!

Discussione: dimensione automatica content

Strumenti discussione

Ricerca discussione

Visualizza

dimensione automatica content

Permessi di invio