I forum Ricerca FAQ
Fai una domanda
Ultimo messaggio 1 2
navigatore65
navigatore65
il 20 ottobre 2014 alle 16:52
107 messaggi dal 10 aprile 2006
Salve ho fatto in questo modo :
 <h2>Elenco Affiliati</h2>
     <table>
     <tr>
     <asp:Repeater ID="riga" runat="server">
        <HeaderTemplate>
         <div id="catalogo">
         </HeaderTemplate>
             <Itemtemplate>
               <td>
               <div class="affiliato">
                    <img src="images/imgcat/<%# Eval("NOMEIMAGE") %>" alt="" />
                </div>
                  <div class="descrizione">
                    <%# Eval("DESCRCATALOGO") %>
                 </div>   
              </td>
           </Itemtemplate>
   
        <FooterTemplate>
         </div>
       </FooterTemplate>  
     </asp:Repeater>
    </tr>
   </table>



UNico problema che mi va oltre il div verso destra se ho più occorrenze senza andare da capo; come faccio a controllare con Repeater il numero delle immagini da visuallizare per ogni riga e che poi il resto si ripetono sotto ?
Come faccio con Repeater a organizzare tre immagini per ogni riga ? Grazie
Grazie
Modificato da navigatore65 il 20 ottobre 2014 17.31 -
Modificato da navigatore65 il 21 ottobre 2014 18.21 -
RispondiQuoting
BrightSoul
BrightSoul
il 21 ottobre 2014 alle 00:50
11.886 messaggi dal 09 febbraio 2002
Contributi
Ciao,
al posto del Repeater, usa invece un DataList che ti permette di distribuire gli elementi su un numero prefissato di colonne. Leggi questo articolo di Daniele:
http://www.aspitalia.com/script/382/Controllo-DataList.aspx

Comunque, vorrei consigliarti di seguire della documentazione, un libro o un corso su HTML5 e CSS3. Così avrai delle nozioni base che ti consentiranno di procedere spedito nell'impaginazione dei tuoi contenuti.

Usare le tabelle per impaginare è una pratica ormai obsoleta (l'articolo che ti ho linkato è di ben 12 anni fa) perché non si adattano bene ai vari tipi di dispositivo. Oggi gli utenti navigano anche da mobile, e si cerca di adottare degli accorgimenti che consentano la ridistribuzione automatica dei contenuti quando la dimensione dello schermo diventa molto piccola. L'insieme di queste tecniche è chiamato responsive design, ed è un argomento in cui molto probabilmente ti imbatterai studiando HTML5 e CSS3.

ciao,
Moreno
Enjoy learning and just keep making
RispondiQuoting
navigatore65
navigatore65
il 21 ottobre 2014 alle 08:08
107 messaggi dal 10 aprile 2006
Ciao, grazie
ma allora che tecnica adottare ?
io ho seguito in corso in ASP NET e spiega proprio l'utilizzo del controllo repeater, ma non spiega come fa a livello CSS a sistemare correttamente il layout.
Io ho fatto un corso online di CSS ma non mi ritengo molto ferrato in materia
RispondiQuoting
BrightSoul
BrightSoul
il 21 ottobre 2014 alle 08:31
11.886 messaggi dal 09 febbraio 2002
Contributi
ciao,
il Repeater, così come il DataList, il ListView e altri tipi di databound controls vanno bene e ti permettono di avere un buon controllo sull'output HTML che invii al client. Questo è importante perché prossimamente ti troverai a voler inserire nel tuo progetto dei componenti html/javascript sviluppati da terze parti (es. gallerie di immagini con effetti particolari) che ti richiedono la generazione di un preciso codice HTML.

navigatore65 ha scritto:

ma allora che tecnica adottare ?

Puoi snocciolare una serie di elementi inline, che fluiranno a capo automaticamente, in base allo spazio disponibile.
Guarda questo esempio, è tipico per presentare degli elementi in un elenco. Ho predisposto una lista puntata <ul> al cui interno sono presenti tanti elementi <li> contenenti immagini. Tutto ciò che riguarda la presentazione è delegato al CSS.
http://jsfiddle.net/Ltgfmrgm/
Prova a ridimensionare la finestrella in basso a destra e vedrai le immagini disporsi automaticamente. Con questo sistema puoi anche permetterti di non avere una griglia fissa, e quindi le immagini potranno anche essere di larghezza differente.

navigatore65 ha scritto:

Io ho fatto un corso online di CSS ma non mi ritengo molto ferrato in materia

Non basta. Il CSS3 è tanto importante quando l'HTML o il javascript. Sono le tre sorelle del web, non ne dovresti trascurare nessuna :)

ciao,
Moreno
Enjoy learning and just keep making
RispondiQuoting
navigatore65
navigatore65
il 21 ottobre 2014 alle 15:54
107 messaggi dal 10 aprile 2006
Cavolo non capisco dove è che sbaglio ho fatto come l'esempio che mi hai dato utilizzando UL e LI
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder2" Runat="Server">
 
 <div>
 </div>
 <div id="col1">
      <asp:Repeater ID="riga" runat="server" onitemcommand="riga_ItemCommand">
              <Itemtemplate>
                  <ul id="galleria">
                    <li>
                    <img src="images/imgcat/<%# Eval("NOMEIMAGE") %>" alt="" /> 
                    <%# Eval("DESCRCATALOGO") %>
                    </li>
                  </ul>
           </Itemtemplate>

    </asp:Repeater>
 </div>
</asp:Content>


poi nel file CSS che si trova sotto radice del progetto ho inserito :

#galleria {list-style-type:none;}
#galleria li {display:inline-block;}
#galleria img {height:150px;}


Ma mi sai dire dove cavolo sto sbagliando ? Mi mette sempre immagini sotto 'altro ma con la descrizione corretta a fianco (come voglio io)
Mi guardi per favore un pò il codice ?
Grazie mille
RispondiQuoting
navigatore65
navigatore65
il 21 ottobre 2014 alle 17:08
107 messaggi dal 10 aprile 2006
Allora riepilogando :
nel foglio di stile ho questo :

body 
{

  
}

td
{
    vertical-align:top;
}

    
#galleria {list-style-type:none;}
#galleria li {display:inline-block;}
#galleria img {height:150px;}


Nel codice della pagina ho questo collegato al foglio di stile come potrai vedere:



    
<asp:Content ID="Content1" ContentPlaceHolderID="head" Runat="Server">
   
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder2" Runat="Server">
  <link href="Styles/NSStyle.css" rel="stylesheet" type="text/css" />
 <div>
 </div>
 <div id="col1">
      <asp:Repeater ID="riga" runat="server" onitemcommand="riga_ItemCommand">
              <Itemtemplate>
                  <ul id="galleria">
                    <li>
                    <img src="images/imgcat/<%# Eval("NOMEIMAGE") %>" alt="" /> 
                    <%# Eval("DESCRCATALOGO") %>
                    </li>
                  </ul>
           </Itemtemplate>

    </asp:Repeater>
 </div>
</asp:Content>


Perchè mi mette tutto sotto l'altro comunque ?
Modificato da BrightSoul il 21 ottobre 2014 19.08 -
RispondiQuoting
navigatore65
navigatore65
il 21 ottobre 2014 alle 17:21
107 messaggi dal 10 aprile 2006
Ho provato anche in questo modo :

 <div id="col1">
       <asp:Repeater ID="riga" runat="server" onitemcommand="riga_ItemCommand">
              <Itemtemplate>
                  <ul id="galleria" style="list-style-type:none;">
                    <li style="display:inline-block;">
                    <img src="images/imgcat/<%# Eval("NOMEIMAGE") %>" alt="" /> 
                    <%# Eval("DESCRCATALOGO") %>
                    </li>
                  </ul>
           </Itemtemplate>

    </asp:Repeater>
 </div>
</asp:Content>


ma non cambia nulla
Modificato da BrightSoul il 21 ottobre 2014 19.08 -
RispondiQuoting
navigatore65
navigatore65
il 21 ottobre 2014 alle 18:20
107 messaggi dal 10 aprile 2006
[RISOLTO]

è bastato mettere nello stile :


.affiliato {float:left;}


ora tutte le immagini sono incolonnate
Modificato da BrightSoul il 21 ottobre 2014 19.08 -
RispondiQuoting
1 2

Torna al forum | Feed RSS

ASPItalia.com non è responsabile per il contenuto dei messaggi presenti su questo servizio, non avendo nessun controllo sui messaggi postati nei propri forum, che rappresentano l'espressione del pensiero degli autori.