Bonjour à tous,
Voilà je cherche depuis quelques jours comment régler un problème de mise en page sur un site et je n'arrive pas à le résoudre.
Un peut comme d'habitude tout marche bien sous Safari et Firefox (pc et Mac) cependant IE fait des siennes et je trouve le problème assez étrange.
Sous IE les petites box de la partie centrale posent un problème. La première box est constamment plus petite que les autres. Pas de problème sous les autres logiciels.
Merci pour votre aide
Modifié par perko (03 Mar 2008 - 10:13)
Voilà je cherche depuis quelques jours comment régler un problème de mise en page sur un site et je n'arrive pas à le résoudre.
Un peut comme d'habitude tout marche bien sous Safari et Firefox (pc et Mac) cependant IE fait des siennes et je trouve le problème assez étrange.
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style media="all" type="text/css">
/* MISE EN PAGE */
* { padding: 0; margin: 0; }
body {
font-size: 100%; /* Autorise le redimensionnement de texte pour MSIE */
font-family: "Trebuchet MS", Arial, sans-serif;
background-color: #dad9da;
}
html > body {
font-size: 16px; /* Pour les autres navigateurs */
}
#wrapper {
margin: 0 auto;
width: 64.5em;
}
#header {
color: #333;
width: 100%;
height: 8.56em;
float: left;
position:relative;
/*background: url(images/bandeau.jpg) no-repeat;*/
}
#img_header {
width: 100%;
height: 8.56em;
position:absolute;
}
#pubflash {
color: #333;
width: 10em;
height: 3em;
font-size: 1em;
text-align: right;
position:absolute;
left: 53em;
}
#dewplayer {
width: 6.25em;
height: 1.5em;
font-size: 1em;
}
#leftcolumn {
width: 11em;
float: left;
}
#content {
float: left;
width: 40.5em;
margin-left: 0.4%;
}
#rightcolumn {
width: 11em;
float: right;
}
#footer {
width: 100%;
clear: both;
color: #333;
text-align: center;
margin: auto;
}
#footer hr {
width: 40.5em;
height: 1px;
color: #A593A4;
background-color: #A593A4;
border: 0;
margin: auto;
}
#box_selection {
width: 40.24em;
background-color: #bbc7d7;
border-right: 0.12em solid #9fa8b7;
border-left: 0.12em solid #9fa8b7;
}
#box_selection_albums {
color: #320034;
height: 9.1em;
width: 8em;
padding-top: 0.7em;
text-align: center;
background-color: #fff;
margin-left: 0.65em;
margin-bottom: 0.4em;
float: left;
margin-top: 0.4em;
}
#box_selection_albums h2{
font-size: 0.8em;
font-weight: bold;
}
#box_selection_albums h3{
font-size: 0.7em;
font-weight: bold;
}
#img_cadre_selection_haut {
width: 40.5em;
height: 1em;
}
#img_cadre_selection_bas {
width: 100%;
height: 1em;
clear: both;
}
</style>
</head>
<body>
<!-- Begin Wrapper -->
<div id="wrapper">
<!-- Begin Header -->
<div id="header">
</div>
<!-- End Header -->
<!-- Begin Left Column -->
<div id="leftcolumn">
<div id="img_selection">
</div>
<div id="menugauche">
<div id="img_menuh"></div>
<ul class="menugauche">
<li><a href="index.php?page=categorie&style=Chanson française" target="_self">Chanson française</a></li>
<li><a href="index.php?page=categorie&style=Fanfare" target="_self">Fanfare</a></li>
<li><a href="index.php?page=categorie&style=Fusion" target="_self">Fusion</a></li>
<li><a href="index.php?page=categorie&style=Gospel" target="_self">Gospel</a></li>
<li><a href="index.php?page=categorie&style=Hip-Hop / Rap" target="_self">Hip-Hop / Rap</a></li>
<li><a href="index.php?page=categorie&style=Jazz" target="_self">Jazz</a></li>
<li><a href="index.php?page=categorie&style=Musique éléctronique" target="_self">Musique éléctronique</a></li>
<li><a href="index.php?page=categorie&style=Musique du monde" target="_self">Musique du monde</a></li>
<li><a href="index.php?page=categorie&style=Pop Rock" target="_self">Pop Rock</a></li>
<li><a href="index.php?page=categorie&style=Reggae" target="_self">Reggae</a></li>
<li><a href="index.php?page=categorie&style=Rock" target="_self">Rock</a></li>
<li><a href="index.php?page=categorie&style=Ska" target="_self">Ska</a></li>
<li><a href="index.php?page=categorie&style=Trip hop" target="_self">Trip hop</a></li>
<li><a href="index.php?page=categorie&style=Variétés" target="_self">Variétés</a></li>
</ul>
<div><img id="img_menub" src="images/basmenu.jpg" alt="" /></div>
</div>
</div>
<!-- End Left Column -->
<!-- Begin Content Column -->
<div id="content">
<div id="img_cadre_selection_haut">
<img name="jaquette" alt="cadre selection haut" id="img_cadre_selection_haut" src="images/cadre_selection_haut.jpg" border="0"/>
</div>
<div id="box_selection">
<div id="box_selection_albums">
<a href="#"><img name="jaquette" alt="Afficher l'album : Cafard Na HOmmes " id="jaquette_cd_selection" src="../image.php?id=MUSPLACCAFA1195663805" border="0"/></a>
<h2>Place Des Arts</h2>
<h3>Cafard Na HOmmes<h3>
</div>
<div id="box_selection_albums">
<a href="#"><img name="jaquette" alt="Afficher l'album : De La Meme Espece " id="jaquette_cd_selection" src="../image.php?id=MUSALSIDELA1195813937" border="0"/></a>
<h2>Alsina</h2>
<h3>De La Meme Espece<h3>
</div>
</div>
<div id="img_cadre_selection_bas">
<img name="jaquette" alt="cadre selection bas" id="img_cadre_selection_bas" src="images/cadre_selection_bas.jpg" border="0"/>
</div>
</div>
<!-- End Content Column -->
<!-- Begin Right Column -->
<div id="rightcolumn">
</div>
<!-- End Right Column -->
<!-- Begin Footer -->
<div id="footer">
<p><hr /></p>
</div>
<!-- End Footer -->
</div>
<!-- End Wrapper -->
</body>
</html>
Sous IE les petites box de la partie centrale posent un problème. La première box est constamment plus petite que les autres. Pas de problème sous les autres logiciels.
Merci pour votre aide
Modifié par perko (03 Mar 2008 - 10:13)
