altezza 100 per 100

**Gold34gl3** · 21-05-2007, 15:29

Ciao a tutti.
Ho un problema con un allineamento in altezza.
spiego in breve la struttura:
il center e l'esterno mi servono per definire le barre laterali come img di sfondo.
la struttura la da il container <-- box principale
corpo contiene la parte dx (la barra di navigazione) e il corpo della pagina
sotto ho il footer. infine chiudo il container e gli altri 2 div
Come posso fare affinhce la pagina si estenda al 100% in altezza, e mantenga la struttura?

css:
/* CSS HOME PAGE */
#center {
margin:auto;
width:814px;
height:100%;
}

#esterno{
background-image: url(../img/sfondo_esterno.jpg);
background-repeat: repeat-y;
width:814px;
height:100%;
margin-left:auto;
margin-right:auto;
float:left;
}

#container{
position:relative;
width:800px;
margin:auto;
height:100%;
text-align:left;
font-family:Geneva, Arial, Helvetica, sans-serif;
font-size: 12px;
background-color: #FFFFFF;
background-image: url(../img/sf_div.jpg);
background-repeat: repeat;
}

#header {
height:144px;
width:100%;
}

#corpo {
width:800px;
height:100%;
float:left;
margin-left:auto;
margin-right:auto;
}

#corpo_sinistra
{
padding-top:10px;
width:550px;
float:left;
background-color: #FFFFFF;
padding-bottom: 10px;
}

#navigation_dx {
float:left;
width:250px;
margin-top:-6px;
text-align:left;
background-color:#006633;
padding: 0px;
height:100%;
}

#footer {
color:#333333;
font-family: Geneva, Arial, Helvetica, sans-serif;
font-size: 11px;
background-color: #FFFFFF;
font-weight: bold;
text-align:right;
border-top-width: 1px;
border-top-style: solid;
border-top-color: #000000;
width:795px;
float:left;
padding-top:25px;
padding-bottom:3px;
padding-right:5px;
position:absolute;
bottom:0px;
left:0px;
height:30px;
}

struttura:
<body>
<div id="center">
<div id="esterno">
<div id="container">
<div id="header"></div>

<div id ="corpo">
<div id="corpo_sinistra"> </div>
<div id="navigation_dx"></div>

</div>
<div id="footer"> </div>
</div>
</div>
</div>
</body>
</html>

Grazie mille! Spero in un vostro aiuto

**webdemo** · 21-05-2007, 20:45

sposto in CSS

**Gold34gl3** · 22-05-2007, 01:19

Chiedo scusa a tutti,
ma ho volevo assolutamente fare crossposting.
Non era mia intenzione.
Spero sempre in una soluzione
Grazie a tutti
(moderatori compresi e rinnovo le scuse)

**Mich_** · 22-05-2007, 09:26

id="center" potrebbe non essere un nome valido: e` una parola chiave usata dal DOM. Vuol dire che in alcuni brwoser funziona, ma in altri potrebbe dare problemi.

Non hai definito le dimensioni di html e body: in pratica il tuo height:100% si riferisce al 100% di una dimensione non definita.
Devi definre height:100% anche in html e body (nei browser standard sono due oggetti diversi, per cui devi definirlo in entrambi).

**Gold34gl3** · 22-05-2007, 13:23

lo fatto, ma il rpoblema persiste... o mejo... le barre laterali che sono date tramite img di background si fermano al 100% della pagina visualizzata, mentre il corpo del sito avendo contenuto si allunga... praticamente... è come se le barre il 100% lo vedono come altezza della finestra di visualizzazione, e non del container totale.

**Mich_** · 22-05-2007, 15:08

Allora non ho capito cosa hai fatto. Non ho capito cosa intendi per barre laterali.

Puoi postare il link? In alternativa il codice HTML+CSS, ma sarebbe piu` semplice se fosse illink.

**Gold34gl3** · 22-05-2007, 17:36

il link purtroppo non posso postarlo in quandto lavoro in zona protetta dall'esterno dall'isa...
(dovrei creare regola sull'isa server)

ho creato questa pagina per farti capire:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="it" xml:lang="it">
<head>
<style>
/* CSS HOME PAGE */
/*html{
margin:0px;
height:100%;
}
*/
body, html {
height:100%;
margin-top:0px;
margin-bottom:0px;
background-color: #E4E4E4;
}

#centro {
margin:auto;
width:814px;
height:100%;
background-image: url(img/sfondo_esterno.jpg);
background-repeat: repeat;
}

#esterno{
width:814px;
margin-left:auto;
margin-right:auto;
float:left;
height:100%;
position:relative;
}

#container{
width:800px;
margin:auto;
height:100%;
}

#header
{ position: relative;
background-color:#FF0000;
width:100%;
height:144px; /* fisso */
}

#corpo {
margin-left:auto;
margin-right:auto;
height:100%;
width:800px;
float:left;
background-color:#FFFF33;
}

#footer {
background-color:#0033CC;
border-top-width: 1px;
border-top-style: solid;
border-top-color: #000000;
padding-top:25px;
padding-bottom:3px;
padding-right:5px;
width:795px;
float:left;
position:relative;
height:40px;
}

#corpo_sinistra
{
padding-top:10px;
width:550px;
height:100%;
float:left;
height:300px;
background-color:#FFFFFF;
}

#navigation_dx {
float:left;
width:250px;
height:150px;
margin-top:-6px;
background-color:#006633;
padding:0px;
}

</style>

<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<title>prova</title>
</head>
<body>
<div id="centro">
<div id="esterno">

<div id="container">
<div id="header">TOP<?php //importo il top?></div>

<div id ="corpo">
<div id="corpo_sinistra"> pagina principale<?php //questa struttura cambia l'altezza in base algli oggetti stampati dalle query?></div>

<div id="navigation_dx">
MENù<?php //questa struttura cambia l'altezza in base algli oggetti presenti nel munù di navigazione?></div>
</div>
<div id="footer">BOTTOM<?php //importo il bottom?></div>

</div>
</div>
</div>
</body>
</html>

questo è ciò che ottengo.
Scusa nel ritardo di risposta ma sono stato fuori nel pomeriggio.
Grazie

-----
P.S.
l'immagine di sfondo è un'immagine larga 814 px dove i primi 7 e gli ultimi 7 pixel rappresenterebbero una riga con ombra sull'esterno per dare rilievo all'intero corpo del sito.
ho preferito fare così in modo da non dover inserire 2 div per le immagini dx e sx ma bensì una unica che rimane in background (visibile solo per i primi 7 sx e gli ultimi 7 a dx)

**Mich_** · 22-05-2007, 18:02

Non riesco a capire il linguaggio.
La DTD e` XHTML Strict, ma non la rispetti nel codice: non puoi inserire elementi non-HTML (ad esempio il CSS) dentro un file HTML.

Inoltre nel CSS ci sono delle contraddizioni (float assieme a margini laterali, somme che non tornano: 100% + qualcosa e` sempre >100%, ...).

Continuo a non capire cosa intendi per barre laterali
Comunque nel tuo codice non ci sono barre di scorrimento gestite esplicitamente (e questo crea dei comportamenti anomali, dato che le somme non tornano).

Visto il tipo di layout, dovresti anche dire in quali browser hai testato: potrebbero esserci differenze tra i vari browser.

Sembra che volevi inserire un'immagine, ma io non riesco a vederla ...

PS: se posti del codice, usa gli appositi tag, altrimenti diventa duro capire
PS2: Se posti il codice non postare il sorgente PHP, ma quello che arriva al browser

**Gold34gl3** · 22-05-2007, 18:29

allora vediamo in dettaglio:
il css nel mio file non è nella stessa pagina ma viene importato (quest0 era giusto per fare una prova)
il DTD reale del sito è:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
...

quello postato è stato rpesoa caso.

Ora provo a sentire se mi è possibile farti arrivare fin dentro il server in modo che riesci a capire meglio dove è l'errore... (ma sarà difficile)

Le altezze che tu dici che non vengono rispettate non riesco a vederle.
100% dell'html
100%del body
100% di ogni altro contenitore... fino ad arrivare al corpo.
il corpo che possiede il 100% allungandosi dovrebbe far allungare anche il container quindi di conseguenza anche il div id="esterno" fino al div id="centro"

dato che non ho dato un altezza fissa a nessuna delle strutture esterne tutto dovrebbe essere ridimensionato in base ai contenuti.
Per capirci mejo...
- la lunghezza minima del sitò sarà l'altezza della finestra di visualizzazione nel caso in cui non ci sono contenuti... ok?
- la lunghezza massima (che non esiste in quanto si deve allungare l'intera struttura...con una barra di scorrimento laterale).
Il sito lo testato su 2 browser IE7 e FF.

allego l'immagine che utilizzo come sfondoper creare le due immagini laterali alla struttura da rendere + chiaro il tutto
scusa per il linguaggio php ma non cè nulla (di fatti commentato)

**Mich_** · 23-05-2007, 08:57

Non puoi darmi le cose a caso.

Il CSS per un XHTML Strict e` diverso da quello per un XHTML Transitional. E la resa dipende dal browser

Poi c'e` un header, che e` fuori dal corpo: avra` una altezza anche quello.
Quindi il corpo non puo` essere alto 100%.

E c'e` differenza fra height e min-height (che tu peraltro non hai usato).

Ti consiglio di studiare i box model (in qualsiasi tutorial sui CSS), altrimenti parliamo due linguaggi differenti.

Discussione: altezza 100 per 100

Strumenti discussione

Ricerca discussione

Visualizza

altezza 100 per 100

Permessi di invio