Pagina 1 di 2 1 2 ultimoultimo
Visualizzazione dei risultati da 1 a 10 su 14

Discussione: Layout con i CSS

  1. #1
    Utente di HTML.it
    Registrato dal
    Jan 2001
    Messaggi
    177

    Layout con i CSS

    salve a tutti,
    volevo provare a riprodurre questo layout con i css.

    http://www.feldwaldwiese.de/

    ho provato in questo modo ditemi se la cosa è fattibile.


    <div id="container">
    <div id="header">testata</div>
    <div id="content">testo descrittivo</div>
    <div id="navigation">navigazione
    navigazione</div>
    <div id="footer">footer</div>
    </div>


    div#container{
    position: relative;
    }
    div#header{
    border: medium solid;
    width: 760px;
    }

    div#content{
    margin-right: 400px;
    border: medium solid;
    }

    div#navigation{
    position: absolute;
    top: 10px; /* altezza dell'header */
    right: 0;
    width: 395px; /* un pò in meno per evitare l'uso del padding */
    border: medium solid;
    }

    div#footer{
    border: medium solid;
    }

  2. #2
    Utente di HTML.it
    Registrato dal
    Jan 2001
    Messaggi
    177
    perchè ai miei thread non risponde mai nessuno? :master:

  3. #3
    Utente di HTML.it
    Registrato dal
    Sep 2001
    Messaggi
    21,188
    Ieri non mi si caricava la pagina linkata.

    Comunque non mi pare che la tua struttura riesca a realizzare una cosa come la loro.

    Sicuramente la loro struttura e` un po' ridondante, ma la tua e` troppo stringata.

    Io vedo in quella pagina:
    Una testata e un corpo.

    La testata e` a sua volta formata da:
    bodo sinistro (con inserito la ranocchia)
    pezzo centrale con la lepre a colori, il nome della compagnia e le briciole di pane
    pezzo a destra con il menu e la lepre verde

    Il corpo e` formato da due colonne, lasciando pero` un margine sisntstro

    Il Copyright in fondo alla pagina potrebbe far parte della colonna sinistra del corpo, oppure puo` essere un <div> largo a tutta finestra (con opportuno margine)

    La struttura dei <div> deve ricalcare quanto descritto qui sopra.
    Nuova politica di maggiore severita` sui titoli delle discussioni: (ri)leggete il regolamento
    No domande tecniche in messaggi privati

  4. #4
    Utente di HTML.it
    Registrato dal
    Jan 2001
    Messaggi
    177
    grazie per la risposta,

    in effetti non sono un mago dei css, volevo ricreare quella struttura in modo approssimativo ..

    sto provando a costruire il layout secondo le tue indicazioni e comincio a incontrare i primi problemi durante la creazione della testata.

    ho pensato a un contenitore con dentro 3 sezioni, ma "inheader" in explorer viene visualizzata all'interno di "header" ma in firefox all'esterno.

    <div id="container">
    <div id="header">
    testata
    <div id="inheader">NELLA TESTATA</DIV>
    </div>
    <div id="content">
    testo descrittivo testo descrittivo
    </div>
    </div>

    div#container{
    position: relative;
    border: medium solid;
    }
    div#header{
    position: relative;
    border: medium solid;
    width: 760px;
    }

    div#inheader{
    border: medium solid;
    width: 200px;
    float: right;

    }

    div#content{
    margin-right: 400px;
    border: medium solid;
    }

    come ovvio al problema? e soprattutto è la soluzione migliore?

  5. #5
    Utente di HTML.it
    Registrato dal
    Sep 2001
    Messaggi
    21,188
    Lascia stare i position. Fai conto che quell'attributo non esista.

    Per affinacare due o piu` oggetti di tipo blocco, devi dare semplicemente:
    float: left;
    (ricordando poi di inserire il clear nel blocco successivo - anche con l'uso di un blocco supplementare, se necessario).


    E ho gia` detto che la struttura di quel sito e` sovrabbondante. Inizia con la struttura che ti ho suggerito io. Quindi:
    codice:
    <body>
      <div id="testa">
        <div id="testaSin">...</div>
        <div id="testaCen">...</div>
        <div id="testaDes">...</div>
      </div>
      <div id="corpo">
        <div id="corpoSin">...</div>
        <div id="corpoDes">...</div>
      </div>
    </body>
    Poi uno alla volta sostituisci i puntini con quello che vuoi inserire, e sistema i bordi (penso al margin-left del corpoSin).

    Il testaSin avra` larghezza fissa; forse anche il testaCen (ma dipende dalla tua situazione contingente).
    Nuova politica di maggiore severita` sui titoli delle discussioni: (ri)leggete il regolamento
    No domande tecniche in messaggi privati

  6. #6
    Utente di HTML.it
    Registrato dal
    Jan 2001
    Messaggi
    177
    che intendi per clear nel blocco successivo? a cosa serve?

  7. #7
    Utente di HTML.it
    Registrato dal
    Sep 2001
    Messaggi
    21,188
    Originariamente inviato da diego78
    che intendi per clear nel blocco successivo? a cosa serve?
    Serve a contrastare l'effetto del float. Il float ha effetto sul blocco in cui e` definito ed anche sui blocchi vicini.

    Nel mio esempio, i blocchi
    testaSin, testaCen, testaDes, corpoSIn, corpoDes
    devono avere un float.
    Il blocco
    corpo
    deve avere un clear
    (altrimenti viene affiancato al testaDes, se lo spazio e` sufficiente)
    Nuova politica di maggiore severita` sui titoli delle discussioni: (ri)leggete il regolamento
    No domande tecniche in messaggi privati

  8. #8
    Utente di HTML.it
    Registrato dal
    Jan 2001
    Messaggi
    177
    inserendo clear: left o both in explorer mi compare una pagina bianca in firefox tutto ok e mi toglie i bordi residui

  9. #9
    Utente di HTML.it
    Registrato dal
    Sep 2001
    Messaggi
    21,188
    Ho l'impressione che ci sia un errore da qualche altra parte.
    Puoi postare il link?
    Nuova politica di maggiore severita` sui titoli delle discussioni: (ri)leggete il regolamento
    No domande tecniche in messaggi privati

  10. #10
    Utente di HTML.it
    Registrato dal
    Jan 2001
    Messaggi
    177
    <body>
    <div id="container">
    <div id="header">
    <div id="inheaderCenter"> CENTRO </DIV>
    <div id="inheaderRight">
    menu
    </DIV>
    </div>
    <div id="content">
    testo descrittivo
    </div>
    <div id="footer">footer</div>
    </div>
    </body>


    div#container{
    position: relative;
    border: thin solid;
    }
    div#header{
    clear: right;
    position: relative;
    border: thin solid;
    float: left;
    width: 770px;
    }

    div#inheaderCenter{
    border: thin solid;
    float: left;
    width: 550px;
    }

    div#inheaderRight{
    border: thin solid;
    width: 210px;
    float: left;
    }

    div#content{
    margin-left: 55px;
    width: 707px;
    border: thin solid;
    }

    div#footer{
    clear: left;
    border: thin solid;
    }

Permessi di invio

  • Non puoi inserire discussioni
  • Non puoi inserire repliche
  • Non puoi inserire allegati
  • Non puoi modificare i tuoi messaggi
  •  
Powered by vBulletin® Version 4.2.1
Copyright © 2025 vBulletin Solutions, Inc. All rights reserved.