Forum : Placer image / texte [CSS]

Réponse acceptée

Lorsque tu utilises les Float , c'est inutile d'utiliser l'attribut Position: Absolute. De plus, pour qu'ils soient collés l'un à l'autre, ta div qui sert de container, ici hero-unit doit avoir pour largeur la somme des largeurs des div que tu veux mettre dedans, ici : avatar et contenu.

Par exemple : avatar a une largeur de 100px et contenu de 400px, ta div unit-hero devra être de 500px.

Voilà, ça devrait marcher. Mais comme te l'as dit Gregory, tu devrais regarder (Ou re-regarder) le tutoriel du positionnement de Grafikart.

PS : Si tu ne t'en sers pas pour autre chose, le Position: Relative de hero-unit ne te sers plus à rien.

Folki

Réponse acceptée

Moi j'utiliserais plutôt "display:inline-block", et un vertical-align:top à ta class contenu, comme ça il s'alignera automatiquement avec ton avatar. Et plus besoin d'utiliser un clear.
Puis comme dit Epik, n'oublie pas de donner les dimensions à tes div.

Gregory

regarde du cote des floats ;)
Y a pleins de tutos sur les positions notamment celui de Grafikart ici
Bon visionnage

Benjamin Garcia BP

Auteur

Bonjour, Merci de ta réponse.

J'ai visionné le tuto de GrafikArt, mais je n'arrive pas a bien positionner les éléments.

Je ne demande pas de réponses toutes faites mais juste quelques explications sur la div de l'avatar du comment_header et du comment_content.

Merci.

Epik

Sur Grafikart, les commentaires sont composés de 2 parties : L'avatar à gauche et le message à droite.

Pour placer ces 2 éléments, il a utilisé la propriété Float. Ainsi, l'avatar est "Float: left" et le message est "Float: right". Ils seront donc positionnés sur la même ligne mais l'un étant sur la gauche et l'autre, sur la droite.

Si tu as toujours un problème, poste ton code ici, on pourra regarder ce qui ne va pas :)

Benjamin Garcia BP

Auteur

Salut, voici mon code :

[CSS]

.ligne {
  border-bottom:#BFC9AE dashed 1px;
}
.comment-ligne {
  border-bottom:#BFC9AE dashed 1px;
  margin-bottom: 2px;
}
.ligne-right {
  border-right:#BFC9AE dashed 1px;
}
.ligne-left {
  border-left:#BFC9AE dashed 1px;
  right: 3px;
}
.gg {
  margin-bottom: 30px;
  margin-top: 30px;
  line-height: 16px;
  color: #ffffff;
  background-color: #2d2d2d;
  -webkit-border-radius: 2px;
     -moz-border-radius: 2px;
          border-radius: 2px;
}
.hero-unit {
  padding: 60px;
  margin-bottom: 30px;
  margin-top: 30px;
  font-size: 18px;
  font-weight: 200;
  line-height: 30px;
  color: #ffffff;
  position: relative;
  background-color: #2d2d2d;
  -webkit-border-radius: 2px;
     -moz-border-radius: 2px;
          border-radius: 2px;
}
.avatar {
  position: absolute;
  float:left;
}
.contenu {
  position: absolute;
  float:right;
}

Alors je vous explique, je mais mon avatar et mon contenu dans la class hero-unit, avatar doit être à coté du contenue.

Screen :

Screen 1 avec les class (avatar, contenu)

Screen 2 ce que j'a avant de vouloir mettre les avatar :

:/

MFifou

Essaies de préciser un "width" pour chaque classe (avatar et contenu).

Et si t'arrives pas avec les float, utilises un tableau :)

Placer image / texte [CSS]

7 réponses