Des images à la place des titres de la Sidebar

diel

Bonjour à tous !

Avant de poser ma question, je préfère préciser que j'ai mis les mains dans mon blog avec seulement de vagues notions d'HTML. Donc j'ai un peu bidouillé le design et aujourd'hui j'aimerais créé les titres de ma sidebar.

C'est à dire. Je n'ai que deux listes, celle des pages statiques et celle des catégories. J'aimerais créé deux images avec une belle typo dans gimp et que ces images s'affichent à la place du texte par défaut de ces titres.

J'ai un peu réfléchi et j'en conclus cette modif, dans le code du fichier php de la sidebar, donc :

<div id="sidebar">
		<h2><div id="credits">
		<img src="http://lydieguezengar.free.fr/guezenblog/design/image1.gif" />
		</div></h2>
		<ul>
			<?php $plxShow->staticList('*'); ?></ul>
		<h2><div id="credits">
		<img src="http://lydieguezengar.free.fr/guezenblog/design/image2.gif" />
		</div></h2>
		<ul>
			<?php $plxShow->catList('','#cat_name'); ?>
		</ul>
		<div id="credits">
		<img src="http://lydieguezengar.free.fr/guezenblog/design/fleur_page.gif" alt="petite fleur" />
		</div>
</div>

Hum. J'ai bon ?

Gzyg

Bonjour;

Oui, tu peux aussi passer par le fichier style.css en mettant un background-image sur la balise titre :

h2 {
background-image: url(img/ton_image.jpg) no-repeat 50% 50%;
}

les 50% servent au positionnement horizontal et vertical, à toi de jouer sur les valeurs.


à plus,

Gzyg

(p.s : agréable à l'oeil ta page d'accueil)

diel

(Merci pour la mise en forme du code dans le forum. Je savais qu'il fallait un truc mais j'ai eu comme un trou.)

Bon c'est cool, je commence à comprendre deux trois choses. Mais effectivement intervenir dans le CSS est beaucoup plus simple.

(ps : La lecture de Le Loup & Le Chien est aussi une agréable découverte)

EDIT :
Finalement je n'ai compris que deux choses, plus que trois, parce-que je ne suis pas arrivée à savoir où coller le code de h2 dans le CSS. Donc je suis revenue à ma première idée et ça fonctionne. J'ai par contre épuré davantage cette sidebar dans le CSS.

Bloody

Ou plus cool.

h2:before {
content: url(img/ton_image.jpg);
}