PDA

View Full Version : [HTML] Come evitare questo?

VegetaSSJ5
20-06-2005, 13:34
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?

http://img11.echo.cx/img11/3841/screen8di.jpg
lombardp
20-06-2005, 14:07
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
20-06-2005, 15:39
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
20-06-2005, 16:12
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
20-06-2005, 16:19
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
20-06-2005, 18:47
prova a rimuoverlo completamente...
mi autoquoto...togliendolo non hai più problemi, ma la colonna di sinistra non segue più il contenuto
VegetaSSJ5
20-06-2005, 18:53
ma la colonna di sinistra non segue più il contenuto
e questo è un problema!!! :(
possibile non ci siano soluzioni??
VegetaSSJ5
24-06-2005, 10:25
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
24-06-2005, 11:33
.quelchetipare {
min-height:600px;
height:100%;
}

ma è una istruzione dei CSS2, quindi su quella schifezza di IE non funziona
anonimizzato
25-06-2005, 08:49
è 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.
anonimizzato
25-06-2005, 08:51
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
25-06-2005, 10:11
cosa vuol dire height: auto !important;??
VegetaSSJ5
25-06-2005, 11:14
.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... :(
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! :)
anonimizzato
25-06-2005, 17:33
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 :rolleyes: ) non supporta nemmeno ciò.