Salut krystof
juste un pti post pour te dire que l'affichage n'est en effet pas le même sous IE et les autres naviguateurs pour certains éléments - ce qui est fort régrétable!!
Par exemple, pour un div de 250px de large avec pour attribut css une bordure de 2px, IE t'affiche un div de 250px de large avec la bordure à l'intérieur, alors que la norme (respectée par firefox) est d'afficher le div de 250px + 2px de bordure à l'extérieur du div, soit 252px en tout. En fait c'est IE qui respecte le moins les standarts mais c'est lui qui reste le plus utilisé, il faut donc trouvé un compromis entre ce qu'on veut faire et ce qui est interprété différement sur les naviguateurs, ou s'intéresser de près aux méthodes pour contourner les bug de IE.
Sinon pour ton site, il y a 2 méthodes:
-soit tu fais un tableau où chaque cellule contient une image de fond +textes et liens (méthode "à l'ancienne" mais assez simple);
-soit tu crées un bloc div par ligne, qui contiendra lui meme 3 sous-blocs(3 div) avec pour chacun un attribut de style 'background-image:url(répertoire/tonImage.xxx);' qui lui donnera sa dimension. A la base les div se positionnent les un au dessous des autres, donc tu appliques un attribut 'float:left;' aux 2 derniers de chaque ligne pour qu'ils se positionnent les uns à coté des autres...
Un petit exemple (qui d'ailleurs n'est pas débuger pour IE !
):
Code : Tout sélectionner
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Document sans nom</title>
<style>
#ligne1{
background-color:#CC0033;
border:1px #CC0033 solid;
width:920px;
height:100px;
}
#bloc1{
background-color:#CCFF33;
width:300px;
float:left;
margin-right:10px;
}
#bloc2{
background-color:#CCFF33;
width:300px;
float:left;
margin-right:10px;
}
#bloc3{
background-color:#CCFF33;
width:300px;
float:left;
}
</style>
</head>
<body>
<div id="ligne1">
<div id="bloc1">
<a href="#">lien 1</a>
<h1>blabla bla bla</h1>
</div>
<div id="bloc2">
<a href="#">lien 2</a>
<h1>blabla bla bla</h1>
</div>
<div id="bloc3">
<a href="#">lien 3</a>
<h1>blabla bla bla</h1>
</div>
</div>
</body>
</html>
C'est juste pour te montrer une structure possible. Pour ta page, tu vires les styles de #ligne1; pour bloc1,2,3 tu gardes juste les float et eventuellement les marges, tu remplaces background-color:..; par background-image:...; ce qui donnera leur dimmension au bloc. Etc etc...
Une bonne intro à tout ca:
http://www.siteduzero.com
Courage c'est plus simple que ca en a l'air!!
http://thomas.hicke.free.fr
Message envoyé avec : Mozilla/5.0 (Windows; U; Windows NT 5.1; fr; rv:1.8.0.11) Gecko/20070312 Firefox/1.5.0.11
:
