28172 sujets

CSS et mise en forme, CSS3

[Résolu] HTML/CSS : impossible d'enlever le "surligné" sur m

Bonjour,

je souhaite apporter une mise à jour à mon site internet (http://salypimienta.free.fr).
J'ai ajouté un lien sur une image facebook sur toutes mes pages, à la suite de quoi, tous mes liens ont de nouveau été surlignés. J'ai essayé la focntion text-decoration : none dans le HTML et dans le CSS mais çà ne change rien.

Quelqu'un a-t-il une idée pour m'aider ?
D'avance merci

Code HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
   <head>
<link href='http://fonts.googleapis.com/css?family=Englebert|Kavoon|Ribeye' rel='stylesheet' type='text/css'>
       <title>Sal y pimienta, la cuisine de Saloua</title>
       <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" media="screen" type="text/css" title="design" href="design_salypimienta.css" />
<META NAME="Description" CONTENT="Sal y pimienta est un concept unique de cuisine à domicile : vous me donnez votre budget pour un evenement, je vous propose une prestation correspondant a votre budget. Je vous transmets une liste des ingredients a retirer au drive le plus proche de chez vous. Je viens cuisiner chez vous pour que tout soit prêt au moins une heure avant votre evenement. Sal y pimienta propose egalement un service de cuisine avec conservation des plats au congélateur pour avoir des plats faits maison d'avance.">
<META NAME="Keywords" CONTENT="cuisine, cuisine à domicile, domicile, chef, chef à domicile, prestation de cuisine à domicile, traiteur à domicile, prestation, spécialités, spécialités marocaines, tapas, spécialités espagnoles, tajine, couscous, pica-pica, concept, fait maison, Bordeaux, CUB, Saloua Le Carrou, Saloua Zaghloul el hadef">
<META NAME="Revisit-after" CONTENT="14 days">
<META NAME="Robots" CONTENT="all">
<META http-equiv="Content-Language" content="fr">
<META http-equiv="Refresh" content="300">

</head>

 <body>

      <!-- L'en-tête -->
 
<div id="en_tete">
<h1><a href="index.html" style="text-decoration:none; color: white">Sal y pimienta</h1>

<h2></h2>

</div>
<!-- Sous-en-tête -->
 
<div id="ss_en_tete">
<h1>La cuisine de Saloua</h1>
<h2></h2>

</div>

       <!-- Les menus -->

       <div id="menu">        
 <ul id="navlist">
<li id="active"><a href="index.html" style="text-decoration:none">Accueil</a></li>
<li><a href="cuisiniere.html">La cuisinière</a></li>
<li><a href="cuisine.html">La cuisine</a></li>
<li><a href="concept.html">Concept</a></li>
<li><a href=" mailto:salypimienta@free.fr?subject=Contact&body=---------------------------Vos coordonnées---------------------------%0D%0A%0D%0ANom :
%0D%0APrenom :%0D%0ANumero de telephone :%0D%0AEmail :%0D%0A%0D%0A---------------------------Votre demande---------------------------%0D%0A%0D%0ABudget :%0D%0ANombre de personnes :%0D%0AType de soiree :%0D%0ADate de l'evenement :%0D%0ALieu de l'evenement :%0D%0APreciser votre demande (soiree, plats d'avance, etc...) :%0D%0A%0D%0A%0D%0A%0D%0A%0D%0A" style="text-decoration:none; color: #8B0000;">Contact</a></li>
</ul>
</div>

<div id="lien_facebook">
<a href="https://www.facebook.com/salypimienta.lacuisinedesaloua" TARGET="_blank"> <img src="img/facebook-logo1.png" alt="facebook"></a>
</div>

       <!-- Le corps -->


<div id="photo">
<img src="img/piments.jpg" alt="piments" />
</div>


<div id="corps">
<h1></h1>   

<div id="bandeau">
<strong>Faits maison, des mets sélectionnés, élaborés dans votre cuisine !</strong><br>
</div>


<p>
<br><br>
<strong>Une soirée...</strong><br><br>
Vous avez une soirée mais pas le temps de cuisiner ? <br>
Choisissez l’ambiance selon vos envies :<br>
- Plats typiques marocains<br>
- Sélection de tapas méditerranéens<br>
- « Pica-pica » multi-saveurs<br>

<br>

<strong>...Les pieds sous la table !</strong><br><br>
Réchauffez et mangez !<br>
Une cuisine familiale, de qualité, en quelques secondes sur votre table.<br>
Je vous prépare des petits plats que vous pourrez déguster au fil de la semaine...
</p>

<br>
<strong>Je me déplace chez vous (Bordeaux et la CUB) pour des repas jusqu'à 30 personnes.</strong>

 
       <!-- Le pied de page -->
 
       <div id="pied_de_page">
          <p>Sal y pimienta – +33 (0) 6.61.14.59.25 – 110 rue Pasteur, 33200 Bordeaux – SIRET n° 795 236 751 00017 –  www.salypimienta.free.fr  – Contact : <a href=" mailto:salypimienta@free.fr?subject=Contact&body=---------------------------Vos coordonnées---------------------------%0D%0A%0D%0ANom :
%0D%0APrenom :%0D%0ANumero de telephone :%0D%0AEmail :%0D%0A%0D%0A---------------------------Votre demande---------------------------%0D%0A%0D%0ABudget :%0D%0ANombre de personnes :%0D%0AType de soiree :%0D%0ADate de l'evenement :%0D%0ALieu de l'evenement :%0D%0APreciser votre demande (soiree, plats d'avance, etc...) :%0D%0A%0D%0A%0D%0A%0D%0A%0D%0A" style="text-decoration:none; color: white;">salypimienta@free.fr</a><br>
mise à jour le 24/10/2013  
</p>
       </div>
 
   </body>
</html>


Code CSS

/* L'en-tête */


#en_tete
{
padding-top: 2px;
padding-bottom: 2px;
padding-left: 2px;
padding-right: 2px;
margin-top: 0;
margin-bottom: 0;
margin-left: 0;
margin-right: 0;
height: 100px;
text-align: left;
color: white;
background-color: #B40404;
background: -moz-linear-gradient( #B40404, #FA1E1E);
border: none;
font-family: 'Ribeye', cursive, century gothic;
font-size: 20px;
background: white url(img/red033.jpg)
background-repeat:repeat;
}

#en_tete h1
{
padding-top: 10px; 
padding-left: 100px;
}

#ss_en_tete
{
margin-top: -20px;
height: 30px;
padding: 0;
text-align: left;
color: #1f497d;
background-color:#bfbfbf;
border: none;
font-family: century gothic;
font-size: 8px;
}

#ss_en_tete h1
{
color: #B40404;
padding-left: 100px;

}

#menu
{
margin-top: -20px;
height: 20px;
padding: 0;
text-align: left;
color: #1f497d;
background-color:#bfbfbf;
border: none;
font-family: century gothic;
font-size: 10px;
}

/* position du menu sur la feuille*/
#navlist
{
width: 50%;
float:right;
padding: 0;
margin: 0;
border-bottom: none;
font: 15px century gothic;
}

/* orientation horizontale du menu sur la feuille*/
#navlist li
{
margin: 20px;
list-style: none;
display: inline;
}

#navlist li a
{
text-decoration: none;
color: #B40404;
}



/* surligne en blanc le menu lorsque la souris passe dessus*/
#navlist li a:hover
{
color: white;
}


#navlist #active a
{
color: white;
text-decoration : underline;
}



/* taille de la page, sur laquelle on peut écrire*/
body
{
vertical-align:middle; 
margin: auto;
/*déclallage de l'en-tête*/
margin-top: none;
/*déclallage du pied de page*/
margin-bottom: none;    
background-image: none;
background-repeat: no-repeat;
}

/* Le corps de la page */

#corps
{
width: 820px;
margin-left: auto;
margin-right: auto;
margin-top: 20px;
margin-bottom: 20px;
padding: 50px;
color: #B3B3B3;
background-color: none;
background-repeat: repeat-x;
font-family: century gothic;
font-size: 16px;
color: black;
text-align: justify;
padding: 18px;
}

#corps h1
{
margin-top: 0;
margin-bottom: 0;
margin-left: 900px;
margin-right: 0;
}

#corps h2
{
}


/* Le pied de page (qui se trouve tout en bas, en général pour les copyrights) */

#pied_de_page
{
background: white url(img/red033.jpg)
background-repeat:repeat;
text-align: center;
color: red;
background-color:#bfbfbf;
border: none;
font-family: century gothic;
font-size: 12px;
position: absolute;
bottom: 0; left: 0;
width: 100%;
}


.signature 
{
margin-top: 40px;
font-family: mistral;
font-size: 30px;
padding-top: 18px;
padding-left: 500px;
color: #8B0000;
-moz-transform:rotate(-5deg);
-webkit-transform:rotate(-5deg);
-o-transform:rotate(-5deg);
display: block;
}

legend
{
color:  #B40404;
}
label
{
color: black;
}
input
{
position:absolute;
left: 618px;
font-family: century gothic;
}

br {
margin-bottom: 3px;
}

textarea
{
font-family: century gothic;
}

.diaporama{
	width:800px;
	height:330px
}

.diaporama li{
	list-style-type:none;
	overflow:hidden;
	position:absolute;
}

.diaporama_controls{
	width:179px;
	padding:5px;
	clear:both;
	overflow:hidden;
	margin-top: 60px;
	margin-bottom: 0;
	margin-left: 256px;;
	margin-right: 0;
}

.diaporama_controls .btns{
	float:right;
}

.diaporama_controls a{
	font-weight:normal;
	width:10px;
	height:13px;
	text-indent:-9999px;
	display:inline-block;
	margin:0 3px;
}

.diaporama_controls .prev{
	background:url(img/fleches_diapo.png) no-repeat top right;
}

.diaporama_controls .next{
	background:url(img/fleches_diapo.png) no-repeat top left;
}

.diaporama_controls .pause{
	background:url(img/fleches_diapo.png) no-repeat bottom right;
}

.diaporama_controls .play{
	background:url(img/fleches_diapo.png) no-repeat bottom left;
}

div#colonne1 {
    float: left;
    width: 50%;
background: none;
}

div#colonne2 {
    float: right;
    width: 50%;
background: none;
text-align: right;
}

div#bandeau {
color: #B40404;
font-family: century gothic;
font-size: 20px;

}

div#photo {
float: left;
padding-left: 50px;
}

div#lien_facebook {
float: right;
padding-top: 40px;
padding-bottom: 2px;
padding-left: 2px;
padding-right: 40px;
margin-top: 0;
margin-bottom: 0;
margin-left: 0;
margin-right: 40px;
text-decoration: none;
}

<style type="text/css">
.imageflottante
{
float:left;

}
</style>
Bonjour Djee22,

je te conseille de mettre le petit bout de code ci-dessous au début de ton fichier CSS.

a{
text-decoration: none;
}


Ça devrait mettre tous tes liens en non-souligné.
Bonjour,

merci pour ta réponse, mais j'avais déjà essayé et çà ne fonctionne pas...?

une autre idée ?
cordialement
Administrateur
Bonjour,

pour tester (et pour tester seulement), essaie tour à tour les 5 instructions suivantes :


a {
  text-decoration: none !important;
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  background: pink !important;
}


Est-ce que l'une d'elles résoud le problème ? On parle bien de surligné (au-dessus), pas de souligné (en-dessous, comme ici au survol d'un lien) ou de barré ?
Modifié par Felipe (19 Nov 2013 - 20:07)
Bonjour Felipe,

J'ai testé et çà fonctionne avec border: none !important;

je ne comprend pas trop pourquoi (et surtout pourquoi text-decoration: none !important; ne fonctionne pas) mais l'essentiel c'est que çà fonctionne
thanks +++
Sujet clos
Aller à