Problème de positionnement CSS

doomer2 · 9 Octobre 2004

Bonjour,

Excusez moi, je crois que je me suis trompé en mettant mon msg dans la rubrique accessibilité.

Je suis novice en css et j'essaie d'assembler 4 images pour ne former que mon image final. Je réussis à le faire mais lorsque je redimensionne mon image toutes les images se mettent les unes en dessosu des autres.

Je vous donne mon source xhtml:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link href="accueil.css" rel="stylesheet" type="text/css" />
</head>

<body>
<dic class="conteneur">
<div class="bloc1"></div>
<div class="bloc2"></div>
<div class="bloc3"></div>
<div class="bloc4"></div>
</div>
</body>
</html>

Puis mon source css:
.conteneur {
background-color: white;
height: 600px;
width: 800px;
}
.bloc1 {
background-image:url(images/hautg.jpg);
background-attachment: inherit;
height: 225px;
width: 400px;
float:left;
margin-left: 15px;
margin-top: auto;;
}
.bloc2 {
background-image:url(images/hautd.jpg);
background-attachment:inherit;
height: 225px;
width: 400px;
float:left;
margin-left: 0px;
margin-top: auto;

}
.bloc3 {
background-image:url(images/basg.jpg);
background-attachment:inherit;
height:225px;
width: 400px;
float:left;
margin-left: 15px;
margin-top: auto;;
}

.bloc4 {
background-image:url(images/basd.jpg);
background-attachment:inherit;
height: 225px;
width: 400px;
float:left;
margin-left: 0px;
margin-top: auto;;
}

Si quelq'un à une idée afin que mes 4 images restent fixes avec le redimensionnement et comment rajouter un bloc fixe pour ajouter des liens par rapport à mon image assemblée ?

Merci à tous, j'attends vos réponses et surtout de l'aide

Raphael · 9 Octobre 2004

Je pense que ta première erreur est d'avoir découpé l'image en 4. C'est le raisonnement classique des tableaux et non des CSS.

http://www.alsacreations.com/blog/index.ph...otiques-des-css

Sinon pour placer un bloc fixe au-dessus de ton ou tes images, il faut un positionnement + z-index

Modifié 9 Octobre 2004 par Sibelius

Connexion

Problème de positionnement CSS

Sujets conseillés

doomer2

Raphael

Veuillez vous connecter pour commenter

Parcourir

Activité