28220 sujets

CSS et mise en forme, CSS3

[résolu]Problème de positionnement vertical d'une image

Je souhaite réaliser une boite contenant à gauche une image de 200x200 et à droite un texte. J'ai donc choisit comme système le positionnement par "float". En clair ma boite ressemble à ça :


<div class="article>
  <img src="img.jpg" alt="">
  <div class="contenu_article">
  <p>bla bla bla</p>
  <ul>
    <li> truc truc</li>
    <li> truc truc</li>
    <li> truc truc</li>
  </ul>
  </div>
</div>


ensuite ma feuille de style a donc grosso modo cette forme :


.article img
{
float:left;
}

.contenu_article
{
margin_left: 220px;
}


Le hic c'est que mon image ressort de mon cadre "article". Elle ne semble pas être considérée comme un contenu (surement à cause de son positionnement en relatif (mais je croyais qu'il n'y avait que le positionnement en absolu qui faisait ça). Ceci m'oblige à ce que le contenu de "contenu_article" soit assez important pour remplir le cadre .... un peu nul non? J'aimerai donc savoir comment faire afin que l'image reste entièrement dans "article" en suivant sa propriété "padding:10px" et qu'elle soit centrée verticalement si le texte de "contneu_article" est trop long. J'aimerai également que "contenu_article" soit centré verticalement si le teste est trop court. En clair : je veux ce que ça donne avec un tableau mais sans tableau Smiley lol Merci pour votre aide
Modifié par orlin61 (15 Aug 2006 - 09:12)
Bonjour,

Voir FAQ du forum pour l'image.

L'alignement vertical d'un texte de ce type, de longueur imprévisible, n'est pas faisable actuellement en CSS2.1 de manière à passer dans les navigateurs courants (IE)
Modifié par Laurent Denis (14 Aug 2006 - 11:41)
Ok merci beaucoup. En ce qui concerne le centrage du texte y'a t'il un projet dans le css 3 pour permettre son centrage?
Bonjour (re)

Ce n'est pas un problème lié à un manque dans CSS2.1 : les propriétés nécessaires existent, mais ne sont pas implémentées par tous les navigateurs.
OK merci Laurent pour tes réponses.

En ce qui concerne l'alignement la propriété overflow:auto a trés bien fonctionné même si j'ai du ajouter une hauteur "biddon" pour IE.

Un autre problème Que j'ai oublié de mentionnée car différent c'est que IE m'entoure les image en bas de ma page alors que Firefox ne le fait pas et je ne comprend pas pourquoi..
Bonjour
Il y a n'y a pas qu'avec Internet Explorer qu'il y a une bordure, mais sous les autres navigateurs elle est blanche : 
#logos_prog>a
{
color:#fff;
}

Internet Explorer ne comprend pas le combinateur filial (>) et n'applique pas la règle (d'ailleurs il y aurait un autre problème : il faudrait donner la couleur directement à la bordure de l'image)
Tu peux en revanche le remplacer par un combinateur de descendance (un simple espace) :
#logos_prog img
{
border-color: #fff; /* ou border: none; */
}

Modifié par Alan (14 Aug 2006 - 15:51)
Sujet clos
Aller à