Discussion :

[Pauloscorps]

Bonjour à tous,

J'ai un petit problème assez urgent à résoudre en CSS, je compte donc sur vous pour m'aider .

Voici donc mon CSS :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
 
.corpsArticle { background:green; font-size:80%; width:652px; height:auto; margin-top:0px; margin-left:258px; min-height:650px;
}
.produit { background:yellow; width:622px; height:auto; padding-left:15px; padding-right:15px; padding-top:0; margin-top:20px; }
.produit p { font-size:100%; margin:0; padding:0; }
.produit #texte { background:orange; width:450px; height:auto; padding:0; margin:0; }
.produit #texte p { font-size:100%; margin:0; padding:0;}
.produit #photo { background:pink; width:157px; border:none; float:right; }

Et l'architecture HTML :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
 
<div class="corpsArticle">
     <div class="produit">
          <div id="photo">
               <img src="monimage.jpg"/>
          </div>
          <div id="texte">
               <p> du blablabl </p>
          </div>
     </div>
</div>

Comme un dessin sera plus explicite qu'un long et ennuyeux paragraphes, en voici un (magnifique non ?)


Merci à tous d'avance pour votre aide .

Petite précision : Ce ne sont pas les couleurs de mon site hein !

[Bisûnûrs]

Un petit tour dans la FAQ :
http://css.developpez.com/faq/?page=...ment_flottants

[Pauloscorps]

Quelle rapidité !

Merci infiniment, cela marche parfaitement, pourtant j'avais chercher sur le forum et je n'avais pas pensé à la FAQ .

Encore merci, et désolé du dérangement du coup

[Pauloscorps]

Euh, une petite question subsidiaire ^^

Comment puis-je centrer verticalement le bloc orange par rapport au rose (ou au jaune peu importe, ils font la même hauteur) ?

J'ai essayé vertical-align:middle, et la technique avec le display:inline, mais cela ne fonctionne pas.

Merci d'avance.

[fallais]

Avec les marges peut-être ?
(Je ne vois pas ton image, pourrais-tu la mettre en PJ ?)

[Pauloscorps]

@Elwyn
J'ai pensé aux marges effectivement, mais je ne vois pas comment faire puisque la hauteur de mon bloc jaune est en automatique (la taille des photos variant).

Voici un lien vers mon image : http://www.casimages.com/img.php?i=1...1859355784.png

@Bisûnûrs
J'ai absolument besoin d'une compatibilité à partir d'IE 6 puisqu'il s'agit d'un site d'entreprise, qui compte 49% de ses visites par IE7 et inférieur.
En revanche, j'ai une feuille de style spécifique à IE, donc s'il existe un moyen pour IE également, pourquoi pas.

[Bisûnûrs]

Il y a la technique du display:table-cell sur le conteneur avec un vertical-align:middle dessus également, mais à n'utiliser que si tu ne comptes pas avoir de rétrocompatibilité IE6-7-8 ..
Impossible à faire autrement que part tableau sinon.