5568 sujets

Sémantique web et HTML

[Résolu] Petit probléme avec mise en page sous IE

Pages :
Bon soir !
Voilà j'ai refais tout mon site en CSS, et voici le résultat : Cliquez !!

Mais j'ai un dernier petit probléme, en assemblant tout ça avec des tables ( Oui car en CSS je n'ai pas encore réussi à le faire ), sous Firefox le résultat est parfait... Mais sous IE, il y a un espace entre le haut et le menus sur le coté ( En fait toute la cellule centrale... ) D'où peut venir le probléme ? Mes feuilles de style ?
Merci pour votre aide !
Modifié le 11 Dec 2004 - 22:46
Bonjour Steuf et bienvenue sur le Forum Alsacréations ! Smiley lol

Comme tu l'as sans doute remarqué, ce forum se veut un lieu d'échange sur les standards, l'accessibilité, la sémantique etc...

Un des objectifs est de promouvoir les bonnes pratiques dans la communauté des concepteurs de sites Web francophones.

Malheureusement, la mise en page tableau va à l'encontre des principes évoqués ici. Je dois donc te diriger vers une ressource plus adapté à ta question. Il y a des liens vers différents forums en bas de page. Tu y trouveras sans doute ton bonheur. Smiley cligne

Si tu veux te mettre aux standards, il y a de bons tutoriels ici.
Tu pourras y apprendre comment faire une mise en page sans tableau. Smiley smile
http://www.alsacreations.com/articles/

Lire aussi :
http://www.cybercodeur.net/weblog/presentations/seybold/index.html
http://openweb.eu.org/articles/problemes_tableaux/

Bonne lecture ! Smiley lol
Modifié le 11 Dec 2004 - 06:34
Bon en fait faire une mise en page en CSS j'y arrive sans probléme, comme vous pouvez le voir ici : Exemple que je test
Cela fonctionne parfaitement sous Firefox, mais sous IE c'est la catastrophe ! ( Qui a dit qu'IE était un bon navigateur Smiley biggol ).
En fait je me suis largement basé sur cette exemple : La mise en page que j'ai trouvé !
Mais j'ai dù le modifier ( Oui car j'ai esssayé de l'appliquer y'a deux mois, ne connaissant pas trop le css je n'étais pas arrivé à mes fins ) en utilisant des float, car vous utilisez des position:absolute et de ce fait, lorsque le centre est moins long que les menus, le fooder passe à travers le menu, et moi je veux qu'il s'arrête au menu... D'où l'utilisation de float:left et right pour les menus. Mais sous IE ça passe pas... Donc si vous pouviez m'aider car ce Navigateur commence sérieusement à me Smiley fache , car dépuis hier il ne fait que m' Smiley bawling ...
Merci pour votre coup de pouce !

CSS :
#header {
width: 100%;
}
#conteneur {
width: 100%;
}
#centre {
margin-left:114px;
margin-right:116px;
}
#gauche {
float:left;
left:0;
width: 113px;
}
#droite {
float:right;
right:0;
width: 115px;
}
#pied {
width:100%;
}


Hmtl :
<div id="conteneur">

	  <div id="header"><?php include("header.php");?>
      </div>

	  <div id="gauche"><?php include("gauche.php");?>
	  </div>
	  
	  <div id="droite"><?php include("droite.php");?>
	  </div>
	   
  	  <div id="centre"><?php include("milieu.php");?>
  	  </div>
	  
	  <div id="pied"><?php include("bas.php");?></div>
</div>
Steuf a écrit :

CSS :
#header {
width: 100%;
}
#conteneur {
width: 100%;
}
#centre {
margin-left:114px;
margin-right:116px;
}
#gauche {
float:left;
left:0;
width: 113px;
}
#droite {
float:right;
right:0;
width: 115px;
}
#pied {
width:100%;
}



Un peu de lecture:
Savoir utiliser et positionner les éléments en CSS
Initiation au positionnement CSS : 2.position float

Pour ton code:
#header {
width: 100%;
}
#conteneur {
width: 100%;
}
#centre {
margin-left:114px; /*il faudrait donner un peu d'air*/
margin-right:116px;/*il faudrait donner un peu d'air*/
}
#gauche {
float:left; /*si tu utilises float, il ne faut pas positionner alors*/
width: 113px;
}
#droite {
float:right; /*si tu utilises float, il ne faut pas positionner alors*/
width: 115px;
}
#pied {
[b]clear:both;[/b] /*forcer le pied à se mettre après les flotants précédents*/
width:100%;
}


Sinon regardes ce post, il doit y avoir de mémoire à peu près ce que tu souhaites.
Autant pour moi j'ai posté le mauvais code CSS, c'est celui que j'avais commencé hier en modifiant celui que j'ai trouvé chez vous Smiley cligne . Le mien est le suivant :
#header {
width: 100%;
}
#conteneur {
width: 100%;
}
#centre {
margin-left:113px;
margin-right:115px;
}
#gauche {
float:left;
width: 113px;
}
#droite {
float:right;
width: 115px;
}
#pied {
width:100%;
}


Pour le 
margin-left:113px;margin-right:115px;
du centre de la page, c'est la seule solution que j'ai trouvée pour faire passer le centre de la page au centre, sinon il utilise toute la largeur et donc se met en dessous. mais cette solution ne fonctionne que sous Firefox, je suis sûr que c'est un truc tout con en plus.... Pour le clear:Both; j'ai eu quelques soucis avec lorsque j'ai commencé à faire mes menus avec des <ul><li> ! En effet quand je mettais un menu dans une div avec un clear :both, cela me mettais des marges entre les div, et même en mettant des marges je n'ai pas réussi à trouver comment faire pour supprimer cette apparition Smiley eek . De ce fait j'ai tout simplement utiliser le fait que mon site utilise 100% de largeur de la fenêtre, et de ce fait ça positionne mes <div> l'une en dessous de l'autre... Bon je vais regarder les liens que tu m'as donné. Mais si vous avez une réponse n'hésitez pas Smiley cligne Vous pouvez aller voir le résultat pour mieux voir le probléme sur le lien que je vous ai donné.
Ok merci, car je séche je trouve pas ma solution... Qui a dit que IE ne respectait pas les standarts Smiley smile
D'ailleurs j'ai encore un autre probléme que j'ai pas sous Firefos mais que j'ai sous IE ( Voir ici ), il me met une marge entre les deux calque... Cela vient du code css de mon header mais je vois pas où... Les feuilles de style de mon header est dans cette page ( Long donc je le mets pas ici, allez le voir sur la page ) et voici le code html de mon header :
[code]<div class="expressd">:EXPRESS
</div> 
<div class="expressg">EXPRESS:
</div>
<div class="express" id="text">
<noscript>
<?php include("text.php") ?>
</noscript>
</div>
<div class="separation"><img src="/images/separation.gif" width="100%" height="1" alt=""></div>
<div class="banniered"><img src="/images/MiniEXtantPC.gif" width="88" height="31" alt="EXtantPC">
</div> 
<div class="banniereg"><img src="/images/MiniEXtantPC.gif" width="88" height="31" alt="EXtantPC">
</div>
<div class="banniere" id="images">
<noscript>
<?php include("images.php") ?>
</noscript>
</div>
<div class="contmenuhaut">
<div class="menuhautd"><img src="images/bas_logo_droit.gif" width="115" height="19" alt="">
</div> 
<div class="menuhautg"><img src="images/bas_logo.gif" width="113" height="19" alt="">
</div>
<div class="navcontainer">
<ul>
<li><a href="index.php?pages=newsletter"> Newsletter</a></li>
<li><a href="index.php?pages=news"> News </a></li>
<li><a href="index.php?pages=livre"> Livre d'or </a></li>
<li><a href="/forum/index.php">Forum</a></li>
<li><a href="index.php?pages=contact"> Contact </a></li>
</ul>
</div> 
</div>


Je commence vraiment à adorer IE, s'il n'atait pas utilisé par 90% des internautes je chercherais même pas Smiley cligne
a écrit :
Ok merci, car je séche je trouve pas ma solution... Qui a dit que IE ne respectait pas les standarts smile
D'ailleurs j'ai encore un autre probléme que j'ai pas sous Firefos mais que j'ai sous IE ( Voir ici ), il me met une marge entre les deux calque... Cela vient du code css de mon header mais je vois pas où... Les feuilles de style de mon header est dans cette page ( Long donc je le mets pas ici, allez le voir sur la page ) et voici le code html de mon header :


IE dans sa dernière version ne respecte pas les recommandations des langages standardisés à la lettre, mais cette version 6 de IE a fait un grand pas vers son respect, l'histoire des agents utilisateurs est bien courte et Nescape a bien été il y a peu un navigateur très moyen ne respectant pas grand chose de standard, nous parlons là d'une dizaine d'années. Qui peut assurer que Firefox, Opera, Safari etc sera encore en avance dans ce domaine dans 6 mois, 1 ou 2 ans par rapport au navigateur dominant qui pourrait peut-être nous surprendre du côté des standards (je ne le crois pas, mais cela pourrais arriver)?

Pour finir ce petit hs, codons propre et standard, on nous le rendra au centuple. Smiley cligne ... un jour ou l'autre.
Ton layout n'est pas en cause.
La page test que j'ai fait est rigoureusement identique sur Firefox et IE.
En jetant un oeil attentif aux balises que j'ai utilisées, tu verras que j'ai une vision moins "tabulaire" de ton design.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html lang="fr-ca" xml:lang="fr-ca" xmlns="http://www.w3.org/1999/xhtml">
 <head>
  <title>Test</title>
  <meta http-equiv="content-type" content="text/html; charset=utf-8" />
  <meta http-equiv="content-style-type" content="text/css" />
  <style type="text/css" media="all">
body { 
   text-align: center; 
}
h1, h2, h3, h4, p, ul, li { 
   padding: 0; 
   margin: 0; 
}
li { 
   list-style-type: none; 
}
#header { 
   background-color: #666666; 
   width: 100%; 
}
#conteneur { 
   width: 100%; 
}
#centre { 
   background-color: #cccccc; 
   margin-left: 113px; 
   margin-right: 115px; 
}
#gauche { 
   background-color: #999999; 
   float: left; 
   width: 113px; 
}
#droite { 
   background-color: #999999; 
   float: right; 
   width: 115px; 
}
#pied { 
   background-color: #666666; 
   clear: both; 
   width: 100%; 
}
  </style>
 </head>
 <body>
  <div id="conteneur">
   <div id="header">
    <h1>Titre de la page</h1>
    <h2>Sous-titre</h2>
    <ul>
     <li style="display: inline;">item</li>
     <li style="display: inline;">item</li>
     <li style="display: inline;">item</li>
     <li style="display: inline;">item</li>
    </ul>
   </div>
   <div id="gauche">
    <h3>Titre</h3>
    <ul>
     <li>item</li><li>item</li><li>item</li><li>item</li>
    </ul>
    <h3>Titre</h3>
    <ul>
     <li>item</li><li>item</li><li>item</li><li>item</li>
    </ul>
    <h3>Titre</h3>
    <ul>
     <li>item</li><li>item</li><li>item</li><li>item</li>
    </ul>
   </div>
   <div id="droite">
    <h3>Titre</h3>
    <ul>
     <li>item</li><li>item</li><li>item</li><li>item</li>
    </ul>
    <h3>Titre</h3>
    <ul>
     <li>item</li><li>item</li><li>item</li><li>item</li>
    </ul>
    <h3>Titre</h3>
    <ul>
     <li>item</li><li>item</li><li>item</li><li>item</li>
    </ul>
   </div>
   <div id="centre">
    <h3>Titre</h3>
    <h4>Sous-titre</h4>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p>
   </div>
   <div id="pied">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p>
   </div>
  </div>
 </body>
</html>

Je te reviens avec des suggestions.
Modifié le 11 Dec 2004 - 20:29
Bon j'ai au moins réussi à résoudre un probléme Smiley cligne
Pour mon histoire de marge qu'ie me met au niveau de ces images :
<img src="images/bas_logo_droit.gif" width="115" height="19" alt="">
Il ne respectait pas en fait, la hauteur de celles ci et mettait hauteur plus grande du coup je les ai mis en background dans mes feuilles de style en definissant la taille de celles ci Smiley cligne
Ca donne au final ceci 
.menuhautg 
{
background-image:url(/images/bas_logo.gif);
float:left;
width:113px;
height:19px;
}

.menuhautd
{
float:right;
width:115px;
background-image:url(/images/bas_logo_droit.gif);
height:19px;
}


Et plus de probléme de marge ! Ouf au moins un probléme de réglé...
Bon pour le code que tu m'as donné ( Je me permets de tutoyer si ça dérange dis le moi ! ) je peux le désorganiser et te montrer facilement mon probléme :
le Css :
.test {width:100%;}

L'html :
<div id="centre">
   <div class="test">Blablabla bla bla ( Sous IE je sui sûr que le milieu va descendre... Attention !</div>
   </div>


Le résultat ! en cliquant là !

Sous Firefox : Aucun probléme
Sous IE : Bah ça descend....

Je pense que mon probléme est plus clair maintenant ? Non ?

EDIT : Je suis intiérement d'accord avec toi Igor... Pour ce qui est d'IE, d'après un article que j'ai lu ( Je ne serais plus te le donner ) la prochaine version d'IE ne risque pas de mieux respecter les standarts... malheureusement !
Modifié le 11 Dec 2004 - 20:43
Si tu copies le code que je t'ai donné plus haut et que tu le visualises dans Firefox et IE, je te répète qu'il est rigoureusement identique, donc le problème ne vient pas de ton layout.

Voici mes suggestions.
Généralement, on n'utilise pas des <div> simplement pour formater des images.
De plus il y a ici trois divisions imbriquées ce qui est nettement trop !
<div class="navcontainer"> est superflu. <ul class="navcontainer"> suffi.

<div id="header">
 <div class="expressd">:EXPRESS</div> 
 <div class="expressg">EXPRESS:</div>
 <div class="express" id="text"></div>
 <div class="separation"><img src="/images/separation.gif" width="100%" height="1" alt=""></div>
 <div class="banniered"><img src="/images/MiniEXtantPC.gif" width="88" height="31" alt="EXtantPC"></div> 
 <div class="banniereg"><img src="/images/MiniEXtantPC.gif" width="88" height="31" alt="EXtantPC"></div>
 <div class="banniere" id="images"></div>
 <div class="contmenuhaut">
  <div class="menuhautd"><img src="images/bas_logo_droit.gif" width="115" height="19" alt=""></div> 
  <div class="menuhautg"><img src="images/bas_logo.gif" width="113" height="19" alt=""></div>
  <div class="navcontainer">
   <ul>
    <li><a href="index.php?pages=newsletter"> Newsletter</a></li>
    <li><a href="index.php?pages=news"> News </a></li>
    <li><a href="index.php?pages=livre"> Livre d'or </a></li>
    <li><a href="/forum/index.php">Forum</a></li>
    <li><a href="index.php?pages=contact"> Contact </a></li>
   </ul>
  </div> 
 </div>
</div>


Un titre ? Alors <h3> ou <h4>.

<div class="h8">Mat&eacute;riel</div>


Même chose. À noter que les <br> ne sont pas des balises d'espacement. Les propriétés CSS "padding" et "margin" remplissent très bien ce rôle.

<div id="titremenu">
<br>
Les News :
</div>


Ici j'utiliserais <h4> ou même un <p>.
Même remarque pour les <br>.

<div class="datenewsmini">
Mercredi 08  Décembre 2004 11H15
<br>
<br>
</div>


Pourquoi pas <img class="barre" ... ?

<div class="barre"><img src="/images/separation.gif" width="100%" height="1"></div>


Les paragraphes sont déjà des balises de type bloc.
<p style="float: left; width: 33%;"> devrait te mettre sur la bonne piste.

<div class="basblock">
<p>
</p>
</div>
<div class="basblock2">
<p>
</p>
</div>
<div class="basblock3">
<p>
</p>
</div>


Voilà ! Du pain sur la planche ? Smiley lol
a écrit :
Il ne respectait pas en fait, la hauteur de celles ci et mettait hauteur plus grande du coup je les ai mis en background dans mes feuilles de style en definissant la taille de celles ci.


Faut voir, car si tes images font sens dans ton contenu, tu perds... du contenu pour une question d'esthétique et c'est dommage en plus de rendre un contenu ou une information innaccessible. Pour le respect des hauteurs tu es sûr qu'il ne s'agit de marges, ou tout simplement de la restitution de cet élément par IE?
C'est certain que si tu modifies le code que je t'ai donné, ça bug. Alors tu sais d'où viens le problème.

.test {width:100%;}

T'as suffisamment d'info ici pour t'amuser longtemps.
Allez Ciao ! Smiley youpi
Pour igor, oui ce ne sont que des images décorativent et non utilent Smiley cligne Donc le fait de les avoir mis en Background ne pose pas probléme.

Pour Stephan : Bah non j'ai rien modifié dans ton code, je te montre juste que si j'inclus des pages avec un div définit en with:100% ou 90% ou autre, le centre descend sous IE... Sinon ton code est grosso modo identique à celui que j'avais fait à quelques petits détails près.

Bon après je regardes tes remarques précédentes : Pour le formatage des images avec les division, je viens de le modifié en vue de mon bug sous IE Smiley cligne

Pour les titres, ouaip je vais voir pour faire ça avec les <hx>

Pour ce qui est des News, ça je sais, c'est le premier truc que j'ai fait en CSS, et j'ai pas finis Smiley cligne

Pour les <img class="barre" ... Je ne connaissais pas ! Je vais voir ça de ce pas... C'est toujours bon à savoir.

Pour finir pour les paragraphes je savais pas que l'on pouvait faire ça je vais potacher ça...

Bah sinon pour mon BUG sous IE, je vois pas comment résoudre ça. Puisqu'en fait dans ma page je vais être obligé d'utiliser des div.

Edit : Pour la Alt="" il m'a échappé ! Smiley lol
Sinon pour le Hr.. Oui ç'est plus logique mais d'après ce que je vois, y'a encore un BUG sous IE, donc je vais voir quand même.
Modifié le 11 Dec 2004 - 21:16
Steuf a écrit :

Pour Stephan : Bah non j'ai rien modifié dans ton code, je te montre juste que si j'inclus des pages avec un div définit en with:100% ou 90% ou autre, le centre descend sous IE...


Alors il ne faut pas le faire ! Smiley cligne
Bah je fais coment pour remplacer ça ?!? Je pige pas désolé lol.
Parce qu'apparemment le simple fait de mettre un div, fait tout descendre... Pour la mise page c'est pas top...
Modifié le 11 Dec 2004 - 21:36
Steuf a écrit :

Bah je fais coment pour remplacer ça ?!? Je pige pas désolé lol.

Alors relis tout ce que j'ai écrit, et si tu ne comprends pas, relis encore. Il n'y a pas de solution facile et rapide. Tu dois apprendre à utiliser les bonnes balises et à les positionner correctement.

Je t'ai donné un layout qui fonctionne :
http://forum.alsacreations.com/topic.php?tid=831&fid=2&p=1#p8610

À toi de t'en inspirer. Il y a déjà beaucoup d'info dans ce layout en ce qui concerne le bon usage des balises.

Faut pas réparer tes <include>, faut les refaire comme il se doit. Smiley lol
Modifié le 11 Dec 2004 - 21:53
Non mais je suis d'accord, mais pour mettre en page le centre de l'interface, je suis obligé d'utiliser des Div, je ne peut pas me limiter à du texte, c'est purement impossible... Parce que dès que je mets une div, pouf ça tombe sous IE, c'est vraiment un sale BUG d'IE, parce qu Firefox ne m'em***** pas... Je dirais donc que mon code est bon... Bon je vais voir ce que je peux faire !
J'ai remplacé le <p> par un <div> ici :

   <div id="centre">
    <h3>Titre</h3>
    <h4>Sous-titre</h4>
    <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</div>
   </div>

Et le rendu est identique sous Firefox et IE.
Pages :
Sujet clos
Aller à