Newsgroup: it.comp.www.html
Titolo: pagine adattabili (metodi dimensioni fisse miste e percentuali)

ciao a tutti :)
Come da oggetto cerco dei metodi, indicazioni o idee per costruire delle
pagine html, adattabali alla risoluzione dello schermo (metodo percentuale)
ma con alcuni blocchi che devono essere necessariamente di dimensioni
fisse... sono accetti anche link (preferibilmente in italiano, senno'
pazienza :) )
Il problema che riscontro ve lo porto semplificato come esempio nel caso non
fosse chiaro:
devo costruire una struttura del genere:
____
| a |
|___|
|   |
| b |
|___|
|   |
| c |
|___|
"a" e "c" hanno altezza fissa e l'ultimo (c) deve essere al bottom, mentre b
dipende dalla risoluzione dello schermo. Tutti e tre hanno delle immagini di
sfondo e del testo da inserire. Mi interessa seguire le direttive del W3C, e
fare in modo che con explorer si veda bene (lo so è dura farlo secondo le
direttive). Ho provato, usando i 3 div e css, a mettere l'altezza del b al
100%... ma così facendo và giustamente in overflow provocando lo scroll.
Ho provato inoltre, usando z-index, il position absolute, e il padding... ma
il padding mi crea problemi con lo sfondo del div e anche con mozilla
l'effetto non è quello sperato.
Qualcuno sa come darmi una mano? :)
grazie in ogni caso,
CIao,
Luca(riello)

 pazienza :) )
[cut]
credo che il problema chiave sia questo:
<div style="height:100%; width:100px; border:solid 1px #000;
padding-top:30px; padding-bottom:30px;">
    <div style="border:solid 1px #000; width:30px; height:100%;
overflow:scroll;">
    </div>
</div>
con IE6 e Opera va bene... con mozilla invece il padding di 30px allunga
l'altezza del div provocando lo scroll verticale della pagina (quello che
voglio evitare).
Idee? :(
ciao,
Luca(riello)

Prova a vedere se anche questo css ti puo' star bene.
E' sempre legato al codice xhtml della pagina di prima
( su IE non l'ho testato ).
Ciao
	MaX
body {
	padding: 0;
	border: 0;
	margin: 0;
}
p {
	padding: 0;
	margin: 0;
	border: 0;
}
div {
	padding: 0;
	border: 0;
	margin: 0;
}
div#container {
	position: absolute;
	height: 100%;
	width: 100%;
	background-color: orange;
}
body>div#container {
/* IE npn supporta questo selettore, quindi cio' che e' qui denro e' 
preso in considerazione solo dagli altri browser.
min-height non e' supportato da IE, il quale interpreta height in una 
forma mista tra lo height standard e min-height .... 'na schifezza */
	min-height: 100%;
}
div#A {
	position: absolute;
	height: 90px;
	width: 100%;
	top: 0;
	background-color: red;
}
div#B {
	padding-top: 90px;
	padding-bottom: 50px;
}
div#C {
	position: absolute;
	height: 50px;
	width: 100%;
	bottom: 0;
	background-color: blue;
}

Non so con IE o se e' come la vuoi tu:
#############  pagina html:  ###############
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
	"
http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd
">
<html xmlns="
http://www.w3.org/1999/xhtml
" xml:lang="it" >
<head>
	<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
	<title>Prova Impaginazione</title>
	<style type="text/css" title="currentStyle"> @import "stile.css"; </style>
</head>
<body>
<div id="container">
	<div id="A">
		<p> Sono il div A </p>
	</div>
	<div id="B">
		<p> Sono il div B </p>
	</div>
	<div id="C">
		<p> Sono il div C </p>
	</div>
</div>
</body>
</html>
############  stile.css : #############
body {
   padding: 0;
   border: 0;
   margin: 0;
}
div#container {
   position: absolute;
   height: 100%;
   width: 100%;
   padding: 0;
   border: 0;
   margin: 0;
   bottom: 0;
   top: 0;
   background-color: orange;
}
div#A {
    height: 90px;
    background-color: red;
}
div#B {
    background-color: orange;
}
div#C {
    height: 50px;
    width: 100%;
    background-color: blue;
    position: absolute;
    bottom: 0;
}
p {
  padding: 0;
  margin: 0;
  border: 0;
}
Ciao
	MaX

 Prova a vedere se anche questo css ti puo' star bene.
[cut]
Innanzitutto grazie per le risposte :) ... ma...
Niente... funzionano con Mozilla ma con IE nemmeno a parlarne:
nel primo caso il B non viene neanche visualizzato, nel secondo č
dell'altezza del suo contenuto (in base alle righe scritte).
A me interessa che vada come deve andare su entrambi i browser... possibile
che... non sia possibile? :|
Hai qualche altra idea?
grazie in ogni caso :)
Luca(riello)


cosi' come te l'ho dato e' giusto ! colpa di IE :)
devi continuare a slambiccare col css per far si che funzioni con 
IE....l'unica e' provare a mettere delle regole al CSS e googlare un po' 
per cercare cosa IE supporta e come..
Mi dispiace non poterti aiutare di piu', ma io IE non lo conosco e non 
ne sono neppure fornito ( per fortuna :) )
Ciao
	MaX

 MaX

 Infatti con IE e Opera questo non succede.
perche imitano ie5, gran cazzata hanno fatto quelli di
opera a mimare IE, perche' passa l'idea che IE sia
nel giusto.
ti consiglio di dare una bella studiata ai CSS, altrimenti
perdi giorni a capire perche' su IE funziona mentre su
mozilla no.
ciao.
[1] 
http://css-discuss.incutio.com/?page=BoxModelHack
-- 
"Però è bello sapere che, di questi tempi spietati, almeno
un mistero sopravvive: l'età di Afef Jnifen." -- 
dagospia.com

 [1] 
http://css-discuss.incutio.com/?page=BoxModelHack

 essere "di bocca buona").
[CUT]
Qui non c'entra il fatto di essere abbordabile o meno. La questione che IE
5.x interpretava in modo scorretto il box model.
Esistono delle regole e i browser sono tenuti a rispettarle che siano
intuitive o meno.
-- 
[Non siamo materia che aspetta, ma schemi che si perpetuano.]
Rhadamanth.net (
http://www.rhadamanth.net
)
Web Garbage (
http://www.web-garbage.com
)

 .

 e' una questione nota, non sei solo tu a lamentarti. :)
[cut]
Meno male... mi rincuora leggermente sapere che non sono l'unico a crederlo.
Visto che tutti giustamente si scandalizzano quando lo dico perché fuori
standard. Nulla da dire su questo punto, però fatemi dire anche che certe
drettive del w3c... so' na strunzata :) (senza giustificare i browser che le
contraddicono, per amor del cielo).
In ogni caso ho trovato un metodo (fuori standard chiaro) per impedire a
mozilla di aumentare le dimensioni (chiesto e ottenuto sul forum di
mrwebmaster.it
 ... diamo a Cesare quel che è di Cesare. Grazie Nicola se mi
leggi :)):
-moz-box-sizing: padding-box;
-moz-box-sizing: border-box;
-moz-box-sizing: margin-box;
e per IE col giusto doctype:
box-sizing: padding-box;
box-sizing: border-box;
box-sizing: margin-box;
(e mo' vuliss sape'... era proprio necessario far mettere "-moz"??)
Con questi metodi il browser ciuccia lo spazio all'interno del blocco e non
all'esterno, lasciando inalterate le dimensioni. Sono metodi fuori standard,
quindi scordatevi la validazione w3c per i css se li usate :p
ciao,
Luca(riello)

 (e mo' vuliss sape'... era proprio necessario far mettere "-moz"??)
si, perche' il modulo UI dei CSS3 non e' ancora stato
approvato definitivamente (ci siamo vicinissimi
e' "candidate reccomendation"). uh, l'editor e'
Tantek Çelik :) quando verra' approvato definitivamente
vedrai che toglieranno quel -moz- davanti.
ciao.
