28221 sujets

CSS et mise en forme, CSS3

Display block et IE avec href qui foire.

Re coucou,

Bon commençons par expliquer simplement : Je veux faire un menu à base d'image cliquables et ayant des liens différents. Comme par hasard, sous Firefox, c'est le bonheur, mais sous IE, c'est déjà moins drôle.

Pour cela, j'utilise un 1er div pour faire une image de fond repetée, et par dessus, j'ajoute mes href id=... je mets bien sûr la propriété display:block. Je vous laisse juger le code. Vous avez une autre idée ?

Pour mieux comprendre, j'ai édité le #entrer avec un fond rouge. Sous IE, il se présente comme très très gros, ne respectant pas les dimmensions demandées.

Voici mon CSS

* {
	padding: 0px;
	margin: 0px;
	text-decoration: none;
}

/* Structure */

body {
	background-color: #F8EFE3;
}

#conteneur {
	position: absolute;
	background-color: #FDFEF8;
	border: 1px dotted black;
	height: 476px;
	width: 630px;
	top: 50%;
	left: 50%;
	margin-left: -315px;
	margin-top: -238px;
	
}

#edito {
	float: left;
	left: 0px;
	width: 310px;
	height: 426px;
	border-right: 1px dotted black;
}

#liens {
	background-image: url(images/acc_fondmenu.jpg);
	background-repeat: repeat-x;
	height: 50px;
}

#entrer {
	display:block;
	background-image:url(images/acc_entrer.gif);
	background-color:#FF0000;
	height: 44px;
	width: 41px;
	margin: 3px 10px 3px 10px;
	background-repeat: no-repeat;
}

/* Ecritures */

p {
	text-align:justify;
	font:Verdana, Arial, Helvetica, sans-serif;
	font-size:10px;
	padding: 5px;
	text-decoration: none;
}


Mon code html

<body>
<div id="conteneur">
	<div id="liens">
		<a href="http://www.gplays.com" TITLE="Entrer sur GPlayS.com" id="entrer"</a>
	</div>
	<div id="edito">
		<p class="edito-titre">ici le titre de l'edito</p>
		<p class="edito-content">du texte</p>
	</div>
</div>
</body>


On a donc un conteneur centré, dans lequel je veux placer 3 divs : un en haut, un à gauche, et un à droite. C'est bien sûr dans celui du haut (#liens) que je veux placer mes images dans une suite horizontale. la yen a qu'une mais déjà, ça foire avec IE.
Modifié le 17 Jan 2005 - 16:38
J'ai fais une recherche avec display et href mais il n'y a rien sur le forum.
Vraiment, ce que je ne comprends pas c'est que sous firefox, ca fonctionne parfaitement, alors que sous IE le display: block; (du moins je suppose, mais ca ne peut être que lui) fait un gros bloc et décale tout le reste.

J'ai vu aussi dans les propriétés de display qu'elle n'est pas toujours très bien gérée par tous les navigateurs. Visiblement, là c'est mon cas.

j'ai donc essayé de changer de méthode avec des <li> en display: inline, mais le résultat ne semble pas convaincant, puisque l'image de fond n'est pas affichée entièrement malgrè une définition du width et du height. Elle ne s'affiche qu'avec du texte, quand il est présent, qui plus est.

Quelques liens pour aider ? une réponse ? une diée ? Smiley sweatdrop
Sujet clos
Aller à