[resolu]Marges, positionnement, validation, et autres complications

Bonjour tout le monde,
alors j'ai essayé pas mal de chose avant de venir vous parler mais là je seche. Tout se passe sur ce site , mais avec différentes feuilles de style, vous comprendrez vite.

Premier probleme: validation w3c.
J'ai mis en place le style switcher d'alsa, et depuis j'ai 3erreurs que je n'arrive pas à resoudre. J'ai essayé de remplacer <label> par <span> ou <p>, mais le probleme reste. Alors si quelqu'un peut me dire un peu pourquoi ces erreurs, et eventuellement m'aider à les corriger, ça serait bien courtois .


Deuxième probleme: positionnement du style switcher avec IE avec le style champetre.
Si vous utilisez autre chose que IE (et je vous le souhaite), la position du menu déroulant vous semble pas innormale. Sous IE en revanche, il se retrouve tout en bas. J'ai essayé un positionnement en absolu, ça marchait sous FF, mais sous IE, il sortait du container, et se trouvait sur la partie droite de la page, et le décaler en mettant une marge négative n'aurait fonctionné qu'avec une seule résolution. Là encore, je ne vois pas trop le probleme.

Troisième probleme: positionnement du style switcher avec IE avec le style grunge.
Là cest simple, il disparait complétement, la seule solution pour mettre le style par defaut (champetre), est de supprimer les cookies. Bon ce style est encore en développement, mais c'est un probleme assez embetant, tout comme celui qui suit.

Quatrieme probleme: marge sous IE avec le style grunge.
J'ai tout d'abord pensé que c'etait du à l'interpretation que fait d'IE dans l'implémentation des <ul>, qu'il met un padding de 40px, là ou les autres mettent un margin de 40. DOnc j'ai suivi la FAQ et spécifié un padding:0 là ou je spécifais le margin, et inversement en spécifiant margin:0, là ou j'ai mis un certain padding.

Donc voilà, si vous avez un peu de temps a perdre sur mon cas (non désespéré), je vous remercie d'avance.

A +
Modifié par broadcastor (06 Jun 2006 - 12:05)

Bonjour,Premier problème: validation w3c.

a écrit :
Line 88 column 7: document type does not allow element "label" here; missing one of "p", "h1", "h2", "h3", "h4", "h5", "h6", "div", "pre", "address", "fieldset", "ins", "del" start-tag.

> Line 88 colonne 7 : le type de document ne permet pas d'utiliser l'élément "label" ici ; il manque un "p", "h1", "h2", "h3", "h4", "h5", "h6", "div", "pre", "address", "fieldset", "ins", "del" au début.

[#orange]<p>[/#]
     <label>Choisissez un style</label>
     <select name="style" class="select_switcher">
     <option value="champetre">champetre</option>
     <option value="style2" selected="selected">style2</option>
     <option value="grunge">grunge</option>	
     </select>
[#orange]</p>[/#]

Ceci est valable également pour les balises INPUT, etc.


Second problème: positionnement du styleswitcher avec IE et avec le style champêtre.
Le bloc div flotte à droite ; visiblement, il n'y a pas assez de place sous IE pour qu'il reste en haut. Un flottant ne pouvant empiéter sur un autre élément, il est repoussé là où il y a de la place : en bas sous IE.
L'espace occupé par le DIV est bien supérieur à son contenu, on peut le réduire un peu sans modifier la position du contenu. Le styleswitcher devrait ainsi remonter sous IE, sans bouger sous FF.


(Je regarde les autres un peu plus tard et ferais un edit - si personne ne passe avant. )
Modifié par (24 May 2006 - 14:56)

Premier probleme + Deuxieme probleme + NEKO = NO problem.
Merci, super les 2premiers sont résolus, reste les deux derniers. Merci a toi en tout cas, en attendant que je, ou quelqu'un trouve la reponse, bonne soirée a vous
Modifié par broadcastor (24 May 2006 - 21:43)

Bonjour,

Pour positionner le styleswitcher sous IE, style grunge:

#style_switcher{
text-align: left;
[#orange]position: absolute;
top: 59px;
right: -34px;[/#]
width: 150px;
color: #939d01;
}

Il a maintenant la même position sous moteur IE ou gecko.



Pour le décalage du texte sous IE, je n'avais pas vraiment le temps d'en chercher l'origine. Alors en attendant, pour résoudre le problème :

#central{
text-align:left;
margin: 50px 0 0 [#orange]35px;[/#] /*valeur des marges revues pour IE */
width:490px;
overflow: auto;
height:280px;}

#contenu>#central {
margin: 50px 0 0 160px; /*valeur d'origne pour les marges */
}

Avec cette marge diminuée pour IE, le texte occupe la bonne position.
Modifié par (26 May 2006 - 12:41)

salut neko, d'abord merci pour ton aide .

Le positionnement du menu deroulant est maintenant visible identiquement sur IE et FF, super, merci a toi.

Par contre, pour ce qui est de placer le div central sous FF, maintenant ce n'est plus bon, meme si ça l'est sous IE. Ta solution d'utiliser les selecteurs hierarchiques non reconnus par IE me semblait pourtant une bonne façon de contourner le pb. Alors je pense avoir fait une erreur de syntaxe pour que ça ne fonctionne pas sous IE, parce que j'avais deja utilisé cette technique, et ça marchait bien, donc là, je seche de nouveau .

En tout cas, merci, et a+

Bonjour,

a écrit :
maintenant ce n'est plus bon, meme si ça l'est sous IE.

Je ne comprend pas : pour moi, ça fonctionne bien. Suffit de ragarder ta page avec le style grunge sous IE et FF. Le texte est bien placé pour les deux navigateurs chez moi.

Où est le problème ?

Ahhh, c'est embetant, parce que chez moi j'ai bel et bien le probleme, meme apres avoir vidé mon cache, et idem sous opera .

C'est pas simple c'taffaire ...

Apres quelques tests sous des config similaires à la mienne (FF1.5 sous Win), j'ai de nouveau rencontré ce probleme de marge.

Une idée ?

Rien à voir, mais... superbe ton site

a écrit :
Rien à voir, mais... superbe ton site

Euhh ben merci

Tu rencontrais le probleme jedi ou pas ?

Pour les marges je suis un grand adepte d'utilisation de hack. C'est pas ce qu'il se fait de mieux, mais bon, ca à le mérite d'exister

Pour les marges je suis un grand adepte d'utilisation de hack. C'est pas ce qu'il se fait de mieux, mais bon, ca à le mérite d'exister

Oui c'est pas le probleme, mais il fonctionne pas sous certaine config, c'est ça qui me preocuppe

Bonsoir,

Je repasse un peu tard, mais tu as résolu ton problème ?