[Résolu] DIV supplémentaire ou marge négative

Bonjour,

Utilisant le logiciel ThinGamaBlog afin d'éditer mon blog et devant parfois les nombreuses critiques négatives (mais pas toutes, certaines sont très positives) sur le design que j'ai adopté, j'ai décidé de proposer un design autre que celui que j'utilise.

Basé sur un thème DotClear, j'y ai incorporé d'autres éléments (icônes, ...) etc. afin de faire un maximum pour avoir un thème correct.

Malheureusement, j'ai une contrainte logicielle. Celle-ci me pose un dilème : soit rajouter un DIV supplémentaire afin de permettre une modification aisée tant de la CSS que du template, soit d'utiliser des marges négatives sur une classe spécifique imbriquant un peu de chipotage dans la CSS associée.

Cela se passe sur une liste d'éléments non numérotés.
Voici donc (contenant aussi les tags "ThinGamaBlog") le code vierge :

<div id="texte">
<!-- debut de l entree -->
	<BlogEntry> 
		<EntryTitle><h2><$EntryTitle$></h2></EntryTitle>
		<DayHeader><p class="date">Posté le <$DayHeaderDate$></p></DayHeader>
		<$EntryBody$>
		<ul class="participation">
			<li class="commentaire"> <script language="javascript1.1" type="text/javascript">rebloggerLink('<$EntryID$>');</script><noscript>Commentaires non disponible sans JavaScript activ&eacute;</noscript></li>
			<li class="permalink"><a href="<$EntryPermalink$>">Lien permanent</a></li>
			<li class="publish">Ce billet est dans la cat&eacute;gorie <EntryCategories glue=", "><a href="<$CategoryLink$>"><$CategoryName$></a></EntryCategories> et a &eacute;t&eacute; &eacute;crit par <$EntryAuthor$></li>
		</ul>
	</BlogEntry>
</div>

Voici le code "ajouté" :

<div id="texte">
	<BlogEntry> 
	<div id="entree">
		<EntryTitle><h2><$EntryTitle$></h2></EntryTitle>
		<DayHeader><p class="date">Posté le <$DayHeaderDate$></p></DayHeader>
		<$EntryBody$>
	</div>
	<div id="reponse">
		<ul class="participation">
			<li class="commentaire"><script language="javascript1.1" type="text/javascript">rebloggerLink('<$EntryID$>');</script><noscript>Commentaires non disponible sans JavaScript activ&eacute;</noscript></li>
			<li class="permalink"><a href="<$EntryPermalink$>">Lien permanent</a></li>
			<li class="publish">Ce billet est dans la cat&eacute;gorie <EntryCategories glue=", "><a href="<$CategoryLink$>"><$CategoryName$></a></EntryCategories> et a &eacute;t&eacute; &eacute;crit par <$EntryAuthor$></li>
		</ul>
	</div>
	</BlogEntry>
</div>

D'un point de vue CSS, si je ne rajouter pas les DIV "supplémentaires", je dois modifier la CSS de la manière à avoir dans #texte ul un margin de 80px

#texte ul {
	font: small Georgia, "Times New Roman", Times, serif;
	width: 80%;
	margin-right: 80px;
	margin-left: 80px;
	list-style-image: url(img/global/puce.png);
}

Mais par après reprendre un margin de -70px sur la classe .commentaire, .permalink et .publish et encore redéterminer la puce dans la classe ul.participation et pour terminer déterminer une puce précise dans #entree ul li ...

En bref, soit je choisis la facilité en rajoutant deux DIV (qui d'un avis ne me semble pas trop mal placé au risque de tomber dans une maladie : la divite aigue) soit je modifie ma CSS sur 5 classes avec un margin négatif, des puces spécifiques sur des listes d'éléments non numérotés etc. Enfin beaucoup de chipotage au niveau CSS.

Pouvez-vous me donner votre avis ?
D'un coté pragmatique je choisirais le DIV supplémentaires... Mais parfois ma logique me perd.

Merci,

G.
Modifié par Groumphy (14 Feb 2006 - 21:05)

Bonjour,

Le malentendu classique...

Tant que l'élément div n'est pas utilisé à la place d'un élément spécifique, il est tout à fait dans son rôle.

D'autre part, chercher le "code minimal pertinent" n'est guère possible sans tenir compte justement des contraintes imposées par les outils de productions.

En conclusion, je n'ai pas regardé le code en détail, mais a priori, le choix est assez aisé entre:
- un montage CSS qui semble ajouter beaucoup de complexité à la feuille de style, et diminuer sa maniabilité
- une adaptation beaucoup plus lisible du code CSS
Modifié par Laurent Denis (14 Feb 2006 - 07:53)

Bonjour Laurent,

Merci de ton avis motivé.

Il n'y avais pas de malentendus, je sais que la balise DIV à de nombreuses fonctionnalités et qu'elle peut (et est même !) dans de nombreux cas utilisé à tort et à travers.

Ici comme tu le souligne si bien, c'était surtout d'un coté d'étude de code.
N'ayant pas une habitude de coder (x)HTML / CSS (je suis bien un codeur mais plutot AutoIt, VBS, VBA, VB, ...) et que disons "ces langages de programmation" ouvrent l'esprit principalement sur une autre attitude à visualiser ou voir le code, je m'inquiétais surtout d'un coté de la sémantique, de l'utilisation correcte.

Le second étant à mon avis pratiquement atteint (et que tu as confirmé), il ne me restait plus qu'a m'inquiéter du premier. Ce à quoi tu as répondu selon ma logique...

[petit message personnel]
Ne le sais-tu peut-être pas, mais tu fus l'investigateur d'un nouveau design sur mon blog. En effet, certaines critiques, fondée ou non mettaient en valeur celui-ci. Hors tu es un des seuls à avoir motivé un avis négatif...
Cela m'a donc fait réfléchir plus loin que le bout de mon nez et ai donc construit un tout autre design. Cela m'aide de plus à étudier plus en détails ces "langages".
Notament de là viennent mes deux questions...
[/petit message personnel]


Tout autres avis, motivés, est le bienvenus. Contraire ou encourageant la voie de Laurent D.


Merci à vous,

G.