28220 sujets

CSS et mise en forme, CSS3

Bonjour à tous,

Je suis en train de recoder de A à Z mon site perso car question standard W3C, ce n'était vraiment pas ça. Smiley confused

J'en profite donc pour m'initier aux joies des feuilles de style et éviter les <table> <table> de <table> Smiley langue .

Cela progresse pas mal. Il y a encore du boulot.

J'en viens donc à mon principal problème (pour l'instant Smiley sweatdrop )

Pour entrer dans le vif du sujet, vous pouvez jeter un coup d'oeil
=> HTML
=> CSS.

J'ai pensé aux personnes qui allaient peut être m'aider. J'ai mis des blocs de couleur Smiley biggrin .

Donc sous IE :
C'est exactement ce que je souhaite faire.
# Bloc rouge à gauche de taille 180px avec une liste de liens centrée.
# Bloc vert à droite qui occupe 100% de la place restante avec son contenu centré.
-> Le Redimensionnement marche. Le bloc vert "s'étend".

Passons maintenant aux 2 problèmes.
Sous Firefox :
# La liste dans le bloc rouge n'est pas totalement centrée.
# Le bloc vert pose un plus gros problème :
Il passe sous le bloc rouge est forcément son contenu n'est pas du tout centré.
Sauf que "!!!!!!!!!!!!! Infos centrées !!!!!!!!!!!!!" est centrée Smiley sweatdrop

J'ai essayé différentes choses avec les float position ... enfin je ne me rappelle même plus.
Je suis un peu largué ...

Ce que j'aimerais c'est :
# Avoir mon bloc rouge à gauche.
# Mon bloc vert à droite avec son contenu centré et surtout qu'il occupe 100% de l'espace restant pour s'adapter aux redimensionnements.


J'en appelle à une âme charitable pour m'aider à corriger cela.
Merci beaucoup Smiley smile

Au passage,
Bravo à toute l'équipe de Alsacreations :
Site formidable et forum de qualité.
Ce n'est pas de la lèche Smiley langue , c'est mérité Smiley smile
Modifié par zeXav (05 Aug 2005 - 21:50)
Après une bonne nuit de sommeil, j'ai trouvé les solutions. Smiley sweatdrop
Seulement je ne comprends pas trop le fonctionnement de IE.

# La liste dans le bloc rouge est maintenant centrée.
Au lieu de jouer sur une largeur fixe des éléments de la liste, je fixe les marges.
Donc il y a autant d'espace à gauche qu'à droite.

# Le bloc vert maintenant :
Je lui mets une margin-left de la taille de mon bloc rouge.
Il apparait donc à droite de ce bloc rouge.

Pourquoi IE ne rajoute-il pas encore de la marge ?
En effet il était déjà placé correctement ...

Pourquoi je ne pouvais pas faire :
Sur mes 2 blocs un float:left et sur le vert un width:100% ?

A force de tatonner, je comprends un peu plus les positionnements mais celà n'est quand même pas simple.
Surtout quand 2 navigateurs donnent des résultats différents. Smiley langue