28219 sujets

CSS et mise en forme, CSS3

bonjour,

j'essaye depuis un petit moment d'attribuer une css à un titre dans un liens,je m'explique:

mon code ce présente sous cette forme:

<div id="menu">
       <div id="liens">
                       <a href="#">premiere partie du lien
                                      <h1>deuxième partie du lien</h1></a>
       </div>
</div>


plusieurs css y sont attribué:
deux css concernant l'id liens et son titre: h1 comme ceci:
#liens{}
#liens h1{}
puis les css pour les liens:
#liens a:link{}
#liens h1 a:link{}


les css sur le liens "titre" ne sont pas prisent (#liens h1 a:link{})
seul la partie hors titre est prise en compte Smiley fache

precision: en revanche ma mise en forme sur le titre est prise en compte
si quelqu'un peut m'aider je lui en serais fort reconnaissant... Smiley lol
Modifié par scisso (08 Jan 2007 - 11:55)
Oulà, ce que tu fais n'est pas correct.

En effet, les balises de liens (<a>) sont des balises dites inline. Elles ne peuvent comporter que des balises du même type.

La balise de titre est elle une balise dites block. Elle peut comporter ce qu'elle veut (dans une certaines limite, entendons-nous).

Que veux-tu mettre dans la première partie du liens ? Es-tu sûr de vouloir mettre un titre principal de cette façon ? Qu'est-ce qui est le lien, le titre ou ce qu'il y a avant ?

;)
tout d'abord merci pour cette réponse si rapide Smiley lol

en faite toute l'expression
<a href="#">premiere partie du lien<h1>deuxième partie du lien</h1></a>

est mon lien

j'utilise la balise h1 pour ma mise en forme elle me permet assez simplement d'obtenir la mise en forme souhaité mais aussi accessoirement pour le référencement

ce que je comprend pas c'est que j'avais déjà procédé comme ceci et tt ce passait bien mais là Smiley bawling pas possible....
Sans vouloir t'offenser, c'est mal de faire ainsi Smiley smile

Sérieusement, tu devrais plutôt te décider à faire soit
<h1><a href="">Titre</a></h1>


Oui bien
<a href="">Blabla <span>Blabla</span></a>


Au passage, on ne choisis pas les balises HTML que l'on va mettre en fonction du rendu qu'elles peuvent avoir sur un navigateur mais en fonction de leur signification sémantique.
bon ok Smiley confused

je vais essayé donc différemment comme tu me le précise ou avec une autre css

Mais merci pour cette explication ça me permet de savoir mon erreur sémantique mais surtout les différences entre les balises inline et block

encore merci Smiley lol
scisso a écrit :


en faite toute l'expression
<a href="#">premiere partie du lien<h1>deuxième partie du lien</h1></a>

j'utilise la balise h1 pour ma mise en forme elle me permet assez simplement d'obtenir la mise en forme souhaité mais aussi accessoirement pour le référencement


Les balises ne doivent jamais être utilisées pour mettre en forme un
contenu mais pour donner un sens à la structure du code, c'est ce qu'on
appelle la sémantique. Le h1 est un titre de niveau 1 et doit donc être utilisé à cet effet.
La mise en forme doit être gérée seulement via les déclarations CSS.
Modifié par Hermann (04 Jan 2007 - 14:13)
Comme les réserves de fond ont déjà été émises (on ne choisit pas les balises pour la mise en forme, et il n'est pas pertinent d'utiliser un titre de niveau uniquement à des fins de référencement), et que l'avertissement sur la syntaxe HTML en mode Strict a également été évoquée, on va passer au problème de CSS rencontré, après un petit rappel à l'ordre.

Rappel à l'ordre : merci de bien vouloir mettre en forme ton message pour respecter les règles du forum, et en particulier de bien vouloir encadrer le code cité des balises ad hoc. Merci d'avance. Smiley smile

Syntaxe CSS :
Le problème rencontré est tout bêtement un problème de sélecteur invalide. Le sélecteur CSS utilisé est le suivant :
#liens h1 a:link{}

Or, à aucun endroit dans le code HTML cité je ne vois de lien contenu à l'intérieur d'un h1 lui-même contenu à l'intérieur d'un élément dont l'identifiant est "liens". Je vois bien un h1 contenu à l'intérieur d'un lien, mais pas l'inverse.

Bref, le sélecteur utilisé ne correspond à rien dans le code, et tout naturellement il n'est pas appliqué. CFQD.

Je pense que tu résoudrais ton problème de sélecteur en laissant de côté cette structure HTML peu opportune. Aurais-tu un exemple de ce que tu veux faire exactement ? On pourrait alors te conseiller une structure HTML plus efficace et sémantiquement plus pertinente.
Désole pour la mise en forme mal respecter, je vais y remédier de suite. Smiley confused

Merci pour ta remarque sur le faite que le liens encadre mon expression et qu'il n'est pas contenu dans la balise <h1> et que forcément le sélecteur css (liens h1 a:link) ne correspond à rien....là je comprend d'autant plus mon erreur.

En ce qui concerne mon problème, j'ai tout simplement changer de méthode et rajouter une <div id=".."> à l'intérieure du liens pour effectuer ma mise en forme plus correctement, je pensais gagner du temps en utilisant la balise <h1> erreur de ma part... Smiley bawling

Merci à vous tous pour vos réponses rapide et claire...
Smiley lol
scisso a écrit :
En ce qui concerne mon problème, j'ai tout simplement changer de méthode et rajouter une <div id=".."> à l'intérieure du liens pour effectuer ma mise en forme plus correctement, je pensais gagner du temps en utilisant la balise <h1> erreur de ma part... Smiley bawling

Euh... concrètement, l'intitulé de ton lien peut-il se lire d'une seule traite ? Par exemple :
<a href="...">Alsacréations, <div class="lien-suite">c'est vraiment le pied !</div></a>

Si c'est le cas, mieux vaut utiliser une balise de type en-ligne (ce qui t'arrangera également pour valider ta page en HTML Strict ou XHTML Strict), par exemple un strong (emphase forte), un em (emphase simple) ou un span (neutre).
<a href="...">Alsacréations, <span class="lien-suite">c'est vraiment le pied !</span></a>


Par contre, s'il s'agit d'avoir le même lien sur deux intitulés différents, il faudra procéder ainsi :
<p>N'oubliez pas de visiter <a href="monsite.com">mon site</a> !</p>
<p>Car <a href="monsite.com">mon super site à moi que j'aime et que je l'adore</a> c'est vraiment trop d'la balle !</p>


Note : en fait j'arrive pas à imaginer à partir de rien un lien qui aurait un double intitulé qui à chaque fois prendrait toute une phrase... C'est pour ça que j'écrivais :
a écrit :
Aurais-tu un exemple de ce que tu veux faire exactement ? On pourrait alors te conseiller une structure HTML plus efficace et sémantiquement plus pertinente.

La proposition tient toujours : même si tu as résolu ton problème technique, ça peut toujours être utile d'avoir des conseils sur le fond...
Antoine Cailliau a écrit :

La balise de titre est elle une balise dites block. Elle peut comporter ce qu'elle veut (dans une certaines limite, entendons-nous).


Non, même si elles sont effectivement de type block les balises de titre <hn> ne peuvent contenir aucune balise elle même de type block.
Modifié par clb56 (08 Jan 2007 - 12:53)
clb56 a écrit :


Non, même si elles sont effectivement de type block les balises de titre <hn> ne peuvent contenir aucune balise elle même de type block.

D'où tiens-tu ta source ?

Je retire ce que j'ai dit Smiley smile J'ai trouvé dans les specs Smiley smile
Modifié par Antoine Cailliau (08 Jan 2007 - 13:18)
Antoine Cailliau a écrit :
D'où tiens-tu ta source ?
A mon avis, du W3C...

De toute façon, c'est facile à vérifier (tout bon validateur te le dira), et c'est assez logique (en tout cas, j'ai du mal à imaginer ce que signifierait une liste de définitions dans un titre par exemple).

Ah, et il parait qu'il y a une faq sur ce site...
Antoine Cailliau a écrit :

D'où tiens-tu ta source ?


Du nombre invraissemblable de conneries que je suis capable de faire quand je développe...

C'est dire que j'ai de la ressource...