problema nell'incolonnare i DIV

**Kahm** · 05-02-2015, 09:53

sale a tutti
avendo originariamente una tabella di questo tipo:

Codice PHP:


    <table class="style1">        <tr>            <td>                menu1</td>            <td>                img1</td>            <td rowspan="3">                immagineGrande</td>        </tr>        <tr>            <td>                menu2</td>            <td>                img2</td>        </tr>        <tr>            <td>                menu3</td>            <td>                omg3</td>        </tr>    </table>

dovrei ricostruirla usando i DIV, e qui ho avuto il problema!
ecco cosa ho fatto:

Codice PHP:


  <style>
  div#container {        /*width: 90%;          text-align: center;        border: 1px solid #000;*/              }        div.split2 div {        float: left;        /*width: 50%;*/        }        div.wide {        clear: left;}    </style>

   <div   id="container">                  <div  class="split2">                              <div>                 menu1                                </div>                                       <div > img1</div>                </div>                                 <div  class="split2">                 <div  >menu2                            </div>                 <div  > img2 </div>                   </div>                                 <div  class="split2">                          <div >menu3             </div>                   <div >    img3</div>    </div>                           <div  class="split2">              <div > IMG grande   </div>                </div>   </div>

come potete vedere ho difficoltà nell allineare i DIV
eppure mi sembra corretto!!!

**Prill** · 05-02-2015, 14:36

se ti riferisci al fatto che i vari div con classe split2 si distribuiscono sulla stessa linea invece di andare a capo, basta aggiungere nel css

codice:

div.split2  {clear: left;}

**Kahm** · 05-02-2015, 15:37

Immagine.jpg benissimo grazie
ho quasi risolto, ora manca solo l'ultimo problema di spazi tra i DIV
come potrei risolvere?

sto per gettare la spugna
qui una pagina di prova in cui si può intravedere CSS e HTML
http://amodius.brinkster.net/htmlpage.htm

**Prill** · 05-02-2015, 18:55

Dato che usi larghezze fisse, riordinando il tutto si può fare in questa maniera:

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=iso-8859-1" />
<title>Documento senza titolo</title>

<style type="text/css">

div#container {
        min-width:793px;
}
#sinistra {
width:445px;
float:left;
}
#destra {
width:348px;
float:left;
}
div.split2 {margin-bottom:3px; width:445px; height:29px; overflow:hidden }
div.split2 .immagine{display:block; width:40px; float:left;}
div.split2 .altro {display:block; width:400px; height:100%; float:right;background-image:url(images/m1.jpg);}

ul#menu {
   list-style: none;
   margin:0 auto;
   width: 400px;
}
 
#menu li {float: left;}
 
#menu li a {
   display:block;
   width: 70px;
   line-height: 29px;
   height: 29px;
   color: Blue;
   font-weight: bold;
   text-align: center;
   text-decoration: none;
   background-image: url(images/m2.jpg);
}
#menu li a:hover, #menu li a.active{
  background-color: #F58529;
}
</style>
</head>
<body>
<div id="container">
<div id="sinistra" >     
  <div class="split2">        
     <a href="#" onmouseover="window.status='home'; return true;" onmouseout="window.status=''; return true;"><img class="immagine" src="images/home.jpg" alt="home" /></a>         
     <div class="altro"></div>
  </div>   
              
  <div class="split2"> 
     <a href="#" onmouseover="window.status='sitemap'; return true;" onmouseout="window.status=''; return true;"><img src="images/sitemap.jpg" alt="sitemap" /></a>
     <div class="altro">
       <ul class="menu" id="menu">
         <li><a href="">Compra</a></li>
         <li><a href="">Vendi</a></li>
         <li><a href="">Affitta</a></li>
         <li><a href="">Cerca</a></li>
        </ul>
     </div>                     
  </div>      
              
  <div class="split2">   
     <a href="#" onmouseover="window.status='contact'; return true;" onmouseout="window.status=''; return true;"><img class="immagine" src="images/contact.jpg" alt="contact" /></a>
     <div class="altro"></div>
  </div>
</div>
<div id="destra">
     <a href="index.html" onmouseover="window.status='real estate'; return true;"    onmouseout="window.status=''; return true;"><img src="images/real-estate.jpg" alt="real estate" /></a>  
 </div>      
</div>  
</body>
</html>

inserendo la striscia blu come sfondo

**Prill** · 05-02-2015, 18:59

ma: alcune iconcine sono alte 25 pixel e una 29, e 25 è anche la striscia, dovrai uniformarle perché appaia tutto allineato

Discussione: problema nell'incolonnare i DIV

Strumenti discussione

Ricerca discussione

Visualizza

problema nell'incolonnare i DIV

Permessi di invio