28172 sujets

CSS et mise en forme, CSS3

Lien hypertext sur bg image

Bonjour j'aurai besoins d'aide.

J'essaye de créer un site internet (je suis débutante) et je n'arrive pas à faire fonctionner les liens pour mes onglets en bg:image.

Voici mon css et html

Merci pour votre aide.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
    "http://www.w3.org/TR/html4/strict.dtd"
    >
<html lang="fr">
<head>
    <title>Juliette esthétisme à domicile</title>
    <link rel="stylesheet" type="text/css" href="style1.css"/>
</head>
<body>
    <div class="logo">
    <img src="logo.jpg" alt="logo" width="177" height="81" border="0" usemap="#accueil"/>
<map name="accueil"><area shape="rect" coords="0,-5,178,83" href="#index1.html" target="_parent" alt="Accueil">
</map>
    </div>
    
<div class="head"></div>
    
    <div class="contenu-site">
      <ul id="menu-top">
        <li id="onglet_epilation"><a href="epilation.html" target="_parent"></a>
        <li id="onglet_soins-visage"><a href="soins-visage.html" target="_parent"></a>
        <li id="onglet_soins-corps"><a href="soins-corps.html" target="_parent"></a>
        <li id="onglet_ongle"><a href="ongle.html" target="_parent"></a></li>
        <li id="onglet_maquillage"><a href="maquillage.html" target="_parent"></a></li>
      </ul>
</div>
<div class="contenu-page">
        <div class="page">
            <div class="page-haut"></div>
            <div class="page-milieu">sssssssss <br> jdjdjdjdjdjjdj</div>
            <div class="page-bas"></div>
        </div>
    </div>
    <div id="menutop-left">
<div id="onglet-top">
  		<h2 class="style2"><a href="site_juliette_accueil" target="_parent"> Accueil</a><br/><br/>
   		  <a href="site_juliette_zone-deplacement" target="_parent">Zone de dÈplacement</a><br/><br/>
   		  <a href="site_juliette_me_decouvrir" target="_parent">Me dÈcouvrir</a><br/> <br/>
   		  <a href="site_juliette_tarifs" target="_parent">Tarifs</a><br/><br/>
		  <a href="site_juliette_contact" target="_parent">Me contacter</a><br/>
	</h2>
  	</div>
    <div id="second_left">
 	 <p align="center" class="style4 style6">Besoin d'une Èpilation,</br>d'un soins ou toutes</br>autres prestations ‡ domiciles !</br>
   	  </p>
  	<p align="center" class="style4">N'hÈsitez pas ‡ prendre </br>
   		 rendez-vous du <span class="style7">lundi </br> 
    		au samedi </br>
    </span></p>
  <p align="center" class="style4">Je me dÈplace dans un </br>
  rayon de <span class="style7">30 km autour </br>
  de fontainebleau</span> (77) </br>
  </p>
  <p align="center" class="style4">Contactez moi dËs </br>
  maintenant au </br>
  <span class="style7">06 58 52 58 33 </span>ou </br>
  juliette.esthetique</br>
  @gmail.com</p>
</div>
    
    
	</div>    
</body>
</html>


body
{
    background: #dffde3
}

.logo
{
    width:176px;
    height:86px;
    left: 66px;
    top: 12px;
}

.head
{
    
}

.contenu-site
{
  width:980px;

}

#menu-top
{
    position:relative;
    left:30%;
}


#menu-top li
{
    list-style:none;
    position:absolute;
    z-index:-1;
}


#onglet_epilation
{
    width:126px;
    height:36px;
    background-image:url("epilation-off.png");
    left:4%;
    
}

#onglet_soins-visage
{
    width:126px;
    height:36px;
    background-image:url("soins_visage-off.png");
    left:16.5%;
    

}

#onglet_soins-corps
{
    width:126px;
    height:36px;
    background-image:url("soins_corps-off.png");
    left:29.1%;
    
}

#onglet_ongle
{
    width:126px;
    height:36px;
    background-image:url("ongle-off.png");
    left:41.6%;
    
}

#onglet_maquillage
{
    width:126px;
    height:36px;
    background-image:url("maquillage-off.png");
    left:54.2%;
    
}

.contenu-page
{
    width:980px;
    
}

.page
{
    width:649px;
    margin-left:32.8%;
}

.page-haut
{
    width:639px;
    height:20px;
    background-image:url("contenu-haut.png");
    margin-top:5.9%;

}

.page-milieu
{
    width:639px;
    background-image:url("contenu-milieu.png");
    padding-left:10px;
}

.page-bas
{
    width:649px;
    height:20px;
    background-image:url("contenu-bas.png");
}

#menutop-left

{
	width:198px;
	position:relative;
}

#onglet-top
{
	position:absolute;
	width:198px;
	height:220px;
	z-index:2;
	top: 23%;
	background-color: #FE007F;
	left: 7%;
	box-shadow: 10px 10px 5px #888888;
	border-top-left-radius:15px;
	border-bottom-left-radius:15px;
	border-top-right-radius:5px;
	border-bottom-right-radius:5px;
	padding-left: 8px;
}

.style2 {
	font-size: 16px;
	color: #FFFFFF;
	padding:10px;
}
a:link {
	text-decoration: none;
	color: #FFFFFF;
}
a:visited {
	text-decoration: none;
}
a:hover {
	text-decoration: none;
}
a:active {
	text-decoration: none;
}

#second_left {
	position:absolute;
	width:207px;
	height:342px;
	z-index:3;
	top: 245px;
	background-color: #FE64AC;
	left: 12px;
	box-shadow: 10px 10px 5px #888888;
	border-top-left-radius:15px;
	border-bottom-left-radius:15px;
	border-top-right-radius:5px;
	border-bottom-right-radius:5px;
}

.style4 {
	color: #FFFFFF;
	font-weight: bold;
	font-size: 15px;

Modifié par 6l20 (12 Apr 2012 - 19:42)
Bonsoir,
Juste pour alléger le code tu n'as pas besoin de faire tous tes
text-decoration: none; (je parle des liens "a" en css)
fait simplement:
a
{
    text-decoration: none;
}

Ensuite pour les liens, si ils marchent pas c'est sûrement le chemin qui ne va pas, les images sont elles dans un sous-dossier ? est-ce bien du png ? ...
Sujet clos
Aller à