struttura pagina con div e css

luca1988

struttura pagina con div e css

Ciao a tutti gli esperti di questa sezione. Di solito faccio domande nella sezione PHP ma ora mi serve aiuto con i CSS.

In passato ho sempre usato le tabelle per organizzare la struttura di una pagina ma ora mi sono deciso ad imparare l'impaginazione tramite <div> e css.

Ho provato ad editare il "layoutizzatore" proposto in questo stesso forum ma ho riscontrato non pochi problemi..

Ecco quello che vorrei ottenere: una semplice struttura a due colonne con un HEADER che sovrasta un CONTAINER (a sx) e una SIDEBAR (a dx). In fondo, sotto ad entrambi i div precedenti, un FOOTER.

Questa è la struttura base da cui vorrei partire per sperimentare un po' di CSS, ma non riesco a crearla correttamente. Non riesco ad impostare i comandi CSS di base per allineare mantenere le giuste proporzioni.

Mi sono permesso di creare un'immagine esplicativa di quello che vorrei ottenere e questo è il link: lucazaccaro.it/immagini/sample.png

se per caso non fosse possibile pubblicare link chiedo scusa, troverò un'altra soluzione per esporre il problema.

In parole povere avrei bisogno di un'anima pia che mi scrivesse il CSS corretto da abbinare alla struttura

<div id="global"> //contiene tutto
<div id="header"></div>
<div id="sidebar"></div>
<div id="container"></div>
<div id="footer"></div>
</div>

affinché rispetti i vincoli che ho riassunto nell'immagine.

non perché io non abbia voglia di farmelo da solo (ci ho provato, non funziona..) ma perché credo che questo sia uno di quei casi in cui si impara molto di più da un esempio funzionante che da pagine e pagine di lezione.

fate pure con comodo, la risposta mi serve più che altro per imparare!

Grazie in anticipo a chi vorrà aiutarmi

manetta

Ciao, ho fatto una semplice bozza, vedi se ti può andar bene.
Codice html:


<html>
<head>
<title>Layout 2 colonne</title>
<meta name="generator" content="Bluefish"/>
<meta name="author" content=""/>
<meta name="copyright" content=""/>
<meta name="keywords" content=""/>
<meta name="description" content=""/>
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<meta http-equiv="content-style-type" content="text/css"/>
<link rel="stylesheet" href="style.css" type="text/css" media="screen" /> 
</head> 
<body> 
<div id="global"> 
<div id="header"> 
<h1>Titolo sito</h1> 
</div> 
<div id="sidebar"> 
<ul> 
<li><a id="activelink" href="#">Home</a></li> 
<li><a href="#">Link</a></li> 
<li><a href="#">Link</a></li> 
<li><a href="#">Link</a></li> 
<li><a href="#">Link</a></li> 
<li><a href="#">Link</a></li> 
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li> 
</ul> 
</div> 
<div id="container"> 
<h1>Layout a due colonne</h1> 
<p>testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo
testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo
testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo
testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo
testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo
</p> 
</div> 
<div id="footer">2010 &copy; mio sito</div> 
</div> 
</body> 
</html>
```Css esterno:

html,body{
margin: 0 auto;
padding:0;
}
body{
font-family: arial,sans-serif;
font-size: 76%;
text-align: center;
}
div#global{
width: 800px;
margin: 50px auto;
text-align: left;
}
div#header{
height: 50px;
border: 2px solid #000;
padding-left: 10px;
}
div#sidebar{
float:right;
width: 200px;
margin: 10px 0px 10px 0px;
border: 2px solid;
}
div#container{
margin: 10px 215px 10px 0px;
padding: 20px;
text-align: justify;
border: 2px solid;
}
div#footer{
height: 40px;
clear:right;
text-align:center;
padding: 10px;
border: 2px solid;
}
/navigazione/
div#sidebar ul{
padding: 20px;
list-style-type: none;
}
div#sidebar li{
margin: 0;
padding: 0;
}
div#sidebar a{
color:#369;
text-decoration: none;
}
div#sidebar a:hover{
color: #033;
text-decoration: underline;
}
div#sidebar a#activelink{
color:;
text-decoration: none;
}


PS: ricordati di inserire il doctype nell'header, non l'ho fatto io perchè lo considerava link attivo e mi impediva di postare.

luca1988

Grazie mille! Ho dato uno sguardo veloce alla pagina "in azione" e mi sembra che la struttura sia proprio quella che mi serve. Poi appena ho un attimo di tempo inizio a "giocarci" un pochino..

Per il momento davvero grazie

luca1988

Ciao manetta, riapro questa discussione perché non ho ben capito una cosa.. ho provato a usare un po' il codice che mi hai proposto e devo dire che sono davvero soddisfatto

ho fatto una pagina di test con questo layout e con chrome tutto ok, anche con ie8. il problema è, come al solito, ie6.
non so se hai la possibilità di provare direttamente (altrimenti dimmelo che posto degli screen) ma ie6 "ingrandisce" tutto, specialmente la dimensione dei tag h1 ed h3. Ma questo può anche starmi bene. Il problema è che con ie6 il padding del testo nella sidebar di destra aumenta inspiegabilmente. C'è una soluzione a questo inconveniente oppure non si può fare nulla?

la pagina dell'esempio è reca.altervista.org/test/ok_ie8_no_ie6/index.php

e il foglio di stile, praticamente identico a quello postato sopra, è reca.altervista.org/test/ok_ie8_no_ie6/style.css

grazie in anticipo e se non hai IE6 dimmi che faccio gli screen

ovviamente io mi sono rivolto a manetta perché è stato lui a fornirmi gentilmente il codice, ma se altri vogliono rispondere sono ben acectti!

manetta

Ciao Luca,
per i tag h1,h2,etc. li puoi gestire sempre tramite Css in questo modo:


h1 { 
  font-size: 13px; 
 }

Naturalmente cambierai il valore in px secondo le tue esigenze.

Per il problema del padding forse dipende proprio dal valore dei tag sopra citati.
Altrimenti prova a modificare il padding da così:

div#sidebar ul{
padding: 20px; 
list-style-type: none;
}

a così:

div#sidebar ul{
padding: 20px 0px 20px 20px; 
list-style-type: none;
}

praticamente dando valore 0 al padding-right.

rapide

Ciao a tutti, scrivo qui perché non ho trovato nulla, nel forum, che rispondesse alla mia domanda. La mia domanda credo sia molto semplice: su un div con overflow:auto e padding: 10px 10px 10px 10px mi capita che su "ie" e"opera" quando effettuo lo scroll mi mangia il padding al fond del div contenitore. Su tutti gli altri browser (Chrome, Safari, Firefox ecc...) tutto funziona correttamente, qualcuno sa da cosa potrebbe dipendere? Per completezza posto l'indirizzo della pagina e parte del codice:

PAGINA DEL SITO (in costruzione)
tozzinisecsa.com/Pomba25.it/i-materiali

PORZIONE DI CSS

#materiale {width: 876px;height: 536px;background: #f4f3f0;border: solid 2px #000;overflow: auto;display: inline-block;/*--- ANGOLI ARROTONDATI ---*/text-align: center;padding: 10px 10px 10px 10px;border-radius: 10px;-moz-border-radius: 10px 10px 10px 10px;-webkit-border-radius: 10px 10px 10px 10px;behavior: url(ie-css3.htc);/*--- OMBRA ESTERNA ---*/-webkit-box-shadow: 10px 10px 5px;-moz-box-shadow: 10px 10px 5px;box-shadow: 10px 10px 15px;}

PORZIONE HTML

<head>
<title>Pomba 25</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<script type="text/javascript" language="javascript1.2">
switch (navigator.appName)
{
case "Opera" :
document.write("<link rel=stylesheet href='opera.css' type='text/css'");
break;
case "Microsoft Internet Explorer" :
document.write("<link rel=stylesheet href='ie.css' type='text/css'");
break;
default :
document.write("<link rel='stylesheet' href='stile.css'type='text/css'");
}
</script>
</head>
<body>
<div id="pagina">
<div id="contenuti">
<div id="header"><a href="index.php" id="titolo"></a></div>
<div id="materiale">
<div class="materiale-sx"><div class="dettagli">
<img src="<?php echo $_SESSION['immagine']; ?>">
<h1> PARQUET </h1>
<p>testo</p>
</div></div>
<div class="materiale-dx"></div>
<div class="materiale-sx"></div>
<div class="materiale-dx"></div>
<div class="materiale-sx"></div>
<div class="materiale-dx"></div>
</div>
<a href="lo-stabile.php" id="tasto1"><br/>LO STABILE</a>
<a href="i-materiali.php" id="tasto2"><br/>I MATERIALI</a>
<a href="unita-abitative.php" id="tasto3"><br/>UNITA' ABITATIVE</a>
<a href="dove-siamo.php" id="tasto4"><br/>DOVE SIAMO</a>
<a href="contatti.php" id="tasto5"><br/>CONTATTI</a>
</div>
</div>
</body>

manetta

Il link che hai postato non apre nessuna pagina

rapide

hai ragione scusa, che distratto:
tozzinisecsa.com/Pomba25/i-materiali.php

rapide

Insomma nessuno è in grado di suggerirmi qualche soluzione?

Non importa, grazie lo stesso, continuerò a cercare in altri forum

rapide

Buongiorno a tutti, sono nuovamente io. Questa volta scrivo perché ho trovato la soluzione da solo, e credo potrebbe servire ad altre persone. Quello che ho fatto non so spiegarlo, da un punto di vista tecnico credo non sia corretto, ma non viene segnalato dal W3C come errore. Posto di seguito i codici con la seguente precisazione:

La pagina i-materiali.php è uguale per tutti i browser, la differenza è nel CSS, più precisamente l'ID #spaziatore esiste solamente nel CSS dedicato a Internet Explorer e Opera.

PORZIONE HTML

</head>
<body>
<div id="pagina">
    <div id="contenuti">
        <div id="header"><a href="index.php" id="titolo"></a></div>
        <div id="materiale">
            <div class="materiale-sx"><div class="dettagli">
            <img src="_img/i-materiali/1.jpg" alt="parquet" />
            <h1> PARQUET </h1>
            <p>testo</p>
            </div></div>
            <div class="materiale-dx"></div>
            <div class="materiale-sx"></div>
            <div class="materiale-dx"></div>
            <div class="materiale-sx"></div>
            <div class="materiale-dx"></div>
            <div id="spaziatore"><br /></div>
        </div>
        <a href="lo-stabile.php" id="tasto1"><br/>LO STABILE</a>
        <a href="i-materiali.php" id="tasto2"><br/>I MATERIALI</a>
        <a href="unita-abitative.php" id="tasto3"><br/>UNITA' ABITATIVE</a>
        <a href="dove-siamo.php" id="tasto4"><br/>DOVE SIAMO</a>
        <a href="contatti.php" id="tasto5"><br/>CONTATTI</a>
        </div>
</div>
</body>
</html>

PORZIONE CSS (dello stile dedicato a INTERNET EXPLORER e OPERA)

/*---------------------------------------- Materiali ----------------------------------------*/ #materiale {
    width: 876px;
    height: 536px;
    background: #f4f3f0;
    border: solid 2px #000;
    overflow: auto;
    /*--- ANGOLI ARROTONDATI ---*/
    text-align: center;
    padding: 10px 10px 10px 10px;
    border-radius: 10px;
    -moz-border-radius: 10px 10px 10px 10px;
    -webkit-border-radius: 10px 10px 10px 10px;
    behavior: url(ie-css3.htc);
    /*--- OMBRA ESTERNA ---*/
    -webkit-box-shadow: 10px 10px 5px;
    -moz-box-shadow: 10px 10px 5px;
    box-shadow: 10px 10px 15px;
}

 {
    width: 876px;
    heiht: 40px;
    float: right;
}


.materiale-sx {
    width: 400px;
    height: 200px;
    border: solid 1px;
    margin-top: 10px;
    margin-left: 10px;
    margin-bottom: 10px;
    float: left;
    /*--- SFONDO SFUMATO ---*/
    linear-gradient(top, #666 0%, #999 100%);
    background-image: -o-linear-gradient(top, 0%, 100%);
    background-image: -moz-linear-gradient(top, 0%, 100%);
    background-image: -webkit-linear-gradient(top, 0%, 100%);
    background-image: -ms-linear-gradient(top, 0%, 100%);
    /*--- SFONDO SFUMATO I.E. ---*/
    filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr='#666666', endColorstr='#999999');
    //per ie 5.5 e successivi
    filter: progid:DXImageTransform.Microsoft.filtername(GradientType=0, startColorstr='#666666', endColorstr='#999999');
    //per ie 8
    -ms-filter: progid:DXImageTransform.Microsoft.filtername(GradientType=0, startColorstr='#666666', endColorstr='#999999');
    /*--- ANGOLI ARROTONDATI ---*/
    text-align: center;
    padding: 5px 5px 5px 5px;
    border-radius: 5px;
    -moz-border-radius: 5px 5px 5px 5px;
    -webkit-border-radius: 5px 5px 5px 5px;
    behavior: url(ie-css3.htc);
    /*--- OMBRA ESTERNA ---*/
    -webkit-box-shadow: 5px 5px 5px;
    -moz-box-shadow: 5px 5px 5px;
    box-shadow: 5px 5px 10px;
}


.materiale-dx {
    width: 400px;
    height: 200px;
    border: solid 1px;
    margin-top: 10px;
    margin-right: 10px;
    margin-bottom: 10px;
    float: right;
    /*--- SFONDO SFUMATO ---*/
    linear-gradient(top, 0%, 100%);
    background-image: -o-linear-gradient(top, 0%, 100%);
    background-image: -moz-linear-gradient(top, 0%, 100%);
    background-image: -webkit-linear-gradient(top, 0%, 100%);
    background-image: -ms-linear-gradient(top, 0%, 100%);
    /*--- SFONDO SFUMATO I.E. ---*/
    filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr='#666666', endColorstr='#999999');
    //per ie 5.5 e successivi
    filter: progid:DXImageTransform.Microsoft.filtername(GradientType=0, startColorstr='#666666', endColorstr='#999999');
    //per ie 8
    -ms-filter: progid:DXImageTransform.Microsoft.filtername(GradientType=0, startColorstr='#666666', endColorstr='#999999');
    /*--- ANGOLI ARROTONDATI ---*/
    text-align: center;
    padding: 5px 5px 5px 5px;
    border-radius: 5px;
    -moz-border-radius: 5px 5px 5px 5px;
    -webkit-border-radius: 5px 5px 5px 5px;
    behavior: url(ie-css3.htc);
    /*--- OMBRA ESTERNA ---*/
    -webkit-box-shadow: 5px 5px 5px;
    -moz-box-shadow: 5px 5px 5px;
    box-shadow: 5px 5px 10px;
}


div.dettagli {
    width: 400px;
    height: 200px;
    text-align: left;
}


div.dettagli h1, div.dettagli p {
    color: #FFF;
    line-height: 1.2em;
    text-align: justify;
    margin: 0 0 0 7px;
    padding: 0;
}


div.dettagli h1 {
    font-weight: bold;
}


div.dettagli img {
    width: 126px;
    height: 126px;
    float: left;
    margin: 7px;
}