Aiuto impaginazione CSS

**poser** · 13-05-2008, 18:48

Salve a tutti,
sono un novello dell'impaginazione con i CSS, sto cercando di imparare con la guida di html.it ma sto facendo un casino che metà basta

sto cercando di creare il layout di cui ho allegato lo schema come immagine a questo messaggio.

partiamo con ordine:
_ per il BODY elimino i margini e il padding ed imposto l'altezza al 100% dello schermo:

codice:

body {
  background-color: #FFFFFF;
  margin: 0px;
  padding: 0px;
  height:100%;
}

_ seguendo i consigli della guida ho fatto un div "container che conterrà tutta la mia struttura" a cui ho dato position:absolute (per ottenere l'altezza 100%), larghezza e altezza impostate a 100%, e margini azzerati e fin qui tutto funge.

codice:

div#container{
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0px;
  left: 0px;
}

_qui inizio a creare le prime due colonne "IMMG" e "MENU" e anche qui tutto bene anche se ho lavorato con il float (con l'altro metodo non riesco ad ottenere l'impaginazione):

codice:

div#immg{
  top: 0px; 
  left: 0;
  width: 45px;
  height: 100%;
  background-color:#000066;
  float:left;
}

div#menu{
  top: 0px;
  width: 190px;
  height: 100%;
  background-color:#F0F0F2;
  float:left;
}

_ da qui in poi inizia il casino, non riesco a completare il layout con la parte destra. in particolare non riesco a far si che la parte destra prenda tutta la parte restante dello schermo. E non riesco nemmeno a posizionare il footer.
Ho provato così:

codice:

 
div#contenuto{
  top: 0px; 
  right:0px;
  width:100%;
  margin-left:235px;
  height: 100%;
  background-color:#cc0000;
  float:right;
}
div#header{
  top:0px;	
  height:200px;
  background-color:#DDDDDD;
}

L'html invece è questo:

codice:

<div id="container" name="container">
    <div id="fasciaLaterale">
      IMMG
    </div>
    <div id="menu">
      menu
    </div>
    <div id="contenuto">
        <div id="header">
        header
        </div>
        contenuto
    </div>

</div>

So già di aver fatto un pò di confusione, ho provato con diverse soluzioni, anche con i margini negativi ma non c'è verso di riuscire ad ottenere ciò di cui ho bisogno.
Qualcuno ha la pazienza di darmi un aiuto?

Grazie a tutti!

**noize86** · 13-05-2008, 19:35

ciao..

per quel poco che ne so ti devi rivedere le altezze, non penso sia corretto mettere 100%.. metti un'altezza in pixel.. a meno che la tua intenzione sia fare delle pagine piccole..boh non so..

cmq una buona chiave di partenze potrebbe essere questa...

Codice PHP:


<style>

body {margin:0}



#immg { width:45px; height:100%; float:left; position:absolute; display:block;  background-color: #FF3333}



#menu {width:190px; height:100%; float:left; position:absolute; display:block; margin-left:45px; background-color: #FF9900}



#header {width:760px; height:200px; float:left; position:absolute; margin-left:235px; background-color: #99CCCC; clear:left}



#content {width:760px; height:200px; float:left; position:absolute; margin-left:235px; margin-top:200px; background-color: #FF9999; clear:left}



#footer {width:760px; height:30px; float:left; position:absolute; margin-left:235px; bottom:0; background-color: #FF6699; clear:left}



</style>



<div id="immg">immg</div>

<div id="menu">menu</div>

<div id="header">header</div>

<div id="content">content</div>

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

**poser** · 13-05-2008, 20:38

Ciao, grazie per la risposta,
purtroppo ho proprio bisogno di utilizzare tutto lo schermo per una richiesta da parte del cliente. Il tuo esempio è ok per le dimensioni fisse, ho provato ad impostare il 100% in larghezza ai div "header - contenuto - footer" ma logicamente scrolla tutto orizzontalmente...

**Mich_** · 14-05-2008, 09:21

L'altezza 100% ci puo` stare, ma attenzione: da qualche parte ci dovrai mettere un overflow, altrimenti il tuo 100% verra` "sfondato" dai blocchi lunghi.

Nel body ti sei dimenticato di definire la larghezza 100%, altrimenti il body si restringe e ti crolla il palco.
E tieni presente che in molti browser (ma non in IE quirks mode) <html> e <body> sono due oggetti diversi, innestati uno nell'altro. Quindi il 100% va definito anche in html.

Lo stesso vale per il contenitore (che peraltro non e` necessario - si puo` fare anche senza).
Comunque non e` necessario metterlo in posiz. assoluta, anzi usare i posizionamenti potrebbe creare piu` problemi di quanti ne risolva. Comunque se c'e` deve avere le dimensioni definite (anche in % - 100% sia per width che per height vanno bene).
Nel tuo caso l'altezza e` corertta, ma la larghezza non ha senso, dato che e` il 100% di una quantita` non nota (dato che il body non ha larghezza definita).

#immag e #menu non dovrebbero dare problemi, salvo che top e left non hanno senso per oggetti flottanti (puoi anche toglierli). Pero` per sicurezza dovresti azzerare margin, padding e border.

Invece in #contenuto hai fatto degli errori: intanto hai dato larghezza 100%, cioe` e` largo esattamente quanto il #container. E questo non e` possibile, dato che nel #container c'e` dell'altro.
Se lo lasci flottante non devi definire la larghezza, altrimenti puoi non dargli il float, ma forse ti conviene dargli solo il margine sinistro (azzerando gli altri).

Il #contenuto deve contenere tre ulteriori blocchi: header, corpo, footer (devi modificare la marcatura).
Tutti e tre devono avere larghezza 100% (si riferisce al #container); inoltre conviene che siano float, per non avere problemi che sfondano il contenitore.
Il corpo dovra` avere overflow:auto, in modo che non sbordi per troppo grasso: se si ingrandisce si vedra` la barra di scorrimento; se non serve non si vedra` (ma il comportamento differisce a seconda del browser). A tale blocco dovrai dare margine inferiore, per farci stare il footer.

Ultimo consiglio: da` colore di sfondo diverso a tutti i blocchi (compreso body e #container), in modo da verificare dove si espandono: solo cosi` puoi capire dove stanno i problemi (altrimenti non sai se il problema sta nel blocco contenitore o in quello contenuto).

**poser** · 14-05-2008, 11:02

grazie dei consigli, ora provo con calma a vedere se riesco a sistemarlo. di css non ne so moltissimo e molte delle cose che mi hai scritto me le vado a studiare ora.
se dovessi avere qualche problema con il codice posso postarlo?

**poser** · 14-05-2008, 11:28

Eccomi, allora, ho provato a seguire i tuoi consigli ed il risultato è sorprendente poichè l'unica cosa che non risulta corretta è che i blocchi a destra non prendono tutta l'altezza dello schermo (in particolare è #corpo che non si alza abbastanza per ricoprire l'area che mi interessa, e di conseguenza il #footer non si posiziona in basso ma alla fine del #corpo).

ecco il codice, se vedi qualche errore:

codice:

<!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=utf-8" />
<title>Prova</title>
</head>
<style> 
html{
	height:100%;
	width:100%;
	background-color:#999999;
}
body {
	background-color: #CCCCCC;
	margin: 0px;
	padding: 0px;
	height:100%;
	width:100%;
}

#immg {width:45px; height:100%; float:left; display:block;  background-color: #FF3333; margin:0; padding:0; border:0;} 

#menu {width:190px; height:100%; float:left; display:block; margin-left:45px; background-color: #FF9900;margin:0; padding:0; border:0} 

#contenuto{margin-top:0px; background-color: #FF9999; float:inherit; height:100%; overflow:auto;}

#header{width:100%; height:300px; float:inherit; background-color: #99CCCC; overflow:auto;}  

#corpo{width:100%; float:inherit; background-color: #CC0000; overflow:auto; bottom:30px;}

#footer {width:100%; height:30px; float:inherit; bottom:0px; background-color: #FF6699; overflow:auto;} 

</style> 
<body>
<div id="immg">immg</div> 
<div id="menu">menu</div> 
<div id="contenuto">
  <div id="header">header</div>
  <div id="corpo">corpo</div>
  <div id="footer">footer</div>
</div>

</body>
</html>

Grazie mille!

**Mich_** · 14-05-2008, 14:45

IL float:inhert non credo che si possa usare. metti semplicemente float: left (o right), se devi usarlo. Nel tuo caso l'uno vale l'altro. Ma forse non e` necessario usare il float. Prova a toglierlo (ma devi fare le prove con brwoser diversi)

Invece non puoi usare il bottom per un oggetto con posizionamento statico (il default). Io ti avevo consigliato di usare il margin (che dovrebbe rispettare se non e` flottato).

Altrimenti vedi tra i layout pronti (ci sono vari link nei "link utili") se ce n'e` uno che assomiglia al tuo.
Il problema del footer in basso e` stato affrontato piu` volte, per cui con una ricerca nel forum (bottone in alto) dovresti trovare la soluzione (ora non la ricordo a memoria).

Nota che nel tuo caso il #contenuto non dovrebbe avere l'overflow; oppure non dovrebbe averlo il #corpo: i due assieme potrebbero avere risultati diversi in browser diversi. Prova a metterci dentro contenuto lungo.

**poser** · 14-05-2008, 15:08

Ciao, ho modificato il codice come mi hai suggerito ma ancora il #corpo non prende l'altezza giusta. Ho tolto i float e sia su IE che su Firefox il tutto funge nello stesso modo, ho tolto il bottom e ho inserito margin come mi hai detto ma ancora non ci siamo.
Ora provo a dare un'occhiata anche tra gli esempi che mi hai suggerito. se riesco ad aumentare l'altezza del #corpo e posizionare #footer in basso sono a posto

Dai, non c'è male come prima volta che impagino con i DIV, riesco a capire abbastanza il concetto anche se sono della scuola di impaginazione con tabelle

Cmq grazie dell'aiuto!

Di seguito il codice corretto:

codice:

<!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=utf-8" />
<title>Prova</title>
</head>
<style> 
html{height:100%; width:100%; margin:0px; padding:0px; background-color:#999999;}

body{height:100%; width:100%; margin:0px; padding:0px; background-color:#CCCCCC;}

#immg{width:45px; height:100%; float:left; display:block;  background-color:#FF3333; margin:0; padding:0; border:0;} 

#menu{width:190px; height:100%; float:left; display:block; margin-left:45px; background-color:#FF9900; margin:0; padding:0; border:0;} 

#contenuto{margin-top:0px; background-color:#FF9999; height:100%; overflow:auto;}

#header{width:100%; height:300px; background-color:#99CCCC;}  

#corpo{width:100%; background-color:#CC0000;}

#footer{width:100%; height:30px; margin:0px; background-color:#FF6699;} 
</style> 
<body>
<div id="immg">immg</div> 
<div id="menu">menu</div> 
<div id="contenuto">
  <div id="header">header</div>
  <div id="corpo">corpo</div>
  <div id="footer">footer</div>
</div>
</body>
</html>

**poser** · 14-05-2008, 19:17

niente da fare, ho provato un sacco di alternative ma non c'è verso di ottenere l'altezza del div #corpo che si abbassi e il div #footer che si posiziona in basso.
c'è qualcuno che riesce a darmi una mano?

grazie!

**sorella** · 16-05-2008, 09:26

Ciao poser!
Hai già guardato questo sito?
http://www.freecsstemplates.org/

Il modello seguente assomiglia molto a quello che vuoi ottenere tu.
http://www.freecsstemplates.org/preview/informatif

Spero ti possa essere utile.
Buon lavoro

Discussione: Aiuto impaginazione CSS

Strumenti discussione

Ricerca discussione

Visualizza

Aiuto impaginazione CSS

Permessi di invio