Visualizzazione dei risultati da 1 a 4 su 4
  1. #1
    Utente di HTML.it
    Registrato dal
    Mar 2013
    Messaggi
    11

    Allineamento di più immagini

    Salve, avrei bisogno di un piccolo aiuto:
    sto creando una pagina html contenente un'immagine larga 1024px, sotto la quale vi sono altre 4 immagini che vorrei allineare perfettamente ad essa (ovvero che tra loro ci sia lo stesso spazio, e che la prima e l'ultima abbiano lo stesso margine di distanza, rispettivamente, da sinistra e da destra). Sto provando a farlo con i div+css, ma le mie conoscenze devono essere ampliate
    Vi posto il pezzo di codice "incriminato":
    codice:
    <style type="text/css">
    .centro {
    	display: block;
    	margin: 0px auto;
    	text-align: center;
    }
    
    .button {
    	float: left;
    	width: 50%;
    }
    </style>
    
    <div class="centro">
    	[img]bg[/img]
    </div>
    <div class="button">
    	[img]1[/img]	
    	[img]2[/img]
    	[img]3[/img]
    	[img]4[/img]
    </div>
    Vi ringrazio in anticipo per l'aiuto

  2. #2
    E le altre 4 quanto sono larghe?
    “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

  3. #3
    Utente di HTML.it
    Registrato dal
    Mar 2013
    Messaggi
    11
    Originariamente inviato da carlomarangoni
    E le altre 4 quanto sono larghe?
    92px

  4. #4
    codice:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Documento senza titolo</title>
    <style type="text/css">
    #contenitore {
     height: auto;
     width: 1024px;
     margin: 0 auto;
    }
    .img2 {
     float: left;
     margin-left: 131px;
    }
    #vlear {
     clear: both;
    }
    </style>
    </head>
    <body>
    <div id="contenitore">
        <div id="img1"><img src="01.jpg" width="1024" height="100" alt="img 1" /></div>
        <div class="img2"><img src="02.jpg" wclassth="92" height="92" alt="img 2" /></div>
        <div class="img2"><img src="03.jpg" wclassth="92" height="92" alt="img 3" /></div>
        <div class="img2"><img src="04.jpg" wclassth="92" height="92" alt="img 4" /></div>
        <div class="img2"><img src="05.jpg" wclassth="92" height="92" alt="img 5" /></div>
      <div id="clear"></div>
    </div>
    </body>
    </html>
    “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

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.