+ Rispondi al messaggio
Visualizzazione dei risultati da 1 a 6 su 6

Allineamento verticale con XHTML 1.1

  1. #1
    L'avatar di Gandalfrank
    Gandalfrank non è in linea Scribacchino
    Ciao a tutti,

    ho questo codice:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="it">
    
    <head>
        <title>Pagina senza titolo</title>
    </head>
    
    <body>
        <div style="width: 700px; height: 300px; text-align: center; border: 2px groove #800000; ">
            <img src="Immagini/VB2005.jpg" alt=" Manuale VB2005" />
        </div>
    </body>
    </html>
    
    vorrei centrare verticalmente l'immagine rispetto ai bordi del div.

    Ho provato ad usare vertical-align: middle sia nella definizione dello stile del<div>, sia in quello del tag <img>, ho provato ad aggiungere margin:auto e padding:auto, sia insieme che separati e varie combinazioni senza ottenere alcun risultato: l'immagine resta ancorata in alto.

    Avete un'idea di come usare vertical-align ?

    E' possibile che per centrare un'immagine bisogna lavorare solo sul posizionamento in relazione alle sue dimensioni e a quelle del contenitore?
    ℹ️ Leggi di più su Gandalfrank ...

  2. #2
    L'avatar di chico_
    chico_ non è in linea Topo di biblioteca Ultimo blog: Attacco a Oscommerce
    L'allineamento verticale è sempre stata una brutta bestia .
    Personalmente l'ho sempre "sfangata" usando l'immagine come background del div, in qeusto modo:
    codice HTML:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="it">
        <head>
            <title>Pagina senza titolo</title>
            <style type="text/css">
                #contenitore {
                    width: 700px;
                    height: 300px;
                    background-image: url('myimg.jpg');
                    background-repeat: no-repeat;
                    background-position: center;
                    border: 2px groove #800000;
                }
            </style>
        </head>
        <body>
            <div id="contenitore">
                &nbsp;
            </div>
        </body>
    </html>
    Almeno sei sicuro che funzioni alla stessa maniera su tutti i browsers....
    (testato e funzionante con FF e IE6)

    Ciauz

    chico
    ℹ️ Leggi di più su chico_ ...

  3. #3
    L'avatar di Gandalfrank
    Gandalfrank non è in linea Scribacchino
    Ciao Chico,

    anch'io riesco ad aggirare il problema:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="it">
    
    <head>
        <title>Pagina senza titolo</title>
    </head>
    
    <body>
        <div style="width: 700px; height: 300px; text-align: center; margin:auto; border: 2px groove #800000;">
            <img alt="Rettangolo" src="Immagini/Rettangolo_80x120.png" style="margin-top: 90px" />
        </div>
    </body>
    </html>
    
    oppure in questo mdo:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="it">
    
    <head>
        <title>Pagina senza titolo</title>
    </head>
    
    <body>
        <div style="width: 700px; height: 300px; border: 2px groove #800000; text-align:center; vertical-align:middle; margin:auto;">
            <img alt="Rettangolo" src="Immagini/Rettangolo_80x120.png" style="position: relative; top: 90px" />
        </div>
    </body>
    </html>
    
    Testati su FF3.05, IE7,Chrome, Opera 9.63 e Safari3.2.1

    Ma sarei interessato a capire come si usa la proprietà vertical-align, oppure se è una di quelle prorprietà che i browser non supportano.

    Grazie per il consiglio... non ci avevo pensato.
    Ultima modifica di Gandalfrank; 06-01-2009 11:48 
    ℹ️ Leggi di più su Gandalfrank ...

  4. #4
    L'avatar di SignIn
    SignIn non è in linea Scribacchino
    Ciao Gand,
    personalmente su certe tematiche evito i "css", usando Javascript (faccio quello che fai te in modo dinamico).
    Anche se molto probabilmente non fa al caso tuo, lascio comunque il codice:
    <div id="main" style="width: 700px; height: 300px; text-align: center; border: 2px groove #800000; ">
            <img id="center" src="http://forum.masterdrive.it/images/VB2005.jpg" alt=" Manuale VB2005" />
    </div>
    
    Usando JQuery come Framework:
    <script type="text/javascript">
            $(document).ready(function() {
                $('#center').css('margin-top', ($('#main').height() - $('#center').height()) / 2);
            });
    </script>
    
    ℹ️ Leggi di più su SignIn ...

  5. #5
    L'avatar di Gandalfrank
    Gandalfrank non è in linea Scribacchino
    Ciao Sign In,
    sono contento di sentirti.

    Mi rendo conto di avere impostato male la domanda.

    Volevo sapere in che modo utilizzare la proprietà vertical-align in quanto ogni volta che ho provato ad usarla non sono stato in grado di sfruttarne le caratteristiche.

    Ho trovato quello che cerco quà nella W3Schools.

    vertical-align è una propriteà che permette di allineare del testo ad un'immagine e non un'immagine in un contenitore.

    Grazie per il consiglio.
    ℹ️ Leggi di più su Gandalfrank ...

  6. #6
    L'avatar di SignIn
    SignIn non è in linea Scribacchino
    Quote Originariamente inviato da Gandalfrank Visualizza il messaggio
    Ciao Sign In,
    sono contento di sentirti.
    Grazie.
    Quote Originariamente inviato da Gandalfrank Visualizza il messaggio
    Mi rendo conto di avere impostato male la domanda.

    Volevo sapere in che modo utilizzare la proprietà vertical-align in quanto ogni volta che ho provato ad usarla non sono stato in grado di sfruttarne le caratteristiche.

    Ho trovato quello che cerco quà nella W3Schools.

    vertical-align è una propriteà che permette di allineare del testo ad un'immagine e non un'immagine in un contenitore.
    La domanda è chiarissima. Nel mio post indicavo il modo che utilizzo per risolvere l'allineamento verticale di un'immagine in un contenitore senza specificare dimensioni ecc...
    In realtà non ho proprio risposto al tuo quesito...anzi sono stato poco chiaro io
    Quote Originariamente inviato da Gandalfrank Visualizza il messaggio
    Grazie per il consiglio.
    Prego
    ℹ️ Leggi di più su SignIn ...

+ Rispondi al messaggio

Potrebbero interessarti anche ...

  1. [XHTML]Inserire un video in un sito scritto in XHTML 1.0 Strict
    Da Gandalfrank nel forum HTML, CSS e JavaScript
    Risposte: 13
    Ultimo Post: 25-02-2011, 21:41
  2. Allineamento verticale label
    Da licetinsanire nel forum Visual Basic 6
    Risposte: 2
    Ultimo Post: 07-05-2009, 17:52
  3. Allineamento verticale Colonne nelle email
    Da TorrediPisa nel forum Visual Basic 6
    Risposte: 2
    Ultimo Post: 16-06-2008, 12:02
  4. [XHTML]Scroller di testo xhtml.strict
    Da Eugene nel forum HTML, CSS e JavaScript
    Risposte: 1
    Ultimo Post: 17-02-2006, 13:52
  5. cms con XHTML e WAI?!?!?
    Da xmaxfane nel forum PHP
    Risposte: 6
    Ultimo Post: 14-12-2005, 16:20