28173 sujets

CSS et mise en forme, CSS3

[ résolu ]Problème avec une image border : none

Bonjour,

Depuis quelques jours j'essaie de trouver despérement un problème lié avec une image lien. ( class logo )
Je n'arrive pas à enlever la bordure du lien, voici un brin de code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang="fr" xml:lang="fr" xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <title>
     Suisse
    </title>
    <meta http-equiv="content-type" content="text/html; charset=iso-8859-1"/>
    <meta http-equiv="Content-Language" content="fr"/>
    
    <link rel="stylesheet" media="screen" type="text/css" href="styles/duperrex.css"/>

    <link rel="shortcut icon" type="image/x-icon" href="images/favicon.ico" />
  </head>
  <body>
    <div id="global">
      <div id="header">
       
		  <a href="#" title="Main page"><img class="logo" src="images/logo.gif" alt="duperrex.net" title="famille Duperrex" /></a>


et la css


* {
	margin: 0;
	padding: 0;
}
body {
	background: #98E2FB url(../images/fond.gif) repeat-x;
	margin: 0;
	padding: 0;
	font: 11px/18px Tahoma, Lucida Grande, Arial, sans-serif;
	color: #404040;
}
h1 {
	height: 22px;
	overflow: hidden;
	padding: 0 0 10px 0;
	font: 20px/23px "Trebuchet MS", Tahoma, sans-serif;
	color:#82CD24;
}
h2 {
	
	padding: 10px 0 10px 0;
	
	font: 18px/20px "Trebuchet MS", Tahoma, sans-serif;
	color:#82CD24;
}
h3 {
	color: #333333;
	font-family: arial, helvetica, sans-serif;
	font-size: 120%;
	font-style: normal;
	margin: 0px;
	padding: 0px;
	font-weight: normal;
	letter-spacing: 1px;
}
p {
	font-family: "Trebuchet MS", Lucida Grande, Arial, sans-serif;
	font-size: 100%;
	font-style: normal;
	font-weight: normal;
	margin: 0px;
		padding: 0 0 10px 0;
}
p strong {
	font-weight: bold;
	color:#6f6f6f;
}
em {
}
hr {
	height: 1px;
	margin: 5px 0 0 0;
	padding: 0;
	color: #FEE4DB;
	background-color: #FEE4DB;
	border: 0;
}
.clr {
	clear: both;
	height: 10px;
}
a img{
	border: none !important;
}
a:link, a:visited {
	text-decoration: none;
	background: #5DD2F9;
	padding: 2px;
	font-weight: bold;
	color: #fff;
	border: none;

}
a:hover {
	text-decoration: none;
	color: #F86332;
	background: none;
}
a:active {
	background: #FEE4DB;
	padding: 2px;
	font-weight: bold;
	text-decoration: none;
	border: none;
}
/********** GLOBAL **********/
#global {
	width: 770px;
	position: absolute;
	left: 50%;
	top: 35px;
	margin: 0 0 0 -385px;
	padding: 0;
	background: url(../images/bordure.gif) repeat-y;
}
/********** HEADER **********/

#header img{
border:none;}

#header {
	background: url(../images/fondheader.gif) no-repeat;
	width: 770px;
	height: 192px;
	position: relative;
	border: none;
}

.logo {
	margin: 69px 0 0 70px;
	width: 172px;
	height: 86px;
	border: none;
	padding: 0px;
}
.logo a:link, .logo a:visited {
	text-decoration: none;
	background: none;
	padding: 0px;
	margin: 0px;
	border: none;
}
.logo a:hover {
	text-decoration: none;
	background: none;
}
.logo a:active {
	background: none;
	margin: 0px;
	padding: 0px;
	text-decoration: none;
	border: none;
}


J'ai remarqué que lorsque je change le " padding" des lien "normaux" cela influence les bordures padding = 0px OK

Merci pour le coup de pouce.

dups Smiley smile
Modifié par dups (05 Jun 2006 - 08:38)
Pour enlever les bordures sur mes liens images, je rajoute img {border: none;} dans la css.

Peut-tu donner le lien de ton site, car la je n'est pas accès à l'image donc je n'arrive pas à voir si mon code marche ou pas.

Bon courage.
Salut

tsunammis as raison un border: none; supprime les bordure

Mais contrairement a ce que tu fait, il faut l’appliquer a la balise <a> et non a l’image qui est dans <a>

A+
Ceci devrais faire ce que tu veux


#logo {
	text-decoration: none;
	margin: 69px 0 0 70px;
	width: 172px;
	height: 86px;
	border: none;
	padding: 0px;
	display: block;
}


<a id="logo" href="http://www.vitamine-c.ch/" title="Main page"><img  src="structure_new_fichiers/logo.gif" alt="duperrex.net" title="famille Duperrex"></a>

A+
Il serait bien de regarder toute la réponse

ton code

<a href="http://www.vitamine-c.ch" title="Main page">
    <img [#red]class="logo"[/#] src="images/logo.gif" alt="duperrex.net" title="famille Duperrex">
</a>


le code que je t'ai proposé

<a [#red]id="logo"[/#] href="http://www.vitamine-c.ch/" title="Main page">
    <img  src="structure_new_fichiers/logo.gif" alt="duperrex.net" title="famille Duperrex">
</a>


A+
Modifié par gege71 (04 Jun 2006 - 16:36)
Smiley cligne
Désolé, j'ai homis ce brin de code, toutefois, ça ne fonctionne pas... sous firefox
Modifié par dups (04 Jun 2006 - 16:43)
Ajoute

#logo {
	float: left;
}

et supprime

#logo a:link, #logo a:visited {
text-decoration: none;
	background: none;
	padding: 0px;
	margin: 0px;
	border: none;
}
#logo a:hover {
	text-decoration: none;
	background: none;
}
#logo a:active {
	background: none;
	margin: 0px;
	padding: 0px;
	text-decoration: none;
	border: none;
}
Et encore un bug IE

essaie avec

#logo {
	text-decoration: none;
	border: none;
	padding: 69px 0px 0px 70px;
	display: block;
	float: left;
	background: none;
}


A+
Sujet clos
Aller à