[RESOLU] - Float pas à la bonne hauteur... Et IE !

Hello !

Suite aux conseils obtenus sur ce même forum, j'ai entrepris de redesigner quelques éléments de mon site.

1. Premier problème... Sous FireFox, le titre de rubrique "partenaires" n'est pas à la même hauteur que "news from partout"... Pourquoi donc ? Mystère...

2. Sous IE c'est le chaos total. Je savais que IE et le CSS ça faisait deux mais là... Enfin bref, y a t-il un moyen de faire rentrer tout ça dans l'ordre ?

--> Mon site

Merci d'avance !
Modifié par Forgaria (29 Apr 2005 - 01:30)

Salut,

1- Je n'ai pas regardé en détail, mais si ton bloc "partenaires" est en float et s'il est déclaré après le bloc de contenu, c'est normal.
La comportement d'un élément flottant est celui-ci :
- il est d'abord placé dans le flux normal (donc ici sous le bloc constituant la partie "news from partout")
- puis il est poussé à droite ou gauche de son conteneur (il devient flottant) et le contenu qui suit cet élément flottant s'affiche alors autour de lui.

2- IE a effectivement des bugs au niveau des positionnements flottants entre autre.
As-tu pensé à suivre la Méthodologie placée en post-it du Salon CSS ? En général elle résoud presque tous les problèmes courants d'affichage

Bonne chance

1. Il me semble que tout est bon par rapport à ce que tu dis justement. C'est pour cela que je m'étonne.

2. Je vais le faire, je n'avais pas vu le post-it !

Je up parce que je patauge là...

Après avoir essayé plusieurs trucs, je me suis rendu compte que c'est le premier <h1> qui pose problème... Si ça peut aider, moi je comprends rien là !

Merci !

Non ? Toujours pas ?

Je vais finir par croire que ce que je veux faire est impossible...

C'est normal que ton news from partout et ton partenaire ne soit pas alignés.

Comme te l'explique Raphaël, ton bloc avec partenaire va "se mettre en float avec le bloc de contenu" or ton titre news from partout est hors de ce bloc, il est donc forcément au dessus.

Tu as donc 2 solutions :
* utiliser margin-top negatif sur ton bloc partenaire, mais bon, c'est un peu bricolage
* intégrer ton news from partout au bloc de contenu, ce qui ma fois règle la question du décalage (à 2 px de marge près à régler), et parait plus logique.

Me vienent ensuite différentes remarques sur le reste de la page si tu veux :
* le texte de citation est quasi illisible, trop proche de la couleur de fond, il faudrait CONTRASTER
* le balisage des titres pourrait être revu, utiliser <h1> pour le titre de ton site par exemple et décaler les niveaux pour rendre le tout cohérent.
* j'ai pas regardé le reste, mais peut être qu'il y a redire (ou peut être pas ) Si tu veux quand tu auras finis ou bien bien avancé, tu pourras demander un avis technique d'ensemble sur ta page pour corriger d'eventuelles erreurs avant de t'embarquer plus loin
* pour IE, la plupart des choses sont resolvables avec un peu de documentation, je n'ai pas regardé le "désastre" mais ta mise en page ne laisse pas transparaitre de problème insurmontable pour IE.

@++
* pour IE, rien d'insurmontable à priori, en général les soucis d'IE sont solvable, d'autant que ta mise en page ne semble pas tellement compliqué, IE s'en sors très bien de ce genre de cas
Modifié par Olivier (29 Apr 2005 - 01:20)

J'ai regardé un peu ton code, il y a des trucs à revoir quand même, rien de catastrophique, mais il y a des incohérences et des choses à adapter si tu veux mon avis.

Mauvais balisage des <h1> et des titres en général, <div>&nbsp;</div>, class au lieu d'ID etc.

Ca pourrait être aussi beau niveau code que niveau graphisme

Merci pour votre aide !

J'ai compris. Un peu long à la détente mais j'ai compris !

1. Pour la couleur des citations, je vais voir mais je ne veux pas casser la charte graphique avec une couleur qui contraste trop...
2. Le titre est compris dans une image : je voulais qu'il soit antialiasé.
3. Je le ferai !
4. C'est noté !

Merci pour tes "commentaires bonus" Olivier !

Forgaria a écrit :
2. Le titre est compris dans une image : je voulais qu'il soit antialiasé.

C'est pas grave ça , tu peux mettre ton titre

<div id="header"><h1>Le Bunker Webzine</h1> <h2>Le webzine enragé</h2></div>

Et ensuite, tu fais les manip qui faut pour masquer le texte et utiliser ton image.
Plusieurs avantages à la méthode :
* le titre de ta page est écrit en dur dans le code source, utilisable donc sans CSS ou pour un futur redesign avec titre en texte ou pour un autre thème etc
* le titre sera lu par un lecteur d'écran (contrairement à &nbsp; )
* niveau référencement, tant qu'on y est on va pas cracher dessus , <h1> ayant un poid important pour les principaux moteurs (qui a dit google ? !) c'est dommage de le multiplier à profusion et surtout pour le contenu qu'il contient. Le titre de ton site est à mettre en valeur tant qu'à faire.

Pour le contraste, tu pourrais mettre un noir, ou un bordeau foncé, ça ne casserai pas la charte graphique et permettrait une lecture plus facile.

Sinon, vraiment faudra que tu passes à la casserole de la critique constructive dans le salon qui va bien , j'aime bien ton truc, le graphisme j'entend, alors autant qu'on t'aide à faire parfait niveau code
Modifié par Olivier (29 Apr 2005 - 01:38)

Ca marche. Je fais évoluer un petit peu tout ça, niveau contenu, et je repasse sur le salon approprié.

Merci encore pour ton aide !