+ Rispondi alla Discussione
Risultati da 1 a 5 di 5

primi passi e primi problemi nel posizionamento dei div con CSS

Ultimo Messaggio di Laburno il:
  1. #1
    User
    Data Registrazione
    Mar 2006
    Località
    Umbria
    Messaggi
    24

    primi passi e primi problemi nel posizionamento dei div con CSS

    Salve.
    Sto cercando di realizzare in CSS tableless la pagina che "apre" il sito "www.ilpoggiodelsole.it", e con i tentativi fatti (pubblicati su "www.carichisospesi.it/provePdS" ottengo il risultato voluto in IE7, mentre non va bene con FF (i girasole in alto, la dicitura "agriturismo" e le bandierine in basso se ne vanno troppo a sinistra).
    Qualcuno puo' aiutare?
    Grazie, M.

  2. #2
    Esperto L'avatar di Laburno
    Data Registrazione
    Sep 2006
    Località
    Lvcca
    Messaggi
    804
    Ciao benvi!
    e benvenuto nel forum GT!

    Allora, il primo consiglio che ti do è: se funziona su Internet Explorer ma non su Firefox (o Opera), allora è progettato male. La prima cosa che è importante sapere sui CSS, è che non tutti i browser li interpretano correttamente... e con non tutti i browser intendo IE (specialmente le vecchie versioni).

    Detto questo ho pensato che, invece che correggere e far funzionare il tuo css, sarebbe molto più comodo se ti facessi vedere un esempio di come l'avrei fatto io. Mi raccomando di tenere presente che è solo una delle millemila maniere adottabili per ottenere lo stesso risultato, perciò quella che ti mostro è solo una delle tante.

    Per semplicità ho fatto finta di credere che la parte alta col logo e coi girasoli sia un unica grande immagine, larga quanto la foto dell'agriturismo, che si chiama header.jpg. Poi ho impostato la struttura in questa maniera:

    Codice HTML:
    <div id="contenitore">
        <div id="testata"><img src="header.jpg"></div>
        <div id="corpo"><img src="foto.jpg"></div>
        <div id="footer">
            <div id="lingua"><!-- bandierine --></div>
            <div id="informazioni"></div>
        </div>
    </div>
    Per cominciare è buona norma e regola utilizzare un div che faccia da contenitore per tutto il layout: è il famoso wrapper che spesso appare negli esempi. Risulta utile per una lunga serie di motivi, il cui principale è quello di cambiare le dimensioni del layout del tuo sito modificando solo le impostazioni di un div (il wrapper appunto). In questo nostro caso si chiama contenitore.
    Il div testata conterrà l'immagine header.jpg di cui ho parlato prima, il div corpo conterrà l'immagine principale foto.jpg.
    Poi ho creato un footer, e l'ho suddiviso in due altri div lingua e informazioni i quali divideranno in due il contenuto per contenere le bandierine e l'indirizzo.

    Detto questo, ho scritto il CSS in questa maniera.
    Dovrebbe essere corretto anche se sicuramente non è preciso al pixel, ma è approssimativo perché purtroppo non ho avuto il tempo di provarlo. Comunque puoi dargli un'occhiata e eventualmente ci si rimette mano.

    Eccolo qui, commentato passo passo:

    Codice HTML:
    /* Si azzerano margini e padding per tutti gli elementi */
    * { padding: 0px; margin: 0px; }
    /* Il text-align: center serve per centrare il div contenitore su IE */
    body { 
        background-color:rgb(76, 34, 0);
        margin: 0px;
        text-align: center;
    }
    /* Viene ripristinato text-align:left (altrimenti veniva ereditato dagli elementi interni) e si imposta il margine sinistro e destro ad auto per centrare il div sui browser che interpretano correttamente i css */
    #contenitore {
        text-align: left;
        margin: 0px auto;
        width: 750px;
    }
    /* Considero che la testata e il corpo andrannoa  contenere un immagine ognuna (in una il logo coi girasoli, nell'altra la foto)
    usare text-align:center è il modo più veloce per centrarla */
    #testata, #corpo { text-align: center;}
    /* al corpo e al footer ho dato un padding alto e basso */
    #corpo, #footer { 
        background-color: #E6C990;
        padding: 10px 0px;
    }
    /* imposto i due div interni al footer in modo che siano di dimensioni il 50% ognuno della dimensione del footer (che coincede con quella del contenitore), e con floa:left li posiziono uno accanto all'altro */
    #lingua, #informazioni { 
        width: 50%; 
        float: left;
    }
    /* codice per stilizzare adeguatamente il paragrafo col testo */
    #informazioni p {
        text-align: right;
        /* Lo stile del testo */
    }
    Se c'è qualcosa di strano o che non funziona, segnalalo così lo risistemo.

    Spero di esserti stato d'aiuto

    (E ancora benvenuto! )


  3. #3
    Esperto L'avatar di osvi
    Data Registrazione
    Jul 2006
    Località
    Siena
    Messaggi
    1,077
    no fermo

    il position absolute va usato solo quando serve
    non per posizionare tutti gli elementi della pagina, altrimenti si verificano queste situazioni

    il box che contiene le bandiere (#box) dovrebbe contenere bandiere senza stili
    poi metti

    Codice:
    #box { background-color:. .... . }
    #box img { margin: 10px 5px; }
    l'altra immagine a dx delle bandiere puoi metterla sempre dentro al box, ma prima delle bandiere e con float:right;

    ciao,
    Francesco
    Firefox browser

  4. #4
    Esperto L'avatar di osvi
    Data Registrazione
    Jul 2006
    Località
    Siena
    Messaggi
    1,077
    maledetto, mi hai battuto in velocità e qualità -.-

    notte
    Firefox browser

  5. #5
    Esperto L'avatar di Laburno
    Data Registrazione
    Sep 2006
    Località
    Lvcca
    Messaggi
    804
    Citazione Originariamente Scritto da osvi Visualizza Messaggio
    maledetto, mi hai battuto in velocità e qualità -.-

    notte
    Massìe! Ciù is mèl che uan!

+ Rispondi alla Discussione

Tag per Questa Discussione

^ Permessi di Scrittura

  • Tu non puoi inviare nuove discussioni
  • Tu non puoi inviare risposte
  • Tu non puoi inviare allegati
  • Tu non puoi modificare i tuoi messaggi
  •  
  • Il codice BB è Attivato
  • Le faccine sono Attivato
  • Il codice [IMG] è Attivato
  • Il codice [VIDEO] è Attivato
  • Il codice HTML è Disattivato
  • Trackbacks Attivato
  • Pingback Attivato
  • Refback Attivato

SEO by vBSEO 3.6.0 PL2 ©2011, Crawlability, Inc.