[Résolu] Conseils avant de coder

Bonjour,

Vu que je suis loin de maitriser CSS, je voulais vous demander conseil avant de coder pour m'éviter de longues heures à tout refaire

Ma question porte sur un header "chargé".



En A et D, c'est une image, donc pas de souci majeur je pense. Mon questionnement porte plutôt sur B et surtout C.

En B, c'est du texte, donc la largeur peut être variable je pense, les deux trois lignes s'ajusteront je pense.

Mais en C, c'est une largeur non-connue, qui varie selon l'info qui sera dedans (soit du texte, soit une ou des images ou les deux). Je voudrais que C soit aligné à droite et que B soit centré.

Donc ce que j'avais pensé, c'est de faire un conteneur Header qui englobe toutes les DIV A B C D. Et englober les DIV B et C dans un conteneur aussi, admettons une DIV BC.

Pour le positionnement, je pensais à mettre BC en float, A et D en relatif. A l'intérieur de BC, mettre C en float et mettre B en relatif avec un text-align center.

Ca vous semble bon ?

Merci
Modifié par Gimx (24 Feb 2010 - 16:52)

Salut,
Personnellement je ne vois pas l'intérêt ici d'utiliser le positionnement en relatif...

Voici que je moi je ferais dans un cas pareil (je ne suis pas pros, mais je commence à me débrouiller)

Div A en float:left avec un largeur fixe
Div B en float: left aussi. À voir s'il faut ajouté une largeur ou pas.
Div C en float: right
Div D ajouter un clear: both pour permettre à cette div de passé sous les 3 div précédant

Suite à ça il y aura sûrement quelques petit ajustement à faire. Je pense aussi que tu n'aura peut-être pas à mettre de float sur le div B qui devrait prendre naturellement la place laisser par les div A et C.

Ah oui... Je vais chercher midi à 14h... J'essaye demain.

Merci

Bonjour,

B ne sera centré que si A et C ont la même largeur. Tu voulais dire "au milieu"/entre A et C je suppose ?

Si B et C sont plus ou moins flexibles, j'aurais testé un ordre HTML A C B et resp. les faire flotter à gauche, droite et rien.

Un div autour de B et C pourquoi pas ... J'y aurais pas pensé mais du coup B+C a une largeur connue ==> display: inline-block; sur A et (BC) sans aucun espace ni retour-chariot entre les deux éléments. Tu évites ainsi plein de soucis des flottants, nickel

Petit retour quand même... Avec les floats left et right, comme suggéré par Julie et Felipe, ça se passe bien. J'ai vraiment été chercher compliqué sur ce coup là

Merci