Visualizzazione dei risultati da 1 a 7 su 7

Discussione: float e larghezza div

  1. #1
    Utente di HTML.it
    Registrato dal
    Jun 2003
    Messaggi
    4,826

    float e larghezza div

    ciao.
    Ho un sito che definisce una struttura a 3 colonne con i float
    html:
    <div id="contenitore">
    <div id="selettori">22 </div>

    <div id="contenitore2">

    <div id="miniature">
    <div>&nbsp</div>
    </div>
    <div id="preview"> </div>
    <div id="marchiocont">[img]DUMDUMMARCHIO 1.jpg[/img]
    </div>
    css:
    div#contenitore {
    margin:0px auto;
    }
    div#selettori
    {
    background-color: Blue;
    padding-left: 12%;
    text-decoration: underline;
    color: ButtonHighlight;
    }
    div#miniature{
    background-color: Aqua;
    float: left;
    width: 200px;
    }
    div#miniatureimg{
    padding-top:15px;
    }
    div#preview
    {
    background-color: Fuchsia;
    float: left;
    width: 400px;
    padding-top: 200px;
    padding-left: 20px;

    }
    div#marchiocont
    {
    background-color:Lime;
    float:left;
    padding-top: 300px;
    padding-left: 20px;
    width: 100px;
    }

    il problema è che se dentro al div miniature non c'è niente in ff il div collassa e il layout si sposta verso sx.
    mentre in ie6 tutto ok.
    COme posso risolvere?

  2. #2
    Bè innanzitutto mi sembra manchi la chiusura del div "contenitore".
    Chiudilo e se il problema rimane guardo un po' meglio il CSS ;]

  3. #3
    Utente di HTML.it
    Registrato dal
    Jun 2003
    Messaggi
    4,826
    ecco , ho chiuso i div ma il problema persiste:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
    <html>
    <head>
    <style type="text/css">
    @import url(stilidummi.css) all;
    </style>
    <link rel="stylesheet" type="text/css" href="stilidummi.css" />
    </head>
    <body>

    <div id="contenitore">
    <div id="selettori">22</div>
    <div id="miniature"> <div>???</div> </div>

    <div id="preview"> </div>
    <div id="marchiocont">[img]DUMDUMMARCHIO 1.jpg[/img] </div>
    <div id="frecce"> </div>

    </div>

    </body>
    </html>
    grazie.

  4. #4
    Utente di HTML.it
    Registrato dal
    Sep 2001
    Messaggi
    21,188
    Non puoi usare il linguaggio a quel modo.
    I browser non si lasciano prendere in giro.

    Non puoi dire di parlare inglese, e poi scrivere in italiano: non ti capiscono.
    Non puoi dichiarare di usare XHTML 1.1 e poi scrivere i tag come in HTML 4.0 Transitional.

    Se non conosci il linguaggio XHTML 1.1, usa una DTD diversa.

    Inoltre ci sono anche errori irrecuperabili anche per un linguaggio vecchio: dentro l'attributo src del tag <img> non puoi definire due file (e non puoi presumere che un nome possa contenere uno spazio).

    Ricorda anche che ad ogni float deve corrispondere un clear. Vedi ad esempio la pillola sul clearing di fcaldera (fai una ricerca nel forum).
    Nuova politica di maggiore severita` sui titoli delle discussioni: (ri)leggete il regolamento
    No domande tecniche in messaggi privati

  5. #5
    Utente di HTML.it
    Registrato dal
    Jun 2003
    Messaggi
    4,826
    grazie _Mich adesso studio un po e riposto,scusa ma ho appena iniziato coi css e l'html.
    ho letto la pillola ma mi ha fatto un po dui confusione , esiste qualcosa di piu semplice per iniziare?
    in pratica quello che mi servirebbe è un layout a 4 colonne ,ho letto la guida a 3 colonne ma non so' come è giusto aggiungere una colonna a dx

  6. #6
    Utente di HTML.it
    Registrato dal
    Jun 2003
    Messaggi
    4,826
    ho trovato questo:http://glish.com/css/8.asp che pero' mi porta ad una domanda:il layout in questione utilizza i position:absolute,la tecnica è di posizionare 4 rettangoli nello spazio vuoto a diverse locazioni(x,y)è una buona tecnica?
    secondo me no , dato che nella guida di css di base vedo molto impegno in una soluzione "piu' logica" che questo "ritagliare lo schermo" solo che la mia scarsa dimestichezza con i css non mi fa cogliere appieno questa diversità.
    Pensando invece ad un layout con le tabelle :il numero di righe in una delle colonne non deve mai interferire col numero di righe nelle altre colonne,nel senso che la prima è una serie di immagini (miniature)e se clicco su una di queste nella seconda ho la preview(immagine ingrandita)che è 1 sola e mi sballa i margini di tutte le altre colonne e le altre 2 sono 1 per il marchio e l'altra per lo scroll.
    ecco spiegato perchè sto cercando "consolazione" nei css e nelle 4 colonne
    è cosi?
    grazie

  7. #7
    Utente di HTML.it
    Registrato dal
    Sep 2001
    Messaggi
    21,188
    Quella pillola io l'ho trovata molto chiara e fatta bene.
    Se non la capisci, vuol dire che non hai ancora abbastanza esperienza con (X)HTML e con CSS.
    Puoi sempre implementare il clear su un blocco extra (da inserire dentro il contenitore, come ultimo elemento): tale blocco puoi anche renderlo invisibile, ma per le prove ti consiglio di farlo visibile (con un colore di sfondo opportuno, e magari una scritta all'interno).

    Usare i posizionamenti e` una tecnica piu` difficile del float: troppe cose di cui tener conto; inoltre si puo` fare (quasi) tutto senza doverli usare.
    Quel layout citato puo` andar bene in qualche occasione, ma puo` dare grossi problemi: prova a stringere la finestra del browser: ad un certo punto il layout collassa (e ci sono browser che hanno larghezze di 3-400 px - esempio telefonini e PDA).

    Ma ricorda che sistemare i CSS senza aver curato l'HTML e` assurdo.
    Sistemare i CSS e facile se la marcatura e` stata fatta in maniera semantica e seguendo la logica dei blocchi: ad ogni divisione logica deve corrispondere un blocco nel codice HTML e i tag HTML vanno usati secondo il loro significato e scopo.
    Nuova politica di maggiore severita` sui titoli delle discussioni: (ri)leggete il regolamento
    No domande tecniche in messaggi privati

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.