28220 sujets

CSS et mise en forme, CSS3

Un lien avec deux styles

Bonjour

je suis en train de faire une refonte de mon site <modération title="fournir un lien cliquable, merci"> http://www.francomix.com </modération>
et je me demande comment faire un lien composé de deux styles (voir colonne droite "Actualités") :

le lien est composé d'une date en italique puis en dessous du titre en gras

Bien sûr quand on passe la souris tout cet ensemble passe en souligné

Merci pour votre aide
Phil
Modifié par Laurent Denis (27 Jan 2007 - 17:19)
bonjour,

à moins d'utiliser 2 balises différentes ou bien 2 balises identiques avec 2 class css différentes, je ne vois pas...Dans ton exemple : la date est contenue dans une balise i, le texte dans une balise b.C'est un bon choix àceci près qu'il vaudrait mieux utiliser des balises sémantiques (em, strong ou bien headings h1, h2, h3...) plutôt que de style (i, b) afin de séparer ton contenu de la forme (accessiblité). Voire des balises "sans sens" comme les span.

A+
Bonjour et merci pour ta réponse

En fait mon objectif est de séparer comme tu dis le contenu de la forme.

Donc une possiblité est de faire ça ?


<a class="petitlien" href="#">
			<span class="date">26 janvier 2007</span>
			<span class="titre">Rock en fusion et Massacrés Belges à la Boutik Rock le 15 février 2007</span>
			</a>


j'hésite à mettre des headings, j'en ai besoin ailleurs

Phil
Bonsoir,

si on souhaite une différence de rendu, c'est qu'il y a une différence de contenu, et donc de structure.

Donc, il y a dans ces liens une chose plus importante qu'une autre.

Donc balises <em> ou <strong>

Donc:
- style par défaut des liens: celui des dates (mise en italique, pas de gras)
- style du <em> ou <strong> du "titre": pas d'italique, gras.

Par exemple:


<a...>
  26 janvier 2006
  <em>Lorem ipsum...</em>
</a>


et quelque chose comme:


a {
font-style: italic;
}
a em {
font-style: normal;
font-weight: bold;
}


<hop>
Eviter les titres <hn>, en effet; Le niveau de détail est trop fouillé.</>

<edit>avec un display:block quelque-part, bien-sûr</>
Modifié par Laurent Denis (27 Jan 2007 - 21:22)
Je plussoie Laurent sur l'utilisation d'un em ou d'un strong pour la deuxième partie du lien (qui me semble être plus mise en avant, donc considérée comme plus importante).

Laurent Denis a écrit :
<hop>
Eviter les titres <hn>, en effet; Le niveau de détail est trop fouillé.</>
<edit>avec un display:block quelque-part, bien-sûr</>

Je dirais surtout qu'il serait idiot d'utiliser des titres de section pour une série de liens. Un titre de section introduit... une section. Si le seul contenu correspondant au titre est le titre lui-même (et le contenu de la page vers laquelle mène le lien, mais ici on parle à l'échelle d'un document unique), alors l'utilisation d'un titre de section hN me semble déplacée.

Au fait, pourquoi pas une liste non ordonnée pour cette liste de liens ?
Merci pour vos conseils

Comme j'ai de nombreux liens je vais donc ajouter une class

<a class="lienitalique">

  26 janvier 2006

  <em class="bold">Lorem ipsum...</em>

</a>



je suppose que je peux ajouter une classe à <em> aussi ?

Florent V, que veux tu dire par liste non ordonée ?

Phil
ensemblevide a écrit :

Comme j'ai de nombreux liens je vais donc ajouter une class


Si tu veux mais tu n'en as pas besoin, un sélecteur de ce type suffira :


.lienitalique em{
    ...
}


Et bonne pratique supplémentaire, ne pas se baser sur l'apparence pour les noms de classe, .lienactu serait plus approprié par exemple.
Je reviens car je me suis rendu compte qu'il manque un truc essentiel :

entre la date et le titre de l'actu il y a un saut de ligne.
Je dois donc utiliser un <span> ? je peux définir la position du <em> ?

Phil
ensemblevide a écrit :
Je reviens car je me suis rendu compte qu'il manque un truc essentiel :

entre la date et le titre de l'actu il y a un saut de ligne.
Je dois donc utiliser un <span> ? je peux définir la position du <em> ?

Deux solutions : soit utiliser un <br />, soit tout simplement passer le em en affichage de type bloc :
.lienitalique em {display: block;}
Pas tout à fait Smiley cligne

J'ai un problème avec le rollover. Ca doit souligner le lien qui ne l'est pas initialement.

<a class="lienactus" href="#">
			26 janvier 2007
			<em>Rock en fusion et Massacrés Belges à la Boutik Rock le 15 février 2007</em>
			</a>



a.lienactus {
	margin: 0px 0 0 0;
	font : italic normal 55% verdana, sans-serif;
	color : #FFF;
	text-decoration: none;
}

a.lienactus:hover {
	text-decoration: underline;
}

a.lienactus em {
	display: block;
	margin: 2px 0 0 0;
	font-style: normal;
	font-weight: bold;
	text-decoration: none;
}

a.lienactus em:hover {
	text-decoration: underline;
}


quand je passe la souris sur le titre (le em) ça souligne tout (titre + date); mais si je passe la souris sur la date ça ne souligne pas le titre
Merci
Problème de syntaxe CSS. Le sélecteur ne vise pas l'élément ou état voulu.

Changer le style de l'em lors du survol du lien, ça se fera ainsi :
a.lienactus:hover em {
	text-decoration: underline;
}
Sujet clos
Aller à