Bonjour,
à chaque fois que j'insère un lien (texte ou image), des marges en haut et à gauche du lien s'ajoutent automatiquement ce qui décale légèrement la mise en page. Y a-t-il moyen de supprimer ces décalages?
merci
marges avant lien
Modérateur : chinon37
Re: marges avant lien
Bonjour
Où peut-on assister au phénomène? Une adresse sur le web? Ou le code source complet de la page où cela se produit?
Où peut-on assister au phénomène? Une adresse sur le web? Ou le code source complet de la page où cela se produit?
ymai
« Un enfant de cinq ans comprendrait cela ! Allez me chercher un enfant de cinq ans ! »
Groucho Marx.
« Un enfant de cinq ans comprendrait cela ! Allez me chercher un enfant de cinq ans ! »
Groucho Marx.
-
couillatris
- Arias
- Messages : 3
- Inscription : 26 août 2010, 14:55
Re: marges avant lien
Voici le code source sans liens :
<html>
<head>
<title>Ruoms</title>
<meta http-equiv="content-type"
content="text/html; charset=ISO-8859-1">
<meta name="generator" content="HAPedit 3.1">
<style type="text/css">
html, body {
margin: 0;
padding: 0;
}
body {
font-family: Baskerville;
font-style: normal;
font-variant: normal;
font-weight: normal;
font-size: 100%;
line-height: normal;
font-size-adjust: none;
font-stretch: normal;
text-align: center;
background-color: #663333;
color: #ffcc33;
}
p {
margin: 0 10px 10px;
}
a {
padding: 10px;
color: #981793;
display: block;
}
div#header h1 {
margin: 0;
background: transparent none repeat scroll 0% 50%;
height: 80px;
line-height: 80px;
padding-left: 10px;
color: #ffcc33;
text-align: center;
font-family: baskerville;
}
div#container {
text-align: left;
}
div#content p {
line-height: 1.4;
}
div#navigation {
background: transparent none repeat scroll 0% 50%;
text-align: left;
}
div#extra {
background: transparent none repeat scroll 0% 50%;
text-align: right;
}
div#footer {
background: #333333 none repeat scroll 0% 50%;
color: #ffffff;
}
div#footer p {
margin: 0;
padding: 5px 10px;
font-family: Baskerville;
}
div#container {
margin: 0 auto;
width: 1000px;
}
div#wrapper {
float: left;
width: 100%;
}
div#content {
margin: 0 60px;
}
div#navigation {
width: 50px;
margin-left: -1000px;
float: left;
}
div#extra {
float: left;
width: 50px;
margin-left: -60px;
}
div#footer {
clear: left;
width: 100%;
color: #ffcc33;
}
</style>
</head>
<body>
<div id="container">
<div id="header">
<h1>Site<br>
</h1>
</div>
<div id="wrapper">
<div id="content">Texte blah blah<br>
<br>
<div style="text-align: center;"><br>
<br>
</div>
</div>
</div>
<div id="navigation"><strong></strong><img
style="border: 0px solid ; width: 50px; height: 50px; font-style: italic;"
alt="retour"
src="file:///Nicolas/Sites/site_vacances/Images/flechegauche.png"><br>
</div>
<div id="extra">
<p><strong><img style="border: 0px solid ; width: 50px; height: 50px;"
alt="suite"
src="file:///Nicolas/Sites/site_vacances/Images/flechedroite.png"></strong></p>
</div>
<div style="color: rgb(255, 204, 51);" id="footer">
<p><a href="index.html">Accueil</a></p>
</div>
</div>
</body>
</html>
Voici le code source avec les liens :
<html>
<head>
<title>Ruoms</title>
<meta http-equiv="content-type"
content="text/html; charset=ISO-8859-1">
<meta name="generator" content="HAPedit 3.1">
<style type="text/css">
html, body {
margin: 0;
padding: 0;
}
body {
font-family: Baskerville;
font-style: normal;
font-variant: normal;
font-weight: normal;
font-size: 100%;
line-height: normal;
font-size-adjust: none;
font-stretch: normal;
text-align: center;
background-color: #663333;
color: #ffcc33;
}
p {
margin: 0 10px 10px;
}
a {
padding: 10px;
color: #981793;
display: block;
}
div#header h1 {
margin: 0;
background: transparent none repeat scroll 0% 50%;
height: 80px;
line-height: 80px;
padding-left: 10px;
color: #ffcc33;
text-align: center;
font-family: baskerville;
}
div#container {
text-align: left;
}
div#content p {
line-height: 1.4;
}
div#navigation {
background: transparent none repeat scroll 0% 50%;
text-align: left;
}
div#extra {
background: transparent none repeat scroll 0% 50%;
text-align: right;
}
div#footer {
background: #333333 none repeat scroll 0% 50%;
color: #ffffff;
}
div#footer p {
margin: 0;
padding: 5px 10px;
font-family: Baskerville;
}
div#container {
margin: 0 auto;
width: 1000px;
}
div#wrapper {
float: left;
width: 100%;
}
div#content {
margin: 0 60px;
}
div#navigation {
width: 50px;
margin-left: -1000px;
float: left;
}
div#extra {
float: left;
width: 50px;
margin-left: -60px;
}
div#footer {
clear: left;
width: 100%;
color: #ffcc33;
}
</style>
</head>
<body>
<div id="container">
<div id="header">
<h1>Site<br>
</h1>
</div>
<div id="wrapper">
<div id="content">Texte blah blah<br>
<br>
<div style="text-align: center;"><br>
<br>
</div>
</div>
</div>
<div id="navigation"><strong></strong><a href="pont_darc.html"><img
style="border: 0px solid ; width: 50px; height: 50px; font-style: italic;"
alt="retour"
src="file:///Nicolas/Sites/site_vacances/Images/flechegauche.png"></a><br>
</div>
<div id="extra">
<p><a href="chassezac.html"><strong><img
style="border: 0px solid ; width: 50px; height: 50px;" alt="suite"
src="file:///Nicolas/Sites/site_vacances/Images/flechedroite.png"></strong></a></p>
</div>
<div style="color: rgb(255, 204, 51);" id="footer">
<p><a href="index.html">Accueil</a></p>
</div>
</div>
</body>
</html>
Le rendu sans lien (j'aimerai que cela reste comme ça):
Le rendu quand les liens sont insérés sur chaque flêche, un décalage à gauche et en haut de chaque flêche apparaît:
<html>
<head>
<title>Ruoms</title>
<meta http-equiv="content-type"
content="text/html; charset=ISO-8859-1">
<meta name="generator" content="HAPedit 3.1">
<style type="text/css">
html, body {
margin: 0;
padding: 0;
}
body {
font-family: Baskerville;
font-style: normal;
font-variant: normal;
font-weight: normal;
font-size: 100%;
line-height: normal;
font-size-adjust: none;
font-stretch: normal;
text-align: center;
background-color: #663333;
color: #ffcc33;
}
p {
margin: 0 10px 10px;
}
a {
padding: 10px;
color: #981793;
display: block;
}
div#header h1 {
margin: 0;
background: transparent none repeat scroll 0% 50%;
height: 80px;
line-height: 80px;
padding-left: 10px;
color: #ffcc33;
text-align: center;
font-family: baskerville;
}
div#container {
text-align: left;
}
div#content p {
line-height: 1.4;
}
div#navigation {
background: transparent none repeat scroll 0% 50%;
text-align: left;
}
div#extra {
background: transparent none repeat scroll 0% 50%;
text-align: right;
}
div#footer {
background: #333333 none repeat scroll 0% 50%;
color: #ffffff;
}
div#footer p {
margin: 0;
padding: 5px 10px;
font-family: Baskerville;
}
div#container {
margin: 0 auto;
width: 1000px;
}
div#wrapper {
float: left;
width: 100%;
}
div#content {
margin: 0 60px;
}
div#navigation {
width: 50px;
margin-left: -1000px;
float: left;
}
div#extra {
float: left;
width: 50px;
margin-left: -60px;
}
div#footer {
clear: left;
width: 100%;
color: #ffcc33;
}
</style>
</head>
<body>
<div id="container">
<div id="header">
<h1>Site<br>
</h1>
</div>
<div id="wrapper">
<div id="content">Texte blah blah<br>
<br>
<div style="text-align: center;"><br>
<br>
</div>
</div>
</div>
<div id="navigation"><strong></strong><img
style="border: 0px solid ; width: 50px; height: 50px; font-style: italic;"
alt="retour"
src="file:///Nicolas/Sites/site_vacances/Images/flechegauche.png"><br>
</div>
<div id="extra">
<p><strong><img style="border: 0px solid ; width: 50px; height: 50px;"
alt="suite"
src="file:///Nicolas/Sites/site_vacances/Images/flechedroite.png"></strong></p>
</div>
<div style="color: rgb(255, 204, 51);" id="footer">
<p><a href="index.html">Accueil</a></p>
</div>
</div>
</body>
</html>
Voici le code source avec les liens :
<html>
<head>
<title>Ruoms</title>
<meta http-equiv="content-type"
content="text/html; charset=ISO-8859-1">
<meta name="generator" content="HAPedit 3.1">
<style type="text/css">
html, body {
margin: 0;
padding: 0;
}
body {
font-family: Baskerville;
font-style: normal;
font-variant: normal;
font-weight: normal;
font-size: 100%;
line-height: normal;
font-size-adjust: none;
font-stretch: normal;
text-align: center;
background-color: #663333;
color: #ffcc33;
}
p {
margin: 0 10px 10px;
}
a {
padding: 10px;
color: #981793;
display: block;
}
div#header h1 {
margin: 0;
background: transparent none repeat scroll 0% 50%;
height: 80px;
line-height: 80px;
padding-left: 10px;
color: #ffcc33;
text-align: center;
font-family: baskerville;
}
div#container {
text-align: left;
}
div#content p {
line-height: 1.4;
}
div#navigation {
background: transparent none repeat scroll 0% 50%;
text-align: left;
}
div#extra {
background: transparent none repeat scroll 0% 50%;
text-align: right;
}
div#footer {
background: #333333 none repeat scroll 0% 50%;
color: #ffffff;
}
div#footer p {
margin: 0;
padding: 5px 10px;
font-family: Baskerville;
}
div#container {
margin: 0 auto;
width: 1000px;
}
div#wrapper {
float: left;
width: 100%;
}
div#content {
margin: 0 60px;
}
div#navigation {
width: 50px;
margin-left: -1000px;
float: left;
}
div#extra {
float: left;
width: 50px;
margin-left: -60px;
}
div#footer {
clear: left;
width: 100%;
color: #ffcc33;
}
</style>
</head>
<body>
<div id="container">
<div id="header">
<h1>Site<br>
</h1>
</div>
<div id="wrapper">
<div id="content">Texte blah blah<br>
<br>
<div style="text-align: center;"><br>
<br>
</div>
</div>
</div>
<div id="navigation"><strong></strong><a href="pont_darc.html"><img
style="border: 0px solid ; width: 50px; height: 50px; font-style: italic;"
alt="retour"
src="file:///Nicolas/Sites/site_vacances/Images/flechegauche.png"></a><br>
</div>
<div id="extra">
<p><a href="chassezac.html"><strong><img
style="border: 0px solid ; width: 50px; height: 50px;" alt="suite"
src="file:///Nicolas/Sites/site_vacances/Images/flechedroite.png"></strong></a></p>
</div>
<div style="color: rgb(255, 204, 51);" id="footer">
<p><a href="index.html">Accueil</a></p>
</div>
</div>
</body>
</html>
Le rendu sans lien (j'aimerai que cela reste comme ça):
Le rendu quand les liens sont insérés sur chaque flêche, un décalage à gauche et en haut de chaque flêche apparaît:
Qui est en ligne ?
Utilisateurs parcourant ce forum : Aucun utilisateur inscrit et 1 invité