5568 sujets

Sémantique web et HTML

Intégrer une DIV dans un lien [Résolu]

Bonjour,


Je souhaiterais ma banière de la façon suivante:


<div id="header">
           <a href="<?php echo get_settings('home'); ?>">
		<div id="headerimg">
                    &nbsp;
		</div>
           </a>
	</div>


"header" fixe la taille du DIV ansi que sa position
"headerimg" fixe l'image de fond

ceci c'est pour avoir l'image de fond qui soit gérée par le CSS, et je voudrais avoir un lien qui soit possible sur toute la DIV.

cependant lors de la validation XHTML, on me donne une erreur sur cette syntaxe.

Le site est visible ici http://maxknopp.free.fr

merci
Max
Modifié par mamax (05 Apr 2006 - 15:08)
Salut,
Ah ben oui, c'est normal que ca ne passe pas au validateur : <a> est une balise en ligne alors que <div> est une balise en bloc.
Tu trouveras plus de détails sur les balises bloc et en ligne sur cette page.

J'ai pas regardé ton code, mais pourquoi ne pas mettre ton lien en display:block ? Comme ca tu pourras lui donner une image de fond et des dimensions et pas besoin de div du tout...

[EDIT] Heu je viens de tester avec le validateur du w3c et ca passe[/EDIT]
Modifié par Jihel (05 Apr 2006 - 11:19)
OK,

C'est vrai en modifiant avec ce code, cela passe a la validation


        <div id="header">
           <a href="<?php echo get_settings('home'); ?>">
		<span class="headerimg">
                    &nbsp;
		</span>
           </a>
	</div>


par contre comment, dans le CSS modifier le "headerimg" pour qu'il intègre une image?

J'ai ce code là, mais cela ne fonctionne pas


.headerimg {
        background: url(images/maxK.gif);
        background-repeat: no-repeat;
	}
Il faut donner une taille à l'élément qui prend une image de fond.

Si ton image fait 50px de haut par exemple tu donnes une hauteur de 50px à ton span (n'oublie pas "display:block" dans ta css parce que span est une balise "en ligne")
En fait, tu peux simplifier tout ca. En mettant ton lien en display:block, tu peux :
- lui donner des dimensions
- lui donner une image de fond (pas besoin d'un conteneur supplémentaire)
- le positionner comme tu veux

L'avantage de cette minip', c'est que tu cumules tout en un seul style et que ton code est condensé. Du coup la mise à jour est également facilité.

Voici le code CSS :
#header {
	margin:0;
	padding:0;
	height:195px;
	width:604px;
  background-image: url(maxK.gif);
  background-repeat: no-repeat;
	display:block;
	}

et le code HTML 
<a href="http://maxknopp.free.fr/blog" id="header"></a>
Salut,

à jihel > heu... En faisant quand même attention que du coup le lien ne se retrouve pas enfant direct de body. Et s'il s'agit d'un header il y a vraiment un risque.

Donc un conteneur n'est peut être pas à éviter absolument.
@clb56 :
Le lien est enfant d'une div#page qui permet de centrer le contenu (à peu de choses près), dont il occupe toute la largeur. Mais effectivement il peut être intéressant de le placer éventuellement dans un paragraphe. Après avoir fait des tests (rapides...), ca ne m'a pas semblé nécessaire dans le cas de mamax...
Modifié par Jihel (05 Apr 2006 - 13:50)
Ok, nickel ça marche bien avec ce code:


#header {
	margin:0;
	padding:0;
	height:195px;
	width:604px;
	}

#header a span{
	margin:39px 0 0 0;
	height:195px;
	width:604px;
        background-image: url(images/maxK.gif);
        background-repeat: no-repeat;
        display: block;
	}


et en XHTML:


<div id="header">
       <a href="<?php echo get_settings('home'); ?>">
		<span>
                    &nbsp;
		</span>
       </a>
</div>


Par contre, je me pose une question par rapport à l'accessibilité:
Comment peut-on faire, dans le cas ou le navigateur ne prends pas en charge la CSS, pour l'image soit remplacée par un Texte?
Bonjour,
juste une remarque en passant : le "span" ici ne sert pas à grand chose, comme l'a fort bien fait remarquer Jihel. Tu peux tout à fait appliquer ton style directement sur le "a".

a écrit :
Par contre, je me pose une question par rapport à l'accessibilité:
Comment peut-on faire, dans le cas ou le navigateur ne prends pas en charge la CSS, pour l'image soit remplacée par un Texte?


Huhu, la question me semble posée à l'envers, une reformulation pourrait donner ceci :
- Comment faire pour que mon texte soit remplacé par une image sur les navigateurs supportant CSS. Il ya plusieurs réponses à cette question, tu en trouveras quelques unes en cherchant un peu sur le forum, ainsi que les
débats qui vont avec. Smiley cligne
Modifié par Lanza (05 Apr 2006 - 14:25)
Sujet clos
Aller à