28173 sujets

CSS et mise en forme, CSS3

Bonjour à tous,

je viens de rajouter un lien image sur un des mes sites et celui se positionne sous ma box centrale! j'ai teste mon site sous IE6 et Firefox.
Voici le lien pour mieux comprendre le probleme: Site (l'image parrainage)

Balise dans mon code html
<div id="parrainage"><a href="parrainage.php"><img src="images/parrainagept.gif"></a></div>


Css pour firefox
.container {
	background-image: url(../images/background_container.gif);
	background-repeat: repeat-y;
	background-position: center top;
	text-align: center;
	font-size:12px;
	position: relative;
	margin-top:0px;
	margin-left: auto;
	margin-bottom: 0px;
	width : 800px;
	min-height:775px;
	margin-right: auto;
	padding-top: 0;
	padding-right: 50px;
	padding-bottom: 0;
	padding-left: 50px;
	vertical-align: top;
	top: 0px;
}
#parrainage{
	margin-top:400px;
	margin-left:-5px;
	width:150px;
	height:150px;
	display:block;
	position:absolute;
}


et mes css pour IE
.container{
height:775px;
}
#parrainage{
	position:absolute;
	margin-top:350px;
	margin-left:-60px;
	width:150px;
	height:150px;
}


merci Smiley smile
Modifié par sanka (12 Dec 2007 - 12:02)
Bonjour sanka,

Dans un premier temps, il conviendrait de valider ton code : Markup Validation Service

Il me semble également que tu devrais revoir certains points sur le positionnement en css, en lisant ceci par exemple, tu n'es pas obligé d'utiliser une div pour positionner une image..."trop de div tue les div" ©Alsacreations ( c'est valable pour l'ensemble de ton code...)

Si tu regardes la structure de la page d'Alsacréations, tu remarqueras par exemple que le menu en haut n'est pas contenu dans une div, et que la structure diffère "un peu" de celle que tu as utiliser :
Pour faire simple, ceci fonctionne parfaitement :

<ul id="menu">
    <li><a href="#">Lien 1</a></li>
    <li><a href="#">Lien 2</a></li>
    <li><a href="#">Lien 3</a></li>
    <li><a href="#">Lien 4</a></li>
  </ul>

-> Lien

A ce propos, où veux-tu positionner cette image ? Si elle doit se trouver dans ton "container" pourquoi la mettre en dehors de celui-ci dans ton code ?... Smiley cligne

Encore un peu de travail Smiley cligne
oki merci pour tes conseils, je vais regarder tout ca et modifier ce qu'il faut!

Pour mon image parrainage, j'aimerai bien qu'elle passe au dessus de mon container car en 1024 elle passe en dessous :s

merci Smiley ravi