Problème d'affichage

<html>
<head>
<title>U Niolu - Photos</title>
<link href="style_photos.css" rel="stylesheet" type="text/css" />
</head>

<body>


<div id="entete"><a href="index.html"></a></div>

<div id="menu2">
<center><h5><img src="images/puce2.jpg" alt="puce" /> La région</h5></center>
<a href="#">Ou ?</a><br />
<br />
<a href="#">Les villages</a><br />
<br />
<a href="#">Les photos</a><br />
<br />

</div>

<div id="menu">
<center><h5><font color="black"><img src="images/puce2.jpg" alt="puce" /> Communauté</font></h5></center>
<a href="#">Forum</a><br />
<br />
<a href="#">A propos</a><br />
<br />
<a href="contact.html">Contact</a><br />
<br />
</div>

<div id="menu3">
<center><h5><font color="black"><img src="images/puce2.jpg" alt="puce" /> Publicité</font></h5></center>
<a href="#"></a><br />
<br />
<a href="#"></a><br />
<br />
<a href="#"></a><br />
<br />
</div>

<div id="menu4">
<center><h5><img src="images/puce2.jpg" alt="puce" /> L'histoire</h5></center>
<a href="#"></a><br />
<br />
<a href="#"></a><br />
<br />
<a href="#"></a><br />
<br />

</div>

<div id="contenu">
<h5>Voici quelques photos du <em>Niolu</em> :</h5>



            <div class="thumb">
<a href="#">
<img src="images/photos_niolu_hiver/niolu01.jpg" alt="" class="petit" />
<img src="images/photos_niolu_hiver/niolu1.jpg" alt="" class="grand" />
</a><br>

<a href="#">
<img src="images/photos_niolu_hiver/niolu02.jpg" alt="" class="petit" />
<img src="images/photos_niolu_hiver/niolu2.jpg" alt="" class="grand" />
</a><br>

<a href="#">
<img src="images/photos_niolu_hiver/niolu03.jpg" alt=" "class="petit" />
<img src="images/photos_niolu_hiver/niolu3.jpg" alt="" class="grand" />
</a><br>

<a href="#">
<img src="images/photos_niolu_hiver/niolu4.jpg" alt="" class="petit" />
<img src="images/photos_niolu_hiver/niolu04.jpg" alt="" class="grand" />
</a><br>

<a href="#">
<img src="images/photos_niolu_hiver/niolu5.jpg" alt="" class="petit" />
<img src="images/photos_niolu_hiver/niolu05.jpg" alt="" class="grand" />
</a><br>

<a href="#">
<img src="images/photos_niolu_hiver/niolu7.jpg" alt="" class="petit" />
<img src="images/photos_niolu_hiver/niolu07.jpg" alt="" class="grand" />
</a>

<a href="#">
<img src="images/photos_niolu_hiver/niolu8.jpg" alt="" class="petit" />
<img src="images/photos_niolu_hiver/niolu08.jpg" alt="" class="grand" />
</a>

<a href="#">
<img src="images/photos_niolu_hiver/niolu9.jpg" alt="" class="petit" />
<img src="images/photos_niolu_hiver/niolu09.jpg" alt="" class="grand" />
</a>

<a href="#">
<img src="images/photos_niolu_hiver/niolu10.jpg" alt="" class="petit" />
<img src="images/photos_niolu_hiver/niolu010.jpg" alt="" class="grand" />
</a>

<a href="#">
<img src="images/photos_niolu_hiver/niolu11.jpg" alt="" class="petit" />
<img src="images/photos_niolu_hiver/niolu011.jpg" alt="" class="grand" />
</a>

<a href="#">
<img src="images/photos_niolu_hiver/niolu12.jpg" alt="" class="petit" />
<img src="images/photos_niolu_hiver/niolu012.jpg" alt="" class="grand" />
</a>

<a href="#">
<img src="images/photos_niolu_hiver/niolu13.jpg" alt="" class="petit" />
<img src="images/photos_niolu_hiver/niolu013.jpg" alt="" class="grand" />
</a>

<a href="#">
<img src="images/photos_niolu_hiver/niolu14.jpg" alt="" class="petit" />
<img src="images/photos_niolu_hiver/niolu014.jpg" alt="" class="grand" />
</a>

<a href="#">
<img src="images/photos_niolu_hiver/niolu15.jpg" alt="" class="petit" />
<img src="images/photos_niolu_hiver/niolu015.jpg" alt="" class="grand" />
</a>

<a href="#">
<img src="images/photos_niolu_hiver/niolu16.jpg" alt="" class="petit" />
<img src="images/photos_niolu_hiver/niolu016.jpg" alt="" class="grand" />
</a>

<a href="#">
<img src="images/photos_niolu_hiver/niolu17.jpg" alt="" class="petit" />
<img src="images/photos_niolu_hiver/niolu017.jpg" alt="" class="grand" />
</a>

<a href="#">
<img src="images/photos_niolu_hiver/niolu18.jpg" alt="" class="petit" />
<img src="images/photos_niolu_hiver/niolu018.jpg" alt="" class="grand" />
</a>

<a href="#">
<img src="images/photos_niolu_hiver/niolu19.jpg" alt="" class="petit" />
<img src="images/photos_niolu_hiver/niolu019.jpg" alt="" class="grand" />
</a>

</div>

</div>

</body>

</html>

body {
margin:10px; /* Pas d'espacement exterieur */
padding:0px; /* Pas d'espacement interieur */
width: 750px;
font-family:verdana, comic sans ms; /* Police */
color:black; /* Couleur de la police */
background-color:white; /* Fond blanc pour le site */
}
h1 {
margin:0px 0px 15px 0px;
padding:0px;
font-size:28px;
line-height:28px;
font-weight:900;
color:#ccc;
}

img {
border:0px solid black;
}

.thumb {
position:relative;
top:0;
left:0;
}

.thumb a .petit{
margin:0;
text-decoration:none;
border:1px solid black;
}

.thumb a:hover {
background-color:black;
}

.thumb a .grand {
display:block;
position:absolute;
width:0px;
}

.thumb a:hover .grand {
position:absolute;
border:1px solid black;
top:10px;
left:120px;
width:500px;
height:375px;
}

ul /* Ma liste aura des puces en forme de dossiers */
{
list-style-image: url("dossier.png");
}

/* Juste pour améliorer la présentation : */
a
{
color: blue;
text-decoration: none;
}

a:hover
{
text-decoration: underline;
}

p
{
font-size: 11px; /* Paragraphes de 14 pixels */
}

a
{
text-decoration: none; /* Les liens ne seront plus soulignés */
color:#09c;
font-style: none; /* Les liens seront en italique (pourquoi pas ?) */
}
a:hover /* Quand le visiteur pointe sur le lien */
{
text-decoration: none; /* Le lien deviendra souligné quand on pointera dessus */
color:#0D50D8; /* Le lien sera écrit en vert quand on pointera dessus */
}

#entete a {
position:relative;
width:500px; /* On définit la largeur de l'image */
height: 100px; /* On définit la hauteur de l'image */
background-image: url("images/header2.jpg");
float: center;
left:250px;

}

#contenu {
position:absolute;
margin:0px 210px 50px 10px;
padding:10px;
border:1px solid #AEADAD;
background-image: url("");
left:160px;
width: 662px;
right:160px;
top:160px;

}

#menu {
position:absolute;
top:150px;
right:20px;
width:172px;
padding:10px;
background-color:#fff;
border:1px solid #AEADAD;
background-image: url("images/fondmenu.jpg");
line-height:17px;
margin-top: 10px;

voice-family: "\"}\"";
voice-family:inherit;
width:135px;
}

#menu {
color:#09c;
font-size:11px;
text-decoration:none;
font-weight:600;
font-family:verdana, arial, helvetica, sans-serif;
}

#menu2 {
position:absolute;
top:150px;
left:20px;
width:172px;
padding:10px;
background-color:#fff;
border:1px solid #AEADAD;
background-image: url("images/fondmenu.jpg");
line-height:17px;
margin-top: 10px;

voice-family: "\"}\"";
voice-family:inherit;
width:135px;
}

#menu2 a {
color:#09c;
font-size:11px;
text-decoration:none;
font-weight:600;
font-family:verdana, arial, helvetica, sans-serif;
}

#menu3 {
position:absolute;
top:320px;
right:20px;
width:172px;
padding:10px;
background-color:#fff;
border:1px solid #AEADAD;
background-image: url("images/fondmenu.jpg");
line-height:17px;
margin-top: 10px;

voice-family: "\"}\"";
voice-family:inherit;
width:135px;
}

#menu3 {
color:#09c;
font-size:11px;
text-decoration:none;
font-weight:600;
font-family:verdana, arial, helvetica, sans-serif;
}

#menu4 {
position:absolute;
top:320px;
left:20px;
width:172px;
padding:10px;
background-color:#fff;
border:1px solid #AEADAD;
background-image: url("images/fondmenu.jpg");
line-height:17px;
margin-top: 10px;

voice-family: "\"}\"";
voice-family:inherit;
width:135px;
}

#menu4 a {
color:#09c;
font-size:11px;
text-decoration:none;
font-weight:600;
font-family:verdana, arial, helvetica, sans-serif;
}

Vuala

OliV462

23 avril 2006 à 17:29:08

Salut a tous, j'ai dénormes problemes avec mon site, sous IE il s'affiche correctement et sous firefox, bah il s'affiche trop mal. Regardez:

Sous IE

Sous Firefox

Je vois pas le problème o_O

Hawks

23 avril 2006 à 18:33:23

Lut

Moi je vois pas le code....

Sans code on ne pourra pas t'aider

23 avril 2006 à 19:28:13

différent entre IE et firefox

Problème d'affichage

Supprimer

Modérer

Signaler le message aux modérateurs