Salut,
Je peux vous assurer qu'il y a vraiment très peu de personnes qui utilisent encore IE6,
Si ! Moi
lol
de plus des sites très utilisés comme le site d'orange ne le gère pas correctement non plus.
Quand au problème de résolution, pour l'instant je le résous de cette manière :
J'évalue souvent le sèrieux d'une entreprise sur le rendu de leur site... Si le site foire je cut !
(ceci était un petit apparté lol)
body { width : 2050px; }
En attendant que le site soit finit et que j'essaye de le mettre avec une largeur changeante.
Mais revenons à nos moutons, voici le site en question qui pose problème :
http://citations.ovh.org/rol_rent/
Utilisez le pseudo : ricou
avec le mot de passe : ricou
Je sais, c'est pas très sécurisé, mais c'est provisoire.
Ensuite il faut cliquer sur le premier lien "l'accès aux infos c'est par ici"
et là vous verrez le menu apparaitre avec les pages en dessous et non à coté, sauf si vous
utilisez firefox. Les tableaux ne sont pas trop large pour tenir, j'ai meme essayé en réduisant la
largeur des colonnes mais c'est pareil.
J'ai vérifié tout le css au cas où il reste des bouts de code inutile qui trainent, mais ce n'est pas le cas,
je ne comprend vraiment pas pourquoi ça fonctionne en mettant la balise div et pas la p, mais la div
apportent d'autres problèmes sous ie7.
Bon, on y voit plus clair lol
J'avais dans l'idée que tu utilisais un bloc intitulé menu pour positionner "le menu" puis que le menu,
lui-même, était constitué en liste et les images intégrée en background... Effectivement c'est pas le cas
J'ai la flème de matter le source plus que ca... Aie... Promis je le ferais plus lol
Plus sèrieux et ce sans vouloir t'obliger en aucune façon voici un template qui peut, peut-ête, te rendre
service. Facile à mettre en place, facile à rmettre aux normes et... D'aspect classique mais rigoureux dans
l'utilisation des tags.
Ne pense pas que je veux en retirer des "fleurs" c'est en gros la base d'ou je pars pour écrire un site.
Mets y un doctype, complête le avec ce que tu veux et il sera conforme à la norme w3.
Je tiens à dire que je l'ai testé sous IE6, Opéra, FF et même Lynx lol Juste pour dire qu'il n'est pas très
difficile d'obtenir une compatibilite maximum
Voici la bête: (le résultat peut surprendre mais, bon, suffit de l'habiller avec tes images et couleurs)
<html>
<head>
<title>
MyExemple - M. en P.
</title>
<style type="text/css">
body { text-align:center; }
h1 { margin:0px; padding:0px; }
h2 { margin:0px; padding:0px; }
h3 { margin:0px; padding:0px; }
#mainContainer { width:800px; margin:0px auto 0px auto; padding:0px 0px 0px 0px; text-align:left; }
#bandeau { width:800px; height:30px; text-align:center; background-color:#d0d0d0; color:#000000; }
#menuBloc { float:left; width:150px; }
#menuBloc ul { list-style-type:none; margin:0px; padding:0px; }
#menuBloc ul li { display:block; width:150px; height:165px; }
#menuBloc ul li a { display:block; width:150px; height:165px; text-decoration:none; color:#000000; }
#menuBloc ul li a:hover { color:#cc0000; background-color:#fafafa; text-align:right; }
#menuBloc ul li#choix_01 { background-color:#00d0d0; background:url("./img/img_01.png") no-repeat; background-position:top; }
#menuBloc ul li#choix_02 { background-color:#00d0d0; background:url("./img/img_02.png") no-repeat; background-position:top; }
#menuBloc ul li#choix_03 { background-color:#00d0d0; background:url("./img/img_03.png") no-repeat; background-position:top; }
#menuBloc ul li a span.linkText { display:block; height:10px; padding-top:150px; font-size:12px; font-weight:bold; }
#page { float:left; width:500px; background-color:#ffffff; }
#rightPart { float:right; width:150px; }
#foot { width:800px; font-style:italic; text-align:center; background-color:#cccccc; }
.cleared { visibility:hidden; clear:both; }
</style>
<script langage="javascript">
<!--
onload = function() { alert("Juste en passant..."); };
-->
</script>
</head>
<body>
<div id="mainContainer">
<div id="bandeau">
<h2>Exemple de positions d'éléments hors cadres constitué uniquement de...!</h2>
</div>
<div id="menuBloc">
<ul>
<li id="choix_01">
<a href="./choix_01/index.php" title="Premier choix !"><span class="linkText">1:Simule un tout</span></a>
</li>
<li id="choix_02">
<a href="./choix_02/index.php" title="Deuxieme choix !"><span class="linkText">2:Simule un tout</span></a>
</li>
<li id="choix_03">
<a href="./choix_03/index.php" title="Deuxieme choix !"><span class="linkText">3:Simule un tout</span></a>
</li>
</ul>
</div>
<div id="page">
<h3>La page est ici...</h3>
<br />
Mise en page sur trois colonnes.<br />
Template testée sur les browsers suivants:<br>
<ul>
<li>
IE6, donc compatible +
</li>
<li>
Firefox 3.0.14
<li>
Opéra 8.51
</li>
<li>
Lynx (visible, biensur, de manière texte)
</li>
</ul>
<p>
La pseudo frame de gauche est constituée ainsi:<br />
Block div positionné en float intégrant un menu<br />
en liste dont les liens sont de type block et de dimention 150 x 160.<br />
L'image est un background et en dessous est impleenté une ligne de texte.
</p>
<p>
La pseudo frame du milieu est constituée ainsi:<br />
Block div positionné en float placé à gauche.
</p>
<p>
La pseudo frame de droite est constituée ainsi:<br />
Block div positionné en float placé à droite.
</p>
<p>
Pour que la suite de l'affichage soit correcte il faut intégrer une balise<br />
dont la nature css est clear:both en son sein.
</p>
<p>
Le bas de page est placé de manière classique.
</p>
<p>
Vraiment pas compliqué d'être compatible avec la majorité des browsers<br />
Quelque infos tech, l'idée du design en tête et le reste suit.
</p>
</div>
<div id="rightPart">
Supplément à droite...
</div>
<br class="cleared" />
<div id="foot">
Un simple éditeur texte suffit : Edit.com, vi, emacs... Même Edlin peut suffire, c'est pour dire ;)
</div>
</div>
</body>
</html>
Je continue à suivre le topic, si je suis moins flémard je re-visite ton site et sa source,
@+ bon code
Salut,
[quote="Ricou"]
Je peux vous assurer qu'il y a vraiment très peu de personnes qui utilisent encore IE6,
[/quote]
Si ! Moi :evil: lol
[quote="Ricou"]
de plus des sites très utilisés comme le site d'orange ne le gère pas correctement non plus.
Quand au problème de résolution, pour l'instant je le résous de cette manière :
[/quote]
J'évalue souvent le sèrieux d'une entreprise sur le rendu de leur site... Si le site foire je cut !
(ceci était un petit apparté lol)
[quote="Ricou"]
body { width : 2050px; }
En attendant que le site soit finit et que j'essaye de le mettre avec une largeur changeante.
Mais revenons à nos moutons, voici le site en question qui pose problème :
http://citations.ovh.org/rol_rent/
Utilisez le pseudo : ricou
avec le mot de passe : ricou
Je sais, c'est pas très sécurisé, mais c'est provisoire.
Ensuite il faut cliquer sur le premier lien "l'accès aux infos c'est par ici"
et là vous verrez le menu apparaitre avec les pages en dessous et non à coté, sauf si vous
utilisez firefox. Les tableaux ne sont pas trop large pour tenir, j'ai meme essayé en réduisant la
largeur des colonnes mais c'est pareil.
J'ai vérifié tout le css au cas où il reste des bouts de code inutile qui trainent, mais ce n'est pas le cas,
je ne comprend vraiment pas pourquoi ça fonctionne en mettant la balise div et pas la p, mais la div
apportent d'autres problèmes sous ie7.
[/quote]
Bon, on y voit plus clair lol
J'avais dans l'idée que tu utilisais un bloc intitulé menu pour positionner "le menu" puis que le menu,
lui-même, était constitué en liste et les images intégrée en background... Effectivement c'est pas le cas ;)
J'ai la flème de matter le source plus que ca... Aie... Promis je le ferais plus lol
Plus sèrieux et ce sans vouloir t'obliger en aucune façon voici un template qui peut, peut-ête, te rendre
service. Facile à mettre en place, facile à rmettre aux normes et... D'aspect classique mais rigoureux dans
l'utilisation des tags.
Ne pense pas que je veux en retirer des "fleurs" c'est en gros la base d'ou je pars pour écrire un site.
Mets y un doctype, complête le avec ce que tu veux et il sera conforme à la norme w3.
Je tiens à dire que je l'ai testé sous IE6, Opéra, FF et même Lynx lol Juste pour dire qu'il n'est pas très
difficile d'obtenir une compatibilite maximum ;)
Voici la bête: (le résultat peut surprendre mais, bon, suffit de l'habiller avec tes images et couleurs)
[html]
<html>
<head>
<title>
MyExemple - M. en P.
</title>
<style type="text/css">
body { text-align:center; }
h1 { margin:0px; padding:0px; }
h2 { margin:0px; padding:0px; }
h3 { margin:0px; padding:0px; }
#mainContainer { width:800px; margin:0px auto 0px auto; padding:0px 0px 0px 0px; text-align:left; }
#bandeau { width:800px; height:30px; text-align:center; background-color:#d0d0d0; color:#000000; }
#menuBloc { float:left; width:150px; }
#menuBloc ul { list-style-type:none; margin:0px; padding:0px; }
#menuBloc ul li { display:block; width:150px; height:165px; }
#menuBloc ul li a { display:block; width:150px; height:165px; text-decoration:none; color:#000000; }
#menuBloc ul li a:hover { color:#cc0000; background-color:#fafafa; text-align:right; }
#menuBloc ul li#choix_01 { background-color:#00d0d0; background:url("./img/img_01.png") no-repeat; background-position:top; }
#menuBloc ul li#choix_02 { background-color:#00d0d0; background:url("./img/img_02.png") no-repeat; background-position:top; }
#menuBloc ul li#choix_03 { background-color:#00d0d0; background:url("./img/img_03.png") no-repeat; background-position:top; }
#menuBloc ul li a span.linkText { display:block; height:10px; padding-top:150px; font-size:12px; font-weight:bold; }
#page { float:left; width:500px; background-color:#ffffff; }
#rightPart { float:right; width:150px; }
#foot { width:800px; font-style:italic; text-align:center; background-color:#cccccc; }
.cleared { visibility:hidden; clear:both; }
</style>
<script langage="javascript">
<!--
onload = function() { alert("Juste en passant..."); };
-->
</script>
</head>
<body>
<div id="mainContainer">
<div id="bandeau">
<h2>Exemple de positions d'éléments hors cadres constitué uniquement de...!</h2>
</div>
<div id="menuBloc">
<ul>
<li id="choix_01">
<a href="./choix_01/index.php" title="Premier choix !"><span class="linkText">1:Simule un tout</span></a>
</li>
<li id="choix_02">
<a href="./choix_02/index.php" title="Deuxieme choix !"><span class="linkText">2:Simule un tout</span></a>
</li>
<li id="choix_03">
<a href="./choix_03/index.php" title="Deuxieme choix !"><span class="linkText">3:Simule un tout</span></a>
</li>
</ul>
</div>
<div id="page">
<h3>La page est ici...</h3>
<br />
Mise en page sur trois colonnes.<br />
Template testée sur les browsers suivants:<br>
<ul>
<li>
IE6, donc compatible +
</li>
<li>
Firefox 3.0.14
<li>
Opéra 8.51
</li>
<li>
Lynx (visible, biensur, de manière texte)
</li>
</ul>
<p>
La pseudo frame de gauche est constituée ainsi:<br />
Block div positionné en float intégrant un menu<br />
en liste dont les liens sont de type block et de dimention 150 x 160.<br />
L'image est un background et en dessous est impleenté une ligne de texte.
</p>
<p>
La pseudo frame du milieu est constituée ainsi:<br />
Block div positionné en float placé à gauche.
</p>
<p>
La pseudo frame de droite est constituée ainsi:<br />
Block div positionné en float placé à droite.
</p>
<p>
Pour que la suite de l'affichage soit correcte il faut intégrer une balise<br />
dont la nature css est clear:both en son sein.
</p>
<p>
Le bas de page est placé de manière classique.
</p>
<p>
Vraiment pas compliqué d'être compatible avec la majorité des browsers<br />
Quelque infos tech, l'idée du design en tête et le reste suit.
</p>
</div>
<div id="rightPart">
Supplément à droite...
</div>
<br class="cleared" />
<div id="foot">
Un simple éditeur texte suffit : Edit.com, vi, emacs... Même Edlin peut suffire, c'est pour dire ;)
</div>
</div>
</body>
</html>
[/html]
Je continue à suivre le topic, si je suis moins flémard je re-visite ton site et sa source,
@+ bon code ;)
