Ciao a tutti, ho da poco iniziato a cimentarmi nell'impresa di creare un sito ed ho trovato molto utili le guide presenti in questo sito, anche se in effetti ormai molte sono abbastanza datate e non so se ci sono molte novità su cui dovrei aggiornarmi.
Però andando nello specifico del mio problema, prima di tutto vorrei dei consigli generici, ho letto alcune discussioni in cui si criticava la scelta di posizionare tutti i blocchi tramite scelte di valore assoluto. Io mi son trovato d'accordo con questa idea, ma non vorrei che io sbagli dal lato opposto cercando di impostare tutto in termini relativi. Quindi prima di tutto vorrei qualche consiglio a riguardo, soprattutto per quanto riguarda le larghezze dei div conteiner o per quanto riguarda i loghi da mettere in cima al sito. Conviene impostare una larghezza in pixel? Se si, qual è una larghezza che andrebbe bene con gli attuali browser e risoluzioni dei monitor?
Poi invece scendendo ancor di più nel particolare vi posto il listato non proprio del layout del mio sito, ma di una semplificazione di esso. Poi da qui penso che dovrei riuscire a fare cose più complicate.
Eccolo qua:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Layout Semplice</title>
<style type="text/css">
html, body{
height:100%;
background:lightgreen;
}
div.container{
width:80%;
min-height:100%;
margin:20px auto 0;
backgroundurple;
color:black;
padding:0px;
}
div.boxup{
margin:0;
background:lightblue;
clear:both;
width:100%;
height:80px;
}
div.boxleft{
background:lightgrey;
width:20%;
min-height:100%;
margin:0;
padding:0;
float:left;
}
div.boxcenter{
background:white;
width:80%;
min-height:100%;
margin:0;
padding:0;
float:left;
}
div.footer{
width:80%;
background:black;
height:40px;
clear:both;
margin:0 auto 20px;
}
</style>
</head>
<body>
<div class="container">
<div class="boxup">
</div>
<div class="boxleft">
questo deve stare a sinistra
</div>
<div class="boxcenter">
questo deve stare nel centro-destra
</div>
</div>
<div class="footer">
</div>
</body>
</html>
Per quanto riguarda il container sono riuscito a estenderlo per tutta l'altezza della pagina tramite i consigli trovati in giro. Ma non riesco ad estendere a tutta la pagina i due box principali quello sinistro e quello centrale. Ovvero vorrei non vedere per nulla il colore viola ma solamente una striscia verticale grigia ed una bianca più larga.
Inoltre non capisco perchè non viene visto il margine al di sotto del footer. In quanto vorrei lasciare un pò del colore di sfondo oltre che ai lati del container anche al di sotto ed al di sopra.
Grazie in anticipo per le risposte!
Rispondi quotando