28216 sujets

CSS et mise en forme, CSS3

Header avec boutons

Bonjour!
Ma question paraitra peut-être facile pour certain ou peut-être aussi est-ce impossible à faire en CSS. C'est pourquoi j'écris ici!

J'ai un header. Sur ce header, il y a 3 boutons. Je me demandais s'il était possible que je place l'image du header "sans les boutons" (je sais comment) et que je place chaque bouton individuellement à l'aide d'une technique je j'ignore. Les boutons on un fond transparent donc ca ne paraitrais normalement pas qu'ils ont été ajouté par dessus. Si cette technique est impossible, avez vous quelque chose à me suggérer?

Merci!
Jaff
Si j'ai bien compris ce que tu veux faire, c'est possible :

mets le header en position: relative, puis les images de tes boutons en position: absolute.

Tu peux ensuite positionner les boutons par rapport aux bords de ton header avec les propriétés top, bottom, left et right.

Toujours bon à relire : Comprendre le positionnement des balises ...

Rem : je crois qu'il faut aussi mettre les images (ou le lien qui les contient) en display: block ...
Sopo a écrit :
Rem : je crois qu'il faut aussi mettre les images (ou le lien qui les contient) en display: block ...


Que veux tu dire par la?

Pour ce qui est de placer les images à l'endroit que je veux, je sais comment.. Mon problème est que je veux qu'elle contienne un lien. Je ne veux pas seulement que l'image soit la, je veux que ca soit un bouton, et ça je ne sais pas comment Smiley smile

Merci Smiley smile
Jaff
Modifié par Jaff (28 Aug 2005 - 14:34)
Salut
J'ai l'impression que ton problème tiens plus du HTML que du CSS

pour faire un lien avec une image:

<a href="http://ton_url/" title="ton_titre"><img src="http://url_de_ton_image" alt="description_de_ton_image"/></a>


et autrement pour faire des boutons, la meilleur solution N'EST PAS:

<input type="button" value="Lien" onclick="javascript_qui_mène_a_ton_url" id="id_de_ton_bouton _si_existe" class="class_de_ton_bouton_si_existe"/>


MAIS CA:

<form action="ton_url" class="class_de_ton_form_si_existe">
<input type="submit" value="Lien" name="Lien" id="id_de_ton_bouton _si_existe"/>
</form>

(je pense que Raphaël sera d'accord puisque j'y vois quand même une meilleur accessibilité (pas de javascript) )

bonne chance Smiley cligne
Modifié par Capripot (28 Aug 2005 - 23:43)
Une suggestion :
le lien c'est <a href="">le texte</a>

on peut faire:

<a 
style = "background-image:url(/image/monImage.gif);
width:100pt;height:50pt"
href="uneUrl"
>texte du lien</a>


mais il reste des réglages margin et padding à faire, en fonction de l'image.
Ok je vais m'essayer!
Si jamais ca ne marche pas, je ferai un nouveau post avec un lien vers le futur site. Une image vaut mille mots! Smiley lol
Merci de votre aide, c'est vraiment gentil

Jaff
Sujet clos
Aller à