28172 sujets

CSS et mise en forme, CSS3

[Résolu]Position background-image en dehors de la zone prévue?

Bonjour !

Je recherche une solution et j'espère qu'elle existe ! Smiley cligne je m'excuse si elle a déjà été postée, mais j'ai de la peine à savoir comment cibler ma recherche de post pour ce sujet.

Voici mon problème :

voir le site en construction : http://parents-natures.identite.ch/

mon souci se situe au niveau de la navigation principale
(Accueil Evénements le coin des Membres ...)

Je souhaite que quand on est sur une page (les pages "en cours" sont span ="en-cours"),
il y ait cette sorte de petit papillon rouge qui soit positionné en haut à droite "posé" sur le texte (Accueil Evénements....)

Mais là comme vous le voyez il est en dessous du texte,... évidemment vous me direz, c'est un background-image!! dans le .css et non pas un <img=""> dans le .html
J'ai fais ceci dans l'espoir d'éviter de devoir les indiquer sur tous les .html... j'aurais bien voulu que ce soit possible dans le.css pour me faciliter la vie...

je ne sais pas si je suis assez claire ?

Si qqn a réussi à me suivre... ça serait chouette s'il pouvait me dire si il y a une possibilité d'augmenter ma zone de "background" sous mon ".span #entete" dans le .css.

?
Ou si il existe une autre solution plus simple quand même de celle basique du <img=""> dans le html à positionner ?

Merci d'avance !!
-----

pour info :

dans mon css : 

#entete a:visited {
	color: #6e9bc6;
}

#entete a:hover {
	color: #c8c8c8;
	}

#entete a:active {
	color: #c8c8c8;
}

#entete .en-cours {
	color: #939393;
	background: url(images/papillon.gif) no-repeat right top;
}



et un des .html pour exemple :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
	<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
	<title>Ev&eacute;nements - Association Suisse des Parents Natures</title>
	<link rel="stylesheet" type="text/css" href="parents-natures.css"/>
</head>

<body>
<div id="page">
	<div id="entete">
		<ul>
			<li><a href="index.html">Accueil</a></li>
			<li><span class="en-cours">Ev&eacute;nements</span></li>
			<li><a href="membres.html">le coin des Membres</a></li>
			<li><a href="location.html">Locations</a></li>
			<li><a href="portail.html">Portail</a></li>
			<li><a href="forum.html">Forum</a></li>
			<li><a href="association/presentation.html">l'Association</a></li>
			<li><a href="contact.html">Contact</a></li>
		</ul>
	</div>

	<div id="navigation-secondaire">
		<ul>
			<li><a href="evenements/reunions.html">r&eacute;unions des parents</a></li>
			<li><a href="evenements/sorties.html">sorties et activit&eacute;s</a></li>
			<li><a href="evenements/conferences.html">conf&eacute;rences</a></li>
		</ul>
	</div>
	
	<div id="contenu">
		<p>Vos prochains rendez-vous...</p>
	</div>	
	
<!--	<div id="footer">		
		<ul>
			<li><a href="index.html">Accueil</a></li>
			<li><span class="en-cours">Ev&eacute;nements</span></li>
			<li><a href="membres.html">le coin des Membres</a></li>
			<li><a href="location.html">Locations</a></li>
			<li><a href="portail.html">Portail</a></li>
			<li><a href="forum.html">Forum</a></li>
			<li><a href="association-presentation.html">l'Association</a></li>
			<li><a href="contact.html">Contact</a></li>
		</ul>
	</div>-->
</div>
</body>
</html>

Modifié par madave (13 Mar 2008 - 13:49)
ahhhhhh merci !! chuis bête !

lol je crois que je vais arrêter de travailler trop tard le soir car ça aide pas,

quoique toi, ça roule les méninges en pleine nuit Smiley cligne

merci beaucoup,
désolée d'avoir posté pour si peu..
A+ !
Bonjour madave,

Je n'avais pas vu que le sujet était résolu, cependant en regardant ta page, j'ai vu que tu avais rajouter un padding-top de 5px à ton id "en-cours", juste te signaler que ce n'est pas suffisant sous IE6 et IE7, on ne voit que la partie basse du "papillon" et je pensais qu'il s'agissait d'une flêche... Smiley lol
Le conseil de Mumblefoot était judicieux, à toi de composer au mieux pour un rendu le plus uniforme possible sur les différents navigateurs Smiley cligne

Cdt,
Sylvain
Coucou Sylvain !

effectivement j'ai pu remarquer ça et j'ai résolu ce problème en insérant un line-height....

cependant là j'ai un autre problème c'est que la navigation est bcp plus base sur IE que sur firefox et safari... et ça, ça m'embête bcp ;(

je suis bonne pour revoir tout mon truc !

Si qqn a une idée, je suis preneuse Smiley cligne
ah ben voilà !! j'ai tout bon là, mes connections cervicales se sont faites. lol

Bon ben normalement la navigation principale c'est bon, si qqn a des comments, c'est volontiers.

A+
Sujet clos
Aller à