css layout

**loskyz** · 26-12-2004, 01:54

Salve volevo chiedere come posso fare per realizzare un' layout tableless in qs modo. Allora: div "container", dentro "header", sotto "menu" e "contenuto" (menu a destra o a sinistra) e "footer"

Caratteristiche: con percentuali per es container 90% dello schermo altezza e larghezza. "contenuto" non scrollabile quindi deve essere grande come il container meno lo spazio del header e del footer

Ho incontrato diversi problemi per compatibilità crossbrowser ogni volta che sistemavo per uno non funzionava più con un altro e cos' via

Se non avete capito qualcosa chiedetemi pure..

Se mi date qualche dritta vi ringrazierei molto

Un saluto

**Fortebraccio** · 26-12-2004, 12:30

c'è il forum CSS e xhtml per questi problemi. Hai dato un'occhiata alla guida sui layout con i CSS di HTML.IT? C'è un'accurata descrizione dei vari layout: a una colonna, due, tre, fissi, fluidi etc. Se vuoi realizzare un layout a dimensioni fisse (cioè che non si adatta alla risoluzione dello schermo) puoi usare i layers di Dreamweaver che sono box(o <div> se preferisci) a posizionamento assoluto

**cyberman** · 26-12-2004, 12:36

io non ho capito una mazza tranne che hai a che fare con css.

Sposto nel forum adatto.

**loskyz** · 26-12-2004, 13:13

Scusate se ho sbagliato forum ma vedendo grafica e webdesign ho pensato che un layout poteva starci ma non ho pensato al fatto del css

SI la guida l'ho guardata e ho provato anche a modificare gli esempi ma non sono riuscito a ottenere quello che volevo perchè a seconda del browser c'erano effetti completamente diversi

Non voglio utilizzare un layout a dimensioni fisse

Ora ho fatto una immagine Vediamo se ora si capisce meglio

Grazie dell'attenzione

**loskyz** · 26-12-2004, 13:17

azz mi ero dimenticato di allegare l'immagine

**jepers** · 26-12-2004, 14:38

Prova aleggere questa guida layout a 2 colonne

**loskyz** · 26-12-2004, 19:09

ho provato a leggere ma non sono riuscito ancora a giungere al mio obiettivo.
Il container deve essere sempre grande 90% x 90% dello spazio del browser. anche se gli altri div sono vuoti

L'header deve essere alto diciamo 80px

La navigazione e il contenuto devono avere la grandezza che rimane al container, tra l'header e il footer

La pagina non deve contenere scroll

Non so se c'è qualcosa ancora che non è chiaro ma penso di aver spiegato tutto ora

**loskyz** · 26-12-2004, 22:02

Se c'è qualcosa di non chiaro dite pure

**pierofix** · 27-12-2004, 13:00

Ecco un piccolo esempio:

- www.re1.it/pierofix/layout_liquido_3colonne.htm

Copia pure tutto il codice che ti serve.

**Jerry Masslo** · 27-12-2004, 13:04

chiaro è chiaro ma è complicato in più circostanze per il miscuglio di pixel e percentuali, x%-xpx non esiste.

avevo trovato una soluzione con due layer a simulare lo sfondo delle colonne ma se il contenuto eccede lo spazio assegnato opera sballa tutto così ti ho fatto un esempio interamente in percentuale, considera che i pixel che nel tuo disegno vedi proporzionati con differenti risoluzioni e monitor la perdono

<html>
<head>
<title>Loskyz 2</title>
<style type="text/css">
* {margin:0;padding:0}
html, body {height:100%}
body {
background:gray;
color:white;
text-align:center
}

.tutto {height:90%;
position:relative;
width:90%;
top:5%;
margin:auto;
text-align:left;
}
.contenitore {height:95%;
overflow:auto;
background

live
}
.testa {min-height:10%;
height:auto!important;
height:10%;
background:maroon;
}
.piede {min-height:5%;
height:auto!important;
height:5%;
background

live;

}
.contenuto {
height:89%;
overflow:auto;
width:60%;
float:left;
color:black;
background:silver
}
.menu {width:40%;
float:left;
height:89%;
overflow:auto;
background:teal
}
</style>
</head>
<body>
<div class="tutto">
<div class="contenitore">
<div class="testa">testa</div>
<div class="menu">menù</div>
<div class="contenuto">contenuto</div>
</div>
<div class="piede">piede</div>
</div>
</body>
</html>

se vuoi togliere lo spazio della barra che non serve aggiungi:




sono commenti condizionati, necessari al posto di inserire la proprietà direttamente nel css principale perché ie5 la toglie ma si riprende lo spazio in .contenitore sballando il layout

Discussione: css layout

Strumenti discussione

Ricerca discussione

Visualizza

css layout

layout a 2 colonne

Permessi di invio