problème affichage résolutions d'écrans
Bonjour à toutes et à tous,
Je suis entrain de créer un site web, son graphisme prend toutes la largeur de la page. Afin qu'il soit visible sur toutes les résolutions d'écrans, on m'a conseillé de tout mettre en pourcentage, ce que j'ai donc fait. Cependant l'affichage sur ie8 est catastrophique et l'affichage sur les autres résolutions avec d'autres navigateurs est plutôt moyen. J'ai donc fait des recherches via google mais aucune réponse ou information m'a vraiment aidé quand à faire un site web visible sur toutes les résolutions d'écrans.
Je vous donne donc l'adresse du site où il est hébergé pour le moment pour le tester: http://trentehuitbis.com/arnaud/bellerive-kayak/
Voici donc le code html:
Code:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74
| <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Vichy-Kayak/Sport en eaux vives/sorties kayak en Auvergne-Allier-Vichy/sport d'eaux vives à vichy</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta name="language" content="fr">
<meta name="keywords" content="kayak,kayak vichy, sport vichy," >
<meta name="description" content=" Vichy - Kayak, kanoé-kayak,site officiel de Vichy-Kayak / Sortie Kayak en Auvergne-Allier-vichy / sport / Du sport en Auvergne ? sport d'eaux vives ? c'est au club de Vichy-Kayak" >
<link rel="stylesheet" type="text/css" href="styles.css">
<script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="js/jquery.diaporama.js"></script>
<script type="text/javascript" src="js/script.js"></script>
<!--[if lte IE 8]>
<script type="text/javascript" src="js/roundies.js"> </script>
<![endif]-->
<!--[if lte IE 8]>
<link rel="stylesheet" type="text/css" media="screen" href="styles_ie8.css">
<![endif]-->
<!--[if lte IE 7]>
<link rel="stylesheet" type="text/css" media="screen" href="styles_ie7.css">
<![endif]-->
</head>
<body>
<!--banniere-->
<div><img class="banniere" src="image/logo/logo_kayak.png" alt=""></div>
<!--cadre arrondi centre de la page-->
<div class="corps"></div>
<div><img class="ornement_droite" src="image/ornement_droite.png" alt=""></div>
<div><img class="ornement_gauche" src="image/ornement_gauche.png" alt=""></div>
<!--diaporama jquery-->
<ul class="diaporama">
<li><img src="image/photo_diapo/photo.jpg" class="photo_diapo" alt=""></li>
<li><img src="image/photo_diapo/photo1.jpg" class="photo_diapo" alt=""></li>
<li><img src="image/photo_diapo/photo2.jpg" class="photo_diapo" alt=""></li>
<li><img src="image/photo_diapo/photo3.jpg" class="photo_diapo" alt=""></li>
<li><img src="image/photo_diapo/photo4.jpg" class="photo_diapo" alt=""></li>
<li><img src="image/photo_diapo/photo5.jpg" class="photo_diapo" alt=""></li>
<li><img src="image/photo_diapo/photo6.jpg" class="photo_diapo" alt=""></li>
<li><img src="image/photo_diapo/photo7.jpg" class="photo_diapo" alt=""></li>
<li><img src="image/photo_diapo/photo8.jpg" class="photo_diapo" alt=""></li>
<li><img src="image/photo_diapo/photo9.jpg" class="photo_diapo" alt=""></li>
<li><img src="image/photo_diapo/photo10.jpg" class="photo_diapo" alt=""></li>
</ul>
<!--menu-->
<div><a href="index.html"><img class="menu_accueil" src="image/menu/accueil_noir.png" onmouseover="this.src='image/menu/accueil_vert.png';" onmouseout="this.src='image/menu/accueil_noir.png';" alt=""></a></div>
<div><a href="assos.html"><img class="menu_assos" src="image/menu/assos_noir.png" onmouseover="this.src='image/menu/assos_bleu.png';" onmouseout="this.src='image/menu/assos_noir.png';" alt=""></a></div>
<div><a href="initiation.html"><img class="menu_initiation" src="image/menu/initiation_noir.png" onmouseover="this.src='image/menu/initiation_orange.png';" onmouseout="this.src='image/menu/initiation_noir.png';" alt=""></a></div>
<div><a href="sorties.html"><img class="menu_sortie" src="image/menu/sorties_noir.png" onmouseover="this.src='image/menu/sorties_rouge.png';" onmouseout="this.src='image/menu/sorties_noir.png';" alt=""></a></div>
<div><a href="#"><img class="menu_contacter" src="image/menu/contacter_noir.png" onmouseover="this.src='image/menu/contacter_jaune.png';" onmouseout="this.src='image/menu/contacter_noir.png';" alt=""></a></div>
<div><a href="#"><img class="menu_remerciement" src="image/menu/remerciement_noir.png" onmouseover="this.src='image/menu/remerciement_violet.png';" onmouseout="this.src='image/menu/remerciement_noir.png';" alt=""></a></div>
<!--sous titre-->
<div class="sous_titre">Bienvenue sur le site des kayakistes de Bellerive</div>
<!--paragraphe-->
<div class="paragraphe"><span class="text_gras">Une association de passionnés de kayak</span> créée pour se faire plaisir pagaie à la main...<br><br>
Notre club est en cours d'agrément à la " Direction départementale de la jeunesse et des sports de l'Allier ". Nous sommes en train de préparer
l'acquisition d'un raft afin <span class="text_gras">d'élargir le pannel de nos activités.</span></div>
<div class="paragraphe2">Cela nous permettra de <span class="text_gras">faire découvrir la rivière artificielle de Vichy</span> ainsi que des
rivières naturelles (Isère...) à certains de nos membres ou amis.</div>
<div><img class="paysage" src="image/paysage.jpg" alt=""></div>
<div class="footer">Site Internet créé par Arnaud OLIVIER</div>
<div><img class="herbe" src="image/herbe.png" alt=""></div>
</body>
</html> |
et le code css:
Code:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153
| * { margin:0; padding:0 }
body
{color:#5e5e5b;
font-family:Verdana,Arial,Helvetica,sans-serif;
background-position:top left;
background-color:white;
font-size:62.5%;}
a img
{border:none;}
.banniere
{position:absolute;
left:25%;
top:0.62%;
width:50%;
height:8.75%;}
.corps
{border:2px solid #CECECE;
width:84%;
height:53%;
position:absolute;
left:8%;
top:19%;
background-color:white;
-moz-border-radius:25px;/*firefox*/
-webkit-border-radius:25px;/*safari et chrome*/}
/*diaporama photo*/
.diaporama li
{list-style-type:none;
overflow:hidden;
position:absolute;
left:62.5%;
top:30%;
margin-right:2%;}
.footer
{width:23.4%;
border:1px solid black;
color:black;
text-align:center;
font-size:10px;
font-family:Arial,Verdana,Helvetica,sans-serif;
position:absolute;
left:38.3%;
top:75%;}
.herbe
{position:absolute;
left:0%;
bottom:0%;
height:18.7%;
width:100%;}
/*menu*/
.menu_accueil
{position:absolute;
left:22.5%;
top:11.25%;
width:9%;
height:5%;}
.menu_assos
{position:absolute;
left:32%;
top:11.25%;
width:9%;
height:5%;}
.menu_initiation
{position:absolute;
left:41.4%;
top:11.25%;
width:9%;
height:5%;}
.menu_sortie
{position:absolute;
left:50.8%;
top:11.25%;
width:9%;
height:5%;}
.menu_contacter
{position:absolute;
left:60.19%;
top:11.25%;
width:9%;
height:5%;}
.menu_remerciement
{position:absolute;
left:69.6%;
top:11.25%;
width:9%;
height:5%;}
.ornement_droite
{position:absolute;
right:2.1%;
top:6.2%;
height:18.75%;
width:8%;}
.ornement_gauche
{position:absolute;
left:6.25%;
top:7.5%;
height:18.75%;}
html:first-child .ornement_gauche
{position:absolute;
left:6.25%;
top:6%;
height:18.75%;}
.paragraphe
{position:absolute;
left:16.40%;
top:29%;
font-size:1.4em;
width:39%;
height:5%;
text-align:justify;}
.paragraphe2
{position:absolute;
left:32.8%;
top:52%;
font-size:1.4em;
width:27%;
text-align:justify;}
.paysage
{position:absolute;
left:16.40%;
top:50%;
width:15%;
height:18%;
margin-top:1%;}
.photo_diapo
{width:80%;
height:30%;}
.sous_titre
{position:absolute;
left:19.53%;
top:22%;
border:2px solid #5e5e5b;
padding:0.5%;
font-size:20px;}
.text_gras
{font-weight:bold;} |
J'espère avoir été le plus clair possible et merci par avance de votre aide