Problème de positionnement

Problème de positionnement - HTML/CSS - Programmation

Marsh Posté le 08-07-2005 à 01:27:25    

Une image étant beaucoup plus compréhensible qu'un long blabla, voici donc mon soucis
http://sn4rky.free.fr/tests/attitudes/bug_sous_firefox.png
 
Comme vous pouvez le voir, sous IE le message est bien positionné contraire a ce que peux afficher firefox. et je n'arrive pas a définir d'ou cela vient. Si je modifier le padding de mon header le texte descend bien sous IE mais dans Firefox il restera a la meme position.
 
Quelqu'un aurait une solution ou bien une alternative pour resoudre mon problème ?
 
 :hello:  
 
XHTML

Code :
  1. ...
  2. <body>
  3.  <div id="container"> <!-- ouverture du div "container" -->
  4.   <p id="prelude"><a href="index.php">Accueil</a> | <a href="index?page=plan">Plan</a> | <a href="index.php?page=contact">Contacts</a></p>
  6.   <div id="header"> <!-- ouverture du div "header" -->
  7.    <h2>Association libre cherche esprits ouverts pour partager différences...</h2>
  8.   </div> <!-- fermeture du div "header"-->
  10.   <div id="body"> <!-- ouverture du div "body" -->
  12.   <div id="content"> <!-- ouverture du div "content" -->
  13. ...


 
CSS

Code :
  1. ...
  2. #container
  3. {
  4. width:780px;
  5. margin:3em auto;
  6. padding:0;
  7. text-align:left;
  8. font-family:Arial, Helvetica, sans-serif;
  9. color:#000000;
  10. font-size:12px;
  11. }
  13. #prelude
  14.  {
  15.  position:absolute;
  16.  width: 780px;
  17.  top:2.5em;
  18.  right:12em;
  19.  text-align:right;
  20.  margin:0;
  21.  padding:0;
  22.  }
  24. #header
  25.  {
  26.  width:780px;
  27.  height:120px;
  28.  padding:3em 0 -1em 0;
  29.  margin:0;
  30.  background-image:url(images/top.png);
  31.  background-repeat:no-repeat;
  32.  }
  34. #body
  35.  {
  36.  width:780px;
  37.  background-color:#FFFFFF;
  38.  background-image:url(images/page.png);
  39.  background-repeat:repeat-y;
  40.  margin:0;
  41.  padding:0;
  42.  float:left;
  43.  }
  45.  #content
  46.   {
  47.   width:510px;
  48.   margin:0 20px 0 20px;
  49.   float:left;
  50.   }
  51. ...


Message édité par snarky le 08-07-2005 à 01:30:31
Reply

Marsh Posté le 08-07-2005 à 01:27:25   

Reply

Marsh Posté le 08-07-2005 à 02:42:59    

Regarde sur http://marie.iziblog.net/ ça marche bien et...c'est le même ! :D
 
Sinon, pour ta solution, tu peux pour l'instant ce qui s'apelle un "hack" avec CSS, du genre
 

Code :
  1. padding:5px;
  2. _padding:15px;


 
Internet Explorer prendra en considération le premier padding, mais dira "OH il en a mis deux l'ami" et prendra donc en fin de compte le deuxième padding à 15px. En effet, il zappe carrément le _ placé devant.
 
Quand à notre ami Firefox, il s'est acheté des lunettes, et lui le lis pas le deuxième, car là il te crie dessus "Mais _padding ça existe pas !!". Il prendra donc en compte le premier padding de 5px.
 
ça te convient ?


Message édité par Lund le 08-07-2005 à 02:47:58
Reply

Marsh Posté le 08-07-2005 à 02:48:45    

ui mais non lol
j'ai juste reprise l'image de fond et du coup sa marche pu :'(
j'ai eu beau regarde de css de dotclear j'arrive tjr pas a comprendre le pourquoi :/
 
tu pourrais peut etre m'orienter ?

Reply

Marsh Posté le 08-07-2005 à 02:50:06    

c déja une solution :lol:

Reply

Marsh Posté le 08-07-2005 à 02:51:40    

Bah ouais, à l'arrache, mais pour l'instant vu que IE ne respecte rien, on en est réduis à ça.

Reply

Marsh Posté le 08-07-2005 à 02:52:52    

en même tps pour une fois que IE affiche correctement la phrase, c'est déjà une bonne intention :whistle:

Reply

Marsh Posté le 08-07-2005 à 02:57:53    

Il manque pas mal d'éléments dans tes pages là pour t'aider, par exemple ton h2 { } dans CSS. J'ai une horrible écriture en arial géante sur l'écran :D

Reply

Marsh Posté le 08-07-2005 à 03:02:04    

à la base c'est du verdana avec un font-size à 14px

Reply

Marsh Posté le 08-07-2005 à 03:02:24    

Les paddings négatifs n'existent pas

Reply

Marsh Posté le 08-07-2005 à 03:03:22    

Si il a pris un DTD-Alarrache je pense que ça peut fonctionner. Mais effectivement, je sais pas si c'est conforme aux normes !

Reply

Marsh Posté le 08-07-2005 à 03:03:22   

Reply

Marsh Posté le 08-07-2005 à 03:04:51    

afbilou a écrit :

Les paddings négatifs n'existent pas


corrigé  :jap:

Reply

Marsh Posté le 08-07-2005 à 03:05:49    

Lund a écrit :

Si il a pris un DTD-Alarrache je pense que ça peut fonctionner. Mais effectivement, je sais pas si c'est conforme aux normes !


 
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

Reply

Marsh Posté le 08-07-2005 à 03:05:52    

Code :
  1. <?xml version="1.0" encoding="UTF-8"?>
  2. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
  3. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
  4. <head>
  5.  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

Ce n'est pas le bon content-type pour un document xhtml 1.1 il faut mettre application/xhtml+xml au lieu de text/html

Reply

Marsh Posté le 08-07-2005 à 03:08:28    

ah ouais
 
j'ai mis une valeur negative pk sinon voila ce que j'obtien sous firefox
 
http://sn4rky.free.fr/tests/attitudes/
 
avec
padding-top:5em; (la frase ne bouge pas mais le reste si, impect sous IE part contre)
 

Reply

Marsh Posté le 08-07-2005 à 03:09:12    

Lol c'est bien beau de mettre UTF-8 en encodage ... mais encore faut-il que tu ecrives ton code source en utf-8 sinon ca peut pas gazer ... :D
Vive les caracteres exotiques a la place des caracteres accentués par exemple :D

Reply

Marsh Posté le 08-07-2005 à 03:11:30    

afbilou a écrit :

Lol c'est bien beau de mettre UTF-8 en encodage ... mais encore faut-il que tu ecrives ton code source en utf-8 sinon ca peut pas gazer ... :D
Vive les caracteres exotiques a la place des caracteres accentués par exemple :D


 
ui ui c recupéré sur une ancienne base de donnée ci pour sa
c'est juste histoire de faire "plein"  :lol:

Reply

Marsh Posté le 08-07-2005 à 03:11:45    

Mais t'as fini de critiquer oui ?  :kaola:

Reply

Marsh Posté le 08-07-2005 à 03:14:15    

dire qu'à la base c'était juste pour un probleme de padding foireux :ange:


Message édité par snarky le 08-07-2005 à 03:16:20
Reply

Marsh Posté le 08-07-2005 à 03:18:18    

Bon moi j'ai ça
 

Code :
  1. #header
  2.  {
  3.  width:780px;
  4.  height:95px;
  5.  _height:120px;
  6.  padding-top:25px;
  7.  _padding-top:35px;
  8.  background-image:url(img/top.png);
  9.  background-repeat:no-repeat;
  10.  }


 
mais par contre je suis passé aux pixels...

Reply

Marsh Posté le 08-07-2005 à 03:21:37    

sa marche ^^
mais pourquoi devoir redéfinir la hauteur? T_T

Reply

Marsh Posté le 08-07-2005 à 03:22:14    

A cause d'une vieille histoire de paddings

Reply

Marsh Posté le 08-07-2005 à 03:24:00    

alala et dire que j'ai tout essayé  
merchi beaucoup pour votre aide (et vos critiques surtt celles de afbilou :lol:)


Message édité par snarky le 08-07-2005 à 03:24:17
Reply

Marsh Posté le 08-07-2005 à 03:26:24    

ça reste quand même du provisoir et c'est pabiendutout ces hack là mais bon...c'est presque pas de notre faute.

Reply

Marsh Posté le 08-07-2005 à 03:34:28    

J'imagine que chez toi le menu du haut est aligné avec le bord  du site ? Et bien c'est parce que tu es dans une resolution bien particuliere.
 
pour que ca fonctionne mets ton menu en float right, vire ton padding de 12em o_o et met un clear:both a header.
http://afbilou.free.fr/tmp/o_o.jpg


Message édité par afbilou le 08-07-2005 à 03:43:53
Reply

Marsh Posté le 08-07-2005 à 03:36:20    

afbilou a écrit :

Code :
  1. <?xml version="1.0" encoding="UTF-8"?>
  2. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
  3. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
  4. <head>
  5.  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

Ce n'est pas le bon content-type pour un document xhtml 1.1 il faut mettre application/xhtml+xml au lieu de text/html


 
j'ai finalement remplacer par  

Code :
  1. // Indique un Mime type correct si le client accepte le vrai xhtml
  2. if( stristr($HTTP_SERVER_VARS["HTTP_ACCEPT"], "application/xhtml+xml" ) )
  3. {
  4. header("Content-type: application/xhtml+xml" );
  5. echo "<?xml version='1.0' encoding='iso-8859-1'?>\n";
  6. }
  7. else
  8. {
  9. header("Content-type: text/html; charset=iso-8859-1" );
  10. }


Reply

Marsh Posté le 08-07-2005 à 03:37:53    

afbilou a écrit :

J'imagine que chez toi le menu du haut est aligné avec le bord  du site ? Et bien c'est parce que tu es dans une resolution bien particuliere.
 
pour que ca fonctionne met ton menu en float right, vire ton padding de 12em o_o et met un clear:both a header.


 
mon #menu est déja en float:right;

Reply

Marsh Posté le 08-07-2005 à 03:38:54    

Moi j'ai ca ...
#prelude
  {
  position:absolute;
  width: 780px;
  top:2.5em;
  right:12em;
  text-align:right;
  }

Reply

Marsh Posté le 08-07-2005 à 03:41:03    

Autant pour moi il s'agit de ton menu #prelude [contenant le right de 12em; et avant le header comme je disais]

Reply

Marsh Posté le 08-07-2005 à 03:42:30    

pour que ca fonctionne met ton menu en float right, <-- fait référence a #menu (donc mon menu été deja en right)
 
vire ton padding de 12em o_o et met un clear:both a header. <-- fait référence à #prelude

Reply

Marsh Posté le 08-07-2005 à 03:44:33    

depuis que j'ai mis clear:both
 
j'ai un trou sous IE

Reply

Marsh Posté le 08-07-2005 à 03:46:24    

Pas grave t'as trouvé une autre solution :p

Reply

Marsh Posté le 08-07-2005 à 03:50:26    

tout a fait :D

Reply

Marsh Posté le 08-07-2005 à 03:56:06    

Pas facile de comprendre pourquoi t'as un bug sans ton bricolage avec _
Y a beaucoup d'imbrications de balises (trop mais bon ...) alors faut beaucoup de RAM dans le cerveau pour se representer le truc et a cette heure la c'est pas facile tu comprends bien :p

Reply

Marsh Posté le 08-07-2005 à 04:07:05    

yen a pas tant que ça tout de même lol
enfin c'est déjà sympa de ta part d'y avoir zyeuté un coup d'oeil, je vais pas non plus monopoliser ton temps :p

Reply

Marsh Posté le    

Reply

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed