[HTML] Come evitare questo?

[VegetaSSJ5]

Salve a tutti, sto costruendo un sito, ma ho dei problemai con la formattazione di una pagina. In pratica ho dichiarato un oggetto "content" con height=100% e al suo interno devo aggiungere varie cose, però se queste cose superano la lunghezza della pagina, queste vanno fuori il content. Vi allego l'immagine per farvi capire meglio di cosa si tratta. Come posso risolvere?

[lombardp]

Per quanto riguarda i CSS:

La proprietà HEIGHT impostata a percentuale funziona come la WIDTH, però sono i blocchi a comportarsi diversamente per larghezza e altezza. Di default un blocco DIV ha WIDTH pari al 100%, HEIGHT no, viene messa a Quanto-Basta.

Quindi HEIGHT 100% funziona se, per esempio, tutti i genitori del blocco hanno anch'essi HEIGHT 100%, compreso BODY (forse va messo anche ad HTML, per qualche bug, ma non mi ricordo).

Prova un po' a vedere se ti risolve (ricorda che io parlo di CSS, non di HTML).

[VegetaSSJ5]

ho provato a mettere dappertutto height: 100% ma non va lo stesso. l'altezza che serve a me è "quanto basta" per contenere il contenuto di content.

[kk3z]

Originariamente inviato da VegetaSSJ5

ho provato a mettere dappertutto height: 100% ma non va lo stesso. l'altezza che serve a me è "quanto basta" per contenere il contenuto di content.

prova a rimuoverlo completamente...vedere il codice della pagine aiuterebbe di più però

[VegetaSSJ5]

ok ora metto il codice, questo è il css:

body {
	font-family: verdana, lucida, arial, helvetica, sans-serif;
}

.top {
	height: 100px;
	border: 1px solid black;
	background-color: #eeeeee;
}

.menubar {
	border: 1px solid black;
	height: 45px;
	padding-left: 10px;
	background-color: #eeeeee;
}

.leftcolon {
	height: 100%;
	width: 280px;
	float: left;
	border: 1px solid black;
	background-color: #777777;
}

.content {
	height: 100%;
	border: 1px solid black;
	background-color: #BBBBBB;

}

.bottom {
	height: 600px;
}

.titolo {
	text-align: left;
	background-image: url(../img/redbull.jpg);
	background-position: center right;
	background-repeat: no-repeat;
	padding-left : 10px;
}

.titolo a{
	text-decoration: none;
}

.butcerca {
	background-color: #0000FF;
	color: white;
	font-weight: bold;
	margin-right: 30px;
}

.formcerca {
	width: 270px;
	float: left;
	position: relative;
	top: 10px;
}

.menubutton {
	position: relative;
	top: 13px;
}

.menubutton a {
	background-color: #999999;
	color: white;
	font-weight: bold;
	border: 1px solid black;
	text-decoration: none;
	padding: 6px 5px 6px 5px;
}

.menubutton a:hover {
	background-color: blue;
	color: white;
}

.cella {
	border-top: 1px dotted black;
	text-align: center;
	padding-top: 5px;
	padding-bottom: 5px;
}

.cella a {
	text-decoration: none;
}

.cella:hover {
	background-color: #999999;
}

.cella a:hover {
	color: white;
}

fieldset {
	padding-left: 20px;
}

fieldset a:hover {
	text-decoration: none;
	color: white;
}

.nodec {
	text-decoration: none;
	font-size: 12px;
}

.progmember {
	font-size: 12px;
	font-weight: bold;
}

e questo è l'html (non fate caso ai tag scritti in questo modo <[tag]>, sono dei placeholder che verranno sostituiti dal php

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

<html>
	<head>
		<title>Progetto B - Project</title>
		<meta name="author" content="" />
		<meta name="description" content="Progetto B - Project" />
		<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
		<link rel="stylesheet" href="css/style.css" type="text/css" />
		<[style]>
		<[scriptjs]>
	</head>

	<body>
		<div class="page">
			<div class="top">
				<div class="titolo">
					<h1 style="font-size: 26px;	color: blue;"><a href="index.php">Progetto B-Project</a></h1>
					<h4>"Sistema per la gestione di Progetti"</h4>
				</div>
			</div>
			<div class="menubar">
				<div class="formcerca">
					<form id="formcerca" method="get" action="search.php">
						<div><input type="text" name="cerca" />
						<input type="submit" class="butcerca" value="Cerca" /></div>
					</form>
				</div>
				<div class="menubutton"><[pulsante1]><[pulsante2]><[pulsante3]></div><[admin]>
			</div>
			<div class="bottom">
				<div class="leftcolon">
					<[login]>
					<table style="margin: 15px auto auto auto; width: 90%;">
						<tr><td class="cella"><a href="index.php">Home</a></td></tr>
						<tr><td class="cella"><a href="categorie.php?tipo=categorie" >Categorie</a></td></tr>
						<tr><td class="cella"><a href="progetti.php?tipo=progetti" >Progetti</a></td></tr>
						<tr><td class="cella"><a href="listautenti.php?tipo=listautenti" >utenti registrati</a></td></tr>
						<tr><td class="cella" style="border-bottom: 1px dotted black;"><a href="http://www.phprojekt.net">PHProjekt</a></td></tr>
					</table>
				</div>

				<div class="content">
					<fieldset>
						<[contenuto]>
					</fieldset>
				</div>
			</div>
		</div>
	</body>
</html>

il contenuto della pagina va messo al posto di <[contenuto]>, se questo supera una certa lunghezza esce fuori dalla pagina.

[kk3z]

Originariamente inviato da kk3z

prova a rimuoverlo completamente...

mi autoquoto...togliendolo non hai più problemi, ma la colonna di sinistra non segue più il contenuto

[VegetaSSJ5]

Originariamente inviato da kk3z

ma la colonna di sinistra non segue più il contenuto

e questo è un problema!!!
possibile non ci siano soluzioni??

[VegetaSSJ5]

Ragazzi provo a cambiare la domanda...

come istruire il browser per adattare un oggetto in base alle dimensioni del suo contenuto, ma che sia alto almeno 600px?

[ri]

.quelchetipare {
min-height:600px;
height:100%;
}

ma è una istruzione dei CSS2, quindi su quella schifezza di IE non funziona

è un pò un problema e ti sconsiglio di fissare le altezza nei CSS.
Se non ricordo male impostando l'altezza del 100% la setti rispetto all'area visibile (wievport) del browser, quindi quanto eccedi tale lunghezza sballa tutto.

Originariamente inviato da VegetaSSJ5

Ragazzi provo a cambiare la domanda...

come istruire il browser per adattare un oggetto in base alle dimensioni del suo contenuto, ma che sia alto almeno 600px?

elemento {
min-height: 600px;
height: auto !important;
height:600px;
}

... mi raccomando le proprietà in questo ordine preciso, è un hack per settare l'altezza minima in tutti i browser.

[VegetaSSJ5]

cosa vuol dire height: auto !important;??

[VegetaSSJ5]

Originariamente inviato da ri

.quelchetipare {
min-height:600px;
height:100%;
}

ma è una istruzione dei CSS2, quindi su quella schifezza di IE non funziona

l'ho provato e infatti funziona solo su firefox...

Originariamente inviato da Sgurbat

elemento {
min-height: 600px;
height: auto !important;
height:600px;
}

... mi raccomando le proprietà in questo ordine preciso, è un hack per settare l'altezza minima in tutti i browser.

questo invece funziona sia su ie che su firefox!

Originariamente inviato da VegetaSSJ5

cosa vuol dire height: auto !important;??

allora ti spiego l'hack come meglio posso:

con height viene indicata n'altezza FISSA oltre la quale il contenuto eccede lo stesso box, questo però non vale per IE che interpreta questa proprietà (height) come in realtà un'altezza minima (min-height) dato che quest'ultima proprietà non la riesce a leggere.

A questo punto risulta chiaro che per impostare un'altezza minima dovremmo impostare sia height (per IE) che min-height(per tutti gli altri browser). a ciò ci viene in aiuto la dichiarazione !important che serve per gestire le priorità nella gestione dei CSS.

In realtà è molto più complicato da spiegare di quanto lo sia in realtà, sostanzialmente il trucco stà nell'impostare sia height che min-height in modo da soddisfare tutti i browser (per impostare l'altezza minima) facendo in modo che solo i browser non IE leggano "height:auto !important" dato che la dichiarazione "!important" IE (guardacaso ) non supporta nemmeno ciò.