Come realizzare un semplice layout con CSS?

**NOFXER** · 25-03-2013, 18:52

Salve a tutti, avrei un problema. Sto studiando CSS ma non riesco a capire come creare un layout basilare, con header, sezione main, una sidebar e un footer.
Per creare i contenitori in html ho utilizzato dei semplici <div> con id univoco.ho creato ciascun div e li ho chiusi in un div genitore container:

codice:

<!DOCTYPE html>
<html lang="it">
<head>
    <meta charset="utf-8">
    <title></title>
	<link rel="stylesheet" href="css/basic.css">
</head>
<body>

<div id="container">

<div id="banner">
</div>


<div id="main">



</div>
<!-- fine main>

<div id="sidebar">
</div>


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

</div>
<!-- fine container>


</body>
</html>

Per i CSS ho solamente colorato i div diversi, per capire che comportamento possano avere in base alle impostazioni che cambio.

codice:

@charset "utf-8";

body {
      line-height: 16px;
      font-family: ubuntu, verdana;
      color: white;
	  background: black;
	  }
img {
    border: 1px dotted red;
	}
#main {
   background: red;
   color: black;
   }
   
#banner
         {
       background: yellow;
     }
#sidebar
          {
       background: green;
      }
#footer
           {background: white;
	   
      }

Come faccio dunque ad ottenere che la sidebar vada ad allinearsi a destra, il footer rimanga in basso, e lasci lo spazio alla div principale, man mano che questa viene aggiornata?

Grazie a chi vorrà aiutarmi

**Prill** · 26-03-2013, 16:29

devi affiancare sidebar e main? Puoi farlo col float

**NOFXER** · 28-03-2013, 22:18

Originariamente inviato da Prill
devi affiancare sidebar e main? Puoi farlo col float

Sono riuscito ad affiancarli usando float.
Ma ora ho altri due problemi:
1) Non riesco a capire perchè il testo mi sborda dal div circostante (li ho colorati in modo che vedo la loro area)
2)Il div footer mi si sottopone al div main. Come fare perchè il footer stia sotto il main, indipendentemente da quanto quest'ultimo sia lungo?

**Nobody33** · 28-03-2013, 22:36

Prova questo. Ovviamente è da perfezionare e da sistemare a secondo dei tuoi bisogni:

codice:

<style type="text/css">


body{ 
background-color:#fff;
margin:0; 
padding:0; 
}

#header{ 
background-color:#f00;
height:150px;
}

#destra{ 
float:right;
width:200px;
background-color:#ff3; 
min-height:650px; /* per browser moderni */
height:auto !important; /* IDEM*/
height:650px; /* per  IE6 */
}

#centro { 
margin-right:200px;
background-color:#6f0; 
min-height:650px; /* per browser moderni*/
height:auto !important; /* per browser moderni */
height:650px; /* per IE6 */
}

#footer { 
clear:both;
background-color:#333;
height:100px;
}
</style>
</head>
<body>
<div id="header">
	</div>
<div id="destra">
	</div>
<div id="centro">
	</div>
<div id="footer">
	</div>
</body>

**NOFXER** · 29-03-2013, 14:40

Originariamente inviato da Nobody33
Prova questo. Ovviamente è da perfezionare e da sistemare a secondo dei tuoi bisogni:

codice:

<style type="text/css">


body{ 
background-color:#fff;
margin:0; 
padding:0; 
}

#header{ 
background-color:#f00;
height:150px;
}

#destra{ 
float:right;
width:200px;
background-color:#ff3; 
min-height:650px; /* per browser moderni */
height:auto !important; /* IDEM*/
height:650px; /* per  IE6 */
}

#centro { 
margin-right:200px;
background-color:#6f0; 
min-height:650px; /* per browser moderni*/
height:auto !important; /* per browser moderni */
height:650px; /* per IE6 */
}

#footer { 
clear:both;
background-color:#333;
height:100px;
}
</style>
</head>
<body>
<div id="header">
	</div>
<div id="destra">
	</div>
<div id="centro">
	</div>
<div id="footer">
	</div>
</body>

Grazie, funziona!!
una domanda: cos'hai usato per far si che il footer segua la lunghezza di destra e centro?
(senno' con la pappa pronta non imparo mai

)

**Nobody33** · 29-03-2013, 18:21

Non capisco la domanda

cos'hai usato per far si che il footer segua la lunghezza di destra e centro?

Ho usato il css ovviamente....hehehe

A parte gli scherzi, ti conviene sperimentarci un pò, studiati il codice, modificalo per capirci qualcosa...e, soprattutto, cerca su google (inglese, sempre meglio e c'è più materiale).

Sono spiacente a dirlo, ma qui in italia vedo nella maggior parte dei casi la inutile pratica copia/incolla senza domandarsi nulla. Ad ognuno la sua

Discussione: Come realizzare un semplice layout con CSS?

Strumenti discussione

Ricerca discussione

Visualizza

Come realizzare un semplice layout con CSS?

Permessi di invio