Pagina 1 di 2 1 2 ultimoultimo
Visualizzazione dei risultati da 1 a 10 su 11
  1. #1

    layout XHTML e clear:both

    Ciao a tutti.
    Sto realizzando questo sito http://www.diocesialghero-bosa.it/

    In particolare nella struttura della HOMEPAGE si può notare una cosa:
    ci sono 2 colonne laterali e un corpo centrale, all'interno del quale ci sono altre 2 colonne (sempre float una a destra e una a sinistra) e sotto un box che copre la larghezza di queste 2 colonne (Agensir).

    Detto questo, ho dovuto mettere tutto il corpo centrale all'interno di una <table> a 1 riga e 1 colonna poichè il clear:both che davo al box AGENSIR mi faceva scendere il box AL DI SOTTO delle 2 colonne più esterne e non limitatamente alle 2 interne come invece avrei voluto.

    Inoltre utilizzo la <table> perchè con Internet Explorer il layout della pagina viene sfasato quando (dinamicamente) il corpo della pagina contiene una <table width="100%"> oppure quando il testo contenuto in una <td> di questa table è eccessivamente lungo e senza spazi. In pratica il problema di IE è che anzichè darmi una barra di scorrimento orizzontale e allargare il layout, mi manda tutto il corpo centrale sotto le colonne più esterne del layout.

    LA MIA DOMANDA È
    Come faccio a eliminare questa <table> dal layout ed evitare questi 2 problemi sopra descritti?

    vi ringrazio in anticipo. ciao
    «Se leggi dimentichi, se vedi capisci, se fai impari» Piaget

  2. #2
    Utente di HTML.it L'avatar di salasir
    Registrato dal
    Apr 2004
    Messaggi
    1,887
    Hai provato a dare clear: left ?
    Maurizio

    "se ami il lavoro che fai, non lavorerai mai un giorno in vita tua!"

  3. #3
    Ho appena provato... non risolve nessuno dei 2 problemi

    con clear:left dato a #home_center, il box di agensir mi va a finire sotto il blocco di "area utenti" (N.B. fra un po' "area utenti" e "una finestra per dialogare" verranno scambiati di posto), ovvero sotto la colonna di estrema sinistra. In locale posso vederlo meglio perchè la colonna di sinistra è più lunga rispetto al contenuto del corpo centrale.

    Se invece metto clear:right mi va a finire sotto la colonna di estrema destra. Posso notarlo perché questa colonna è più lunga del corpo centrale ma più corta della colonna di sinistra.

    Inoltre non risolve il problema delle eventuali tabelle 100% contenute "dinamicamente" nel corpo centrale della pagina. È come se a queste tabelle (SOLO SU INTERNET EXPLORER) venisse impostato un clear:both in automatico. Allora ho provato a mettere
    #colonna_centrale table {
    clear:none;
    }
    ma la situazione rimane invariata


    come fareste voi per ottenere un layout così senza questi problemi?
    «Se leggi dimentichi, se vedi capisci, se fai impari» Piaget

  4. #4
    Ho preparato alcuni esempi per intenderci meglio sul problema

    Questa è la situazione attuale, con la <table> . Il risultato che visivamente vorrei ottenere è proprio questo, ma vorrei eliminare la <table> dal layout
    http://www.nuracale.it/extra/layout01.htm


    Questa sarebbe la situazione togliendo la <table>. Il box che contiene il clear:both porta il box azzurrino sotto le colonne laterali
    http://www.nuracale.it/extra/layout02.htm


    Questa sarebbe la situazione togliendo clear:both
    http://www.nuracale.it/extra/layout03.htm


    Questa la situazione con clear:left
    http://www.nuracale.it/extra/layout04.htm


    Questa la situazione con clear:right
    http://www.nuracale.it/extra/layout05.htm


    E infine questo è il fastidioso problema (su IE6... non so sulle altre versioni) della <table width="100%"> contenuta dinamicamente all'interno del corpo centrale della pagina
    http://www.nuracale.it/extra/layout06.htm


    chi può darmi una mano?
    «Se leggi dimentichi, se vedi capisci, se fai impari» Piaget

  5. #5
    Penso che usando solamente float e clear tu non possa venirne fuori...
    Mettendo il <div> "contenuti" prima dei <div> "menusx" e "menudx". In questo modo però si sfasano i due menu laterali. Il mio suggerimento è di utilizzare il posizionamento assoluto per questi due menu. Anziché il float, li posizioni a 50px dal top e quello di sx a 0px da sx, mentre quello di dx a 0px da destra... Dovrebbe funzionare... Facci sapere, che in caso perfeziono un po' l'idea...
    Earn money for searching the internet:
    Homepages Friends

  6. #6
    in realtà non mi sono mai piaciute le posizioni assolute... se riesco le evito. In questo caso per un layout speravo ci fosse una soluzione migliore... tipo un box più forte del DIV o qualcosa di simile... avresti un'altra soluzione o pensi sia l'unica?

    e per il problema della tabella cosa mi dici?
    «Se leggi dimentichi, se vedi capisci, se fai impari» Piaget

  7. #7
    Beh, sono d'accordo: meglio evitare i posizionamenti assoluti se possibile...

    Però al momento non mi viene nulla... Appena ho un po' di tempo ( TEMPO, una bella parola ) posso provare a fare alcune prove... Box "più forti" dei div proprio non credo che esistano (a parte le tabelle, che ti imploro, per questioni oramai più che note, di non usare)...

    Io farei una prova con i posizionamenti assoluti e guarderei la resa nei vari browser... E poi vedi... Magari è una soluzione accettabile!




    [EDIT]Per la tabella non so proprio... Non ho IE6 sotto mano... Ci penso anche per quella! Magari qualcuno di più esperto intanto si fa avanti[/EDIT]
    Earn money for searching the internet:
    Homepages Friends

  8. #8
    scusate se mando su il 3D ma a distanza di mesi non ho ancora trovato la soluzione e mi piacerebbe risolvere. Penso inoltre che sia una cosa utile un po' per tutti quelli che desiderano usare float all'interno della pagina, oltre che per le colonne laterali.

    grazie infinite a chi saprà aiutarmi
    «Se leggi dimentichi, se vedi capisci, se fai impari» Piaget

  9. #9
    Utente di HTML.it L'avatar di salasir
    Registrato dal
    Apr 2004
    Messaggi
    1,887
    Hai già visto questo articolo? Forse porebbe fare al caso tuo.
    web design con le griglie
    Maurizio

    "se ami il lavoro che fai, non lavorerai mai un giorno in vita tua!"

  10. #10
    Caro salasir... dirti che sei grande sarebbe un eufemismo!

    L'articolo che mi hai indicato mi ha illuminato la strada e in un colpo solo ho risolto i 2 problemi che tanto mi assillavano.

    Vi spiego brevemente, potrebbe sicuramente esservi utile.
    L'articolo parla della tecnica Float Nearly Everything, ovvero quella di usare elementi FLOAT per forzare gli elementi float contenuti in esso a stare all'interno.

    Quando parlavo di BOX più forti del DIV, mi riferivo proprio a una cosa del genere... e infatti la soluzione si è rivelata vincente.

    per cui basterà fare:
    <div id="contenitore">
    <div style="float:left;">
    tutto il contenuto che volete
    </div>
    </div>

    vi consiglio di utilizzare 2 DIV annidati come ho fatto io, al fine di poter ottenere un miglior risultato.

    Come potete vedere dai link, ho risolto 2 problemi in una volta sola...
    e consiglio a chiunque costruisca un layout di questo genere, di utilizzare un DIV float all'interno del contenitore.

    http://www.nuracale.it/extra/layout07.htm (problema dei DIV float)

    http://www.nuracale.it/extra/layout08.htm (problema delle TABLE 100% con IE6)

    CIAO E ANCORA GRAZIE A TUTTI!!
    «Se leggi dimentichi, se vedi capisci, se fai impari» Piaget

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 © 2026 vBulletin Solutions, Inc. All rights reserved.