Discussion :

[al18zoin]

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:

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!

[benny-blanco]

Ce n'est pas un probleme d'asp.net mais de mise en forme donc de css

Il faut définir au niveau du css une hauteur fixe pour tes li voir même pour tes h3 et span.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
 
 
ul.news-list li {height : 280px;}
.news-list.content h3 {border-bottom: 1px solid #33B7E5;height : 280px;}

Après pour les h3 y faut s'auto gérer car il y a en qui font 10 caractère et d'autre quand font 150. Ou alors utilisez la fonction "coupePhrase" [...]

[al18zoin]

Effectivement, ça semble fonctionner! Par contre, ce serait effectivement plus efficace avec ladite fonction pour tronquer le texte à partir d'un certain nombre de caractères. Comment elle s'écrit c'est fonction en fait?

Merci pour le tuyau!!