28173 sujets

CSS et mise en forme, CSS3

Aide pour pb de résolution

Bonjour,

Je viens de me rendre compte que tout était décalé sur mon site quand je changeais la résolution. Comment faire? J'ai essayé en mettant des pourcentage là ou j'avais pis des pixels, et le décalage diffère mais est toujours présent.

Voici une page test :

<body>
<div class="fond">
	<a href="index.php"><div class="haut2"></div></a>
	
	<div class="b3">
	 <h4>A savoir</h4>
	 <p class="gauche">test</p>
	</div>
	
	<?php include 'includes/menu.php'; ?>
	
	<div class="b4">
	 <h1>Exp&eacute;rience</h1>
	 <p>test</p>
	 <br />
	</div>
	
  	<div class="b5">
	 <h1>TEST</h1><br /><br />
	</div> 
	<!-- fin classe b5 -->
</div> <!--fin fond -->
</body>


et voici le css :

body{
text-align:center;
font-family: Geneva, Arial, Helvetica, sans-serif;
font-size:100%;
font-size:0.8em;
behavior:url(csshover.htc);
}
.fond{
background-image:url(violet.gif);
background-position:center center;
background-repeat:repeat-y;
background-attachment: fixed; /* ajout pour Opera */
height:1180px;
}

*{
margin:0;
padding:0;
}
.haut2{
width:648px;
margin-left:auto;
margin-right:auto;
background-position:center;
background-repeat:no-repeat;
height:210px;
background-image:url(Hautnuage.jpg);
}
h1, h4{
font-size:1em;
font-weight:bold;
border-bottom-style:solid;
border-bottom-color:#FFFFFF;
border-bottom-width:2px;
width:250px;
margin-bottom:10px;
margin-top:10px;
}
h4{
width:150px;
text-align:left;
}
h3{
font-size:1em;
font-weight:bold;
font-style:italic;
margin-bottom:10px;
margin-top:10px;
color:#826395;
}
.b3{
z-index:1;
position:absolute;
left: 62%;
top: 45%;
padding-left:10px;
padding-right:10px;
padding-bottom:8px;
background-color:#DDD6DE;
width: 17%;
height: 157px;
border-style:solid;
border-color:#FFFFFF;
border-width:1px;
}
p{
text-align:justify;
}
.gauche{
text-align:left;
}
.b4{
z-index:1;
position:absolute;
padding-left:5px;
padding-right:5px;
padding-bottom:5px;
background-color:#DDD6DE;
left: 19%;
top: 45%;
width: 40%;
text-align:justify;
height: 160px;
border-style:solid;
border-color:#FFFFFF;
border-width:1px;
}
.b5{
position:absolute;
background-color:#DDD6DE;
text-align:justify;
left: 19%;
top: 80%;
width: 61.5%;
padding-top:5px;
border-style:solid;
border-color:#FFFFFF;
border-width:1px;
padding-left:5px;
}


Merci d'avance pour votre aide, j'en ai bien besoin !
Sujet clos
Aller à