Gestion des backgrounds avec une liste
sirefalas
Messages postés
260
Statut
Membre
-
sirefalas Messages postés 260 Statut Membre -
sirefalas Messages postés 260 Statut Membre -
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:
et voici mon ficher HTML:
actuellement avec ce code ça ne change rien à ma page, je conserve un lien avec un fond blanc.
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.
A voir également:
- Gestion des backgrounds avec une liste
- Liste déroulante excel - Guide
- Liste code ascii - Guide
- Liste déroulante en cascade - Guide
- Liste des appareils connectés - Guide
- Logiciel gestion photo gratuit - Guide
3 réponses
Bonjour,
Il te manque li.societe a {
// ton css
}
Ainsi que les déclinaisons CSS des liens (hover, visited, etc).
Bonne chance à toi.
Il te manque li.societe a {
// ton css
}
Ainsi que les déclinaisons CSS des liens (hover, visited, etc).
Bonne chance à toi.
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:
Et voici mon fichier CSS:
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;
}
