Alignements de contenus générés dynamiquement sous forme de liste
Bonjour,
D'abord, je dois préciser que je ne suis pas développeur mais bien webmaster. Je fais bien un peu d'intégration, mais c'est tout. Or, sur l'un des sites de la compagnie pour laquelle je travaille (codé en ASP.NET), se trouve une section Nouvelles & Événements dans laquelle des contenus sont générés dynamiquement et affichés sous forme de liste. Mais il y a un problème avec l'affichage de ces éléments <li> de la liste: ils flottent bien les uns à côté des autres, mais lorsqu'un élément de la liste plus court que les autres se retrouve en dernière position sur une ligne, l'élément du dessous sur la ligne suivante vient s'y coller. Mais, tout ça n'est pas très clair et une image vallant mille mots, voici le problème actuel et ce à quoi je voudrais arriver ensuite:
Avant/après:http://research.atrium-innovations.com/Images/Avant.jpghttp://research.atrium-innovations.com/Images/Apres.jpg
Donc, le code roule la BD et génère des éléments <li> qui sont placés les uns à la suite des autres. Ce que je voudrais faire serait d'ajouter un bout de code dans les fichiers .ASCX pour arriver à modifier la class des 3e, 6e, 9e, etc. <li> de manière à leur imposer un clear: both pour qu'il y ait un saut de ligne et que le cinquième bloc ne se «colle» plus sur le bloc du dessus comme dans mon exemple ci-haut. Ou alors, un div vide du genre <div style="clear: both"></div> pourrait être ajouté dynamiquement avant chaque troisième entrée ou quelque chose du genre. Dans ma deuxième image, les rectangles rouges suggéraient même que chaque bloc de deux <li> soient placés dans un <div> différent qui serait ajouté à chaque bloc de deux <li>, mais mettre des éléments de liste dans des éléments bloc me semble bizarre. Bref, je me dis qu'il dois bien y avoir un moyen d'aligner proprement mes éléments de liste, mais j'ignore comment faire.
Le fichier NewsList.ascx ressemble à ceci:
<%@ Control Language="C#" AutoEventWireup="true" CodeBehind="NewsList.ascx.cs" Inherits="Alogient.Atrium.Research.Website.Controls.NewsList" %>
<%@ Import Namespace="Alogient.Atrium.Research.Models" %>
<%@ Import Namespace="Alogient.Cameleon.Configuration" %>
<%
var viewMore = DictionaryService.GetLocalizedDictionaryValue("News.ViewMore", CMServices.CurrentCultureCode);
%>
<div id="pagingContainer">
<ul class="news-list content">
<%foreach (var news in this.News)
{ %>
<li class="news-summary">
<h3><a class="title" href="<%=news.Url%>"><%=news.Title %></a><br />
<span class="date"><%=news.Date.ToString("D") %></span>
</h3>
<% if (!string.IsNullOrWhiteSpace(news.SummaryPhotoUrl))
{ %>
<img class="summary-photo" src="<%= news.SummaryPhotoUrl %>" />
<% } %>
<span class="summary-text"><%=news.Summary%></span> <br /> <br />
<a class="view-more" href="<%=news.Url%>"><%= viewMore %></a>
</li>
<% }%>
<div style="clear: both"></div>
</ul>
</div>
L'URL du site en question:
http://research.atrium-innovations.c...e/news-events/
Toute suggestion sera la bienvenue!
