28173 sujets

CSS et mise en forme, CSS3

Album photo +IE6

Bonsoir,

j'ai créé/installé hier trois albums photos sur mon site scolaire (http://www.isj-restauration.com, partie "Actualités", "du lundi 19 au mardi 27 mars: Accueil des élèves du primaire" ).

Tout le site fonctionne actuellement très bien sur tous les navigateurs Smiley biggrin sauf les 3 albums où la mise en page "foire" sur IE6 et inférieurs Smiley decu . L'album passe "en dessous" ...

J'ai encore près de 6 albums à créer et le site va être présenté à la porte ouverte ce samedi (il faut en plus que je trouve le temps de voir le pied de page).

J'ai testé différentes possibilités mais ... rien

Alors si quelqu'un pouvait avoir une p'tite idée, ce serait vraiment bien, très bien Smiley confused

Un grand merci pour les réponses

Pat
Modifié par Bpat (31 May 2007 - 18:41)
Oups, j'ai oublié de vous donner le code, voici la partie HTML[#]:

<!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>
<link href="../album.css" rel="stylesheet" type="text/css" />
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Ecole h&ocirc;teli&egrave;re de l'Institut Saint-Joseph &agrave; Charleroi: album photos des &eacute;l&egrave;ves de la Docherie</title>
<meta name="Keywords" content="&eacute;cole h&ocirc;teli&egrave;re, institut saint-Joseph, hoteliere, saint joseph, charleroi, restauration, album photos, docherie" />
<meta name="Description" content="Ecole h&ocirc;teli&egrave;re de l'Institut Saint-Joseph &agrave; Charleroi: album photos des élèves de l'école primaire de la Docherie" />

<style type="text/css">

.a, .a:visited {color:#000;}
#container {position:relative; width:600px; height:800px; background:#888; border:1px solid #000; margin:10px auto;}
#container b {font-weight:normal; width:600px; text-align:center; position:absolute; bottom:250px; left:0; color:#eee; font-family:Verdana, Arial, Helvetica, sans-serif; letter-spacing:1px; line-height:1.7em; z-index:1;}

a.gallery, a.gallery:visited {display:inline; color:#000; text-decoration:none; border:1px solid #000; width:75px; height:75px; float:left; margin:7px 21px; position:relative; cursor:default;}

a.slidea {background:url(../Images/Actualites/Album_docherie/minh1.gif);}
a.slideb {background:url(../Images/Actualites/Album_docherie/minh2.gif);}
a.slidec {background:url(../Images/Actualites/Album_docherie/minh3.gif);}
a.slided {background:url(../Images/Actualites/Album_docherie/minh4.gif);}
a.slidee {background:url(../Images/Actualites/Album_docherie/minh5.gif);}
a.slidef {background:url(../Images/Actualites/Album_docherie/minh6.gif);}
a.slideg {background:url(../Images/Actualites/Album_docherie/minh7.gif);}
a.slideh {background:url(../Images/Actualites/Album_docherie/minh8.gif);}
a.slidei {background:url(../Images/Actualites/Album_docherie/minh9.gif);}
a.slidej {background:url(../Images/Actualites/Album_docherie/minh10.gif);}
a.slidek {background:url(../Images/Actualites/Album_docherie/minh11.gif);}
a.slidel {background:url(../Images/Actualites/Album_docherie/minh12.gif);}
a.slidem {background:url(../Images/Actualites/Album_docherie/minh13.gif);}
a.sliden {background:url(../Images/Actualites/Album_docherie/minh14.gif);}
a.slideo {background:url(../Images/Actualites/Album_docherie/minh15.gif);}

a.gallery span {visibility:hidden; display:block; position:absolute; width:580px; height:500px; top:189px; left:9px; color:#000; background:#ccc; text-align:center; border:1px solid #fff; font-family:Verdana, Arial, Helvetica, sans-serif; letter-spacing:1px; cursor:default;}

a.slidea span {left:-13px; top:269px;}
a.slideb span {left:-132px; top:269px;}
a.slidec span {left:-251px; top:269px;}
a.slided span {left:-370px; top:269px;}
a.slidee span {left:-489px; top:269px;}
a.slidef span {left:-13px; top:180px;}
a.slideg span {left:-132px; top:180px;}
a.slideh span {left:-251px; top:180px;}
a.slidei span {left:-370px; top:180px;}
a.slidej span {left:-489px; top:180px;}
a.slidek span {left:-13px; top:89px;}
a.slidel span {left:-132px; top:89px;}
a.slidem span {left:-251px; top:89px;}
a.sliden span {left:-370px; top:89px;}
a.slideo span {left:-489px; top:89px;}

a.gallery:hover {white-space:normal; border:1px solid #fff; z-index:100;}

a.gallery:hover span {visibility:visible; z-index:100;}

a.gallery:hover span img {margin:10px; border:1px solid #000; position:relative; z-index:100;}

a.gallery:active, a.gallery:focus {border:1px solid #c00; z-index:10;}

a.gallery:active span, a.gallery:focus span {visibility:visible; z-index:10;}

a.gallery:active span img, a.gallery:focus span img {border:1px solid #000; position:relative; margin:10px; z-index:10;}



</style>

</head>
<body>
<div id="global">
	<div class="entete"></div>
		<div class="contenu">
			<div class="menu">
			<ul>
				<li><a href="../default.html">Accueil</a></li>
				<li><a href="../Formations/GrilleCours.html">Formations</a></li>
				<li><a href="../Inscriptions/Reglement.html">Inscriptions</a></li>
				<li><a href="../Restaurant/Presentation.html">Restaurant</a></li>
				<li><a href="InformationsPratiques.html">Actualités</a></li>
				<li><a href="../Liens/Liens.html">Liens</a></li>
			</ul>
			</div>
	<div class="menuV">
		<ul>
			<li><a href="ephemerides.html">Ephémérides</a></li>
			<li><a href="InformationsPratiques.html"> Informations pratiques</a></li>
			<li><a href="Presse.html">Presse</a></li>
		</ul>
		<h4>Actualités culinaires</h4>
				<div align="center"><a href="../Actualites/InformationsPratiques.html">A vos agendas !</a></div>
					<div align="center">
					<a href="../Actualites/InformationsPratiques.html"><img src="../Images/Actualites/dailyplanner_writing_md_wht.gif" alt="Actualit&eacute;s culinaires" width="130" height="80" border="0" /></a></div>
				<h4>Recettes</h4>
				<div align="center"><a href="../Restaurant/Recettes.html">Nous vous proposons ...</a></div>
				<div align="center">
				<a href="../Restaurant/Recettes.html"><img src="../Images/Restaurant/gas_plat11.gif" alt="Recettes" border="0"/></a></div>
				<p>&nbsp;</p>
				<p>
    <a href="http://validator.w3.org/check?uri=referer"><img
        src="http://www.w3.org/Icons/valid-xhtml10"
        alt="Valid XHTML 1.0 Transitional" height="21" width="60" border="0" /></a>
  </p>

	</div>
			<div class="centre">
			<h1>ALBUM PHOTOS:<br/> <u>élèves de l'école primaire de la Docherie</u></h1>
			<div id="showcase">
			<div id="container">
			<b>Photos des élèves<br/> de l'école de la Docherie</b>
<a class="gallery slidea" href="#nogo"><span><img src="../Images/Actualites/Album_docherie/grdh1.gif" alt="noms" /><br />Noms:</span></a>

<a class="gallery slideb" href="#nogo"><span><img src="../Images/Actualites/Album_docherie/grdh2.gif" alt="noms" /><br />Noms:</span></a>

<a class="gallery slidec" href="#nogo"><span><img src="../Images/Actualites/Album_docherie/grdh3.gif" alt="Noms" /><br />Noms:</span></a>

<a class="gallery slided" href="#nogo"><span><img src="../Images/Actualites/Album_docherie/grdh4.gif" alt="Noms" /><br />Noms:</span></a>

<a class="gallery slidee" href="#nogo"><span><img src="../Images/Actualites/Album_docherie/grdh5.gif" alt="Noms" /><br />Noms:</span></a>

<a class="gallery slidef" href="#nogo"><span><img src="../Images/Actualites/Album_docherie/grdh6.gif" alt="Noms" /><br />Noms:</span></a>

<a class="gallery slideg" href="#nogo"><span><img src="../Images/Actualites/Album_docherie/grdh7.gif" alt="Noms" /><br />Noms:</span></a>

<a class="gallery slideh" href="#nogo"><span><img src="../Images/Actualites/Album_docherie/grdh8.gif" alt="Noms" /><br />Noms:</span></a>

<a class="gallery slidei" href="#nogo"><span><img src="../Images/Actualites/Album_docherie/grdh9.gif" alt="Noms" /><br />Noms:</span></a>

<a class="gallery slidej" href="#nogo"><span><img src="../Images/Actualites/Album_docherie/grdh10.gif" alt="Noms" /><br />Noms:</span></a>

<a class="gallery slidek" href="#nogo"><span><img src="../Images/Actualites/Album_docherie/grdh11.gif" alt="Noms" /><br />Noms:</span></a>

<a class="gallery slidel" href="#nogo"><span><img src="../Images/Actualites/Album_docherie/grdh12.gif" alt="Noms" /><br />Noms:</span></a>

<a class="gallery slidem" href="#nogo"><span><img src="../Images/Actualites/Album_docherie/grdh13.gif" alt="Noms" /><br />Noms:</span></a>

<a class="gallery sliden" href="#nogo"><span><img src="../Images/Actualites/Album_docherie/grdh14.gif" alt="Noms" /><br />Noms:</span></a>

<a class="gallery slideo" href="#nogo"><span><img src="../Images/Actualites/Album_docherie/grdh15.gif" alt="Noms" /><br />Noms:</span></a>
</div>
<p style="text-align:right;"><a href="../Actualites/primaires.html">Retour</a></p>
			</div>
			
			</div>
		</div>
<div class="pied">Copyrights &copy; 2007 | <a style="text-decoration:none"href="mailto:Bpat@skynet.be">Webmaster</a>  |  Tous droits réservés | <a style="text-decoration:none"href="../Inscriptions/NousEcrire.html">Contacts</a></div>
</div>
</body>
</html>


et le CSS:

h1           {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 15pt;
	font-weight: normal;
	color: #3333CC;
	text-align: center;
	padding-top: 25px;
	padding-bottom: 25px;
}
h2  {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 13pt;
	font-weight: normal;
	text-align:justify;
}
h3  { 
	font-family:Verdana, Arial, Helvetica, sans-serif; 
	font-size: 11pt }
h4{
	font-family: Eurostile, "Times New Roman", sans-serif;
	font-size: 12pt;
	text-align:center;
	background-color: #3366FF;
	color:white;
}
h5{
	font-family: Eurostile, "Times New Roman", sans-serif;
	font-size: 12pt;
	margin-left: 10px
}
h6{
	text-align:center;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size:12px;
	font-style:normal;
}
body{
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 11px;
	height: 100%;
	margin:0;
	padding:0;
	color:black;
	background-color:white;
	background-position: center top;
}
p, li {
	text-align: justify;
}
div#global {
	height: 100%;
	width: 801px;
	padding: 0 10px;
	margin: 0 auto;
	position: relative;
	border-right-width: thin;
	border-left-width: thin;
	border-right-style: solid;
	border-left-style: solid;
	border-right-color: #cdcdcd;
	border-left-color: #cdcdcd;
}
.entete{
	background-image:url(Images/BanniereHaut.jpg);
	background-repeat:no-repeat;
	height:100px;
	border-bottom-width: thin;
	border-bottom-style: solid;
	border-bottom-color: #000000;
}
.contenu{
	display:table-cell;
	height:100%;
	padding-bottom: 50px;
	}
.menu{
	margin: 0;
	padding: 0;
	list-style: none;
	width: 100%;
	height: 25px;
	color: #000000;
}
.menu li {
	float: left;
	width: 120px;
	margin-right: 1px;
	background-color: #FFFFFF;
	font-family: Eurostile, "Times New Roman", sans-serif;
	font-size: 12px;
	text-decoration: none;
	font-weight: bold;
	border-bottom-width: thin;
	border-bottom-style: solid;
	border-bottom-color: #000000;
	list-style-type:none;

}
.menu li a {
	display: block;
	color: #000000;
	line-height: normal;
	padding: 4px 0;
	text-align: center;
	background-color: #FFFFFF;
	font-family: Eurostile;
	font-size: 12px;
	text-decoration: none;
	}
.menu li a:hover, .menu li a:focus, .menu li a:active {
	font-family: Eurostile, "Times New Roman", sans-serif;
	font-style: italic;
	}
.centre{
	display:table-cell;
	height:100%;
	border-left-width: thin;
	border-left-style: solid;
	border-left-color: #cdcdcd;
	padding-left: 10px;
}
.pied{
	text-align:center;
	position: absolute;
	width: 800px;
	bottom: 0;
	background-color:#cdcdcd;
	height:10px;
	margin: auto;
}
.menuV {
	display:table-cell;
	background-color:#FFFFFF;
	width:150px;
	font-family: Eurostile, "Times New Roman", sans-serif;
	font-size: 12px;
	color: #000000;
	text-decoration: none;
	float: left;
	padding-right: 8px;
}
.menuV a {
	color:#000000;
	text-decoration:none;
	font-family: Eurostile, "Times New Roman", sans-serif;
	font-size: 12px;
	font-weight: bold;
}
.menuV ul{
	list-style-type:none;
	margin:auto;
	padding:0;
	color:#000000;
}
.menuV li {
	padding:10px;
	line-height:40px;
	font-family: Eurostile, "Times New Roman", sans-serif;
	font-size: 12px;
	color: #000000;
	text-decoration: none;
	}
.menuV li a:hover, .menu li a:focus, .menu li a:active {
	font-family: Eurostile, "Times New Roman", sans-serif;
	font-style: italic;
	text-decoration: none;
	color: #000000;
	}

#showcase {clear:both; width:640px; background:cdcd; height:auto;}


Merci d'avance
Modifié par Bpat (01 Jun 2007 - 15:27)
Bon, je ne sais pas que j'ai fichu mais les albums marchent de moins en moins sur les navigateurs Smiley confused

Opéra éjecte l'abum en dessus et Netscape ouvre les grandes fenêtres n'importe où Smiley fache
Modifié par Bpat (02 Jun 2007 - 22:42)
Sujet clos
Aller à