Salut à tous,
J'ai un petit problème avec des conteneurs flottants dans IE.
PLutôt que des mots, une simple comparaison entre ce qui marche (Firefox et Opera) et ce qui ne marche pas (IE) permet de comprendre le problème.
Firefox et Opera :
IE :
Pour les coutons "suiv" et "prec", j'ai utilisé un conteneur div en "float: right"
Voici le bout de code html correspondant :
[cpp]
<div id="principal">
<div class="imgnav">
<div class="imgprevious"><a href="/Page_perso/version_php/zen.php?album=test6&image=Image22.jpg" title="Previous Image">« prec</a></div>
<div class="imgnext"><a href="/Page_perso/version_php/zen.php?album=test6&image=Image24.jpg" title="Next Image">suiv »</a></div>
</div>
<div id="gallerytitle">
<h2><span><a href="/Page_perso/version_php/zen.php?page=1" title="Gallery Index">Mes Photos</a>
| <a href="/Page_perso/version_php/zen.php?album=test6&page=1" title="Gallery Index">test6</a>
| </span> Image23</h2>
</div>
<div id="image">
...
[/cpp]
Et le bout de css associé
[cpp]
#image {
text-align: center;
line-height: 0;
}
/* !-- Image navigation --! */
.imgnav {
float: right;
width: 140px;
margin-right: 110px;
text-align: center;
border: 1px #028b00 solid;
background: #dbffd9;
}
.imgnav .imgprevious a, .imgnav .imgnext a {
display: block;
width: 50%;
height: 100%;
float: left;
padding: 4px 0;
font-size: 0.7em;
text-decoration: none;
color: #ef6500;
}
.imgnav .imgprevious a:hover, .imgnav .imgnext a:hover {
background-color: #ffffff;
text-decoration: none;
color: #ef6500;
}
.imgnav .imgprevious a {
float: left;
}
.imgnav .imgnext a {
float: right;
}
/* !-- Title --! */
#gallerytitle {
width: 600px;
margin: auto;
border-bottom: 1px #028b00 solid;
padding-bottom: 14px;
margin-bottom: 12px;
_margin-top: 40px; /* IE Only */
}
h2 {
color: #028b00;
margin-top: 25px;
font-size: 1em;
font-weight: normal;
}
h2 a {
background: #ffffff;
color: #ef6500;
text-decoration: none;
}
h2 a:hover {
border-bottom: 1px #ef6500 solid;
}
[/cpp]
Quelqu'un pourrait-il m'expliquer comment je dois expliquer à IE d'aligner ces boutons "Suiv" et "Prec" avec le titre de la galerie de photo... :/
Merci pour votre aide précieuse
Votre dévoué, marsien
J'ai un petit problème avec des conteneurs flottants dans IE.
PLutôt que des mots, une simple comparaison entre ce qui marche (Firefox et Opera) et ce qui ne marche pas (IE) permet de comprendre le problème.
Firefox et Opera :
Vous devez être connecté pour voir les images.
IE :
Vous devez être connecté pour voir les images.
Pour les coutons "suiv" et "prec", j'ai utilisé un conteneur div en "float: right"
Voici le bout de code html correspondant :
[cpp]
<div id="principal">
<div class="imgnav">
<div class="imgprevious"><a href="/Page_perso/version_php/zen.php?album=test6&image=Image22.jpg" title="Previous Image">« prec</a></div>
<div class="imgnext"><a href="/Page_perso/version_php/zen.php?album=test6&image=Image24.jpg" title="Next Image">suiv »</a></div>
</div>
<div id="gallerytitle">
<h2><span><a href="/Page_perso/version_php/zen.php?page=1" title="Gallery Index">Mes Photos</a>
| <a href="/Page_perso/version_php/zen.php?album=test6&page=1" title="Gallery Index">test6</a>
| </span> Image23</h2>
</div>
<div id="image">
...
[/cpp]
Et le bout de css associé
[cpp]
#image {
text-align: center;
line-height: 0;
}
/* !-- Image navigation --! */
.imgnav {
float: right;
width: 140px;
margin-right: 110px;
text-align: center;
border: 1px #028b00 solid;
background: #dbffd9;
}
.imgnav .imgprevious a, .imgnav .imgnext a {
display: block;
width: 50%;
height: 100%;
float: left;
padding: 4px 0;
font-size: 0.7em;
text-decoration: none;
color: #ef6500;
}
.imgnav .imgprevious a:hover, .imgnav .imgnext a:hover {
background-color: #ffffff;
text-decoration: none;
color: #ef6500;
}
.imgnav .imgprevious a {
float: left;
}
.imgnav .imgnext a {
float: right;
}
/* !-- Title --! */
#gallerytitle {
width: 600px;
margin: auto;
border-bottom: 1px #028b00 solid;
padding-bottom: 14px;
margin-bottom: 12px;
_margin-top: 40px; /* IE Only */
}
h2 {
color: #028b00;
margin-top: 25px;
font-size: 1em;
font-weight: normal;
}
h2 a {
background: #ffffff;
color: #ef6500;
text-decoration: none;
}
h2 a:hover {
border-bottom: 1px #ef6500 solid;
}
[/cpp]
Quelqu'un pourrait-il m'expliquer comment je dois expliquer à IE d'aligner ces boutons "Suiv" et "Prec" avec le titre de la galerie de photo... :/
Merci pour votre aide précieuse
Votre dévoué, marsien