Visualizzazione dei risultati da 1 a 7 su 7
  1. #1

    Particolare layout liquido due colonne (non riesco)

    Ciao a tutti,
    sto tentando di realizzare un particolare di un layout senza utilizzare le tabelle. Solitamente non ho grandi problemi, ma questa volta vi chiedo aiuto perchè tutti i vincoli in gioco mi fanno impazzire.

    Qua vi metto un'immagine di quello che dovrei ottenere, sotto ve la spiego:


    Esiste un box "invisibile" che contiene un box news e un box statistiche. Il box invisibile non ha dimensione fissa ma è fluido.
    Il box statistiche invece ha dimensione fissa mentre il box news si allarga a occupare lo spazio restante.

    Il box news e il box statistiche devono essere alti uguali. La loro altezza dipende dal contenuto.
    Entrambi terminano in basso con un bordino più scuro di due pixel.
    Ci deve essere uno spazio vuoto tra i due box.
    La sfumatura del box statistiche possiamo anche non farla, non è importante ora.

    Con i "trucchi" che conosco tipo usare uno sfondo ripetuto in y quanto la colonna più luinga per rendere le colonne float e simili non riesco a cavare un ragno dal buco. Mi frega il fatto che non conosco nè larghezza totale del box invisibile nè la sua altezza..

    Sono due giorni che divento matto e ora voglio capire se c'è un modo.

    Ciao!

  2. #2
    [up]

    Pensate in qualche modo è possibile o è meglio che mi metto il cuore in pace e usole tabelle?

  3. #3

    Re: Particolare layout liquido due colonne (non riesco)

    Originariamente inviato da superpelo
    Con i "trucchi" che conosco tipo usare uno sfondo ripetuto in y quanto la colonna più luinga per rendere le colonne float e simili non riesco a cavare un ragno dal buco. Mi frega il fatto che non conosco nè larghezza totale del box invisibile nè la sua altezza..

    Sono due giorni che divento matto e ora voglio capire se c'è un modo.

    Ciao!
    Prova a mettere un'immagine di background al div "invisibile"

  4. #4
    Hai ragione, ce l'ho fatta! Mi ero un po' fatto prendere dal panico..

    Però ho un altro problema non di poco conto..

    Questo box è fatto così:
    .boxNews{margin-right:200px;}
    .boxStat{float:right;width:197px;}

    Questi due box sono le due colonne in cui è diviso il contenitore principale. Sotto a queste, per tenere il tutto allineato, c'è un ulteriore div con clear:both.

    boxNews | boxStat
    ________________
    allineatore{clear:both;}


    Tutto ciò è contenuto dento un layout con 3 colonne. Le due laterali sono realizzate col float.

    Il box che ho creato grazie al tuo aiuto (news/stat) è contenuto dentro la colonna centrale del layout del sito.

    In firefox, che interpreta correttamente il tutto, il clear:both del nostro box (news/stat) fa in modo che esso sia allineato al termine della colonna più lunga del layout!

    Che posso fare?

  5. #5

  6. #6

  7. #7
    Sembra uno di quei casi in cui i margini negativi potrebbero andar bene. Usi un contenitore che contiene i due div, con un immagine di sfondo per la parte a larghezza fissa e forse ce la fai a non usare il clear contenendo i float. Buona lettura!

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.