[CSS] positionnement - IE vs le reste du monde
positionnement - IE vs le reste du monde [CSS] - HTML/CSS - Programmation
Marsh Posté le 20-11-2003 à 11:20:26
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)
Marsh Posté le 20-11-2003 à 18:46:59
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
Marsh Posté le 21-11-2003 à 10:01:34
| 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 ! 
Marsh Posté le 21-11-2003 à 10:06:49
Cosmoschtroumpf a écrit :
|
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 
---------------
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)
Marsh Posté le 21-11-2003 à 14:10:07
essaye peut être dans le #menu {position: absolute;left 1%}
Marsh Posté le 21-11-2003 à 15:10:48
| Citation : 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 |
Ok, désolé
| Citation : essaye peut être dans le #menu {position: absolute;left 1%} |
Mais je veux qu'il soit centré, mon menu ! 
Marsh Posté le 21-11-2003 à 22:52:38
| Cosmoschtroumpf a écrit : 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 ? |
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 { |
| Cosmoschtroumpf a écrit : Mais je veux qu'il soit centré, mon menu ! |
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; |
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 { |
(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
Marsh Posté le 21-11-2003 à 23:01:15
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
Marsh Posté le 21-11-2003 à 23:03:41
| 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
Marsh Posté le 21-11-2003 à 23:04:27
| 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
Marsh Posté le 22-11-2003 à 13:09:26
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...
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
Marsh Posté le 20-11-2003 à 11:18:22
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 !