Alignement background titre avec image en dur

Bonjour à tous,

J'ai un petit problème avec un background de titre qui ne veut pas se mettre avec son texte.

une petite image vaut mieux qu'un long discours :
http://img688.imageshack.us/img688/6756/align.png

il faudrait donc que la petite puce vienne juste à gauche du Titre 1

<div><img width="100px" height="100px" alt="" style="margin: 10px; float: left;" />
<h1>Titre 1...</h1>
Votre texte ici...  Votre texte ici...  Votre texte ici...  Votre texte ici...  Votre texte ici...  Votre texte ici...  Votre texte ici...  Votre texte ici...  Votre texte ici...  Votre texte ici...  Votre texte ici...</div>

h1 {
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:14px;
font-weight:bold;
color:#000;
background: url(../images/titre.gif) no-repeat; padding: 0 0 0 20px;
background-position:left;
}

c'est une sorte de template pour article.

merci d'avance.
Modifié par Rabot (18 Nov 2009 - 16:17)

ton texte dans un paragraphe ?

Peux-tu utiliser les balises de code html et css stp pour la lisibilité ca serai pas mal aussi
le background c'est le petit truc violet ?

pourquoi l'image est dans un div ?

tout d'abord merci de ta réponse. Voilà pour la lisibilité.
Le background est la petite puce mauve oui.
J'ai enlevé la div et mis des <p> à la place mais toujours le même problème.

<p><img width="100px" height="100px" alt="" style="margin: 10px; float: left;" /></p>
<h1>Titre 1...</h1>
<p>Votre texte ici...  Votre texte ici...  Votre texte ici...  Votre texte ici...  Votre texte ici...  Votre texte ici...  Votre texte ici...  Votre texte ici...  Votre texte ici...  Votre texte ici...  Votre texte ici...</p>

t'as pas besoin d'un <p>
vue que tu as donné du style a ta photo tu as pas besoin de la mettre dans un paragraphe

regarde comment ce comporte ta photo avant
Modifié par Wamdeus (18 Nov 2009 - 16:25)

J'entends bien que je n'ai pas besoin du paragraphe mais sans rien cela donne la même, je test donc tout et n'importe quoi pour résoudre le problème.

Le texte se mets bien autour mais le background du h1 ne suit tjs pas... aucun changement

<img width="100px" height="100px" alt="" style="margin: 10px; float: left;" />
<h1>Titre 1...</h1>
Votre texte ici...  Votre texte ici...  Votre texte ici...  Votre texte ici...  Votre texte ici...  Votre texte ici...  Votre texte ici...  Votre texte ici...  Votre texte ici...  Votre texte ici...  Votre texte ici...

Bon on va reprendre ça.
Alors si tu veux tu peux utiliser un peu de css pour ton image.

img.hautgauche{
float:left;
width:100px;
height:100px
margin:10px;
}
h1 { 
font-family:Verdana, Arial, Helvetica, sans-serif; 
font-size:14px; 
font-weight:bold; 
color:#000; 
background: url(../images/titre.gif) no-repeat; padding: 0 0 0 20px; 
}

Ensuite en html

<h1>Titre 1</h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat./p>
<img class="haugauche" src="img/image.jpg" alt="c'est jolie" />

ca se comporte comment de cette manière ????

L'image vient en bas, après le texte.

C'est normal, il faut placer l'image plus tot dans le flux.

<img class="haugauche" src="img/image.jpg" alt="c'est jolie" />
<h1>Titre 1</h1> 
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat./p> 
 

mince oui, faut le mettre a la hauteur de h1 sinon au pire si elle s'affiche en dessous tu peux toujours faire un padding
Modifié par Wamdeus (19 Nov 2009 - 14:28)

Bonjour,

S'inspirer de l'existant...
La "structure" que tu tentes de reproduire est assez fréquemment utilisée, dans la section Apprendre de ce site par exemple

Une marge à gauche devrait te permettre d'afficher correctement la puce de ton titre...
"La solution" n'est pas unique, il y a différents moyens de parvenir à ce résultat
Regarde les codes source, étudie les feuilles de styles, fais des essais, et amuses-toi !

En passant, les styles dans la feuille de styles, les images décoratives dans la feuille de styles...

Cdt,
Sylvain

RubyOkena a écrit :
C'est normal, il faut placer l'image plus tot dans le flux.

c'est ce que j'avais fait au début.

J'ai cru qu'avec un "display:inline" sur le h1 ça avait résolu mon problème mais avec ça si 2 titres se suivaient, ils étaient sur la même ligne.

J'ai donc mis tout mes titres en "display:table", c'est peut être pas le plus catholique mais ça fonctionne... pas sur ie <8 mais j'abandonne pour le moment...

Un petit up du lundi.

@6l20 : Pour la marge à gauche, ce n'est pas une solution vu que la taille de l'image n'est pas fixe et que les titres doivent pouvoir être utilisés à d'autres endroits.

Personne n'aurait une idée lumineuse ?

merci d'avance

Rabot a écrit :
Le texte se mets bien autour mais le background du h1 ne suit tjs pas...

C'est une bonne définition du fonctionnement du positionnement flottant: le texte est repoussé, pas les limites des blocs.

Idées lumineuses:
1. Utiliser un contexte de formatage sur les blocs qui doivent être repoussés par les flottants.
2. Utiliser un margin-left sur ton bloc pour que le flottant ne soit pas en contact.

La deuxième solution est la plus simple. Elle est viable si ton flottant (image) a une largeur définie à l'avance (ici, 100px), de manière constante.

La première solution est intéressante et a plusieurs applications pratiques, mais elle est moins évidente à comprendre. Il faut, en gros, utiliser un overflow:hidden qui va créer pour l'élément concerné un contexte de formatage de bloc, ce qui a pour propriété de rendre le bloc impénétrable aux flottants.

Rabot a écrit :
J'ai cru qu'avec un "display:inline" sur le h1 ça avait résolu mon problème mais avec ça si 2 titres se suivaient, ils étaient sur la même ligne.

Si tu as deux H1 qui se suivent, tu as probablement un problème de qualité du code. Théoriquement, tu ne devrais jamais avoir deux titres HN de même niveau qui se suivent directement, sans contenu entre les deux.

Je parlais d'un h2 peut suivre directement un h1 et dans ce cas là vu que les 2 étaient en inline, bah ils se mettaient sur la même ligne...

Bon sinon le overflow:hidden est bien le messie de mon problème, merci beaucoup.