Problème Titre CSS

[Résolu]Bonjour,

Je souhaite réaliser un bouton dans mon template. Le "hic" est que le site est multilangue et j'aimerais que ce bouton soit resizable.


Etant le titre de la page, l'html ressemble à cela:

<h1>
<a>Titre de ma page</a>
</h1>

Le h1 étant en position absolue afin de sortir d'une dizaine de pixel vers la gauche ...

Quelqu'un voudrait bien m'aider?

Merci d'avance
Modifié par cssintegrator (07 Jan 2010 - 21:17)

Pour a part, j'irai jusqu'à couper en trois div :

<div class="bouton_g"> </div>
<div class="bouton_c">
    <h1>
        <a>Titre de ma page</a>
    </h1>
</div>
<div class="bouton_d"> </div>

Dans bouton_g et D, tu mets les parties gauche et droites de ton image, en background.
Dans bouton_c, tu met un bout du centre (genre 1 px de large), en background repeat-x.

Les trois div en float left.

Pour placer ton bouton correctement, tu place le tout dans une grande div bouton, et hop, tu as un bouton à taille variable que tu peux réutiliser à volonté, replacer etc etc

Solution bien plus lourde que la mienne, car elle nécessite 3 images au lieu de 2, et l'ajout de <div> dans le code uniquement pour la mise en forme... Pour le même résultat pour le visiteur.

Je charge trois petites images, tu en charge une petite et une très grosse (comparée aux autres). De plus, il faut prévoir une image qui s'adapte à toute les longueurs de texte, ce qui en fait une image surdimensionnée dans la plupart des cas.

Je pense que çà se joue à pas grand chose et que c'est plus une histoire d'habitude. j'ai la sensation (très subjective), que ma solution est plus propre. Par contre, si on montre qu'il y a une vrai différence pour l'utilisateur, alors je prend

Ce n'est pas la répétition du fond de l'image qui va alourdir l'image énormément, s'il s'agit d'un bouton dont la partie centrale est en aplat, cela ne prendra même pas 1ko de plus pour une image de 1000px de large !

En revanche, cela supprime une requète auprès du serveur pour charger la troisième image.

Cela évite aussi d'ajouter du code html supplémentaire pour les besoins de mise en forme, et c'est à mon sens est le plus important.

En ajoutant que pour un bouton, j'imagine qu'il y en a plusieurs dans une page, tu duplique autant de fois ton lourd empilement de <div>, ce qui alourdit considérablement la page html, et rend le code moins simple donc moins lisible.

Même si tu fais appel à tes boutons via un fichier php, ton morceau de code sera rechargé à chaque bouton sur chaque page, alourdissant bien plus le temps de chargement qu'une simple image qui prendra 1ko de plus au premier chargement puis plus rien.

Ok, j'achète

Merci bien! Le premier principe était celui vers lequel je m'étais tourner au départ mais je ne sais plus pourquoi ca ne fonctionnait pas.

A retester puis je reviens si je rencontre à nouveau le problème

Merci bien !

Ca marche du tonnerre, je ne sais pas pourquoi ca ne fonctionnait pas avant

Merci bien !

cssintegrator a écrit :
Ca marche du tonnerre, je ne sais pas pourquoi ca ne fonctionnait pas avant

Merci bien !

Le sujet peut donc être classé en [Résolu] ?

[Résolu] je sais pas trop comment faire sur la version iphone...