Visualizzazione dei risultati da 1 a 6 su 6
  1. #1
    Utente di HTML.it
    Registrato dal
    Mar 2011
    Messaggi
    258

    Griglia div affiancati...

    Salve, ho bisogno di un vostro aiuto. In pratica voglio realizzare un sito con una struttura di base fissa (Header con menu e footer), e la parte centrale dinamica che cambia pescando i dati da un db mysql. E vorrei affiancare diversi div uno di fianco all'altro...Ecco un esempio



    In poche parole ogni quadrato bianco e un div con una foto e un titolo, una volta cliccato sopra si viene reindirizzato alla scheda di quel prodotto. Come procedo?

  2. #2
    Utente di HTML.it L'avatar di homerbit
    Registrato dal
    Dec 2005
    residenza
    Roma
    Messaggi
    1,380
    a parte header e footer, i vari div vanno posizionati con il float e distanziati tra loro con il margin
    Ti consiglio di creare una struttura fissa (in larghezza) all'interno della quale posizioni:
    -header
    -riga 1
    -riga 2
    ...
    footer

    dove "riga 1,2.." contengono a loro volta i div, i quali come detto precedentemente, potrai affiancarli mediante float e dando anche un width, puoi distribuirli in modo equilibrato in tutta la "riga" facendo i conti con i margin
    If you think your users are idiots, only idiots will use it. DropBox

  3. #3
    Utente di HTML.it
    Registrato dal
    Mar 2011
    Messaggi
    258
    Ciao, dici una cosa del genere?

    codice:
    <html>
    <head>
    <style type="text/css">
    <!--
    #contenitore {
    	width: 960px;
    	margin-right: auto;
    	margin-left: auto;
    }
    #contenitore #header {
    	background-color: #999;
    	height: 60px;
    }
    #contenitore #contenuto {
    	height: 600px;
    	background-color: #0CF;
    }
    #contenitore #footer {
    	background-color: #FC0;
    	height: 30px;
    }
    .box {
    	background-color: #F90;
    	height: 150px;
    	width: 150px;
    	float: left;
    	margin-top: 30px;
    	margin-left: 30px;
    }
    -->
    </style>
    </head>
    <body>
    	<div id="contenitore">
    	  <div id="header">MENU</div>
    	  <div id="contenuto">
    			<div class="box" id="box1">BOX 1</div>
    			<div class="box" id="box2">BOX 2</div>
    			<div class="box" id="box3">BOX 3</div>
    			<div class="box" id="box4">BOX 4</div>
    			<div class="box" id="box5">BOX 5</div>
    			<div class="box" id="box6">BOX 6</div>
    			<div class="box" id="box7">BOX 7</div>
    	  </div>
    	  <div id="footer">FOOTER</div>
    	</div>
    </body>
    </html>
    PROVA

  4. #4
    Utente di HTML.it L'avatar di homerbit
    Registrato dal
    Dec 2005
    residenza
    Roma
    Messaggi
    1,380
    perfetto!
    If you think your users are idiots, only idiots will use it. DropBox

  5. #5
    Utente di HTML.it
    Registrato dal
    Mar 2011
    Messaggi
    258
    ok, quindi e il modo migliore? un altra cosa se tipo vorrei a aggiungere al box uno sfondo, un secondo div sopra al primo con un titolo come posso fare?

  6. #6
    Utente di HTML.it L'avatar di homerbit
    Registrato dal
    Dec 2005
    residenza
    Roma
    Messaggi
    1,380
    i box hanno già uno sfondo (forse ho capito male)
    secondo div sopra? forse vorrai dire dentro?

    cmq in entrambi i casi la cosa non è difficile (ci sei già)
    ad ogni modo prova così;

    codice:
    </style>
    .sub-box{ background-color:#f00; width:130px; height:130px; margin:10px;}
    .titolo { text-align:center; padding:2px;}
    </style>
    </head>
    <body>
    	.....
    	<div class="box" id="box1">BOX 1
                	<div class="titolo">titolo</div>
                    <div class="sub-box"></div>
                </div>
    .......
    vedi un pò se ti va bene
    If you think your users are idiots, only idiots will use it. DropBox

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.