Visualizzazione dei risultati da 1 a 9 su 9

Discussione: Centrare orizzontalmente 2 Div all'interno di un contenitore

  1. #1

    Centrare orizzontalmente 2 Div all'interno di un contenitore

    Buongiorno a tutti,
    avrei bisogno d'aiuto

    All'interno di una pagina che sto disperatamente cercando di rendere responsive, dove prima avevo una bella tabella centrata, con 2 celle affiancate ognuna contenente testo allineato a sinistra,
    ora sto cercando di ottenere lo stesso risultato visivo con css e div su desktop, ma che sia responsive su piccoli schermi.

    Cerco di spiegarmi meglio:
    ho creato un div contenitore, all'interno ho messo altri 2 div affiancati contenenti il testo:
    ebbene i 2 div si sovrappongono su piccoli schermi e va bene, su desktop sono giustamente affiancati ma tutti sulla sinistra della pagina, io li vorrei centrati i div, ma il testo al loro interno allineato a sinistra

    Ecco il codice
    codice HTML:
        <div class="contenitore" style="display: inline-block; margin: 0 auto;font-family: Times new roman; font-size: 17px; color: #000080; width: 100%; height: auto">
    <div style="display: inline-block; margin: 0 auto; padding-left: 5px; max-width: 100%; vertical-align: top;">
    <B><U>Vixin a-o Bambin</U><br>
    Chý davanti a-o Presepio, c&auml;o Bambin,<br>mý me ghe incanto<br>pr˛prio c˘mme in ninnin...</B>
    </div>
    <div style="display: inline-block; margin: 0 auto; padding-left: 5px; max-width: 100%; vertical-align: top;">
    <U>Vicino al Bambino</U><br>
    Qui davanti al Presepe, caro Bambino,<br>io mi ci incanto<br>proprio come un bambino...
    </div>
        </div>
    Grazie a chi pu˛ aiutarmi
    La vita Ŕ una tempesta, prenderlo in .... Ŕ un lampo!
    Paolino

  2. #2
    Moderatore di CSS L'avatar di KillerWorm
    Registrato dal
    Apr 2004
    Messaggi
    4,058
    Ciao, risposta breve: metti text-align:center sul div contenitore e text-align:left sui due div interni.


    - Risposta lunga:

    Chiaramente puoi risolvere in vari modi (vedi qui https://css-tricks.com/centering-css-complete-guide/).
    Ad esempio, dal momento che hai impostato i due div come elementi inline-block, devi tenere presente che questo fa in modo di inserirli all'interno del flusso del testo e, per tale motivo, potresti sfruttare questa caratteristica per allinearli usando la proprietÓ text-align che dovrai ovviamente applicare al contenitore. Tieni conto che tale proprietÓ Ŕ ereditaria (nel tuo caso verrÓ ereditata dai due div figli) per cui dovrai reimpostarla opportunamente anche per i due div se ti serve allineare il relativo testo a sinistra.

    A parte questo, vedendo come hai organizzato il tutto nell'esempio da te postato, ho la sensazione che il concetto di sito responsive sia ancora un bel po' lontano, qui mancano proprio delle basi per un buono sviluppo del web-design. Non fraintendermi, non voglio assolutamente demoralizzarti ma, se posso, ti darei qualche altro consiglio per alzare il tiro.

    Qualche punto da considerare:

    1) Mantenere lo stile separato dal contenuto

    Nel tuo esempio stai usando l'attributo style per applicare tutto il CSS direttamente in-linea sui tag; cosa che andrebbe evitata, per quanto possibile, a favore invece di un CSS incluso nel documento (definito quindi all'interno del tag head, o incluso come file esterno).

    Con un CSS separato dai contenuti, avrai diversi vantaggi tra cui: evitare duplicazioni; rendere la modifica e la manutenzione pi¨ semplice; applicare allo stesso contenuto stili diversi per diversi scopi.

    Vedi: https://developer.mozilla.org/it/doc...A9_usare_i_CSS

    Se poi parliamo di "responsive design", questi accorgimenti devono essere tenuti bene in considerazione, dal momento che presumibilmente ti troverai a dover fare uso di media query per definire gli eventuali breakpoints del layout, cosa che non pu˛ essere fatta col CSS in-linea.

    Vedi:
    https://it.wikipedia.org/wiki/Design_responsivo
    http://www.html.it/pag/32823/definir...media-queries/

    2) Mantenere il contenuto separato dallo stile

    Nel tuo esempio stai usando dei tag HTML a solo scopo presentazionale; vedi quel <B> usato per evidenziare il testo sul primo div e quel <U> usato per definire relativamente il titolo dei due contenuti. In generale il loro uso non Ŕ vietato, chiaramente, ma in casi come questo sarebbe meglio usare il CSS per evidenziare un intero blocco di testo (come per il tuo primo div) e un tag pi¨ appropriato per definire i titoli (vedi l'uso di elementi h1-h6).

    Qui un esempio di come potrebbe essere improntata la cosa (Ŕ giusto un esempio):
    codice:
    <!DOCTYPE HTML>
    <html>
       <head>
          <title>Esempio</title>
          <meta charset="utf-8">
          <style>
             .contenitore {
                display: inline-block;
                width: 100%;
                font: 17px "Times New Roman", Georgia, serif;
                color: #000080;
                text-align: center;
             }
    
             .area-testo {
                display: inline-block;
                max-width: 100%;
                margin: 0 auto;
                padding-left: 5px;
                text-align: left;
             }
    
             .area-testo>h3 { 
                text-decoration: underline;
             }
    
             .testo-originale {
                font-weight: bold;
             }
          </style>
       </head>
       <body>
          <h1>Titolo della pagina</h1>
    
          <div class="contenitore">
             <h2>Titolo della sezione</h2>
    
             <div class="area-testo testo-originale">
                <h3>Vixin a-o Bambin</h3>
                <p>Chý davanti a-o Presepio, c&auml;o  Bambin,<br>mý me ghe incanto<br>pr˛prio c˘mme in  ninnin...</p>
             </div>
    
             <div class="area-testo testo-tradotto">
                <h3>Vicino al Bambino</h3>
                <p>Qui davanti al Presepe, caro Bambino,<br>io  mi ci incanto<br>proprio come un bambino...</p>
             </div>
    
          </div>
       </body>
    </html>
    Non mi dilungo ulteriormente in altri particolari per non andare troppo fuori tema ma, per ulteriori informazioni riguardo questo argomento ed altri legati al responsive design e in generale al corretto sviluppo di codice CSS, pu˛ esserti utile dare uno sguardo tra i link utili CSS, se giÓ non lo hai fatto.

    Chiaramente i miei sono solo dei consigli, poi vedi tu come meglio preferisci impostare il tutto.

    Buon proseguimento.
    Prima di postare considera che tra i link utili puoi trovare il 75% delle risposte alle tue domande; il 15% tra i post del forum; il 9% sul web.
    Ti resta lĺ1% ... usalo bene!

    Le cattive domande sono quelle che non meritano risposta, le buone domande sono quelle che non hanno risposta
    L'Itailano non e nu'opnioine. E' improntate uslaro correattemtne sul froum. Garize!

  3. #3
    Ciao. Innanzittutto GRAZIE per avermi risposto! E poi GRAZIE per la lunga e dettagliata risposta.

    Ho applicato la risposta breve e giÓ ho risolto quello che in tutto il pomeriggio e sera di ieri non riuscivo a fare


    1) Mantenere lo stile separato dal contenuto
    Uso gi´┐Ż i Css in documenti separati che richiamo nella head del file.html
    in questo caso ho voluto metterli nel documento per maggiore chiarezza di esposizione, e poi avevo paura che altre regole contenute nel css esterno influissero, visto che alcune sono ereditarie e a volte mi fanno impazzire, inoltre alcuni comandi come !important; ancora non l'ho ben capito.


    2) Mantenere il contenuto separato dallo stile
    Nel tuo esempio stai usando dei tag HTML a solo scopo presentazionale; vedi quel <B> ...
    Quando ho creato il sito, nel 2001, forse i css ancora non esistevano: all'epoca mi son studiato l'HTML da zero ed ho cominciato col blocco note (per avere codice 'pulito') a fare le mie pagine, in seguito ho aggiunto javascript, qualche css, ecc.

    Ultimamente sto cercando di trasformare il sito da layout fisso a responsive, ma non Ŕ facile impostare per le varie dimensioni di schermo.
    La bozza di pagina su cui sto lavorando e' questa

    Avevo dato un'occhiata ai "link utili CSS", prima avevo cercato e studiato varie pagine sul web, ma non riuscivo.

    Ancora Grazie per i tuoi consigli!

    Ciao
    La vita Ŕ una tempesta, prenderlo in .... Ŕ un lampo!
    Paolino

  4. #4
    div contenitore: align="center" style="display:table"

    Altri div all'interno: style="float:left"

  5. #5
    SoloWiFi ho provato come dici tu, ma non vengono centrati e ravvicinati nella visualizz desktop, ma i 2 Div sono alle estremitÓ opposte dello schermo

    codice:
        <div class="contenitore" align="center" style="display: table; margin: 0 auto;font-family: Times new roman; font-size: 17px; color: #000080; width: 100%; height: auto;">
    <div style="float:left;  margin: 0 auto; padding-left: 5px; max-width: 100%; vertical-align: top;">
    <B><U>Vixin a-o Bambin</U><br>
    Chý davanti a-o Presepio, c&auml;o Bambin,<br>mý me ghe incanto<br>pr˛prio c˘mme in ninnin....</B>
    </div>
    <div style="float:right;  margin: 0 auto; padding-left: 5px; max-width: 100%; vertical-align: top;">
    <U>Vicino al Bambino (Ges¨)</U><br>
    Qui davanti al Presepe, caro Bambino,<br>io mi ci incanto<br>proprio come un bambino...
    </div>
        </div>
    Anche mettendo a tutti e 2 i Div float:left vengono entrambi a sinistra.
    La soluzione "giusta" Ŕ quella di KillerWorm.

    Ti ringrazio cmq della risposta
    Ciao
    La vita Ŕ una tempesta, prenderlo in .... Ŕ un lampo!
    Paolino

  6. #6
    KillerWorm scusa abuso della tua gentilezza...

    funziona tutto ottimamente, l'ho testato su Mozilla Firefox 57.0.2 e su Chrome 62.0,
    ma su I.Explorer 11.0 i 2 div non si sovrappongono restringendo la finestra

    se tolgo questa riga di codice
    codice:
    <div  align="center"><img src="dena/pranso.gif" oncontextmenu="return  false" ondragstart="return false"  class="responsive"></div>
    allora funziona anche su I.E.

    Ma com'Ú possibile?
    La vita Ŕ una tempesta, prenderlo in .... Ŕ un lampo!
    Paolino

  7. #7
    Ho risolto!
    Il problema era sulla classe responsive dell'immagine,
    nel css avevo messo
    codice:
    .img-responsive {
    max-width: 100%; height: auto; display: block;
    }
    ho tolto il "max-" davanti a width
    ora funziona.

    La vita Ŕ una tempesta, prenderlo in .... Ŕ un lampo!
    Paolino

  8. #8
    Moderatore di CSS L'avatar di KillerWorm
    Registrato dal
    Apr 2004
    Messaggi
    4,058
    Prima di postare considera che tra i link utili puoi trovare il 75% delle risposte alle tue domande; il 15% tra i post del forum; il 9% sul web.
    Ti resta lĺ1% ... usalo bene!

    Le cattive domande sono quelle che non meritano risposta, le buone domande sono quelle che non hanno risposta
    L'Itailano non e nu'opnioine. E' improntate uslaro correattemtne sul froum. Garize!

  9. #9
    bastava centrare il div contenitore

    Quote Originariamente inviata da Poulo Visualizza il messaggio
    SoloWiFi ho provato come dici tu, ma non vengono centrati e ravvicinati nella visualizz desktop, ma i 2 Div sono alle estremitÓ opposte dello schermo

    codice:
        <div class="contenitore" align="center" style="display: table; margin: 0 auto;font-family: Times new roman; font-size: 17px; color: #000080; width: 100%; height: auto;">
    <div style="float:left;  margin: 0 auto; padding-left: 5px; max-width: 100%; vertical-align: top;">
    <B><U>Vixin a-o Bambin</U><br>
    Chý davanti a-o Presepio, c&auml;o Bambin,<br>mý me ghe incanto<br>pr˛prio c˘mme in ninnin....</B>
    </div>
    <div style="float:right;  margin: 0 auto; padding-left: 5px; max-width: 100%; vertical-align: top;">
    <U>Vicino al Bambino (Ges¨)</U><br>
    Qui davanti al Presepe, caro Bambino,<br>io mi ci incanto<br>proprio come un bambino...
    </div>
        </div>
    Anche mettendo a tutti e 2 i Div float:left vengono entrambi a sinistra.
    La soluzione "giusta" Ŕ quella di KillerWorm.

    Ti ringrazio cmq della risposta
    Ciao

Tag per questa discussione

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