Sujet Précédent Sujet Suivant

CSS / div décalée

Fermé
nagadelavega Messages postés 1 Date d'inscription dimanche 29 avril 2012 Statut Membre Dernière intervention 29 avril 2012 - Modifié par nagadelavega le 29/04/2012 à 14:52
powerguitou Messages postés 472 Date d'inscription vendredi 24 juillet 2009 Statut Membre Dernière intervention 29 janvier 2021 - 28 mars 2013 à 11:15
Bonjour,
je suis débutant en css, et rencontre le problème suivant avec ma page:

Je me suis débrouillé pour que les div correspondant à mes deux barres de menu horizontales soient centrées, mais étant débutant, je ne suis pas parvenu à mettre place un positionnement centré de ces deux barres de manière très "académique".

En effet, le centrage attendu ne se produit que sous firefox, et pas sous d'autres navigateurs (notamment Safari, que je n'affectionne d'ailleurs pas particulièrement , mais que certains visiteurs de mon site utilisent; ce sont d'ailleurs eux qui m'ont fait remarquer le problème). Je dois noter qu'avec ma version de safari, je ne rencontre pas ce problème. Des visiteurs m'en ont fait part en me transmettant des captures d'écran

Auriez-vous s'il vous plaît une solution pour que mes 2 barres de menu soient centrées sous la plupart des navigateurs?
Je suis conscient que mon CSS n'est pas très beau à voir, c'est le moins que l'on puisse dire, mais comme je l'ai déjà dit, je suis débutant et suis conscient de la "lourdeur" de mon code. J'ai néanmoins la volonté de progresser et compte sur vous et vos précieux conseils.

En espérant que vous pourrez m'apporter vos lumières
Merci d'avance.

Voici le code de la page web:

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Lorem Ipsum </title>
<link href="maquette.css" rel="stylesheet" type="text/css" />



<!--
<body>
<div id="lefond">


<div id="header">
</div>


<div id="centre_blanc">






<div align="justify">



<div id="haut"> <ul class="menuhaut">

<div align="center">
<li><a href="actualites.html">Actualités</a></li>

<li><a href="chateaux.html">Programmation</a></li>
<li><a href="historique.html">Historique</a></li>
<li><a href="Musiciens.html">Musiciens</a></li>
<li><a href="Memoriam.html">Don de Moelle Osseuse</a></li>
</div>

</ul>

</div>



<!-- Nouveauté: --!>

<style>

div#tst
{
position:relative;

top:100%;
width:100%;
height: 405px;
overflow:auto;
border-width:0pt;
border-style:solid;
}

</style>
<body>
<div id="tst">


















<!-- début du contenu de la page--!>



<div align="center">
<b>

<FONT style="FONT-SIZE:20pt">

Programmation 2012
</font>
</b>
<br>
<br>
</div>

<div align="center">
<FONT style="FONT-SIZE:20pt">7è édition Lorem Ipsum And Lorem Ipsum
<br>
<FONT style="FONT-SIZE:16pt">
<FONT face="Wingdings">


<br>
<br>
<br>
<br>
<FONT style="FONT-SIZE:14pt">




<!--Fin du contenu de la page --!>





<FONT style="FONT-SIZE:20pt">





</div>

<!--Fin de la nouveauté --!>




</div>







<div id="bas"> <ul class="menuhaut">
<div align="center">
<li><a href="reservation.html">Réservations</a></li>
<li><a href="Partenaires.html">Partenaires</a></li>
<li><a href="presse.html">Presse</a></li>
<li><a href="Contacts.html">Contacts</a></li>
</div>
</ul>

</div><br>







</div></td>
<td width="256"><div align="right"></td>
</tr>
<tr valign="top">
<td height="23"> </td>
<td> </td>
</tr>
</table>
</div>



<br>
<br>




</div>






</div>





</body>
</html>
--!>

Et voici le code CSS:







body {

font-family: Baskerville, Verdana, Arial, Helvetica, sans-serif;
font-size: 0.8em;
margin: 0;
padding: 0;
background-color: #000000;


}



a img {

border: 0;
color: #000000;

}

a:link {
color: #FF0000;
text-decoration: none;
}
a:visited {
color: #FF0000;
text-decoration: none;
}
a:hover {
color: #999999;
text-decoration: none;
}
a:active {
text-decoration: none;
}
.Style3 {color: #000000}
.Style5 {color: #9999FF}
.Style6 {color: #000000}


p {
margin: 0 0 10px 0;
font-family: Baskerville, Verdana, Arial, Helvetica, sans-serif;
font-size: 14px;
color: #000000;
}

#header {



height: 100px;
width: 100%;
background-color: #333333;
background-image: url(title_rouge_blanc.jpg);
background-repeat: no-repeat;
background-position: center;


/** background-position: 50% 40%*/

/*
border-top-width: 1px;
border-bottom-width: 1px;


border-top-style: solid;
border-right-style: none;

border-bottom-style: solid;
border-left-style: none;
border-top-color: #000000;
border-bottom-color: #2e7dbd;
*/
}


/************** liens menu haut ***************/
#haut {

/* height: 1%;
width: 550PX;

margin-left: 20%;




padding-top: 1%;
padding-bottom: 1%;
padding-left:4%;
padding-right:1%;
*/




position:relative;
left:18%;
width:48%;

margin-left:7%;
padding-bottom:11px;
padding-top:11px;










background-color:#333333;
border-top-width: 1px;
border-top-color: #2e7dbd;
border-left-width: 1px;
border-left-color: #2e7dbd;
border-right-width: 2px;
border-right-color: #2e7dbd;
border-bottom-width: 1px;
border-bottom-style: solid;
border-top-style: solid;
border-left-style: solid;
border-right-style: solid;
border-bottom-color: #2e7dbd;


/*POSITION BARRE GRISE DE MENU
padding-left: 5%;
padding-right: 5%;
*/

text-decoration: none;
}
#haut a:link {
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
color: #ffffff; /* color: #FFFFFF;*/
font-style: normal;
text-decoration: none;
font-weight: 500;
}
#haut a:visited {
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
font-style: normal;
text-decoration: none;
color: #ffffff;
font-weight: 500;
}
#haut a:hover {
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
font-style: normal;
color: #999999; /* ;*/
text-decoration: none;
font-weight: 500;
}
#haut a:active {
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
font-style: normal;
text-decoration: none;
font-weight: 500;
}

/*HAUT2 */

/************** liens menu BAS ***************/
#bas {
/*position: center;
height: 1%;
width: 450px;
POSITION DU MENU*/
/*left:20%;
width:45%;
margin-left:7%;
*/


position:relative;
left:18%;
width:49%;
margin-left:7%;
padding-bottom:5px;
margin-top: 20px;






/*margin-left:-100px;*/


/* PADDING DE L'INTERIEUR DU MENU HORIZONTAL*/

/*padding-top: 1%;
padding-bottom: 1%;
padding-left:14%;
padding-right:1%;*/

background-color:#333333;
border-top-width: 1px;
border-top-color: #2e7dbd;
border-left-width: 1px;
border-left-color: #2e7dbd;
border-right-width: 2px;
border-right-color: #2e7dbd;
border-bottom-width: 1px;
border-bottom-style: solid;
border-top-style: solid;
border-left-style: solid;
border-right-style: solid;
border-bottom-color: #2e7dbd;


/*POSITION BARRE GRISE DE MENU
padding-left: 5%;
padding-right: 5%;
*/

text-decoration: none;
}
#bas a:link {
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
color: #ffffff; /* color: #FFFFFF;*/
font-style: normal;
text-decoration: none;
font-weight: 500;
}
#bas a:visited {
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
font-style: normal;
text-decoration: none;
color: #ffffff;
font-weight: 500;
}
#bas a:hover {
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
font-style: normal;
color: #999999; /* ;*/
text-decoration: none;
font-weight: 500;
}
#bas a:active {
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
font-style: normal;
text-decoration: none;
font-weight: 500;
}



#lefond {
/***height: 800px OU 100% AVANT MODIF 17.04.12*/
height: 100%;
/***height: 785px width: 1500px; valeur en PX AVANT MODIF 16.04.12*/
width: 100%;
background-color: #333333;

}


/************** ANCIENNE BANNIERE EN CONFLIT AVEC LE CONTENU***************/

#conteneur {


height: 100px;
width: 80%;
/***width: 1300px; valeur en PX AVANT MODIF 16.04.12*/




background-color: #FFFFFF;





border-top-width: 1px;

border-bottom-width: 0px;
border-left-width: 0px;
border-right-width: 1px;


border-top-style: solid;
border-right-style: none;

border-bottom-style: solid;
border-left-style: solid;
border-right-style: solid;
border-top-color: #2e7dbd;
border-left-color: #2e7dbd;
border-right-color: #2e7dbd;
border-bottom-color: #2e7dbd;






}

/************** zone de contenu ***************/
/*LE CADRE GRISATRE DU CONTENU*/
#centre_blanc {

height: 100%;
width: 90%;
margin-left: 3%;



margin-bottom: 15px;


padding-left: 2%;
padding-top: 2%;
padding-bottom: 2%;
padding-right: 2%;


/* MARGIN AVANT MODIF 16.04.12 */
/* margin-left: 200px;
margin-right: 200px;
*/



text-align: justify;
background-color:#d9d9da;





border-top-width: 1px;

border-bottom-width: 1px;
border-left-width: 1px;
border-right-width: 2px;


border-top-style: solid;
border-right-style: none;

border-bottom-style: solid;
border-left-style: solid;
border-right-style: solid;
border-top-color: #2e7dbd;
border-left-color: #2e7dbd;
border-right-color: #2e7dbd;
border-bottom-color: #2e7dbd;


background-position: right center;
background-repeat: no-repeat;
}


.centre_img{


float: right;
margin-top: 37px;
margin-right: 0px;
margin-bottom: 5px;
margin-left: 20px;
padding-top: 0px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 0px;
border: 1px solid #666666;
padding: 0px;
}
#stoppeur{
clear:both
}

/************** zone de contenu alternatif musiciens ***************/
#container_musiciens {

background-color:#d9d9da;
text-align: justify;

}

/************** zone de contenu alternatif musiciens ***************/
#news_box_right {
background-color:#000000;
width: 910px;
margin-right: 100px;
margin-left: 200px;
/*margin-left: 200px;
margin-right: 200px;*/
text-align: justify;

border-top-style: solid;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
background-position: left center;
background-repeat: repeat-y;
/*border-bottom-width: 1px;
border-bottom-color: #000000;
border-top-width: 1px;
border-top-color: #000000;*/

padding: 0px;
}



#container_musiciens_haut {
padding-left: 10px;
padding-top: 10px;
padding-bottom: 10px;
padding-right: 20px;
text-align: justify;

border-top-style: solid;
border-right-style: none;
border-bottom-style: solid;
border-left-style: none;
border-bottom-width: 1px;
border-bottom-color: #333333;
border-top-width: 1px;
border-top-color: #333333;
}
#container_musiciens_centre {
padding-left: 10px;
padding-top: 10px;
padding-bottom: 10px;
padding-right: 20px;
text-align: justify;

border-right-style: none;
border-bottom-style: solid;
border-left-style: none;
border-bottom-width: 1px;
border-bottom-color: #333333;
border-top-width: 1px;
border-top-color: #333333;
}

.centre_img3{
float: left;
margin-top: 5px;
margin-right: 20px;
margin-bottom: 5px;
margin-left: 0px;
border: 1px solid #666666;
padding: 0px;
}

div.spacer {
clear: both;
}

div.float {
float: left;
margin-right: 20px;
border: 1px solid #333333;
margin-top: 20px;
}

div.float p {
text-align: left;
padding-top: 5px;
}

#centre3 a:link {
color:#FF3300;
font-family: Baskerville, Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: bold;
}
#centre3 a:visited {
color:#FF3300;
font-family: Baskerville, Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: bold;
}
#centre3 a:hover {
color:#999999;
font-family: Baskerville, Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: bold;
}
#centre3 a:active {
font-family: Baskerville, Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: bold;
}

/************** pour images page musiciens ***************/


/************** liens zone de contenu ***************/
#centre a:link {
color:#FF3300;
font-family: Baskerville, Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: bold;
}
#centre a:visited {
color:#FF3300;
font-family: Baskerville, Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: bold;
}
#centre a:hover {
color:#999999;
font-family: Baskerville, Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: bold;
}
#centre a:active {
font-family: Baskerville, Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: bold;
}


/*ALIGMENT CONTENU DU MENU VERS LA GAUCHE
text-indent:10px;*/
.menuhaut {
list-style-type: none;
margin: 0;
padding:0;
color: #FFFFFF;
text-indent: 0px;
}
.menuhaut li {
display: inline;
}





.menuhaut a {


margin-left: 1%;
margin-right: 1%;



color: #FFFFFF;
text-decoration: underline;
}
.menuhaut a:hover {
text-decoration: none;
color:#999999;
}


/************** menuhaut2 page d'accueil ***************/
.menuhaut2 {
list-style-type: none;
margin: 0;
padding:0;
color: #FFFFFF;
text-indent: 10px;
}
.menuhaut2 li {
display: ;
}
.menuhaut2 a {
margin: 0 2px;
color: #FFFFFF;
text-decoration: underline;
}
.menuhaut2 a:hover {
text-decoration: none;
color:#999999;
}

/************** .images styles ***************/

.memoriam{
padding: 0 0 0 0;






En vous remerciant par avance pour vos précieux conseils.
Nagadelavega

2 réponses

Réponse 1 / 2
Profil bloqué
28 mars 2013 à 10:20
Salut,

Trop de code pour ma part ^^' as-tu un lien vers ta page ?

0
Réponse 2 / 2
powerguitou Messages postés 472 Date d'inscription vendredi 24 juillet 2009 Statut Membre Dernière intervention 29 janvier 2021 29
Modifié par powerguitou le 28/03/2013 à 11:17
Hello,
essaie cela dans le css du div: 

margin:0 auto 0 auto;

C'est sur que cela aurais été plus simple avec un lien de la page, un petit coup de firebug et affaire régler.
bye
0

Discussions similaires

mon écran d'accueil google chrome est décalé à droite
89pierrot! -
LEZE -

5 réponses
trait horizontal avec du css
tipi75 -
tipi75 -

8 réponses
page google est décalée à droite
bobsaintclair -
Apsali009 -

4 réponses
comment remplacer un #div/0! par une cellule vide
zara70 -
Vaucluse -

3 réponses
Enlever le soulignement sous les liens en HTML/CSS
baissaoui -
baissaoui -

0 réponse