Problema con CSS/Html?

Sto costruendo un sito per vendere dei prodotti e vorrei allineare i prodotti su delle righe che vanno a capo a fine pagina, ma sono riuscito ad allinearli solo su un'unica riga. La difficoltà sta nel fatto che i prodotti provengono da un database, quindi ho usato un iteratore per poterli usare. Come posso fare per allinearli su delle righe in modo ordinato??? Sto impazzendo

2 risposte

Classificazione
  • 4 sett fa

    Senza poter vedere una riga di codice che ti possiam dire?

    Il fatto che vengano letti dal database non è un problema nell'allinearli come si vuole.

    Edit:

    Sarebbe utile che postassi il link alla pagina (anche solo esempio) con gli script server-side funzionanti.  Per capire cos'è che non va. Lo dico perchè suppongo che il problema di mancato allineamento su più righe sia in qualche modo dovuto  appunto dall'iterator che evidentemente in qualche modo 'rompe' il senso del codice.

    Dal momento che "duplicando" il tuo div con classe "productbox",  i prodotti si allineano correttamente su più righe normalmente.. e mi sembra tutto corretto dal punto di vista CSS. Immagino che quindi il problema risieda in ciò che fa iterator. Vedendolo in azione sulla tua pagina penso si possa capire meglio l'intoppo.

    A vederlo così, una cosa che non capisco del tuo codice è questo punto (in fondo):

      <td>

    <div class=productbox>   <div class="cont">   <div class="foto"><%if(bean.getPhoto()!=null){ %><img src="imgControl?id=<%=bean.getCode()%>" style="width:100px"><% }else{%><img src="./imgs/no_disc.png" style="width:100px"><%} %></div>   <div class="name"><%=bean.getName()%></div>   <div class="button"><a href="product?action=details&id=<%=bean.getCode()%>">Details</a></div></td>

       </div> <!--fine di cont-->   </div> <!--fine di productbox-->

    Questi due /div finali che se non vado errato chiudono productbox e cont... a rigor di logica devono essere prima di   </td> Non comprendo cosa ci facciano fuori dalla riga tabella 🤔

    In pratica lui crea tante righe tabella per ogni prodotto  <td> </td> e ogni volta si lascia questi due chiusure di  div  all'esterno...  mi sa che non va affatto bene questo 🤔 

    In ogni caso.. se si può vedere la pagina non funzionante (online) penso sia tutto molto più chiaro.

  • 4 sett fa

    Questo è il mio codice HTML (non è tutto, parto dal punto cruciale, inizialmente ho dichiarato una collezione di prodotti):

    <h2>Products</h2>

     <a href="product">List</a>

     <table>

       <!-- <th>Code <a href="product?sort=code">Sort</a></th>

       <th>Name <a href="product?sort=name">Sort</a></th>

       <th>Description <a href="product?sort=description">Sort</a></th>

       <th>Action</th>

       <th>Picture</th>-->

      <tr>

      <%

       if(products==null) %>Products null

      <% if(products.size()==0) %>Products size 0

      <%

       if (products != null && products.size() != 0) {

        Iterator<?> it = products.iterator();

        while (it.hasNext()) {

         ProductBean bean = (ProductBean) it.next();

         if(!bean.isDeleted()){

      %>

       <!-- <td><%=bean.getCode()%></td>-->

       <!--<td><%=bean.getDesc()%></td>-->

       <td><div class=productbox>

       <div class="cont">

       <div class="foto"><%if(bean.getPhoto()!=null){ %><img src="imgControl?id=<%=bean.getCode()%>" style="width:100px"><% }else{%><img src="./imgs/no_disc.png" style="width:100px"><%} %></div>

       <div class="name"><%=bean.getName()%></div>

       <div class="button"><a href="product?action=details&id=<%=bean.getCode()%>">Details</a></div></td>

       </div>

       </div>

        <%request.setAttribute("imgbean",bean);%>

      <%

         }

        }

       } else {

      %>

      </tr>

      <tr>

       <td colspan="6">No products available</td>

      </tr>

      <%

       }

      %>

     </table>

    Mentre questo è il CSS:

    .productbox {

     font-family:oswald;

      color: #fff;

      padding: 20px;

      float:left;

    }

    .cont {

      width: 100%;

      height: 100%;

      background: white;

      border-radius: 3px;

    }

    .name {

        color:#000;

        font-family:Geogia;

        text-transform:capitalize;

        font-weight:bold;

    }

    .foto {

        width:100%;

        height:100%;

    }

    .button {

      text-decoration: none;

      background: #ffbe7d;

      color: #000;

      font-size: 16px;

      font-weight: 500;

      padding: 5px 5px;

      border-radius: 5px;

      &:hover {

        background: #60CF6F;

      }

Altre domande? Fai una domanda e ottieni le risposte che cerchi.