28173 sujets

CSS et mise en forme, CSS3

[Résolu]Positionnement CSS de titres par rapport à une image

bonjour,

ce que je veux faire, c'est afficher :
- une image (50px*50px)
- sur la droite de l'image : afficher un titre et, sous ce titre, un sous titre.
Soit qqchose comme ça :
upload/7471-cequejeveux.jpg


J'ai décidé de faire sémantique, j'ai donc codé mon XHTML comme ceci :
			<img src="http://static.flickr.com/69/230032037_99452683b1_o.jpg" alt="" width="50px" height="50px" style="vertical-align:top;" />
			<h1 style="font-size:130%;">title1</h1>
			<h2 style="font-size:110%;">title2</h2>

Comme img est une boite en-ligne et les hn des boites bloc, j'ai un "retour chariot", et mes titres se retrouvent sous l'image et pas à droite de l'image comme souhaité :
upload/7471-imageettitr.jpg
Bon, jusqu'ici tout va bien Smiley cligne

Comment faire pour obtenir que les titres se positionnent "en ligne" par rapport à l'image (le ss titre devant être sous le titre mais pas sous l'image !) ?

Solutions essayées :
1. j'ai pensé inclure mes balises hn dans un span (qui est un tag en-ligne) => c'est pas valide puisqu'on peut pas mettre de boites bloc dans une boite en-ligne...
2. Du coup, j'ai utilisé à la place du span un div en le mettant à display-inline => ça doit valider (je n'ai pas vérifié en fait), mais ça ne fonctionne pas...
3. je mets les 2 hn en display:inline => les 2 titres suivent , horizontalement, l'image sur une même ligne. Mais du coup, j'ai perdu le "retour chariot" entre h1 et h2, ce qui est normal puisque ces 2 balises ne sont plus des boites blocs. ..arrrggg...
4. je mets les 2 hn en display:inline + je mets un <br /> entre h1 et h2 => le sous titre h2 passe alors sous l'image :
upload/7471-sstitresous.jpg
et c'est pas beau !

Bon, je n'ai plus d'idées là....

Y-a-t-il qqn qui puisse me venir en aide, SVP ?

A+
Modifié par naudjf (15 Nov 2006 - 17:16)
Bon, finalement, j'obtiens le résultat souhaité en utilisant le positionnement relatif sur les balises hn :
			<img src="http://static.flickr.com/69/230032037_99452683b1_o.jpg" alt="" width="50px" height="50px" style="vertical-align:top;" />
			<h1 style="font-size:130%;margin-left:2px;position:relative;left:50px;top:-50px;">title1</h1>
			<h2 style="font-size:110%;margin-left:2px;position:relative;left:50px;top:-50px;">title2</h2>

Je ne sais pas pourquoi mais je suis déçu. Je pensais qu'il y avait plus simple que de faire comme ça, plus élégant...?

Bon, j'attends qq heures avant de mettre en [RESOLU] ce sujet car j'aimerais bien savoir s'il existait d'autres façon de faire CSS que celle-là Smiley cligne
Modérateur
bonjour,
plus simple , peut-etre comme ceci : en retirant le premier titre du flux .

Il faut pour cela que l'image soit assez haute pour permettre d'avoir "2 lignes a coté sans que quelles se chevauchent.

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>HTML 4.01 Transitional</title>
<style type='text/css'>
img  , h1 , h2 {
	display:inline;
}

h1  {
	position:absolute;
	margin:0;
}
</style>
</head>
<body>
<img  src="http://static.flickr.com/69/230032037_99452683b1_o.jpg" alt="" width="50px" height="50px"  />
<h1 style="font-size:130%;">title1</h1>
<h2 style="font-size:110%;">title2</h2>
</body>
</html>


++
cool Smiley cligne

Effectivement, ça fonctionne avec bp moins de code !!

Ce qui m'ennuie, c'est que je ne le comprends pas ce bout de code... Smiley confus

Smiley ohwell , je vais relire le cours sur le positionnement absolu d'alsa pour saisir le mécanisme Smiley cligne

rq : l'img en display:inline, c'est redondant, car img est déjà en soit une boite en-ligne.
Modérateur
oui Smiley smile , pour l'element en absolu , sans coordonnée de precisé il s'affiche a l'endroit ou il apparait dans le flux html et se trouve aussitot sorti du flux. , il s'affiche donc contre l'image , mais ignore sa hauteur et se positionne sur la partie haute de la ligne occupé par l'image. le h2 suit le flux normal et ne voit pas le h1 et s'affiche sur le "baseline".

++
c'est rigolo, j'en étais justement là :
a écrit :
En absolue, le bloc est généralement placé à l'aide des propriétés "top" et "left" par rapport au coin supérieur gauche du parent.
Si les valeurs top et left sont inexistantes, le bloc apparait là où il est déclaré ce qui peut servir pour placer correctement dans la page des éléments superposés.
du tutoriel ! Je ne connaissais pas du tout ça !

rq : Et effectivement, quand on remet un left et top (à supposer que j'ai plusieurs éléments h1 définis comme celà), ils se superposent tous au même endroit.

Good tip Smiley cligne
Modifié par naudjf (15 Nov 2006 - 16:36)
Sujet clos
Aller à