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

Marsh Posté le 18-10-2004 à 14:09:29

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:

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 :

body {
font-family: "Trebuchet MS", serif;
font-size: 12px;
margin: 0;
padding: 0;
background : #ffffff url("design/fond.png" ) repeat-x 0% 0%;
}
#header {
height: 170px;
background-color: #ffffff;
background-image:url("design/header3.png" );
}
#conteneur {
position: absolute;
width: 750px;
left: 50%;
margin-left: -375px;
background-image:url("design/teneur.png" );
background-repeat: repeat-y;
background-color:#ffffff;
}
#centre {
background-color:#ffffff;
margin-left: 150px;
padding-left: 10px;
padding-right: 20px;
background-image:url("design/contenu.png" );
background-repeat: repeat-y;
}
#gauche {
padding-left:10px;
position: absolute;
left:0;
width: 150px;
background-image:url("design/menu.png" );
background-repeat: repeat-y;
}
#pied {
height: 30px;
background-color: #ffffff;
background-image:url("design/pied.png" );
background-repeat: repeat-y;
text-align:center;
margin-top: 50px;
}
/* titre */
h1 {
font-size: 13px;
font-family: "Lucida Grande", Verdana, Helvetica, Sans-serif;
color:#c09e64;
text-align: left;
}
/* titre des dates des news*/
h2 {
font-size : 13px;
font-family: "Trebuchet MS", serif;
color:#425f6a;
text-align: left;
}
/* titre des news*/
h3 {
font-size : 13px;
font-family: "Trebuchet MS", serif;
color:#3a7100;
text-align: left;
}
/*le menu de navigation */
h4 {
font-size : 9px;
font-family: "Trebuchet MS", serif;
color : #ffffff;
text-align: center;
word-spacing: 10px;
}
/*les paragraphes*/
p {
color: #3c3c3c;
font-size : 12px;
margin: 0px 0px 0px 0px;}
/*le menu à gauche*/
.menugauche {
list-style-image:url("design/puce.gif" );
margin: 0;
padding-left:30px;
}
p.custo {
color: #414d61;
font-size : 10px;
margin: 0px 0px 0px 0px;}
p.pied{
color: #cacaca;
font-size : 10px;
margin: 0px 0px 0px 0px;}
/*les liens*/
a:link {color: #056f8d; text-decoration:none; font-size : 12px; font-family: "Trebuchet MS", serif;}
a:visited {color: #056f8d; text-decoration:none; font-size : 12px; font-family: "Trebuchet MS", serif;}
a:hover {color: #91becb; text-decoration:underline; font-size : 12px; font-family: "Trebuchet MS", serif;}
/*a.lien2:link {
font-family: "Trebuchet MS", serif;
font-size : 12px;
color: #b6cad2;
text-decoration: none;
}
a.lien2:visited {
font-family: " "Trebuchet MS", serif;
font-size : 12px;
color: #b6cad2;
text-decoration: none;
}
a.lien2:hover {
font-family: "Trebuchet MS", serif;
font-size : 12px;
color: #b6cad2;
text-decoration: underline;
}
a.lien2:active {
font-family: "Trebuchet MS", serif;
font-size : 12px;
color: #b6cad2;
text-decoration: none;
}*/

le html

Code :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
<title> Satchie :: Accueil </title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="conteneur">
<div id="header">
</div>
<div id="gauche">
<h2>M e n u </h2>
<p ><a href="index.html"> News </a>
<p ><a href="articles.html"> Articles </a>
<p ><a href="creation.html" > Créations</a>
<p ><a href="desktops.html"> Desktops </a>
<p ><a href="archives.html"> Archives </a>
<img src="design/sepamenu.gif">
<br>
<h2>A f f i l i a t i o n</h2>
<a href="http://perso.wanadoo.fr/planetcyber/lafrenchtouch/" target="_blank"><img src="design/ft.png" border="0" /></a>
<img src="design/sepamenu.gif">
<br>
<h2>I n f o s</h2>
<p >Pseudo: Satchie
<p >Nationalité: Française
<p >Ville: Lyon
<p >Age: 26</p>
<p >Mail: <a href="mailto:satchie@free.fr">Satchie@free.fr </a></p>
<img src="design/sepamenu.gif">
<br>
<h2>L i e n s</h2>
<p class="custo"><a href="http://customxp.net/"target="blank">CustomXP</a><br>
<p class="custo"><a href="http://www.deviantart.com/"target="blank">Deviantart.com</a><br>
<p class="custo"><a href="http://www.foood.net/"target="blank">FoodIcons</a><br>
<p class="custo"><a href="http://www.gfxoasis.com/" target="blank">GfxOasis</a><br>
<p class="custo"><a href="http://www.rad-e8.com/"target="blank">RadE8</a><br>
<p class="custo"><a href="http://www.studiotwentyeight.net/"target="blank">Studio28</a><br>
<p class="custo"><a href="http://www.iconfactory.com/"target="blank">The Icon Factory</a><br>
<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>
<p class="custo"><a href="http://forum.hardware.fr/hardwarefr/Discussions/sujet-10270-1.htm" target="blank">Topic Hardware.fr</a>
<p class="custo"><a href="http://www.trucsenvrac.com/"target="blank">Trucsenvrac</a>
<img src="design/sepamenu.gif">
<br>
<br>
<p class="custo">Visites: <img src="http://perso0.free.fr/cgi-bin/wwwcount.cgi?df=satchie.dat&dd=microsc&ft=0" align="middle"></p>
</div>
<div id="centre">
<h2>A  p r o p o s </h2>
<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.
<img src="design/sepa.gif">
<p>&nbsp</p>
<h2>1 8  o c t o b r e  2 0 0 4 </h2>
<p>Voici la cinquième version de mon site. Quelques nouveautés à savoir :
<ul class="menugauche">
<li> Une refonte complète du site en utilisant les Css. </li>
<li> Une nouvelle rubrique intitulée "<a href="articles.html" target="_parent">Articles</a>" avec un petit tutorial pour débuter la customisation.</li>
<li> Un nouveau desk basé sur le style BeOS. <br>
<a href="Desktop/Grand/beos.png" target="_blank"><img src="Desktop/Petit/beos.png" width="185" height="139" border="0" /></a>
Plus d'informations dans la rubrique "<a href="desktops.html" target="_top">Desktops</a>"</li></ul>
<img src="design/sepa.gif">
<p>&nbsp</p>
<h2>1 2  s e p t e m b r e  2 0 0 4</h2>
<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.
<img src="design/sepa.gif">
<p>&nbsp</p>
<h2>31  a o û t  2 0 0 4</h2>
<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>
<img src="design/sepa.gif">
<p>&nbsp</p>
<h2>30  a o û t  2 0 0 4</h2>
<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>
Pour information, la customisation des différents programmes à savoir bsplayer et winamp sur mes deux derniers screenshots n'est pas encore terminée.
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.
<img src="design/sepa.gif">
<p>&nbsp</p>
<h2>19  a o û t  2 0 0 4</h2>
<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.
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!
<img src="design/sepa.gif">
<p>&nbsp</p>
<h2>19  j u i l l e t  2 0 0 4</h2>
<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.
<p>&nbsp</p>
<h2>1 4   j u i l l e t  2 0 0 4</h2>
<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>
<br>
<a href="design/gfxoasis.png" target="_blank"><img src="design/gfxoasisp.png" width="202" height="152" border="0" /></a> <img src="design/sepa.gif">
<p>&nbsp</p>
<h2>1 8  j u i n  2 0 0 4</h2>
<p>Spéciale dédicace à DocVespine! J'ai corrigé la faute :o <br>
Ajout d'un nouveau desk et de deux walls.</h3>
<img src="design/sepa.gif">
<p>&nbsp</p>
<h2>1 7  j u i n   2 0 0 4</h2>
<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.
<img src="design/sepa.gif">
<p>&nbsp</p>
<h2>1 6  j u i n  2 0 0 4</h2>
<p>Nouvelle version du site, c'est la troisième ;-) dans un style plus reposant.
<img src="design/sepa.gif">
<p>&nbsp</p>
<h2> 1 5  j u i n  2 0 0 4</h2>
<p>Ajout du lien vers le ring de laFrenchTouch, ring qui rassemble les sites de custo française, bonjour à toute la team!
Vous avez pu remarquer que le site n'est pas souvent mise à jour, ceci par manque de temps, j'en suis désolé. <br>
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 ;-) .
<img src="design/sepa.gif">
<p>&nbsp</p>
<h2> 1 7  a v r i l  2 0 0 4</h2>
<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.
<img src="design/sepa.gif">
<p>&nbsp</p>
<h2> 1er  m a r s  2 0 0 4</h2>
<p>Quelques petites modifications sur le site (rubrique liens) et un nouveau desk.
<img src="design/sepa.gif">
<p>&nbsp</p>
<h2> 2 5  f é v r i e r  2 0 0 4</h2>
<p>Salut à toutes et à tous, ouverture du site.
<p>&nbsp</p>
</div>
<div id="pied">
<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>
</div>
</div>
</body>
</html>

Message édité par satchie le 19-10-2004 à 14:03:39

Reply

Marsh Posté le 18-10-2004 à 14:09:29

Reply

Marsh Posté le 18-10-2004 à 14:48:45

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.

Reply

Marsh Posté le 18-10-2004 à 14:57:34

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

Reply

Marsh Posté le 18-10-2004 à 16:05:12

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.

Reply

Marsh Posté le 18-10-2004 à 19:32:31

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

Reply

Marsh Posté le 18-10-2004 à 19:33:48

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.

Reply

Marsh Posté le 18-10-2004 à 19:52:42

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

Reply

Marsh Posté le 18-10-2004 à 22:10:46

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

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

Reply

Marsh Posté le 19-10-2004 à 07:29:05

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.

Reply

Marsh Posté le 19-10-2004 à 08:23:39

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

---------------
Site Photo

Reply

Marsh Posté le 19-10-2004 à 08:23:39

Reply

Marsh Posté le 19-10-2004 à 08:25:21

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.

Reply

Marsh Posté le 19-10-2004 à 11:54:11

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

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

Reply

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

Sujets relatifs:

Leave a Replay