28172 sujets

CSS et mise en forme, CSS3

[Résolu] Problème de postionnement après un <a href>

Bonjour,

J'ai construit mon site en plaçant des Div avec des background-image :

Exemple : 

<div id="revert-thumb"></div>


#revert-thumb{
	     position:absolute;
	     width:135px;
	     height:135px;
	     background:url(images/revert-thumb.jpg) no-repeat top left;
	     margin:540px 737px;
	     float:left;
     }


Mon soucis est que lorsque je place des liens hypertextes sur mes Div, celles-ci changent de position. Dans mon fichier HTML, j'ai remplacé 
<div id="revert-thumb"></div>
par :

<a href="galerie1.html" id="revert-thumb"></a>


Je débute et je souhaitais savoir si c'était normal et si oui, quelle est mon erreur ?
Merci d'avance, je m'arrache les cheveux depuis des heures Smiley cligne
Modifié par 6l20 (19 Mar 2013 - 19:27)
Hello Smiley smile ,

Tu veux dire que tu place des liens dans les DIV ? Je crois que c’est plutôt ça qu’il faut comprendre, sinon, si tu voulais faire comprendre autre chose en disant «sur les DIV», il faudrait être plus précis.

Justement, en parlant de précision, je crois que le plus simple serait, soit de poster un source d’exemple minimaliste mais entier, soit de publier une page de test et d’en donner le lien.

Tel que présenté, personnellement, je ne vois pas, à part faire des suppositions trop vagues…

À+
Modifié par hibou57 (16 Mar 2013 - 21:29)
Désolé si je n'ai pas été clair.

Alors, ma page est constituée d'une série d'images sur lesquelles je veux placer des liens vers d'autres pages.
J'ai d'abord construit ainsi :

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
	<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title></title>
    <link href="style-galerie.css" rel="stylesheet" type="text/css" media="screen" />
    
</head>

<body>
	
    <div id="conteneur">
    
      <div id="revert-thumb"></div>	
        
      <div id="avers-thumb"></div>	
        
      <div id="fumee-thumb"></div>	
        
      <div id="epiderme-thumb"></div>	
        
      <div id="dos-thumb"></div>	
        
      <div id="footer-g"></div>	
		
      <div class="clear"></div>

      <div id="footer-d"></div>
            		
    </div>
    	
</body>
</html>

Le tout positionné avec le CSS suivant :

body{
	background:#FFFFFF;
	margin:0;
	padding:0;
	font-family:Verdana, Arial, Helvetica, sans-serif;
	font-size:13px;
}

#conteneur{
	position:relative;
	width:963px;
	margin:10px auto;
}
	
#footer-g{
	position:absolute;
	width:384px;
	height:26px;
	background:url(images/footer-g.jpg) no-repeat top left;
	margin:980px 310px;
	float:left;
}

#revert-thumb{
	position:absolute;
	width:135px;
	height:135px;
	background:url(images/revert-thumb.jpg) no-repeat top left;
	margin:540px 737px;
	float:left;
}

#avers-thumb{
	position:absolute;
	width:135px;
	height:135px;
	background:url(images/avers-thumb.jpg) no-repeat top left;
	margin:540px 457px;
	float:left;
}

#fumee-thumb{
	position:absolute;
	width:135px;
	height:135px;
	background:url(images/fumee-thumb.jpg) no-repeat top left;
	margin:540px 597px;
	float:left;
}

#epiderme-thumb{
	position:absolute;
	width:135px;
	height:135px;
	background:url(images/epiderme-thumb.jpg) no-repeat top left;
	margin:680px 457px;
	float:left;
}

#dos-thumb{
	position:absolute;
	width:135px;
	height:135px;
	background:url(images/dos-thumb.jpg) no-repeat top left;
	margin:400px 317px;
	float:left;
}


.clear{
	clear:left;
}

a{
   outline: none;
}
:focus{
	-moz-outline-style: none;
}


A ce niveau, les éléments de ma pages sont positionnés comme je le souhaite. Ensuite, je suis allé voir des tutos pour comprendre comment je pourrais placer des liens sur les images qui sont en background de mes Div.
J'ai trouvé la solution expliquée avec cette syntaxe :

<a href="#l" id="id_de_la_DIV"></a>


Du coup, j'ai remplacé dans mon fichier HTML mes <div id="revert-thumb"></div> par :

<a href="galerie1.html" id="revert-thumb"></a>
 <a href="galerie2.html" id="avers-thumb"></a>
 etc...


Je n'ai rien modifié dans mon fichier CSS. Résultat, les liens fonctionnent parfaitement, mais les DIV que j'avais positionnées ont toutes été déplacées. Et je ne comprends pas où je fais une erreur.

Voilà j'ai essayé d'être le plus clair possible. Merci beaucoup de t'être penché sur mon soucis Smiley smile
Modifié par 6l20 (19 Mar 2013 - 19:28)
Oops, c’est mieux d’utiliser les balises [ code ] appropriées quand-même; les balises [ html ] et [ css ] du forum, en bas de la boite d’édition du message. L’avantage est que c’est plus lisible, préserve l’indentation et s’affiche dans une boite avec une barre de défilement-vertical.

Sinon, je viens de tester ton premier exemple, puis le second exemple après y avoir appliqué les modifications indiquées (substitution de certains `div` par des `a`), et je constate la même mise en page, même si je vois un problème par ailleurs, mais que tu n’a pas abordé : un footer qui s’affiche en haut… ça doit pas être ce que tu voulais.

Les deux pages de test :

* www.test.rasama.org/mhigh-1.xhtml
* www.test.rasama.org/mhigh-2.xhtml

La première page correspond à ce que tu as posté, la seconde, correspond à la première page, avec les `div` changés en `a`. Sous Opera au moins, je constate la même mise en page.
Modifié par hibou57 (17 Mar 2013 - 02:16)
Désolé pour mon code posé à la volée, c'est mon 1er post ici et je n'ai pas pris la peine de regarder les balises de mise en forme.
Merci pour ton aide. Effectivement, le bout de code que j'ai posté semble bien fonctionner de manière isolé. Ça doit donc venir d'un problème lié au reste de ma page. Sans doute avec mes div imbriquées et les positions relative et absolute. Ou alors avec le floating.
Je vais donc essayer de reprendre tout ça pas à pas pour voir où ça déconne. Smiley sweatdrop

Encore merci Smiley smile
J'ai résolu mon problème. Celui-ci venait de la position d'un DIV conteneur en relative (contenant d'autres DIV en position absolute). En changeant le relative en absolute, je n'ai plus eu de décalage entre mes "Div" et mes "a".
Je ne comprends pas le pourquoi, mais au moins mon soucis est réglé Smiley smile

Merci à toi Hibou57
Sujet clos
Aller à