Visualizzazione dei risultati da 1 a 3 su 3
  1. #1
    Utente di HTML.it L'avatar di longline
    Registrato dal
    Sep 2001
    Messaggi
    5,363

    <div> con testi ed immagini: posizionamento

    Ciao a tutti!
    Ho qualche problema a relaizzare questa cosa:
    - ho un div "container" che contiene altri DIV
    - ciascuno di questi DIV deve presentare un testo come titolo in < h2 >, qualche paragrafi in < p >, ed un'immagine

    Non riesco a fare in modo che:
    - i testi (titolo e paragrafi) stiano sulla sinistra senza toccare i bordi del div
    - l'immagine stia a destra, tocchi il bordo superiore e destro del DIV che la contiene
    - il DIV finisca esattamente dove finisce l'immagine (o il testo, se è più lungo dell'immagine)

    Grazie!

  2. #2
    Utente di HTML.it L'avatar di Prill
    Registrato dal
    Oct 2006
    Messaggi
    2,947
    così?

    codice:
    ...
    <style type="text/css">
    <!--
    * {
        margin:0;
        padding:0
    }
    #container {
        font-family:"Trebuchet MS";
        font-size:14px
    }
    .interno{
        width: 400px;
        background-color:#99CC66;
        margin-bottom:10px;
        overflow:hidden
    }
    .interno p, .interno h2{
        padding-left: 10px;
    }
    .interno img{
    float:right; clear:right; margin-bottom:5px;
    background-color:#FF99FF /* da rimuovere serve solo a far vedere lo spazio occupato dall'immagine in sua assenza */
    }
    
    -->
    </style>
    </head>
    
    <body>
    <div id="container">
     <div class="interno">
            <img src="immagine.jpg" width="50" height="30" alt="" />
            <img src="immagine.jpg" width="20" height="50" alt="" />
      <h2>titoletto</h2>
      <p>paragrafo uno paragrafo uno paragrafo uno paragrafo uno paragrafo uno paragrafo uno paragrafo uno paragrafo uno</p>
      <p>paragrafo due</p>
     </div>
     <div class="interno">
            <img src="immagine.jpg" width="70" height="150" alt=""  />
      <h2>titoletto</h2>
      <p>paragrafo uno</p>
     </div>
     <div class="interno">
            <img src="immagine.jpg" width="90" height="200" alt="" />
      <h2>titoletto</h2>
      <p>paragrafo uno</p>
     </div>
    </div>
    </body>
    </html>

  3. #3
    Utente di HTML.it L'avatar di longline
    Registrato dal
    Sep 2001
    Messaggi
    5,363
    Grazie Prill!

    Ho provato il tuo codice ma avevo ancora qualche pixel sotto all'immagine. Poi ho visto che avevi messo un margin-bottom all'immagine, l'ho tolto ed ora è perfetto! Grazie mille, perché avevo fatto qualcosa di simile ma non funzionava, ora ho capito il mio errore!


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.