background-image et div flottants

Tchesko · 3 Novembre 2004

Bonjour,

Initialement, je cherchais à obtenir 3 div flottant a bordure apparente dont le contenu était de taille variable s'alignant en hauteur sur celui ayant la plus grande hauteur. :whistling:

J'ai essayé l'option display:table-cell ,(http://www.456bereastreet.com/lab/equal_height_ii/), mais il ne faut pas trop en demander à se brave IE... :blink:

Je me suis finalement résolu à utiliser une image de fond dans un div englobant pour obtenir l'effet escompté . Pour IE pas de problèmes, pour firefox, ça coince.

Problème : les 3 div sont en flottants, du coup mon image de fond n'apparait pas puisque le contenu de mon div de fond est flottant... Comment faire?

J'ai essayé en intégrant un hr invisible, mais cette solution, si elle me premet de faire apparaitre mon image de fond fait aussi apparaitre un espace blanc en haut de mon div de fond.

J'avoue avor des reticences à utiliser de position:relative... c'est peut être idiot...

Si quelqu'un à une idée, qu'il n'hésites pas, en attendant je cherche une nouvelel magouille...

Sylvain Trovalet · 4 Novembre 2004

http://www.webmaster-hub.com/index.php?sho...915&hl=colonnes

Tchesko · 4 Novembre 2004

En fait il ne s'agit pas uniquement d'une présentation en 3 colones, il faut aussi que le rendu donne l'impression que les 3 colones soient de hauteur identiques.

Mais j'ai trouvé une solution. ici

1 - Un div id="cadre"pour l'image de fond de la colonne de gauche.

2- on y insère un div id="conteneur" pour le fond de la colonne de droite.

3- on insere 3 divs dans conteneur.

- div id="col1" en float left.

- div id="col 2" avec un margin-left qui reprend la largeur de col1.

- div id="col3" en float right.

Evidement on pourrait avoir 50 colonnes... Je vois déja le cadre1, cadre2,cadre3... :wacko:

Avant j'imbriquais des tableaux, maintenant j'imbrique des div :nono:

Sylvain Trovalet · 4 Novembre 2004

Logique que ça ressemble à un présentation en tableau puisque quand tu l'as imaginé dans ta tête tu pensais encore en terme de tableau (ce n'est pas une critique mais un constat). C'est pour ça que l'on trouve que les présentations via CSS sont peu originales en général.

Tchesko · 4 Novembre 2004

Pas tout a fait.

Un graphiste réalise une charte graphique, il peut n'avoir que très peu de notions de HTML voir aucune, mais sa creation est structurée. Le développeur lui, met en place une structure en code et y applique ensuite des styles pour obtenir un rendu identique à la créa graphique.

Malheureusement, je me rends compte que les éternels problèmes de compatibilités nous obligent à "magouiller" pour obtenir un rendu fidèle (on ne devrait pas avoir à imbriquer des divs j'en veux pour preuve l'utilisation de display:table) . J'admet par contre qu'une bonne habitude de l'utilisation de CSS et de sa puissance doit permettre de réduire considérablement le nombre de magouilles.

Pour ce qui est des réalisations originales... voilà une belle illustration :wub: , mais l'originalitè n'est pas toujours souhaitable lorsqu'il s'agit de production corporate ou B2B au risque de froisser l'utilisateur final.

Sylvain Trovalet · 4 Novembre 2004

le graphiste généralement créé sa page en 2D sans effet de zoom possible, de superposition, bref il travaille en général comme pour une sortie papier, notamment car l'utilisation de tables n'avait pas grande marge de manoeuvre.

C'est d'ailleurs pour montrer le pouvoir de CSS que csszengarden a été créé.

voici le genre de sites où je vais pour chercher de l'inspiration :

http://www.meyerweb.com/eric/css/edge/

http://www.alistapart.com/

http://www.stopdesign.com/articles/

Modifié 4 Novembre 2004 par Sylvain Trovalet