Problème DIV > alignement image + texte

**VFone** · 07/01/2008, 16h58

Bonjour.

J'ai un problème dans un bloc
J'ai une image (bouton) et un texte à sa droite.
Malheureusement le texte ne se centre à droite par rapport à l'image.

mon code css:

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
           #titre_texte {
                        width:806px;
	                      height:30px;
	                      border-top-color: #dbdbdb;
	                      border-bottom-color: #FFFFFF;
	                      border-right-color: #FFFFFF;
	                      border-left-color: #FFFFFF;
	                      border-width: 1px;
                        border-style: solid;
                        font-size : 12px;
                        font-family : Verdana, Arial, Helvetica, Geneva, sans-serif; color:#999999;
                        font-weight: bold ;
}

mon code html:

Code :

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

1
2
3
<div id="titre_texte" align="left">
<img src="images/fleches.png" alt="fleches">&nbsp; &nbsp; <?php echo $site_bienvenue ?></div>
</div>

Je sais que c'est un problème de div mais je ne trouve pas la solution

Merci pour votre aide

**BnA** · 07/01/2008, 17h16

Salut!

Tourne-toi vers les propriétés CSS "line-height" et "vertical-align".

Et je te conseillerais ceci, comme mise en forme:

Code html :

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

1
2
3
4
 
<div id="titre_texte" align="left">
<p><img src="images/fleches.png" alt="fleches"><?php echo $site_bienvenue ?></p>
</div>

Bonne continuation!

**Candygirl** · 07/01/2008, 17h51

Bonjour,

Visiblement les "flèches" ne sont là que dans un but purement décoratif. Leur place serait donc en arrière plan et donc de jouer avec le background-position pour les centrer. De plus, s'il s'agit d'un titre, un balisage à l'aide de h1 ou h2,... serait vraisemblablement plus approprié. Par exemple:

Code html :

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

1
2
 
<h1><?php echo $site_bienvenue ?></h1>

Code :

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

1
2
3
4
5
6
7
h1 {
  border-top: 1px solid #dbdbdb;
  font:bold 0.75em Verdana, Arial, Helvetica, Geneva, sans-serif;
  color:#999;
  padding:0.5em 0 0.5em 30px;
  background:url(images/fleches.png) no-repeat left center;
}

**VFone** · 07/01/2008, 19h01

Merci pour votre aide à tous les 2
J'ai tout mélangé vos propositions et J'y suis arrivé lol

voici mon code css:

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
 
           #titre_texte {
                        background-image:url(http://tutogimp.free.fr/images/fleches.png);
                        background-repeat: no-repeat;
                        background-position: 0.5cm 0cm;
                        width:806px;
	                      height:30px;
	                      border-top-color: #dbdbdb;
	                      border-bottom-color: #FFFFFF;
	                      border-right-color: #FFFFFF;
	                      border-left-color: #FFFFFF;
	                      border-width: 1px;
                        border-style: solid;
                        font-size : 12px;
                        font-family : Verdana, Arial, Helvetica, Geneva, sans-serif; color:#999999;
                        font-weight: bold ;
}

Mon code html n'a pas changé.

Mais maintenant j'ai un autre petit souci.
Mon texte "bonjour et bienvenue..." est en haut du bloc et je voudrais le centrer verticalement.
J'ai essayé Vertical-align, margin mais sans succé.
Encore un petit peu d'aide svp

Ah oui, Candygirl il s'agit bien d'un titre mais je ne me suis pas trop arrété au <H1> quand j'ai commencé à codé le CSS. Et comme je vois que ça marche bien j'ai continué sur la lancé.
Est ce grave?

**Kerod** · 07/01/2008, 19h07

La propriété vertical-align fonctionne que pour les éléments de type inline. Ce qui n'est pas ton cas. Par contre tu peux jouer avec line-height.

Pour le H1, ne pas l'utiliser c'est ne pas te conformer aux normes et surtout pour le référence ce n'est pas optimisé

**clb56** · 07/01/2008, 19h17

Envoyé par VFone

je ne me suis pas trop arrété au <H1> quand j'ai commencé à codé le CSS.

ça c'est une grosse erreur, on ne commence pas à coder son css avant d'avoir mis la structuration html du document en place de manière rigoureuse. C'est tout bêtement mettre la charrue avant les boeufs

Est ce grave?

Oui
Référentiel Général d'Accessibilité pour les Administrations - Point de contrôle : 3.5