Pagina 1 di 2 1 2 ultimoultimo
Visualizzazione dei risultati da 1 a 10 su 15
  1. #1
    Utente di HTML.it
    Registrato dal
    Mar 2014
    Messaggi
    18

    Convivenza dimensione px e %

    Ciao a tutti! Sto sviluppando un layout per il mio sito ma ho dei problemi con le dimensioni in px/%.

    La struttura è la seguente, tre div floattanti, le due estremità di dimensione fissata e quello centrale che dovrebbe occupare tutto lo spazio rimanente. È una cosa fattibile? sto sbagliando approccio?

    <div style='float:left; width:50px'><div>
    <div style='float:left; width:100%'><div>
    <div style='float:right; width:50px'><div>

    I div mi vengono inseriti su tre livelli differenti perché uso il 100%, qual'è la forma corretta?

  2. #2
    Moderatore di CSS L'avatar di KillerWorm
    Registrato dal
    Apr 2004
    Messaggi
    5,771
    Ciao, sei sulla buona strada ma devi correggere il tiro. Assegnando width:100% ad un div significa che questo andrà ad assumere la stessa larghezza del suo contenitore. Ovviamente non può funzionare perché non resterebbe spazio disponibile per gli altri due div laterali.

    Puoi fare così.
    Sul div centrale lascia il valore di default per width (cioè "auto", quindi puoi omettere la regola) e non assegnare il float. Gli altri due vanno bene come li hai impostati (riguardo float e width) ma assicurati che il div centrale sia "scritto" dopo questi due, in modo che sia "letta" correttamente la larghezza restante.

    Esempio:
    codice:
    <div style="float:left;width:50px;background:#eee;">Sx, width 50px</div>
    <div style="float:right;width:50px;background:#eee;">Dx, width 50px</div>
    <div style="background:#f5f5f5;">Centro, larghezza libera (width:auto)</div>
    Installa Forum HTML.it Toolset per una fruizione ottimale del Forum

  3. #3
    Quote Originariamente inviata da KillerWorm Visualizza il messaggio
    assicurati che il div centrale sia "scritto" dopo questi due, in modo che sia "letta" correttamente la larghezza restante.
    non è proprio vero perchè il div senza float andrà a occupare tutto lo spazio disponibile
    basta togliere lo sfondo colorato ai div flottanti per rendersene conto
    è il contenuto del div che ubbidendo allo stacking order "sgomita" e si adatta allo spazio disponibile lasciato dagli elementi flottanti

    lo so che sono contorto e poco chiaro

    comunque concludendo per adattare il layout e creare le tre colonne( che suppongo sia l'obbiettivo reale) al div "centrale" si può dare una margin pari o superiore alla larghezza del/dei div flottato/i
    oppure un overflow
    il valor di overflow dipende dalla compatibilità
    quello più compatibile mi risulta "hidden" anche se questo potrebbe poi creare altre questioni

  4. #4
    Utente di HTML.it L'avatar di Experiment8
    Registrato dal
    Jun 2012
    residenza
    Milano
    Messaggi
    254
    Ciao,

    a mio avviso l'unico modo realmente cross-browser è questo:

    codice:
    <div style='float:left; width:50px'><div>
    <div style='display: block; position: absolute; top: 0; left: 50px; right: 50px;'><div>
    <div style='float:right; width:50px'><div>
    Sta di fatto che sconsiglio vivamente il posizionamento assoluto, non è molto elegante, ma il non utilizzarlo significa avere problemi su alcune versioni di IE8.


  5. #5
    Quote Originariamente inviata da Experiment8 Visualizza il messaggio

    codice:
    <div style='display: block; position: absolute; top: 0; left: 50px; right: 50px;'><div>
    Ma un div non è già di default block?
    “Che le cose siano cosi, non vuol dire che debbano andare così. Solo che quando si tratta di rimboccarsi le maniche e incominciare a cambiare, vi è un prezzo da pagare. Ed è allora che la stragrande maggioranza preferisce lamentarsi più che fare”.

    Giovanni Falcone

  6. #6
    Moderatore di CSS L'avatar di KillerWorm
    Registrato dal
    Apr 2004
    Messaggi
    5,771
    Quote Originariamente inviata da ac_socmel Visualizza il messaggio
    non è proprio vero perchè il div senza float andrà a occupare tutto lo spazio disponibile
    basta togliere lo sfondo colorato ai div flottanti per rendersene conto
    è il contenuto del div che ubbidendo allo stacking order "sgomita" e si adatta allo spazio disponibile lasciato dagli elementi flottanti
    Chiaro ac_socmel. Capisco la tua puntualizzazione e il tuo suggerimento she ne segue.

    Capisco inoltre che la tua puntualizzazione non era riferita al fatto che il div centrale debba essere posto dopo la scrittura dei due laterali fluttuanti. Quindi, anche aggiungendo un margin, resta valido quanto ho precisato:

    assicurati che il div centrale sia "scritto" dopo questi due, in modo che sia "letta" correttamente la larghezza restante.
    Posto un esempio pratico secondo le tue indicazioni:
    codice:
    <!DOCTYPE HTML>
    <html>
      <head>
        <title>Esempio</title>
        <meta charset="utf-8"/>
      </head>
      <body>
        <div style="float:left;width:50px;">Sx, width 50px</div>
        <div style="float:right;width:50px;">Dx, width 50px</div>
        <div style="background:#f5f5f5;margin:0 50px;">Centro, larghezza libera (width:auto)</div>
      </body>
    </html>
    Installa Forum HTML.it Toolset per una fruizione ottimale del Forum

  7. #7
    Quote Originariamente inviata da KillerWorm Visualizza il messaggio
    codice:
    <!DOCTYPE HTML>
    <html>
      <head>
        <title>Esempio</title>
        <meta charset="utf-8"/>
      </head>
      <body>
        <div style="float:left;width:50px;">Sx, width 50px</div>
        <div style="float:right;width:50px;">Dx, width 50px</div>
        <div style="background:#f5f5f5;margin:0 50px;">Centro, larghezza libera</div>
      </body>
    </html>
    l'accendiamo!
    Questa volta, più che un voto.. è favoreggiamento.

  8. #8
    Utente di HTML.it L'avatar di Experiment8
    Registrato dal
    Jun 2012
    residenza
    Milano
    Messaggi
    254
    Si certo, ma ho notato che su browser più vecchi non lo da per scontato, per cui di solito lo esplicito quando gioco coi posizionamenti, comunque si può anche omettere volendo


  9. #9
    Utente di HTML.it
    Registrato dal
    Mar 2014
    Messaggi
    18
    Grazie a tutti per le risposte! Siete stati utilissimi

    Posso fare ancora una domanda? Vorrei passare ad una versione più responsive del mio sito (mobile).
    Ho deciso quindi di abbandonare i px in favore dei em:

    codice HTML:
      <div style='height:5em'>
          <div style="float:left;width:5em;">Sx</div>
          <div style="float:right;width:5em;">Dx</div>
          <div style="background:#f5f5f5;margin:0 5em;">Centro, larghezza libera</div>
      </div>
    Fino a qui tutto bene, nel primo div voglio inserire un immagine (facciamo 30x40 px).

    Lavorando con i px non avrei avuto problemi a centrare l'immagine:

    codice HTML:
       <div style='height:50px'>
          <div style="float:left;width:50px;"><img style='margin:5px 10px' src='#'></div>
          <div style="float:right;width:50px;">Dx</div>
          <div style="background:#f5f5f5;margin:0 50px;">Centro, larghezza libera</div>
       </div>
    Ma come faccio ora che ho gli em? Potrei caricare un immagine enorme e dimensionarla in em, ma da mobile mi peserebbe in banda

  10. #10
    Utente di HTML.it L'avatar di Experiment8
    Registrato dal
    Jun 2012
    residenza
    Milano
    Messaggi
    254
    In barba a chi mi vuoel male per il display block :P

    dovresti settare l'immagine come block e metter il margin auto così:

    codice:
    <img style='display: block; margin:5px auto' src='#'>
    Ma non ti conviene inserire un CSS esterno?


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.