Faire comme un tableau sur l'index Facile

Faire comme un tableau sur l'index

[prosilver]


Bonjour,

Le style prosilver n'utilise pas de cellules en tableau sur l'index, mais des éléments affichés par des listes HTML.
Dans la liste des forums, les éléments sont donc séparés par des bordures qui s'adaptent au contenu des blocs dd.posts, dd.topics, dd.views (à petit contenu, petit trait).
Voici un exemple en image :

border-court.gif
border-court.gif (7.46 Ko) Vu 118 fois


La séparation n'est pas très esthétique selon la hauteur du contenu de ces éléments, et certains aimeraient avoir cette séparation jusqu'en bas (comme un tableau).
Exemple :

border-long.gif
border-long.gif (8.88 Ko) Vu 347 fois



Tout est une histoire de marge... ^^
Dans la content.css
chercher
Code: Tout sélectionner
ul.topiclist dd {
	display: block;
	float: left;
	border-left: 1px solid #FFFFFF;
	padding: 4px 0;
}

dans ces codes on change les attributs pour les marges, donc on remplace :
Code: Tout sélectionner
padding: 4px 0;

par
Code: Tout sélectionner
padding: 100% 0 100% 0; /* on envoie les traits en augmentant les marges intérieures haut et bas du bloc) */

copier juste après les codes cités plus haut (là on annule la marge pour remettre les éléments à zéro)
Code: Tout sélectionner
margin: -100% 0 -100% 0; /* on annule l'action en mettant une marge extérieure negative */ 

ce qui fait descendre les traits sans pour autant faire descendre l'ensemble.

Un peu plus bas, chercher
Code: Tout sélectionner
li.header dd {
	margin-left: 1px;
}

remplacer par
Code: Tout sélectionner
li.header dd {
	margin-left: 1px;
	padding: 4px 0; /* on remet la marge qu'on a enlevé avant  */
}


pour les anciennes versions d'internet explorer
chercher
Code: Tout sélectionner
dl.icon {
	min-height: 35px;
	background-position: 10px 50%;		/* Position of folder icon */
	background-repeat: no-repeat;
}

remplacer par
Code: Tout sélectionner
dl.icon {
	min-height: 35px;
	background-position: 10px 50%;		/* Position of folder icon */
	*background-position: 10px 6px;
	background-repeat: no-repeat;
}


A bientôt... :wink:

micka76
Graphiste
Graphiste
 
Rédigé le: 04 Juil 2010 à 10:56
Articles: 8
Noter cet article: 123456 Votants: Aucun
Mots-clés: tableau, index

Retourner vers Styles


cron