Visualizzazione risultati 1 fino 4 di 4

Discussione: [CSS] - "float" non funziona

  1. #1
    L'avatar di dementialsite
    dementialsite non è connesso Super Moderatore
    Data registrazione
    19-10-2004
    Residenza
    fuori Padova
    Messaggi
    5,046

    Predefinito [CSS] - "float" non funziona

    Provate a dare un'occhiata a questa pagina: http://theboard.dementialsite.alterv...thread.php?t=1

    Su una cosa IE, Firefox e Opera sono perfettamente d'accordo: lo stile è reso da c*** in tutti e tre i browser... quello che vorrei sapere è perché, visto che il codice mi sembra che sia generato correttamente (ne riporto qui un esempio):
    Codice HTML:
    <DIV CLASS="user_header">
       <DIV CLASS="message_data">
          <P><B>Messaggio #1</B><BR>
          Inviato: 20051204162601</P>
       </DIV>
       <DIV CLASS="user_data">
          <H3>TheMaster</H3>
          <P><B>Amministratore</B><BR>
          THE BO4RD Registered User #1<BR>
          Data registrazione: 2005-12-04<BR>
          Messaggi: 2</P>
       </DIV>
    </DIV>
    <DIV STYLE="border:solid 1px #000000">
       <DL>
          <DT>Welcome on Board</DT>
          <DD>Messaggio di prova generato da TheMaster</DD>
       </DL>
    </DIV>
    Questi invece sono i tre stili CSS coinvolti:
    Codice:
    DIV.user_header { background-color:#99FF99; color:#000000; border:solid 1px #000000; overflow:visible }
    DIV.user_header DIV.user_data { float:left; width:35%; margin:0; font-size:85%; border:solid 1px #FF0000 }
    DIV.user_header DIV.message_data { text-align:right; float:right; width:35%; margin:0; font-size:85%; border:solid 1px #FF0000 }
    Forse avrete capito che i DIV a cui ho messo in via provvisoria i bordi rossi dovrebbero finire dentro quello verde, cosa che invece non succede...

    Qualcuno ha qualche idea di come posso risolvere il problema?

    Grazie a chi risponde... statemi bene...
    Le questioni tecniche hanno risposte migliori nel forum pubblico, non trovi?

    When you don't know your next step... improvise

    ALTERVISTA WANTS YOU!
    Vuoi diventare moderatore su AlterVista? Scopri come...

  2. #2
    Guest

    Predefinito

    puoi usare un div invisibile che esegua un clear dei contenuti, separando i due div col float, da quello contenente il messaggio
    forse col codice mi spiego meglio

    Codice HTML:
    <div class="user_header">
     <div class="message_data">
      <p><b>Messaggio #1</b><br>Inviato: 20051204162601</p>
     </div>
     <div class="user_data">
      <h3>TheMaster</h3><p><b>Amministratore</b><br>THE BO4RD Registered User #1<br>Data registrazione: 2005-12-04<br>Messaggi: 2</p>
     </div>
     <div style="clear:both"></div>
    </div>
    la definizione che ho scritto è inline, ma puoi tranquillamente metterla nel css esterno e richiamarla

    mavericck

  3. #3
    L'avatar di dementialsite
    dementialsite non è connesso Super Moderatore
    Data registrazione
    19-10-2004
    Residenza
    fuori Padova
    Messaggi
    5,046

    Predefinito Grazie, ma...

    Ho seguito il tuo consiglio, ma adesso ho un altro problema: se aggiungo questo stile (la classe close_header è ovviamente quella del DIV vuoto)
    Codice:
    DIV.user_header DIV.close_header { clear:both; margin:0; padding:0; height:0; border:solid 1px #FF0000 }
    quello che ottengo è che il DIV del primo messaggio finisce per allungarsi finché non supera le pubblicità sulla sinistra (potete vederlo sul link più sopra)...

    Non c'è un modo per risolvere il problema? Statemi bene...

    EDIT: scambiando i posizione i due DIV e specificando clear:right sul terzo ho in parte risolto il problema... solo che adesso non mi spiego come mai siano sballate le dimensioni dei contenitori (Explorer fa giuste la larghezze, ma lascia un "buco" al posto del terzo DIV nonostante height:0; margin:0; padding:0; overflow:hidden, Firefox e Opera il buco invece lo lasciano tra i due DIV sopra...)
    Ultima modifica di dementialsite : 12-01-2006 alle ore 15.04.04
    Le questioni tecniche hanno risposte migliori nel forum pubblico, non trovi?

    When you don't know your next step... improvise

    ALTERVISTA WANTS YOU!
    Vuoi diventare moderatore su AlterVista? Scopri come...

  4. #4
    L'avatar di pietrovischia
    pietrovischia non è connesso Utente attivo
    Data registrazione
    16-10-2005
    Residenza
    Padova
    Messaggi
    351

    Predefinito

    Dunque, rispondo un po' qui un po' là.

    Per forzare dei div a stare dentro dei div dove non vogliono stare, non occorre un quarto div! Il modo standard per far stare i due div dentro il terzo è che il contenitore abbia

    Codice:
    overflow:auto;
    width:taldeitali;
    
    oppure
    
    float:left;
    width:taldeitali;
    Non importa quale dei due, basta che specifichi le dimensioni.

    Secondo: un div vuoto?!?!?! E che te ne fai?

    Terzo: per posizionare le sezioni, tu fai qualcosa di scorretto:

    Codice:
    DIV#header { width:auto }
    DIV#menu { float:left; width:20% }
    DIV#main { margin-left:20%; width:auto }
    DIV#banner { margin-left:20%; width:auto }
    DIV#footer { clear:both; width:auto }
    Tu stai sovrapponendo il main al menu, tecnicamente, sfruttando la trasparenza dei margini! Sarebbe più corretto e reso meglio da tutti i browser che tu non li sovrapponessi. Fai così:

    Codice:
    DIV#header { width:auto }
    DIV#menu { float:left; margin:0; padding:0; width:19% }
    DIV#main { float:left; margin:0;padding:0; width:80%; margin-right:-1px; }
    DIV#footer { clear:both; width:auto }
    e così via. In questo modo, avrai veramente menu e main affiancati, e non sovrapposti.
    Noterai che la larghezza totale è 99%: questo va fatto perché i broswer spesso fanno errori di arrotondamento, e 100% lo mettono a 101%, sballando fuori. margin-right:-1px serve a riportare dentro una eventuale fuoriuscita.
    Ultima modifica di pietrovischia : 12-01-2006 alle ore 16.44.41

Regole di scrittura

  • Non puoi creare nuove discussioni
  • Non puoi rispondere ai messaggi
  • Non puoi inserire allegati.
  • Non puoi modificare i tuoi messaggi
  •