Forum |  HardWare.fr | News | Articles | PC | S'identifier | S'inscrire | Shop Recherche
2720 connectés 

  FORUM HardWare.fr
  Programmation
  HTML/CSS

  Problème de positionnement

 


 Mot :   Pseudo :  
 
Bas de page
Auteur Sujet :

Problème de positionnement

n°1143859
snarky
Posté le 08-07-2005 à 01:27:25  profilanswer
 

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>
  5.   <div id="header"> <!-- ouverture du div "header" -->
  6.    <h2>Association libre cherche esprits ouverts pour partager différences...</h2>
  7.   </div> <!-- fermeture du div "header"-->
  8.   <div id="body"> <!-- ouverture du div "body" -->
  9.   <div id="content"> <!-- ouverture du div "content" -->
  10. ...


 
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. }
  12. #prelude
  13.  {
  14.  position:absolute;
  15.  width: 780px;
  16.  top:2.5em;
  17.  right:12em;
  18.  text-align:right;
  19.  margin:0;
  20.  padding:0;
  21.  }
  22. #header
  23.  {
  24.  width:780px;
  25.  height:120px;
  26.  padding:3em 0 -1em 0;
  27.  margin:0;
  28.  background-image:url(images/top.png);
  29.  background-repeat:no-repeat;
  30.  }
  31. #body
  32.  {
  33.  width:780px;
  34.  background-color:#FFFFFF;
  35.  background-image:url(images/page.png);
  36.  background-repeat:repeat-y;
  37.  margin:0;
  38.  padding:0;
  39.  float:left;
  40.  }
  41.  #content
  42.   {
  43.   width:510px;
  44.   margin:0 20px 0 20px;
  45.   float:left;
  46.   }
  47. ...


Message édité par snarky le 08-07-2005 à 01:30:31
mood
Publicité
Posté le 08-07-2005 à 01:27:25  profilanswer
 

n°1143867
Lund
Posté le 08-07-2005 à 02:42:59  profilanswer
 

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
n°1143868
snarky
Posté le 08-07-2005 à 02:48:45  profilanswer
 

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 ?

n°1143869
snarky
Posté le 08-07-2005 à 02:50:06  profilanswer
 

c déja une solution :lol:

n°1143870
Lund
Posté le 08-07-2005 à 02:51:40  profilanswer
 

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

n°1143871
snarky
Posté le 08-07-2005 à 02:52:52  profilanswer
 

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

n°1143872
Lund
Posté le 08-07-2005 à 02:57:53  profilanswer
 

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

n°1143873
snarky
Posté le 08-07-2005 à 03:02:04  profilanswer
 

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

n°1143874
afbilou
pouet your life
Posté le 08-07-2005 à 03:02:24  profilanswer
 

Les paddings négatifs n'existent pas

n°1143875
Lund
Posté le 08-07-2005 à 03:03:22  profilanswer
 

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

mood
Publicité
Posté le 08-07-2005 à 03:03:22  profilanswer
 

n°1143876
snarky
Posté le 08-07-2005 à 03:04:51  profilanswer
 

afbilou a écrit :

Les paddings négatifs n'existent pas


corrigé  :jap:

n°1143877
snarky
Posté le 08-07-2005 à 03:05:49  profilanswer
 

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">

n°1143878
afbilou
pouet your life
Posté le 08-07-2005 à 03:05:52  profilanswer
 

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

n°1143879
snarky
Posté le 08-07-2005 à 03:08:28  profilanswer
 

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)
 

n°1143880
afbilou
pouet your life
Posté le 08-07-2005 à 03:09:12  profilanswer
 

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

n°1143881
snarky
Posté le 08-07-2005 à 03:11:30  profilanswer
 

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:

n°1143882
Lund
Posté le 08-07-2005 à 03:11:45  profilanswer
 

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

n°1143883
snarky
Posté le 08-07-2005 à 03:14:15  profilanswer
 

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
n°1143884
Lund
Posté le 08-07-2005 à 03:18:18  profilanswer
 

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...

n°1143885
snarky
Posté le 08-07-2005 à 03:21:37  profilanswer
 

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

n°1143886
Lund
Posté le 08-07-2005 à 03:22:14  profilanswer
 

A cause d'une vieille histoire de paddings

n°1143887
snarky
Posté le 08-07-2005 à 03:24:00  profilanswer
 

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
n°1143888
Lund
Posté le 08-07-2005 à 03:26:24  profilanswer
 

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

n°1143889
afbilou
pouet your life
Posté le 08-07-2005 à 03:34:28  profilanswer
 

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
n°1143890
snarky
Posté le 08-07-2005 à 03:36:20  profilanswer
 

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. }


n°1143891
snarky
Posté le 08-07-2005 à 03:37:53  profilanswer
 

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;

n°1143892
afbilou
pouet your life
Posté le 08-07-2005 à 03:38:54  profilanswer
 

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

n°1143893
afbilou
pouet your life
Posté le 08-07-2005 à 03:41:03  profilanswer
 

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

n°1143894
snarky
Posté le 08-07-2005 à 03:42:30  profilanswer
 

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

n°1143895
snarky
Posté le 08-07-2005 à 03:44:33  profilanswer
 

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

n°1143896
afbilou
pouet your life
Posté le 08-07-2005 à 03:46:24  profilanswer
 

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

n°1143897
snarky
Posté le 08-07-2005 à 03:50:26  profilanswer
 

tout a fait :D

n°1143898
afbilou
pouet your life
Posté le 08-07-2005 à 03:56:06  profilanswer
 

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

n°1143899
snarky
Posté le 08-07-2005 à 04:07:05  profilanswer
 

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

mood
Publicité
Posté le   profilanswer
 


Aller à :
Ajouter une réponse
  FORUM HardWare.fr
  Programmation
  HTML/CSS

  Problème de positionnement

 

Sujets relatifs
Problème de positionnement d'un formulaireProblème de positionnement de graphique
CSS : probleme de positionnement d'un blocproblème de positionnement du texte avec Firefox
[css] Problème de positionnement[CSS] Problème de positionnement
Petit probleme de positionnementProblème de positionnement de graphique sous excel en vba(URGENT)
Problème de positionnement [maj : solutions à deux problèmes][CSS] problème de positionnement 'dynamique'
Plus de sujets relatifs à : Problème de positionnement


Copyright © 1997-2022 Hardware.fr SARL (Signaler un contenu illicite / Données personnelles) / Groupe LDLC / Shop HFR