[CSS] positionnement - IE vs le reste du monde

Recherche :

Mot : Pseudo : Filtrer
Bas de page
Auteur	Sujet : [CSS] positionnement - IE vs le reste du monde

cosmoschtroumpf

dawa powered

Bonjour à tous

J'ai fait un site qui a un logo, un menu et du contenu. Tout simple.

Le menu est censé s'afficher sous le logo, en ligne. Sous IE, aucun problème. Sous Firebird, impossible de le mettre en ligne. Here is my code :

index.php :

<!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>
<head>
<link rel="stylesheet" media="screen" href="screen.css" type="text/css" />
<title>titre</title>
</head>
<body>

<div id="logo">
<img src="images/logo.jpg" alt="Logo" />
</div>

<div id="menu">
<ul>
<li><a href="index.php">Accueil</a></li>
<li><a href="01.php">01</a></li>
<li><a href="02.php">02</a></li>
</ul>
</div>

<div id="texte">
<h1>Titre</h1>
<p>
Texte
</p>
</div>

</body>
</html>

screen.css :

#logo {
background-color: #EEEBB7;
text-align: center;
border: solid 2px #EDCE82;
margin: 10px;
padding: 5px;
}

#menu {
font-weight: bold;
padding: 5px;
margin: 5px;
overflow: hidden;
color: #cccccc;
text-align:center;
}

#menu ul {
padding-left: 0;
margin: 0;
margin-left: 5px;
margin-top: 5px;
background-color: #D6F59B;
display: inline;
}

#menu li {
border: 1px solid #7bb97b;
list-style: none;
margin: 0;
padding: 1px;
color: #ccc;
font-weight: bold;
display: inline;
width: 130px;
}

#menu li a {
color: #669B00;
text-decoration: none;
display: block;
background-color: transparent;
padding-left: 0;
margin-top: 0;
}

#menu li a:hover {
color: #D6F59B;
background-color: #669B00;
background-image: url(images/interface/derriere_menu_up.gif);
background-repeat: no-repeat;
}

#texte {
padding: 5px;
padding-bottom: 10px;
border: 2px solid #E1620E;
background-color: #F7CFA4;
margin-left: 10%;
margin-right: 10%;
}

Donc y suffit de tester : sous IE ca marche impec, ca fait un zoli menu aligné. Sous Firebird, ca fait un truc en haut avec les elements du menu les uns au-dessus des autres. Ca marche, mais c'est pas beau.

Alors, comment faire ?

Merci !

Publicité

Taz

bisounours-codeur

écrire à MS pour qu'ils corrigent leur logiciel

drasche

et aussi aux 36000 sites de nazes qui prétendent que ton browser pas-IE n'est pas compatible

---------------
Whichever format the fan may want to listen is fine with us – vinyl, wax cylinders, shellac, 8-track, iPod, cloud storage, cranial implants – just as long as it’s loud and rockin' (Billy Gibbons, ZZ Top)

gm_superstar

Appelez-moi Super

Ca serait bien d'avoir une URL aussi...

Sinon la propriété "width" ne s'applique pas sur un élément en-ligne. Peut être que ton problème vient de là...

---------------
Incongru : une FAQ abandonnée sur les Standards du Web - FAQ périmée de blabla@Prog

cosmoschtroumpf

dawa powered

Citation :

et aussi aux 36000 sites de nazes qui prétendent que ton browser pas-IE n'est pas compatible

Où est-ce que tu as vu que j'ai dit ça, toi ? J'ai développé principalement pour IE, mais j'ai jamais dit que les autres n'étaient pas biens, au contraire. Ca me fait chier que IE ne respecte pas les normes. Il reste quand-même le plus utilisé.

Citation :

Ca serait bien d'avoir une URL aussi...

J'aurais bien aimé, mais le site n'est pas encore en ligne. Etant destiné à être sur Free, il ne le sera pas avant un moment, d'ici que free remarche.

Citation :

Sinon la propriété "width" ne s'applique pas sur un élément en-ligne. Peut être que ton problème vient de là..

Ah merde, pourtant ça marche sous IE ? ca me met une largeur fixe. Dans ce cas, est-ce que j'ai la possibilité de définir une taille fixe pour ces éléments, ou est-ce que je devrais revoir complètement mon style, ou est-ce que je suis obligé de passer par un tableau ?

Merci !

drasche

Cosmoschtroumpf a écrit :

Citation :

et aussi aux 36000 sites de nazes qui prétendent que ton browser pas-IE n'est pas compatible

ne le prend pas personnellement (j'ai jamais dit que t'avais dit ça hein ), j'ai surtout posté cela ironiquement (par rapport à ceux qui développent du IE only et qui barrent carrément l'accès de leur site aux autres browsers) parce qu'on venait de parler d'un sujet similaire dans un autre topic

scaldan

...

essaye peut être dans le #menu {position: absolute;left 1%}

cosmoschtroumpf

dawa powered

Citation :

Ok, désolé

Citation :

essaye peut être dans le #menu {position: absolute;left 1%}

Mais je veux qu'il soit centré, mon menu ! :sweat:

gm_superstar

Appelez-moi Super

Cosmoschtroumpf a écrit :

Si tu veux forcer une largeur, alors il faut que ton élément soit un bloc. Et pour mettre des blocs cote à cote, il y a soit le positionnement absolu, soit les flottants.
Les flottants sont plus facile à mettre en oeuvre donc il suffirat de mettre :

div#menu il {
float: left;
width: 130px;
}

Cosmoschtroumpf a écrit :

Mais je veux qu'il soit centré, mon menu ! :sweat:

Alors il faut que tu définisses une largeur pour ton DIV englobant #menu, largeur que tu connais puisque tu connais la largeur de tes LI.

Tu peux utiliser ces propriétés pour centrer ton DIV :

margin-left: auto;
margin-right: auto;

Mais, comme il l'est dit dans la FAQ, IE 5 ne reconnait pas ces valeurs, et ne centre un bloc qu'avec la propriété "text-align: center" (ce qui est idiot on en conviendra, puisque du texte n'est pas un bloc, mais bon c'est IE...).
Il faudrait donc que le conteneur du DIV #menu possède cette propriété. Mais en fait il y a plus simple. Puisque l'élément UL est lui même un bloc on peut faire comme ça :

div#menu {
text-align: center;
}

div#menu ul {
width: NNNpx;
margin-left: auto;
margin-right: auto;
}

div#menu il {
float: left;
width: 130px;
}

(je te laisse ajouter toute la décoration)

Message édité par gm_superstar le 21-11-2003 à 22:54:15

---------------
Incongru : une FAQ abandonnée sur les Standards du Web - FAQ périmée de blabla@Prog

antp

Super Administrateur
Champion des excuses bidons

C'est pas "text-align: left" plutôt que "float: left" pour les <il> ?

edit: après lecture du topic peut-être pas.
Mais ne faudrait-il pas remettre le text-align à left ?

Message édité par antp le 21-11-2003 à 23:02:05

---------------
mes programmes ·· les voitures dans les films ·· apprenez à écrire

Publicité

gm_superstar

Appelez-moi Super

antp a écrit :

C'est pas "text-align: left" plutôt que "float: left" pour les <il> ?

Ben il veut des blocs de même largeur cote à cote, et pour ça il faut utiliser les flottants...

text-align: left ça ne fera qu'aligner à gauche le texte contenu dans le LI.

---------------
Incongru : une FAQ abandonnée sur les Standards du Web - FAQ périmée de blabla@Prog

gm_superstar

Appelez-moi Super

antp a écrit :

Mais ne faudrait-il pas remettre le text-align à left ?

Non, je crois qu'il veut que le texte soit centré dans ses liens, donc on fait d'une pierre deux coups

---------------
Incongru : une FAQ abandonnée sur les Standards du Web - FAQ périmée de blabla@Prog

cosmoschtroumpf

dawa powered

Ok merci beaucoup pour cette explication détaillée

je teste ca, hum, des que je suis devant mon PC où y'a mon site...

FORUM HardWare.fr

Programmation

HTML/CSS

[CSS] positionnement - IE vs le reste du monde

Sujets relatifs
[CSS] hauteur max de div	[Javascript & CSS] position de l'appel
Hauteur en CSS ?	[CSS / HTML] Quel navigateur choisir ?
CSS - Probleme de hauteur pour un div englobant	[CSS] problème de DIV avec CLASS
[CSS] Feuille print qui part en sucette	[CSS] Div -> le texte ne s'affiche pas car pas de scrollbar
[CSS]un hover sur une cellule de tablo????	[CSS] Positionner 2 images sur la meme ligne
Plus de sujets relatifs à : [CSS] positionnement - IE vs le reste du monde

Page générée en 0.047 secondes