Positionnement texte par rapport à une image.

Bonjour,

Voilà le problème : j'ai un menu de 21 pixels de haut, comportant une image à gauche, dont le seul intérêt est graphique, mais qui doit être conservée, et des liens à la suite.

Le tout est défini dans une id. Le texte reste obstinément collé en bas, malgré pas mal d'essais à base de padding et de display: inline, probablement à cause de l'image.
Néanmoins, je souhaite centrer verticalement le texte (les liens) par rapport à l'image.

Une illustration du problème sera plus claire > ce que j'obtiens et ce que je souhaite obtenir en-dessous :

pourrais-tu nous fournis le code HTML et CSS que tu utilises actuellement ?

utilises la mise en forme avec [ code] et [/ code] ( sans l'espace )

Bon, je mets l'intégralité du code, même si ça ne concerne qu'une petite partie

[i]CSS :[/i]
body {
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size: 0.9em;
background-color: #D9D8C7;
scrollbar-face-color: #846232;
scrollbar-highlight-color: #FDF0BC;
scrollbar-3dlight-color: #846232;
scrollbar-darkshadow-color: #846232;
scrollbar-shadow-color: #FDF0BC;
scrollbar-arrow-color: #FDF0BC;
scrollbar-track-color: #C07742;
margin: 0;
padding: 0;
}

#header {
background-image: url(design/fond-header.png);
background-repeat: repeat-x;
height: 62px;
background-color: #D9D8C7;
}

#editeur {
display: block;
background-image: url(design/header.png);
background-repeat: no-repeat;
text-align: right;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size: 0.7em;
color: #fff;
padding: 48px 5px 0 0;
}

#editeur a{
color: #fff;
text-decoration: underline;
}

#editeur a:hover{
color: #FDF0BC;
text-decoration: none;
}

#menuhaut {
display: block;
font-family:Verdana, Arial, Helvetica, sans-serif;
background-image: url(design/menu-haut-fond.png);
background-repeat: repeat-x;
font-size: 0.9em;
color: #fff;
height: 21px;
}

#menuhaut a{
color: #fff;
text-decoration: underline;
}

#menuhaut a:hover{
color: #FDF0BC;
text-decoration: none;
}

#conteneur {
position: absolute;
width: 100%;
background-color:#D9D8C7;
}

#centre {
background-color:#fff;
margin-left: 242px;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size: 0.9em;
}

#gauche {
background-color: #E1E3C7;
position: absolute;
left:0;
width: 242px;
}

#footer {
text-align: center;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size: 0.8em;
font-weight: bold;
height: 30px;
background-color: #747355;
}

.menugauche {
list-style-type: none;
margin: 0;
padding:0;
}

.menugauche li {
margin-bottom: 5px;
}

.menugauche a {
margin: 0 2px;
color: #747355;
text-decoration: none;
}

.menugauche a:hover {
color: #C07742;
text-decoration: underline;
}

p {margin: 0 10px 0 10px;}

Et le HTML :

[i]HTML :[/i]
<!-- Début menu haut -->
  <div id="menuhaut"><img src="design/menu-haut-gauche.png" width="119" height="21"><a href="#">Accueil</a> 
    :: <a href="#">Pr&eacute;sentation</a> :: <a href="#">Actualit&eacute;</a> 
    :: <a href="#">Nous contacter</a></div>
<!-- Fin menu haut -->

Là, je n'ai mis que la portion de code concernée, vu que les tests menés sans l'image sur le menu n'occassionnent aucun problème (et oui, je sais, 'faut utiliser les balises <ul > et <li >, c'est d'ailleurs prévu) .
Modifié par PotatoezJunky (22 Feb 2005 - 22:37)

PotatoezJunky a écrit :

(et oui, je sais, 'faut utiliser les balises <ul > et <li >, c'est d'ailleurs prévu) .

euh... non !
Ce n'est pas obligatoire de regrouper les liens sous forme de liste. Ça pourrait même être problématique dans certains cas. Par exemple, une galerie d'images dont les onglets seraient regroupés sous forme de liste présentée de façon linéaire via CSS obligerait à utiliser la barre de défilement à chaque fois pour visionner l'image sous la liste quand CSS est désactivé.

Comme je ne suis pas certain d'être clair, j'explique autrement.

Avec CSS activé :

* onglet * onglet * onglet * onglet * onglet * onglet 



|-----------image-----------|
|---------------------------|
|---------------------------|
|---------------------------|
|---------------------------|
|---------------------------|
|---------------------------|
|---------------------------|

CSS désactivé :

* onglet 


* onglet 


* onglet 


* onglet 


* onglet 


* onglet 



|-----------image-----------|
|---------------------------|
|---------------------------|
|---------------------------|
|---------------------------|
|---------------------------|
|---------------------------|
|---------------------------|

Voilà ce que dit le WCAG (Web Content Accessibility Guidelines)

Directives pour l'accessibilité aux contenus Web (version 1.0) a écrit :

10.5 Tant que les agents utilisateurs (incluant les technologies d'assistance) n'afficheront pas les liens adjacents distinctement, incluez des non-liens, des caractères imprimables (entourrés par des espaces) entre deux liens adjacents.

Ce que tu as fait en séparant tes liens par « :: »

Directives pour l'accessibilité aux contenus Web (version 1.0) a écrit :

13.6 Groupez les liens apparentés, identifiez le groupe (pour les agents utilisateurs), et, tant que les agents utilisateurs ne le font pas, fournissez un moyen de contourner le groupe.

Ici, ton groupe est <div id="menuhaut">.
Manque plus que le lien d'évitement pour satisfaire ce « Point de contrôle de priorité 3 ».

http://www.la-grange.net/w3c/wcag1/full-checklist.html

Bon, ça ne règle pas ton problème, mais je disais ça au passage...
Modifié par Stephan (23 Feb 2005 - 00:14)

Ah, ok, merci Stephan

Mais en effet, ça ne règle pas mon problème (j'ai bien une façon de le régler, mais elle est peu élégante : imbriquer 2 div pour superposer mon background de base et mon image passée en background, mais bon... si y a mieux, je suis preneur).