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

  FORUM HardWare.fr
  Programmation
  HTML/CSS

  [CSS] Prb alignement de texte, Ok sous Firefox mais foireux sous IE

 
 


 Mot :   Pseudo :  
 
Bas de page
Auteur Sujet :

[CSS] Prb alignement de texte, Ok sous Firefox mais foireux sous IE

n°875941
satchie
http://satchie.free.fr
Posté le 18-10-2004 à 14:09:29  profilanswer
 

EDIT DU 18 OCTOBRE
Adresse du site: http://satchie7.free.fr/index.html
 
Je refais mon site qui est terminé à 90%. J'ai un petit prb:
 
http://satchie.free.fr/align.png
 
Comment puis-je faire pour que sous IE et Mozilla "Menu" et " A propos" soient alignés?
 
Pour voir le site en question http://satchie.free.fr/test/index.html
 
Merci d'avance.
 
css

Code :
  1. body {
  2. font-family: "Trebuchet MS", serif;
  3. font-size: 12px;
  4. margin: 0;
  5. padding: 0;
  6. background : #ffffff url("design/fond.png" ) repeat-x 0% 0%;
  8. }
  10. #header {
  11. height: 170px;
  12. background-color: #ffffff;
  13. background-image:url("design/header3.png" );
  14. }
  16. #conteneur {
  17. position: absolute;
  18. width: 750px;
  19. left: 50%;
  20. margin-left: -375px;
  21. background-image:url("design/teneur.png" );
  22. background-repeat: repeat-y;
  23. background-color:#ffffff;
  24. }
  26. #centre {
  27. background-color:#ffffff;
  28. margin-left: 150px;
  29. padding-left: 10px;
  30. padding-right: 20px;
  31. background-image:url("design/contenu.png" );
  32. background-repeat: repeat-y;
  33. }
  35. #gauche {
  36. padding-left:10px;
  37. position: absolute;
  38. left:0;
  39. width: 150px;
  40. background-image:url("design/menu.png" );
  41. background-repeat: repeat-y;
  42. }
  44. #pied {
  45. height: 30px;
  46. background-color: #ffffff;
  47. background-image:url("design/pied.png" );
  48. background-repeat: repeat-y;
  49. text-align:center;
  50. margin-top: 50px;
  52. }
  54. /* titre */
  55. h1 {
  56. font-size: 13px;
  57. font-family: "Lucida Grande", Verdana, Helvetica, Sans-serif;
  58. color:#c09e64;
  59. text-align: left;
  60. }
  62. /* titre des dates des news*/
  63. h2 {
  64. font-size : 13px;
  65. font-family:  "Trebuchet MS", serif;
  66. color:#425f6a;
  67. text-align: left;
  68. }
  70. /* titre des news*/
  71. h3 {
  72. font-size : 13px;
  73. font-family:  "Trebuchet MS", serif;
  74. color:#3a7100;
  75. text-align: left;
  76. }
  78. /*le menu de navigation */
  79. h4 {
  80. font-size : 9px;
  81. font-family:  "Trebuchet MS", serif;
  82. color : #ffffff;
  83. text-align: center;
  84. word-spacing: 10px;
  85. }
  87. /*les paragraphes*/
  88. p {
  89. color: #3c3c3c;
  90. font-size : 12px;
  91. margin: 0px 0px 0px 0px;}
  93. /*le menu à gauche*/
  94. .menugauche {
  95. list-style-image:url("design/puce.gif" );
  96. margin: 0;
  97. padding-left:30px;
  98. }
  100. p.custo {
  101. color: #414d61;
  102. font-size : 10px;
  103. margin: 0px 0px 0px 0px;}
  105. p.pied{
  106. color: #cacaca;
  107. font-size : 10px;
  108. margin: 0px 0px 0px 0px;}
  112. /*les liens*/
  113. a:link {color: #056f8d; text-decoration:none; font-size : 12px; font-family:  "Trebuchet MS", serif;}
  114. a:visited {color: #056f8d; text-decoration:none; font-size : 12px; font-family:  "Trebuchet MS", serif;}
  115. a:hover {color: #91becb; text-decoration:underline; font-size : 12px; font-family: "Trebuchet MS", serif;}
  117. /*a.lien2:link {
  118. font-family: "Trebuchet MS", serif;
  119. font-size : 12px;
  120. color: #b6cad2;
  121. text-decoration: none;
  122. }
  123. a.lien2:visited {
  124. font-family: " "Trebuchet MS", serif;
  125. font-size : 12px;
  126. color: #b6cad2;
  127. text-decoration: none;
  128. }
  129. a.lien2:hover {
  130. font-family:  "Trebuchet MS", serif;
  131. font-size : 12px;
  132. color: #b6cad2;
  133. text-decoration: underline;
  134. }
  135. a.lien2:active {
  136. font-family:  "Trebuchet MS", serif;
  137. font-size : 12px;
  138. color: #b6cad2;
  139. text-decoration: none;
  140. }*/


 
 
le html

Code :
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
  3. <head>
  4. <title> Satchie :: Accueil </title>
  5. <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
  6. <link href="style.css" rel="stylesheet" type="text/css" />
  7. </head>
  9. <body>
  11. <div id="conteneur">
  13.   <div id="header">
  14.    </div>
  16.   <div id="gauche">
  18.    <h2>M e n u </h2>
  19.    <p ><a href="index.html"> News </a>
  20.    <p ><a href="articles.html"> Articles </a>
  21.    <p ><a href="creation.html" > Créations</a>
  22.    <p ><a href="desktops.html"> Desktops </a>
  23.    <p ><a href="archives.html"> Archives </a>
  24.    <img src="design/sepamenu.gif">
  25.    <br>
  27.    <h2>A f f i l i a t i o n</h2>
  28.          <a href="http://perso.wanadoo.fr/planetcyber/lafrenchtouch/" target="_blank"><img src="design/ft.png" border="0" /></a>
  29.    <img src="design/sepamenu.gif">
  30.    <br>
  32.    <h2>I n f o s</h2>
  33.    <p >Pseudo: Satchie
  34.    <p >Nationalité: Française
  35.    <p >Ville: Lyon
  36.    <p >Age: 26</p>
  37.    <p >Mail: <a href="mailto:satchie@free.fr">Satchie@free.fr </a></p>
  38.    <img src="design/sepamenu.gif">
  39.    <br>
  41.    <h2>L i e n s</h2>
  42.    <p class="custo"><a href="http://customxp.net/"target="blank">CustomXP</a><br>
  43.    <p class="custo"><a href="http://www.deviantart.com/"target="blank">Deviantart.com</a><br>
  44.    <p class="custo"><a href="http://www.foood.net/"target="blank">FoodIcons</a><br>
  45.    <p class="custo"><a href="http://www.gfxoasis.com/" target="blank">GfxOasis</a><br>
  46.    <p class="custo"><a href="http://www.rad-e8.com/"target="blank">RadE8</a><br>
  47.    <p class="custo"><a href="http://www.studiotwentyeight.net/"target="blank">Studio28</a><br>
  48.    <p class="custo"><a href="http://www.iconfactory.com/"target="blank">The Icon Factory</a><br>
  49.    <p class="custo"><a href="http://forum.clubic.com/forum2.php3?config=&post=28145&cat=19&cache=cache&sondage=&owntopic=0&p=2&trash=&subcat="target="blank">Topic Clubic.com</a><br>
  50.    <p class="custo"><a href="http://forum.hardware.fr/hardwarefr/Discussions/sujet-10270-1.htm" target="blank">Topic Hardware.fr</a>
  51.    <p class="custo"><a href="http://www.trucsenvrac.com/"target="blank">Trucsenvrac</a>
  52.    <img src="design/sepamenu.gif">
  53.    <br>
  54.    <br>
  55.    <p class="custo">Visites: <img src="http://perso0.free.fr/cgi-bin/wwwcount.cgi?df=satchie.dat&dd=microsc&ft=0" align="middle"></p>
  56.   </div>
  57.  
  58.   <div id="centre">
  59.    <h2>A&nbsp; p r o p o s </h2>
  60.   <p> Bienvenue sur mon site dédié à la personnalisation des interfaces graphiques. Pour un meilleur rendu, je conseille de visiter ce site avec <a href="http://mozilla-europe.org/fr/products/firefox/" target="_blank">Mozilla Firefox</a>: un navigateur sûr, rapide et moderne.
  61.   <img src="design/sepa.gif">
  62.   <p>&nbsp</p>
  65.   <h2>1 8  &nbsp;o c t o b r e &nbsp;2 0 0 4 </h2>
  66.   <p>Voici la cinquième version de mon site. Quelques nouveautés à savoir :
  67.   <ul class="menugauche">
  68.   <li> Une refonte complète du site en utilisant les Css. </li>
  69.   <li> Une nouvelle rubrique intitulée "<a href="articles.html" target="_parent">Articles</a>" avec un petit tutorial pour débuter la customisation.</li>
  70.   <li> Un nouveau desk basé sur le style BeOS. <br>
  71.  <a href="Desktop/Grand/beos.png" target="_blank"><img src="Desktop/Petit/beos.png" width="185" height="139" border="0"  /></a>   
  72.    Plus d'informations dans la rubrique "<a href="desktops.html" target="_top">Desktops</a>"</li></ul>
  73.    <img src="design/sepa.gif">
  74.   <p>&nbsp</p>
  76.   <h2>1 2  &nbsp;s e p t e m b r e &nbsp;2 0 0 4</h2>
  77.   <p> <a href="http://nico.aerial-music.com/perso/index.html" target="_blank">Fletchernic</a> et <a href="http://www.ultradesks.fr.fm/" target="_blank">Ultraman</a> deux membres de la Frenchtouch ont récemment refais leur site, à voir absolument.
  78.   <img src="design/sepa.gif">
  79.   <p>&nbsp</p>
  81.   <h2>31  &nbsp;a o û t &nbsp;2 0 0 4</h2>
  82.   <p>Le forum <a href="http://www.trucsenvrac.com/" target="_blank">TrucsenVrac</a> organise sur une idée de <a href="http://www.bioscoop.fr.st/" target="_blank">BioScoop</a> un concours de desks sur le thème suivant: autour du monde en 30 jours: évasion dans les pays lointains... <a href="http://www.trucsenvrac.com/forum/viewthread.php?tid=4133" target="_blank">Accès direct au topic</a>. Le concours se termine le 24 septembre.</BLOCKQUOTE>
  83.   <img src="design/sepa.gif">
  84.   <p>&nbsp</p>
  86.   <h2>30  &nbsp;a o û t &nbsp;2 0 0 4</h2>
  87.   <p>J'ai testé un logiciel porté de linux sous windows qui offre une expérience originale de customisation, à savoir <a href="http://bb4win.sourceforge.net/bblean/" target="_blank">BbLean</a> qui est une variante du logiciel <a href="http://www.bb4win.org/news.php" target="_blank">Bb4Win</a> qui lui même est un portage de BBox sous linux. En quelques mots l'installation est aisée, la configuration du programme est facile mais il faut souvent passer par l'édition de fichiers *ini (en fait *.rc). Pour le reste il est facilement customisable, de nombreux plug in sont disponibles et une communauté conséquente (voir le forum <a href="http://forums.loose-screws.com/index.php?sid=c2b492afed8cbadcef80b8b2547b86d0" target="_blank">loose-screws.com</a> ) permet d'avoir pas mal d'activité autour de ce logiciel. <br>
  88. Pour information, la customisation des différents programmes à savoir bsplayer et winamp sur mes deux derniers screenshots n'est pas encore terminée.
  89. Maintenant, il reste à savoir si BbLean représente une alternative viable à long terme de l'explorer. Suivant mes disponibilités je ferai peut être un petit article sur ce logiciel.
  90.   <img src="design/sepa.gif">
  91.   <p>&nbsp</p>
  93.   <h2>19  &nbsp;a o û t &nbsp;2 0 0 4</h2>
  94.   <p>Une petite news pour vous informer que deux membres de la Frenchtouch à savoir <a href="http://perso.wanadoo.fr/ultr4man/" target="_blank">Ultraman</a> et <a href="http://www.bioscoop.fr.st/" target="_blank">Bioscoop</a> ont refait leur site.
  95. Le même Ultraman a créé son <a href="http://www.ultrablog.fr.st/" target="_blank">blog</a>, alors si vous voulez tout savoir sur la vie trépidente d'un membre de la Frenchtouch, vous savez où aller!
  96.   <img src="design/sepa.gif">
  97.   <p>&nbsp</p>
  99.   <h2>19  &nbsp;j u i l l e t &nbsp;2 0 0 4</h2>
  100.   <p>Un nouveau desk basé sur la suite <a href="http://whistl3r.deviantart.com/" target="_blank">Nano</a> par les membres du groupe <a href="http://www.4imp.de/" target="_blank">FOURIMPRESSION</a>. La suite est complète, elle comprend le thème et un shell, une suite d'icones avec des modèles pour en créer d'autres, un skin winamp, des curseurs... C'est une suite que j'apprécie particulièrement car originale et minimaliste.
  101.   <p>&nbsp</p>
  103.   <h2>1 4 &nbsp; j u i l l e t &nbsp;2 0 0 4</h2>
  104.   <p>Ce site a été référencé par <a href="http://www.gfxoasis.com/" target="_blank">GfxOasis</a> (ex: design Technika /DT2) comme le site de la semaine.</h3>
  105.             <br>
  106.             <a href="design/gfxoasis.png" target="_blank"><img src="design/gfxoasisp.png" width="202" height="152" border="0" /></a>              <img src="design/sepa.gif">
  107.   <p>&nbsp</p>
  109.   <h2>1 8 &nbsp;j u i n&nbsp; 2 0 0 4</h2>
  110.   <p>Spéciale dédicace à DocVespine! J'ai corrigé la faute :o <br>
  111.   Ajout d'un nouveau desk et de deux walls.</h3>
  112.   <img src="design/sepa.gif">
  113.   <p>&nbsp</p>
  115.   <h2>1 7 &nbsp;j u i n &nbsp; 2 0 0 4</h2>
  116.   <p>Ajout d'un nouveau desk pour la réouverture, vous remarquerez que j'utilise un nouveau skin pour winamp 5, <a href="http://www.customize.org/details/33750" target="_blank">Hal's Eye</a> que je vous recommande chaudement d'essayer.
  117.   <img src="design/sepa.gif">
  118.   <p>&nbsp</p>
  120.   <h2>1 6 &nbsp;j u i n &nbsp;2 0 0 4</h2>
  121.   <p>Nouvelle version du site, c'est la troisième ;-) dans un style plus reposant.
  122.   <img src="design/sepa.gif">
  123.   <p>&nbsp</p>
  125.   <h2> 1 5&nbsp; j u i n &nbsp;2 0 0 4</h2>
  126.   <p>Ajout du lien vers le ring de laFrenchTouch, ring qui rassemble les sites de custo française, bonjour à toute la team!
  127.      Vous avez pu remarquer que le site n'est pas souvent mise à jour, ceci par manque de temps, j'en suis désolé. <br>
  128.            Je tiens aussi à remercier ceux qui m'envoient des mails pour le site, comme toujours n'hésitez pas à me contacter si vous   chercher des walls, des icones... je met juste un peu de temps pour répondre ;-) .
  129.   <img src="design/sepa.gif">
  130.   <p>&nbsp</p>
  132.   <h2> 1 7&nbsp; a v r i l &nbsp;2 0 0 4</h2>
  133.   <p>2 nouveaux desktops et 5 archives. Ajout des sites de Fletchernic et Alxboss à l'initiative de Ultraman pour créer un ring sur la custo.
  134.   <img src="design/sepa.gif">
  135.   <p>&nbsp</p>
  137.   <h2> 1er &nbsp;m a r s &nbsp;2 0 0 4</h2>
  138.   <p>Quelques petites modifications sur le site (rubrique liens) et un nouveau desk.
  139.   <img src="design/sepa.gif">
  140.   <p>&nbsp</p>
  142.   <h2> 2 5 &nbsp;f é v r  i e r &nbsp;2 0 0 4</h2>
  143.   <p>Salut à toutes et à tous, ouverture du site.
  144.   <p>&nbsp</p>
  146.  
  147.  </div>
  149.  <div id="pied">
  150.    <p class="pied">tous droits réservés / satchie 2004 / valide <a href="http://jigsaw.w3.org/css-validator/validator?uri=http://satchie7.free.fr/style.css" target="_blank">css</a></p>
  151.  </div>
  154.  </div>
  155.  
  156.   </body>
  157. </html>


Message édité par satchie le 19-10-2004 à 14:03:39
mood
Publicité
Posté le 18-10-2004 à 14:09:29  profilanswer
 

n°875985
Lorr Hyde
L'univers est trop grand Zut !
Posté le 18-10-2004 à 14:48:45  profilanswer
 

Essai de positionner en absolute le #centre


---------------
Tout n'est descriptible que du point de vue de l'observateur, donc sûrement faux pour le reste du monde.
n°876003
satchie
http://satchie.free.fr
Posté le 18-10-2004 à 14:57:34  profilanswer
 

Ca ne fonctionne pas :(, toute la mise en page est modifiée que ce soit sous IE ou sous Mozilla.

n°876140
Lorr Hyde
L'univers est trop grand Zut !
Posté le 18-10-2004 à 16:05:12  profilanswer
 

Ok, j'ai essayer sous Opéra , idem que IE.
 
J'ai décortiqué ton code et j'ai trouver deux truc:
- Pratiquement toutes les balises <p> non fermée.
- Le cadre #gauche déborde de 10px sur le cadre #Centre
 
Je sais pas si cela est du à cela, mais bon c'est déjà ca de corriger ...
Autrement j'ai rien vu de flagrant ...


---------------
Tout n'est descriptible que du point de vue de l'observateur, donc sûrement faux pour le reste du monde.
n°876381
satchie
http://satchie.free.fr
Posté le 18-10-2004 à 19:32:31  profilanswer
 

Lorr Hyde a écrit :

Ok, j'ai essayer sous Opéra , idem que IE.
 
J'ai décortiqué ton code et j'ai trouver deux truc:
- Pratiquement toutes les balises <p> non fermée.
- Le cadre #gauche déborde de 10px sur le cadre #Centre
 
Je sais pas si cela est du à cela, mais bon c'est déjà ca de corriger ...
Autrement j'ai rien vu de flagrant ...


 
Merci beaucoup pour ta réponse, j'ai rajouté les balises de fermetures.
Pour le cadre gauche je crois pas qu'il dépasse  :??:


Message édité par satchie le 18-10-2004 à 19:32:43
n°876384
Lorr Hyde
L'univers est trop grand Zut !
Posté le 18-10-2004 à 19:33:48  profilanswer
 

satchie a écrit :

Merci beaucoup pour ta réponse, j'ai rajouté les balises de fermetures.
Pour le cadre gauche je crois pas qu'il dépasse  :??:


si si il dépasse !! :hello:  
essaye de mettre un border sur les cadres centre et gauche et tu verra


---------------
Tout n'est descriptible que du point de vue de l'observateur, donc sûrement faux pour le reste du monde.
n°876400
satchie
http://satchie.free.fr
Posté le 18-10-2004 à 19:52:42  profilanswer
 

Lorr Hyde a écrit :

si si il dépasse !! :hello:  
essaye de mettre un border sur les cadres centre et gauche et tu verra


 
tu as raison  :jap:  
J'ai mis  un width à "140px" pour gauche, mais le problème reste pour l'alignement de du "menu" et de  "a propos". Enfin bon c'est pas grave, après tout c'est pas si laid que ca, les gens n'ont qu'à utiliser un vrai navigateur.
Tu peux me donner ton avis sur le design du site  
http://forum.hardware.fr/forum2.ph [...] 0&subcat=0


---------------
.::Le Topic du Plus Beau Bureau.::. Mes Desks ::.
n°876514
satchie
http://satchie.free.fr
Posté le 18-10-2004 à 22:10:46  profilanswer
 

Toujours de pas solution, j'ai uploadé le site
http://satchie7.free.fr


---------------
.::Le Topic du Plus Beau Bureau.::. Mes Desks ::.
n°876695
Lorr Hyde
L'univers est trop grand Zut !
Posté le 19-10-2004 à 07:29:05  profilanswer
 

satchie a écrit :


les gens n'ont qu'à utiliser un vrai navigateur.


Ton problème est également présent sous Opéra, qui est un 'vrai' navigateur.
 
Mais je suis incapable de trouver d'où vient ce problème.
Un plus calé que moi .. peut-être ....


---------------
Tout n'est descriptible que du point de vue de l'observateur, donc sûrement faux pour le reste du monde.
n°876704
cybercap
Ours véritable
Posté le 19-10-2004 à 08:23:39  profilanswer
 

ça m'a l'air aligné là non ? (mozilla)


---------------
Site Photo
mood
Publicité
Posté le 19-10-2004 à 08:23:39  profilanswer
 

n°876705
Lorr Hyde
L'univers est trop grand Zut !
Posté le 19-10-2004 à 08:25:21  profilanswer
 

cybercap a écrit :

ça m'a l'air aligné là non ? (mozilla)


FireFox-Mozilla = même combat


---------------
Tout n'est descriptible que du point de vue de l'observateur, donc sûrement faux pour le reste du monde.
n°876883
satchie
http://satchie.free.fr
Posté le 19-10-2004 à 11:54:11  profilanswer
 

> cybercap et Lorr Hyde
Merci pour vos recherches  :jap:, laissé tomber même si je reste perplexe sur ce problème.
J'ai quand même validé ma page index http://satchie7.free.fr/index.html en xhtml 1.0 transitional mais y'a toujours le problème.  
 
ps: j'ai pas validé en xhtml 1.0 strict car je souhaite garder l'attribut "target" et puis je pense pas que ça soit la cause du décalage  :D .
 
conclusion:  
- c'est aligné sous mozilla / firefox / Safari 1.2 (testé grace à ce site http://www.danvine.com/icapture/ )
- c'est décallé sous Ie / Opera /  


Message édité par satchie le 19-10-2004 à 11:57:54

---------------
.::Le Topic du Plus Beau Bureau.::. Mes Desks ::.

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

  [CSS] Prb alignement de texte, Ok sous Firefox mais foireux sous IE

 

Sujets relatifs
zoom d'image css-> image décalée[CSS] Affichage avec Opéra
[CSS] Problème de positionnementNouvel éditeur CSS
Commentaires dans Css[CSS] problème d'OverFlow
[CSS] JS et CSS ?[Resolu] [ASP] PRB avec espace dans une variable et affichage en html
pb avec le nom de mes zones de texte[css] IE ne comprend pas "inherit" ????
Plus de sujets relatifs à : [CSS] Prb alignement de texte, Ok sous Firefox mais foireux sous IE

Forum MesDiscussions.Net, Version 2010.2
(c) 2000-2011 Doctissimo
Page générée en 0.164 secondes

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