Bonjour,
Le css que j'ai fait pour ce visuel est bon sur un écran 15 pouce, mais sur un très
grand écran, les 3 bannières ne sont plus très bien centrées...
Pouvez-vous me donner le css complémentaire pour un centrage des 3 bannières
Et si vous trouvez des erreurs ou maladresse, n'hésitez pas à me le signaler
Merci beaucoup par avance de votre aide.
Je précise qu'il y a des class que je n'ai pas remis en ordre chronologique, ne vous inquiétez donc pas si vous voyez part 3 pour bannière 2 et part 4 pour bannière 3
ceci n'a aucun effet sur le problème exposé, ne vous en souciez pas.
ci-joint le lien de la page d'accueil concernée par le css:
http://piano-solo-romantic.com
Ci-joint, code xhtml et css de la page:
<body>
<div id="en_tete">
<img class="image-extensibleentete" src="francais/images/banniere1noambonnandcombisaccueil.jpg" alt="banniere en-tete du site" />
</div>
<div id="corps">
<object class="lecteurlointain" type="application/x-shockwave-flash" data="francais/musiques/pla...........</object><br /><br />
<div id="drapeau1accueil">
<span class="drapeau">
<img src="francais/images/FRA.GIF" alt="french flag"/></span>
<span style="text-align: center; font-size:60px; font-family: Garamond, Georgia, Arial, serif, Times New Roman; color: #28545D; margin-left: 0%;">Accueil</span>
<span ><a href="anglais/accueil.php"><img src="francais/images/UK.GIF" alt="english flag"/></a></span>
</div><br />
<div id="chiffre">
<img class="chiffre1" src="francais/images/alpha_10_02.gif" alt="chiffre 1"/><br />
<img class="chiffre2" src="francais/images/alpha_10_03.gif" alt="chiffre 2"/><br />
<img class="chiffre3" src="francais/images/alpha_10_04.gif" alt="chiffre 3"/>
</div>
<!--BANNIERE 1-->
<div class="part1">
<div id="survol">
<a href="francais/aproposdenoambonnand/a-propos-de-noam-bonnand.php"></a>
</div>
</div>
<!--BANNIERE 2-->
<div class="part3">
<div id="survol2">
<a href="francais/lesalondecoute/musiqueclassiquepopulaire.php"></a>
</div>
<span class="imgmusiquephonographes">
<img src="francais/images/musiquephonographes.gif" alt="phonographe"/>
</span>
</div>
<!--BANNIERE 3-->
<div class="part4">
<div id="survol3">
<a href="francais/apprendrelepiano/apprendrelepiano.php"></a>
</div>
</div>
</div>
<div id="sous_pied_de_page">
<span><a href="index.php">Accueil</a> <a href="pourquoi_ce_site.php">Pourquoi ce site ?</a> <a href="contact.php">Contact</a> <a href="newsletter.php">Newsletter</a> <a href="remerciements.php">Remerciements</a> <a href="don.php">Don</a></span>
</div><br />
<div id="copyright_realisation">
Noam B © 2010 , tous droits réservés<br />
Membre officiel de la SACEM, Société des auteurs, compositeurs et Editeurs de Musique<br />Concept-design et réalisation du site : Noam B<br />
<a href="
http://www.errorpage.fr/pages_fr/maintenance0.htm "><img style="border: 0" src="francais/images/copyrightfrance.gif" alt="copyright" width="91 px" height="14 px"/></a>
</div>
</body>
</html></code>
CODE CSS
#chiffre
{
float: left;
padding-top: 20px;
padding-bottom: 0px;
width: 60px;
height: 300px;
margin-left: 15px;
margin-right: 0px;
clear: both;
}
.chiffre1
{margin-bottom: 45px;}
.chiffre2
{margin-bottom: 45px;}
.chiffre3
{margin-bottom: 0px;}
/* BANNIERE 1*/
.part1
{
width: 500px;
height: 90px;
margin-left: 16%;
margin-bottom: 20px;
padding: 0;
border: 2px solid white;
}
#survol a
{display:block;width:100%;
height: 90px;
background-image:url("images/fondaccueilpart1.jpg");
background-repeat: no-repeat;
}
#survol a:hover{display:block;width:100%;
height: 90px;
background-image:url("images/fondaccueilpart1bis.jpg");
background-repeat: no-repeat;
}
/* BANNIERE 2 */
.part3
{
width: 500px;
height: 90px;
margin-left: 16%;
text-align: center;
margin-bottom: 20px;
background-repeat: no-repeat;
padding: 0;
border: 2px solid white;
position: relative;
}
#survol2 a {display:block;width:100%;
height: 90px;
background-image:url("images/ririkuku.jpg");
background-repeat: no-repeat;
}
#survol2 a:hover{display:block;width:100%;
height: 90px;
background-image:url("images/ririkukubis.jpg");
background-repeat: no-repeat;
}
.imgmusiquephonographes
{
position: absolute;
left: 0px;
bottom: 0px;
}
/* BANNIERE 3 */
.part4
{
width: 500px;
height: 90px;
margin-left: 16%;
text-align: center;
margin-bottom: 20px;
background-repeat: no-repeat;
padding: 0;
border: 2px solid white;
}
#survol3 a
{display:block;width:100%;
height: 90px;
background-image:url("images/partitionaccueil.jpg");
background-size: 100% 100%;
}
#survol3 a:hover
{display:block;width:100%;
height: 90px;
background-image:url("images/partitionaccueilbis.jpg");
background-size: 100% 100%;
}
Afficher la suite
