Gestion des backgrounds avec une liste

Fermé
sirefalas Messages postés 219 Date d'inscription mercredi 11 juin 2008 Statut Membre Dernière intervention 12 février 2014 - 29 juil. 2009 à 16:36
sirefalas Messages postés 219 Date d'inscription mercredi 11 juin 2008 Statut Membre Dernière intervention 12 février 2014 - 4 août 2009 à 15:56
Bonjour,
Je suis en train de faire un site internet et je rencontre un problème pour gérer mes liens hypertextes.
Je suis en effet que chaque lien ait une couleur différente. J'ai réussi à faire en sorte de mettre une couleur unie mais pas d'image et encore moins d'image différente pour chaque lien

Voici mon CSS:

body
{
	margin: 50px 0 ;
	padding: 0 ;
	text-align: left ;
	font: Trebuchet MS;
	background: url("IMG/fond.jpg");
}

div#conteneur
{
	width: 1025px;
	height: 721px;
	margin: 0 auto ;
	text-align: left;
	background: url("IMG/test.jpg");
	background-repeat: no-repeat;
}

pre
{
	overflow: auto ;
}

ul#menu a
{
	text-align: center;
	font-size: 1.1em ;
	color: #000;
	margin: 40px 15px;
	display: block;
	text-decoration: none;
}

li
{
	list-style-type: none;
}

.iconlist
{
  list-style-type: none;
  padding: 0;
  margin: 0;
}

li.societe
{
  background-image: url("IMG/bouton/societe.jpg");
  background-repeat: no-repeat;
  background-position: 0 50%;
}


et voici mon ficher HTML:

<html dir="LTR" lang="fr">

<head>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>

<body>
<div id="conteneur">
	<ul id="menu">
	<table>
		<tr height="120">
		</tr>
		<tr>
			<td width="50">
			</td>
			<td>
				<ul id="menu">
					<li class="societe"><a href="catalogue-societe.html">Société</a></li>
					<li><a href="catalogue-jeunesse.html">Jeunesse</a></li>
					<li><a href="catalogue-architecture.html">Architecture</a></li>
					<li><a href="catalogue-technique.html">Technique</a></li>
					<li><a href="catalogue-voyage.html">Voyage</a></li>
				</ul>
			</td>
		</tr>
	</table>
	</ul>
</div>
</body> 

</html> 


actuellement avec ce code ça ne change rien à ma page, je conserve un lien avec un fond blanc.

3 réponses

Thamior Messages postés 264 Date d'inscription lundi 11 février 2008 Statut Membre Dernière intervention 18 mars 2014 47
29 juil. 2009 à 16:38
Bonjour,

Il te manque li.societe a {
// ton css
}

Ainsi que les déclinaisons CSS des liens (hover, visited, etc).

Bonne chance à toi.
0
sirefalas Messages postés 219 Date d'inscription mercredi 11 juin 2008 Statut Membre Dernière intervention 12 février 2014 8
29 juil. 2009 à 16:41
merci je vais essayer de modifier ça, je tiens au courant.
0
sirefalas Messages postés 219 Date d'inscription mercredi 11 juin 2008 Statut Membre Dernière intervention 12 février 2014 8
4 août 2009 à 15:56
j'ai réussi à faire ce que je voulais, j'ai du faire pas mal de modifs mais j'ai réussi, par contre j'aimerais réussir à centrer mes textes dans mes cadres de background, ils le sont verticalement mais pas horizontalement. En bref j'aimerais que ça soit centré en complet sur chaque cadre de désigné

Voici mon HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 
<html dir="LTR" lang="fr">

<head>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>

<body>
<div id="page-accueil">
	<ul id="menu">
	<table>
		<tr height="150">
		</tr>
		<tr>
			<td width="50">
			</td>
			<td>
				<ul id="menu">
					<a class="societe" background=url("IMG/bouton/societe.jpg") href="catalogue-societe.html">Société</a>
					<a class="jeunesse" href="catalogue-jeunesse.html">Jeunesse</a>
					<a class="architecture" href="catalogue-architecture.html">Architecture</a>
					<a class="technique" href="catalogue-technique.html">Technique</a>
					<a class="voyage" href="catalogue-voyage.html">Voyage</a>
				</ul>
			</td>
		</tr>
		<tr height="100">
		</tr>
		<tr>
			<td width="50">
			</td>
			<ul id="menu">
			<td width="150">
				<a class="maison-edition" href="maison-edition.html">La maison d'édition</a>
			</td>
			<td width="150">
				<a class="auteur" href="auteur.html">Les auteurs</a>
			</td>
			<td width="150">
				<a class="actualite" href="actualites.html">Actualités</a>
			</td>
			<td width="150">
				<a class="boutique" href="boutique.html">BOUTIQUE</a>
			</td>
			<td width="150">
				<a class="catalogue" href="catalogue.html">Catalogue</a>
			</td>
			<td width="150">
				<a class="libraire" href="espace-libraire.html">Espace Libraires</a>
			</td>
			<td width="150">
				<a class="liens" href="liens.html">Liens</a>
			</td>
			<td width="150">
				<a class="contacts" href="contacts.html">Contacts</a>
			</td>
			</ul>
		</tr>
	</table>
	</ul>
</div>
</body> 

</html> 


Et voici mon fichier CSS:

body
{
	margin: 50px 0 ;
	padding: 0 ;
	text-align: left ;
	font: Trebuchet MS;
	background: url("IMG/fond.jpg");
}

div#page-accueil
{
	width: 1025px;
	height: 721px;
	margin: 0 auto ;
	text-align: left;
	background: url("IMG/test.jpg");
	background-repeat: no-repeat;
}

pre
{
	overflow: auto ;
}

ul#menu a
{
	text-align: center;
	font-size: 1em ;
	color: #000;
	margin: 20px 5px;
	width:100px;
	height:50px;
	display: block;
	text-decoration: none;
}

a.societe:hover{ background:url("IMG/bouton/societe.jpg"); }
a.jeunesse:hover{ background:url("IMG/bouton/jeunesse.jpg"); }
a.architecture:hover{ background:url("IMG/bouton/architecture.jpg"); }
a.technique:hover{ background:url("IMG/bouton/technique.jpg"); }
a.voyage:hover{ background:url("IMG/bouton/voyage.jpg"); }

a.maison-edition { background:url("IMG/bouton/maison-edition.jpg")}
a.auteur { background:url("IMG/bouton/auteur.jpg")}
a.actualite { background:url("IMG/bouton/actualite.jpg")}
a.boutique { background:url("IMG/bouton/boutique.jpg")}
a.catalogue { background:url("IMG/bouton/catalogue.jpg")}
a.libraire{ background:url("IMG/bouton/libraire.jpg")}
a.liens{ background:url("IMG/bouton/liens.jpg")}
a.contacts { background:url("IMG/bouton/contacts.jpg")}

li
{
	list-style-type: none;
}


li.societe
{ 
	background-image: url(IMG/societe2.jpg);
	background-repeat: no-repeat;
} 
0