• Super User

    [help] Sito div + css senza tabelle

    Salve ragazzi, stavo provando a fare un sito con soli DIV e CSS, ma non avendo mai provato mi ritrovo con alcuni dubbi...

    per ora sono arrivato a questo punto:
    http://www.globogsm.it/mario/mario.html

    1. ma dopo aver iniziato ho letto su qualche guida che i DIV vanno inseriti all'interno di un altro DIV con ID "container" , ma non ho ben capito come funziona.

    2. di testa mia per dare una grafica alla pagina, ho aggiunto un immagine ad ogni DIV...è una cosa giusta o le immagini per la grafica vanno inserite in altro modo?

    2b) se il metodo usato, citato al punto 2, è giusto, come posso risolvere il problema che con FF vedo tutto bene mentre con IE l'header si stacca dal resto della pagina?

    Vi posto il codice HTML e il CSS:

    #logo {
        position: absolute;
        height: 100px;
        width: 100px;
        left: 146px;
        top: 19px;
        z-index: 1;
    }
    #intestazione h1 {
        position: absolute;
        height: 118px;
        left: 130px;
        top: 15px;
        width: 751px;
        background-image: url(fondo_heading.jpg);
    }
    #menu {
        position: absolute;
        height: 20px;
        left: 258px;
        top: 92px;
        width: 539px;
    }
    #testo {
        position: absolute;
        height: 170px;
        left: 130px;
        top: 410px;
        width: 751px;
        background-image: url(fondo_box_sez.jpg);
    }
    #immagini {
        position: absolute;
        width: 494px;
        left: 130px;
        top: 135px;
        height: 275px;
        background-image: url(fondo_box_swf.jpg);
    }
    #marchi {
        position: absolute;
        width: 260px;
        left: 621px;
        top: 135px;
        height: 275px;
        background-image: url(fondo_box_prodotti.jpg);
    }
    #piede {
        position: absolute;
        height: 37px;
        width: 751px;
        left: 130px;
        top: 580px;
        background-image: url(fondo_footer.jpg);
        text-align: center;
        vertical-align: middle;
    }
    ``` ```
    <!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=iso-8859-1" />
    <title>Documento senza titolo</title>
    <link href="stile.css" rel="stylesheet" type="text/css" />
    <style type="text/css">
    <!--
    body {
        background-color: #666666;
    }
    -->
    </style></head>
    
    <body>
    <div id="logo">
      <div align="center">
        <p>Logo</p>
      </div>
    </div>
    <div id="intestazione"> 
      <h1 align="center">&nbsp;</h1>
    </div>
    <div id="menu">
      <div align="center">Home | Dove siamo | Servizi | Informatica | Stato | Contatti </div>
    </div>
    <div id="immagini">
      <div align="center"> Immagini</div>
    </div>
    <div id="marchi">
      <div align="center">Marchi che scorrono </div>
    </div>
    <div id="testo">
      <div align="center">
        <pre>Qui ci va tutto il testo </pre>
      </div>
    </div>
    <div id="piede">
      <div align="center">
        <pre>Copyright &copy; 2006 Tecno Service Assistenza- Tutti i diritti riservati</pre>
      </div>
    </div>
    </body>
    </html>
    

    Il sito dovrebbe venire strutturato in questo modo:

    Intestazione con un immagine + logo a sx e sovrapposto all'intestazione + menu navigazione centrato ai piedi dell'intestazione.

    box sx sotto intestazione: dovrebbe contenere delle immagini (statiche o in flash) che cambiano in base alla pagina su cui ci si trova.

    box dx sotto intestazione: dovrebbe contenere dei marchi che scrollano in verticale.

    box testo: dovrebbe contenere il testo di ogni pagina che scorre (se c'è ne bisogno) con una scroll bar verticale.

    e il normale footer.

    Spero di essere stato chiaro nell'esprimermi e di aver mensionato in modo corretto i termini.
    Acceto consigli per portare a termine questo lavoro.
    grazie ragazzi.:ciauz:


  • User Attivo

    Ciao GloboGsm
    Dato che ancora stai strutturando la pagina (ed il sito), ti consiglio di dare un'occhiata a questi esempi di layout (http://blog.html.it/layoutgala/indexIta.html)

    Sono semplici, fatti bene e usano id="container"

    Ciao 🙂


  • Super User

    Ti ringrazio per il link, ma non c'è come serve a me e poi sono senza css quelli, in più vorrei (con il vostro aiuto) riuscire a crearlo io da solo da 0, in modo da imparare anche, non posso certo copiare sempre a destra e sinistra:sbonk:...
    Grazie di nuovo;)