• K
    User •

    adatta l'allineamento di due div per tutti i bowser

    Ciao a tutti...
    Ho un'altro probbbbbblemoooooone...
    Questa volta ho creato un <div> contenitor che all'interno monta altri due <div> contenitori separati tra di loro da 13px che a loro volta montano un'alto div all'interno con delle immagini... essi sono completamente allineati in basso ma fatto sta che il bordo inferiore dei 2 div non risulta essere allineato perfettamente su tutti i browser...
    perchè Ie6 me lo fa vedere più su, firefox più giù ecc...
    non sono stato capace di trovare una soluzione al mio problema...

    Vorrei evitare di utilizzare uno script java per il caricamento dei css realativo ai browser, questo perchè successivamente se dovrò apportare delle modifiche mi troverò costretto a modificare N°XX css e non credo sia il caso...

    Posto un link per farvi vedere la porzione di sito che mi sta facendo diventare pazzo...

    effedix.it/working/buono/div_che_non_si_allinea.html

    0
  • K
    Super User •

    Ciao king7880.

    L'allineamento dei div come tu hai provato non è mai una cosa semplice.
    Il problema del link che hai inserito è che non ho capito a quale di loro ti riferisci e scusami quindi in anticipo 🙂

    Se puoi descrivermi meglio il problema riferendoti alle classi mi faresti un piacere.
    ciao!

    0
  • K
    User •

    Allora, il bordo che non risulta allineato è quello inferiore... Se provate ad aprire la pagina con i vari browser, vi renderete conto che il div del blog sale e scende in base a non so quale criterio... Nnetscape ad esempio sembra non mi dia problemi ma IE6, IE7 e Firefox mi viene da piangere...

    Cercherò di essere quanto più preciso possibile nella descriozione di come ho costruito questo blocco per darvi la possibilità di poter intercettare con più facilità l'errore da me commesso...

    Ho creato un contenitore esterno che racchiude tutti i <div> che compongono questa porzione di sito, che ho chiamato "contenitor_centrale2"

    al suo interno ho messo altri 2 <div> contenitori uno l'ho chiamato "contenitor_boxvideo" e l'altro "contenitor_boxblog" entrambi flottati a sinistra

    All'interno di "contenitor_boxvideo" ho montato altri 3 <div>: "header_boxvideo" , "corpo_boxvideo" che al suo interno attualmente ha una immagine centrata che in questo caso simula una finestra video ma poi monterò un SWF e "footer_boxvideo"...

    Mentre per il "contenitor_boxblog" ho montato solo 2 <div>: "header_boxblog" e "immboxblog"...

    ecco quì di seguito tutto il codice:

    <div class="contenitor_centrale2">

                <div id="contenitor_boxvideo">
                <div id="header_boxvideo"></div>
                <div id="corpo_boxvideo"><img src="immagini/facsimile.gif" alt="" /></div>
                <div id="footer_boxvideo"></div>
            </div>
            
	
            <div class="contenitor_boxblog">
                 <div id="header_boxblog"></div>
                 <div id="immboxblog"></div>
             </div>

    </div>

    Questo è tutto il codice css utilizzato:

    .contenitor_centrale2 {
    height: auto;
    width: 549px;
    margin: 0;
    float: left;
    padding: 0px;
    }

    /* --- Formattazione Video --------- */

    #contenitor_boxvideo {
    height: 100%;
    width: 321px;
    margin: 0;
    float: left;
    }

    #header_boxvideo {
    height: 39px;
    width: 321px;
    margin: 0;
    background-color: transparent;
    background-image: url(immagini/video.jpg);
    background-repeat: no-repeat;
    background-position: left top;
    }

    #corpo_boxvideo {
    height: 100%;
    width: 321px;
    background-color: #F8F9FB;
    text-align: center;
    padding-top: 10px;
    padding-right: 0px;
    padding-bottom: 0px;
    padding-left: 0px;

    }

    #footer_boxvideo {
    height: 10px;
    width: 321px;
    margin: 0;
    background-color: transparent;
    background-image: url(immagini/videofoot.jpg);
    background-repeat: no-repeat;
    background-position: left top;
    }

    /--- Blog -------------/

    .contenitor_boxblog_esterno {
    height: auto;
    width: 219px;
    float: right;
    background-image: url(immagini/headersfonelement.jpg);
    background-repeat: no-repeat;
    background-position: right top;
    padding: 0px;
    margin-top: 0px;
    margin-right: 0px;
    margin-bottom: 0px;
    margin-left: 0px;
    }

    .contenitor_boxblog {
    height: 187px;
    width: 172px;
    float: left;
    padding: 0px;
    margin-top: 122px;
    margin-right: 0px;
    margin-bottom: 0px;
    margin-left: 13px;
    }

    #header_boxblog {
    height: 39px;
    width: 172px;
    margin: 0px;
    background-color: transparent;
    background-image: url(immagini/blog.jpg);
    background-repeat: no-repeat;
    background-position: left top;
    padding: 0px;
    }

    #immboxblog {
    height: 147px;
    width: 172px;
    margin: 0px;
    background-color: transparent;
    background-image: url(immagini/immblog.jpg);
    background-repeat: no-repeat;
    background-position: left top;
    padding: 0px;
    }

    Se riuscirete ad aiutarmi ve ne sarò grato a vita, sto impazzendo :-))...

    0
  • O
    Super User •

    2 calcoli...

    #header_boxvideo: 39px;
    #corpo_boxvideo: 10px di padding-top + 246px di immagine
    #footer_boxvideo: 10px
    Totale: 305px

    .contenitor_boxblog: 187px + 122 di margin-top
    Totale: 309px

    Il suo contenuto invece è di 39+147=186px

    Non vedo perche devono essere allineati.
    Il fatto che da problema con Firefox è un primo segnalo che c'è qualche cosa di sbagliato.

    0
  • K
    User •

    Grazie mille...

    Ho fatto una cosa ho eliminato il footer del video ed ho aggiunto un padding 10px bottom al #corpo_boxvideo e tutto si è sistemato...

    ma allora il problema è?????? perchè allora si sfasa se è 10px???

    0
  • M
    User Newbie •

    Sembrerebbe che tu abbia risolto il problema... Questo tuo post però mi ha molto incuriosita per come hai progettato il layout che dovevi realizzare. :mmm: Mi chiedevo se hai un motivo specifico per usare tutti quei <div>.

    Questa tipologia di layout sarebbe facilmente ottenibile con meno codice HTML e molte meno regole da foglio di stile, in pratica con un CSS design parecchio più leggero.

    Ho avuto come l'impressione che la tua progettazione in questo caso sia stata la trasposizione di una progettazione a tabelle, ma il tableless layout andrebbe pensato con un approccio completamente diverso.

    L'uso dei CSS a livello di layout consente un sacco di creatività: uno stesso risultato può essere raggiunto attraverso soluzioni differenti, ma sta poi al designer trovare la migliore. 😉

    :ciauz:

    0
  • K
    Super User •

    L'errore da te citato si risolve così:

    #footer_boxvideo{
...
overflow:hidden;
}
```In ogni caso mi accodo a _monique_  poichè potresti "scarnificare" l'intero codice html usando un'impostazione del layout con meno div ed un css più consono.


Se non vedi i due box allineati comunque è perchè gli hai dato troppo margine al box di destra ( quello del blog).
Non hai fatto bene i calcoli :D

Ciao!
    0
  • K
    User •

    Grazie mille ragazzi,
    Infatti mi sono reso conto da solo che ho utilizzato troppi div ed il codice è abbastanza lungo infatti sto riproggettando l'intera struttura per evitare di utlizzare div che non servono praticamente a nulla iniziando ad utilizzare solo i margin e padding per posizionare i vari elementi della pagina...
    se appena ho finito mi farebbe piacere poterla postare così magari mi date qualche consiglio...

    Grazie ancora.. 😉

    0
Effettua l'accesso per rispondere