28234 sujets

CSS et mise en forme, CSS3

Bonjour, j'ai besoin d'aide à propos de l'alignement d'un texte sur une image
en background de tableau qui comporte des cases.
Je voudrais aligner des liens du type :

News
Forum
Contact
etc ...

sur les cases de cette image :

http://img202.exs.cx/img202/5695/colonne6fh.jpg

Comme je suis novice en css je solicite votre aide Smiley rolleyes
Merci d'avance Smiley cligne
Modifié par Elenkan (29 Mar 2005 - 17:45)
Bonjour Elenkan et bienvenue sur le forum Alsacréations.
Elenkan a écrit :

Je voudrais aligner des liens du type :

News
Forum
Contact
etc ...

sur les cases de cette image :

Très mauvaise idée. Ceci impliquerait un texte ne pouvant pas être redimensionné ce qui irait à l'encontre des recommandations en matière d'accessibilité.
Directives pour l'accessibilité aux contenus Web (version 1.0) a écrit :

3.4 Utilisez des unités relatives plutôt qu'absolues dans les valeurs des attributs du langage de balises et dans les valeurs des propriétés des feuilles de styles.

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

En fait, le but de CSS n'est pas d'adapter un contenu à une présentation, mais bien l'inverse : séparation du contenu et de la présentation.

L'idéal serait de regrouper tes liens sous forme de liste :

<ul id="menu">
 <li><a href="#">News</a></li>
 <li><a href="#">Forum</a></li>
 <li><a href="#">Contact</a></li>
 <li><a href="#">etc ...</a></li>
</ul>

Et via CSS, déclarer un background pour chaque <li> :

#menu ul li {
   background-image: url(images/mon-joli-gradient.gif) no-repeat 50% 50%;
}

En ayant une image suffisamment grande, celle-ci devrait pouvoir s'adapter à un texte de toutes tailles. La déclaration 50% 50% positionne le background « dead centre »

Pour en savoir plus sur les propriétés d'arrière-plan :
http://www.yoyodesign.org/doc/w3c/css2/colors.html#q2

<edit />
J'oubliais ce liens :
http://openweb.eu.org/articles/background_css/
Modifié par Stephan (28 Mar 2005 - 07:07)
Administrateur
Bonjour Elenkan.

Effectivement, il est préférable d'adapter le visuel au contenu.
Mais rien ne t'empêche d'utiliser des unités fluides pour placer tes textes (unité "em" par exemple).
Les propriétés à utiliser pour placer un texte dans son conteneur peuvent être "margin", "text-indent", ou encore "line-height" si tu cherches un alignement vertical.

Tu trouveras ces propriétés dans la Doc CSS.
Merci pour votre accueil.
a écrit :
Et via CSS, déclarer un background pour chaque <li> :

Mais ça voudrait dire qu'il va falloir qu'on redécoupe le design ?
Car il n'a pas été découpé pour avoir un background pour chaque <li>.
J'ai déjà essayé avec l'unité em, mais le problème c'est que le résultat n'est pas le même sous firefox que sous internet explorer par exemple.
Merci pour les liens, je vais essayer . Smiley rolleyes

edit : Ton site est superbe Raph, c'est du bon boulot, c'est hyper propre et
simple d'utilisation Smiley smile .
Modifié par Elenkan (28 Mar 2005 - 14:28)