+ Rispondi alla Discussione
Risultati da 1 a 8 di 8

adatta l'allineamento di due div per tutti i bowser

Ultimo Messaggio di king7880 il:
  1. #1
    User L'avatar di king7880
    Data Registrazione
    May 2005
    Messaggi
    33

    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
    Ultima modifica di king7880; 31-03-08 alle 19:14

  2. #2
    User Attivo L'avatar di karedas
    Data Registrazione
    May 2007
    Località
    Impruneta (Firenze)
    Messaggi
    1,102
    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!
    Easysystem- Software and hardware solutions

  3. #3
    User L'avatar di king7880
    Data Registrazione
    May 2005
    Messaggi
    33

    Si grazie mille... mi spiego meglio :-)

    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 :-))...
    Ultima modifica di king7880; 01-04-08 alle 20:21

  4. #4
    Esperta L'avatar di Onsitus
    Data Registrazione
    Oct 2006
    Località
    RM
    Messaggi
    3,083
    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.

  5. #5
    User L'avatar di king7880
    Data Registrazione
    May 2005
    Messaggi
    33

    Forse ho risolto ma resta ancora un problema

    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 è #corpo_boxvideo?????? perchè allora si sfasa se è 10px???

  6. #6
    User Newbie
    Data Registrazione
    Apr 2008
    Messaggi
    5

    Progettazione creativa del tableless layout

    Sembrerebbe che tu abbia risolto il problema... Questo tuo post però mi ha molto incuriosita per come hai progettato il layout che dovevi realizzare. 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.

    Ultima modifica di _monique_; 11-04-08 alle 00:11

  7. #7
    User Attivo L'avatar di karedas
    Data Registrazione
    May 2007
    Località
    Impruneta (Firenze)
    Messaggi
    1,102
    L'errore da te citato si risolve così:

    Codice:
    #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

    Ciao!
    Ultima modifica di karedas; 11-04-08 alle 17:24
    Easysystem- Software and hardware solutions

  8. #8
    User L'avatar di king7880
    Data Registrazione
    May 2005
    Messaggi
    33
    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.. ;-)

+ 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.