XHTML 1.1 e percentuale sconosciuta

**andr3a** · 02-10-2004, 18:28

In pratica ho 3 div, uno in cima alla pagina, 1 in mezzo e uno in fondo ... il problema e' che se l' above e il bottom con pochi accorgimenti riesco a metterli in cima e in fondo, per l'appunto, quello in mezzo come faccio a metterlo a height "fino a quello in fondo" ??? :master:

pagina.html

codice:

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
    "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" >
<head>
        <title>{title}</title>
        <style type="text/css" media="all">@import "my.css";</style>
</head>
<body>
        <div id="above">{above}</div>
        <div id="between">{between}</div>
        <div id="under">{under}</div>
</body>
</html>

my.css

codice:

body {
        margin: 0px;
        padding: 0px;
}
#above {
        height: 50px;
}
#between {
	height: ???
}
#under {
        position: absolute;
        bottom: 0px;
        width: 100%;
        height: 20px;
}

grazie a chi mi risponde

P.S. ho cercato un po' ma non sapevo cosa cercare

**Fabio Heller** · 02-10-2004, 19:30

Ciao Andrea,
ciao Andrea secondo me il problema è il position absolute di #under

Se ho capito qual è il risultato finale che vuoi ottenere, qui trovi diversi esempi su come ottenere header, corpo e footer contigui

http://www.constile.org/template/nuo...a_tre_colonne/

**andr3a** · 02-10-2004, 20:23

l' avevo gia' visto ... solo che non riesco a fare una cosa tipo questa:

Con una tabella ci metterei mezzo secondo, anche validata 4.01 Strict ... con XHTML sembra una cosa impossibile ...

le misure sono per rendere l'idea di come dovrebbe essere il tutto, ovvero sempre full-screen ma non sempre a misure fisse .... aiuto

**Fabio Heller** · 02-10-2004, 20:26

Il problema è che non riesci a ottenere un design "liquido" o che non riesci a far sì che le due colonne dx e sx vadano di pari passo verso il basso?

**andr3a** · 02-10-2004, 20:30

Originariamente inviato da Fabio Heller
Il problema è che non riesci a ottenere un design "liquido" o che non riesci a far sì che le due colonne dx e sx vadano di pari passo verso il basso?

entrambi ?!?!!?

insomma se metto width o height: 100% mi vengono fuori le simpatiche barre

ora scappo, grazie per l'eventuale aiuto

**var** · 02-10-2004, 20:44

il problema più grosso, per quello che ho potuto sperimentare, deriva dal footer.

questa lettura potrebbe esserti utile.

ciao

**Jerry Masslo** · 02-10-2004, 21:05

se vuoi posizionare un layer in fondo a un elemento che può avere il fondo in qualunque posizione puoi farlo inserendo l'absolute dentro un relative e il relative dopo l'elemento di qualunque dimensione o anche dentro in fondo

dal disegnino vedo assegnato un height

occhio che gli height per lo standard valgono height non height più auto cioè min-height è ie che legge height come min-height e in caso si volesse un height vero non so se sia semplice ottenerlo

molto probabilmente a te servirà un min-height al loro posto e nel caso puoi fare una ricerca anche nel fourum perchè c'è modo di fargl

ok te lo scrivo

.minHeightCrossBrowser {
min-height:100%;
height:auto!important;
height:100%
}

in certi casi ci sono controindicazioni ma non credo il tuo sia uno di quelli

**Fabio Heller** · 02-10-2004, 21:40

Per il layout liquido in constile e pro.html.it trovi diversi esempi.
Ugualmente per posizionare il footer

Per far andare di pari passo le due colonne, non c'è una vera soluzione ma c'è un trucchetto
http://www.alistapart.com/articles/fauxcolumns/

Comunque (pur essendo una scelta di comodo) anche usando una semplice tabella a tre colonne credo che passeresti la validazione XHTML,credo sia sufficiente non fare gli annidamenti e gli altri pastrocchi che tutti ci siamo abituati a fare con l'HTML classico

**andr3a** · 03-10-2004, 10:37

Originariamente inviato da Fabio Heller
Comunque (pur essendo una scelta di comodo) anche usando una semplice tabella a tre colonne credo che passeresti la validazione XHTML,credo sia sufficiente non fare gli annidamenti e gli altri pastrocchi che tutti ci siamo abituati a fare con l'HTML classico

Si ma io non vogliousare la tabella .... proprio perche' mi serve un tableless, se metto la tabella ed in mezzo ho una cella con 100Kb di dati non vedo quella tabella finche' non e' scaricata per intero ...

Pero' non capisco come non sia possbile fare una cosa cosi' semplice con divs e CSS

<table width="100%" height="100%">
<tr><td colspan="2" height="50">{top}</td></tr>
<tr valign="TOP"><td width="150">{left}</td><td>{right}</td></tr>
<tr><td colspan="2" height="20">{footer}</td></tr>
</table>

**Gianxs** · 03-10-2004, 11:47

Non sono un esperto e quindi non sò quanto sia utile o meno questo codice,però il risultato dovrebbe essere quello dell'immagine che hai postato (+ o -).

Css:

codice:

html,body {
     height:100%;
     padding:0;
     margin:0;
     background-color:#0FF;}
div#logo {
     width:100%;
     height:7%;
     background-color:#FF0;}
div#menu {
     width:20%;
     height:88%;
     float:left;
     background-color:#CCC;}
div#content {
     width:80%;
     height:88%;
     float:left;
     background-color:#0F0;}
div#footer {
     width:100%;
     height:4%;
     clear:left;
     background-color:#0FF;}

html:

codice:

<div id="logo">LOGO</div>
<div id="menu">MENU</div>
<div id="content">CONTENUTI</div>
<div id="footer">FOOTER</div>

L'unico problema è che se poi sfori col testo in altezza il risultato non è "carino" (fà schifo

). Però se è molto probabile che i contenuti andranno a sforare,credo sarebbe meglio non specificare l'altezza e adattarla ai contenuti. (+ che altro perchè non saprei come risolvere

)

Discussione: XHTML 1.1 e percentuale sconosciuta

Strumenti discussione

Ricerca discussione

Visualizza

XHTML 1.1 e percentuale sconosciuta

Permessi di invio