Forums Webou.net - Hébergement gratuit et sans publicités avec PHP/MySQL

Programmation => PHP/MySQL - (x)HTML - ... => Discussion démarrée; par: lepetitmarocain le 05 Novembre 2009, 18:57:29



Titre: Barre des titres Html/Css
Posté par: lepetitmarocain le 05 Novembre 2009, 18:57:29
Bonjour,

Comment puis je procédé pour faire une barre des titres (avec date) pour mon blog ?

La barre des titres est composé de la date et enfin le titre ...

Voila deux aperçus pour vous donné une idée plus claire :

1) http://www.cijoint.fr/cjlink.php?file=cj200911/cijYpDiojp.png (http://www.cijoint.fr/cjlink.php?file=cj200911/cijYpDiojp.png)
2) http://www.cijoint.fr/cjlink.php?file=cj200911/cij2FAqtbA.png (http://www.cijoint.fr/cjlink.php?file=cj200911/cij2FAqtbA.png)
Est ce en Css ? Si oui comment le faire ?  :-\

Merci à celui ou celle qui se penchera sur mon cas :-)


Titre: Re: Barre des titres Html/Css
Posté par: clemgaut le 05 Novembre 2009, 19:26:37
Tu dois devoir créer un bloc (<div> en HTML) spécial pour la barre.
je pense qu'il faut mettre l'image de la barre en background.
Ensuite, tu positionne ton titre avec les propriétés padding et tu fais de meme avec la date.
C'est un avis que je te donne mais je n'ai jamais réalisé ce type de barre. Je ne peut donc pas te donner de code fonctionnel.


Titre: Re: Barre des titres Html/Css
Posté par: lepetitmarocain le 05 Novembre 2009, 19:46:51
Bonsoir et merci infiniment d'avoir pris le temps de me répondre  :-)

Tu dois devoir créer un bloc (<div> en HTML) spécial pour la barre.

Ok sa c'est noté ;-)

je pense qu'il faut mettre l'image de la barre en background.

Mais c'est possible de le faire en Css non ? (grâce au dégradé)



Titre: Re: Barre des titres Html/Css
Posté par: forever181 le 06 Novembre 2009, 14:36:53
c sa css
Code:
en-tete
{
   background-image: url("../images/neige.png");
}


Titre: Re: Barre des titres Html/Css
Posté par: lepetitmarocain le 06 Novembre 2009, 19:33:10
Merci de m'avoir répondue ;-)

T'essaye de me faire comprendre que c'est le code à insérer ?


Titre: Re: Barre des titres Html/Css
Posté par: clemgaut le 06 Novembre 2009, 21:31:15
Je pense que ça pourrai donner ceci : (non testé)
Oui en code Css ça donnerai ceci
Code:
#barre
{
     background-image : url("url de ton image");
}

#barre h1
{
    padding-left : 3px;
    padding-top : 5px;
}
.date
{
    padding-left : 70px;
    padding-top : 15px;
}

Après tu remplaces les chiffres devant px pour que ça te convienne.

en HTML ça donne :

Code:
<div id="barre">
<h1>Ton titre</h1>
<span class="date">Ta date</span>
</div>


Titre: Re: Barre des titres Html/Css
Posté par: lepetitmarocain le 08 Novembre 2009, 16:50:31
Il me faut une image de fond ?

Je dois mettre en place un nouveau fichier Css, ou rajouter ce code sur le mien ?

Merci pour le temps que tu me consacre pour m'éclaircir :-}


Titre: Re: Barre des titres Html/Css
Posté par: clemgaut le 09 Novembre 2009, 18:37:06
L'image de fond doit etre l'image de ta barre (sans le texte).
Tu peux rajouter le CSS à la suite de ton fichier (oublie pas de mettre l'url de ton image dans la propriété background-image).


Titre: Re: Barre des titres Html/Css
Posté par: lepetitmarocain le 09 Novembre 2009, 20:01:00
Merci infiniment clemgaut  ;)

Je crois que je commence à comprendre !


Titre: Re: Barre des titres Html/Css
Posté par: lepetitmarocain le 10 Novembre 2009, 19:53:53
Re  :(

Comment je pourrait faire en sorte que les coins soient arrondie ?


Titre: Re: Barre des titres Html/Css
Posté par: clemgaut le 10 Novembre 2009, 20:45:01
Il faut juste que l'image de background (ta barre) ai des angles arrondis (si tu la dessine sous gimp, il y a un outils rectangle arrondi).


Titre: Re: Barre des titres Html/Css
Posté par: lepetitmarocain le 12 Novembre 2009, 08:52:32
Ok merci  ;D