Marge Template HTML
Résolu
milouinbobo
Messages postés
20
Date d'inscription
Statut
Membre
Dernière intervention
-
milouinbobo Messages postés 20 Date d'inscription Statut Membre Dernière intervention -
milouinbobo Messages postés 20 Date d'inscription Statut Membre Dernière intervention -
Bonjour,
Sur mon site internet, je travail avec des templates.
Le problème, mes "contents" ont une marge en haut et en bas trop important.
Qui peux me dire comment réduire ces marges ?
Padding et margin ne fonctionnent pas.
C'est dans le
<!-- TemplateBeginEditable name="1" --> <!-- TemplateEndEditable --> ou le top marge est trop important.
Merci d'avance.
Sur mon site internet, je travail avec des templates.
Le problème, mes "contents" ont une marge en haut et en bas trop important.
Qui peux me dire comment réduire ces marges ?
Padding et margin ne fonctionnent pas.
C'est dans le
<!-- TemplateBeginEditable name="1" --> <!-- TemplateEndEditable --> ou le top marge est trop important.
Merci d'avance.
A voir également:
- Marge Template HTML
- Editeur html - Télécharger - HTML
- Word afficher les commentaires dans la marge - Guide
- Espace html - Astuces et Solutions
- Br html ✓ - Forum Webmastering
- Marge illustrator - Forum Illustrator
6 réponses
Bjr
Comment veux-tu qu'on t'aide avec aussi peu d'information ?
Donne le code de ton template, de ta page html, de ton css
Comment veux-tu qu'on t'aide avec aussi peu d'information ?
Donne le code de ton template, de ta page html, de ton css
Bonjour
Voila mes codes :
CODE HTML TEMPLATE
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!-- TemplateBeginEditable name="doctitle" -->
<title>Untitled Document</title>
<!-- TemplateEndEditable -->
<!-- TemplateBeginEditable name="head" -->
<!-- TemplateEndEditable -->
<link href="style.css" rel="stylesheet" type="text/css" />
<link rel="icon" href="favicon.ico" type="images/x-icon" />
<link rel="icon" href="templates/favicon.ico" type="images/x-icon" />
</head>
<body>
<div id="container">
<!-- header -->
<table width="780" height="160" border="0" align="center" cellpadding="0" cellspacing="0">
<tr background="../images/top.jpg">
<td scope="col">
<!-- header -->
<div id="menu">
<ul>
<li><a href="../01-index.html">Accueil</a></li>
<li><a href="../02-tarifs.html">Tarifs</a></li>
<li><a href="../03-le_club.html">Le Club</a></li>
<li><a href="../10-contact.html">Contact</a></li>
</ul>
</div>
</td>
</tr>
</table>
<!-- end header -->
<!-- main -->
<div id="main">
<table width="780" border="1" align="center" cellpadding="0" cellspacing="3">
<tr>
<td width="220" valign="top" bordercolor="#36648A" border="2"><h2>Galerie Photos</h2>
<p>
<img src="../images/requin.gif" alt="requin" width="48" height="15" title="requin" /> <a href="../08-la_vie_2009.html" title="2009">Galerie 2009</a><br />
<img src="../images/requin.gif" alt="requin" width="48" height="15" title="requin" /> <a href="../08-la_vie_2008.html" title="2008">Galerie 2008</a><br />
</p>
<p><a title="toutes les photos affichées dans ces galeries sont soumises au Code de la propriété intellectuelle "Le droit d'auteur""><strong></a></p>
<!-- TemplateBeginEditable name="content" -->content ici ajouter le texte de la page<!-- TemplateEndEditable --> </td>
<td width="543" align="justify" valign="top" >
<!-- TemplateBeginEditable name="content1" -->content1<!-- TemplateEndEditable -->
</td>
</tr>
</table>
</div>
<!-- end main -->
<!-- footer -->
<div id="footer">
<div id="menu_footer"><a href="../01-index.html">accueil</a> | <a href="../02-tarifs.html">tarifs</a>o | <a href="../03-le_club.html">le club</a> | <a href="../04-formations.html">formations</a> | <a href="../05-espace_membres.html">espace membres</a> | <a href="../06-agenda.html">agenda</a> | <a href="../07-les_sites.html">les sites</a> | <a href="../08-la_vie_2009.html">la vie</a> | <a href="../09-biologie_sous_marine.html">biologie</a> | <a href="../10-contact.html">contact</a> | </div>
<div id="left_footer">© Copyright 2009 www.csl56.com</div>
<div id="right_footer"><!-- Compteur -->
<script type="text/javascript" src="http://abcompteur.com"></script>
<noscript><a href="http://abcompteur.com/">ABCompteur : compteur gratuit</a></noscript>
<!-- end Compteur --><sup>Visites depuis le 1 nov 2007</sup></div>
</div>
<!-- end footer -->
</div>
</body>
</html>
CODE CSS
@charset "utf-8";
/* CSS Document */
/* div */
#container {width:780px; margin:auto; margin-top:1px; background:url(../images/top.jpg) no-repeat #FFFFFF;}
#menu {margin:110px 0 0 0;}
#menu ul {padding:0; margin:0; height:5px;}
#menu li {list-style: none; float:left; padding:0 10px;}
#menu a {color:#ffffff; text-decoration:none; font-size:14px; line-height:10px; text-transform:lowercase;}
#menu a:hover {border-bottom:2px #FFFFFF solid;}
#main {font-size:medium; color:#21334A; text-align:justify;}
#main li {padding:0 10px; list-style-image: url(../images/puce.gif);}
#number li {padding:0 5px; list-style-image: none; float: none; text-indent:none; margin:0;}
#number ol {list-style: decimal-leading-zero; line-height:20px; text-indent:none; margin:0;}
#video li {padding:0 10px; list-style-image: url(../images/videos.gif);}
#photo li {padding:0 10px; list-style-image: url(../images/camera.gif);}
#nage li {padding:0 20px; list-style-image: url(../images/nage.png);}
#footer {clear:both; height:130px; background:url(../images/footer.jpg) no-repeat; font-size:11px; color:#21334A;}
#footer a {color:#FFFFFF; padding:0 10px 0 10px;}
#menu_footer {text-transform:lowercase;}
#left_footer {float:left; color:#FFFFFF; padding:36px 0 0 140px;}
#right_footer {float:right; padding:10px 50px 0 0; color: #FFFFFF;}
#logo {color:#9DADBB;}
#actualite {min-height:225px; padding:5px 5px;}
#handi {background-image: url(../images/logo_handisport.png); background-position : top; background-repeat: no-repeat;}
#apnee { background-image: url(../images/apnee.png); background-position : top; background-repeat: no-repeat;}
#navigation {text-indent:0; padding:0; border: 0; border-top: 0; margin-top: 0; position: top;}
/* end div */
/* balises*/ h1 {font-size:x-large; line-height:20px; color:#21334A; margin-left: 5px; padding-left:10px; padding-right:10px;} h2 {font-size:large; line-height:20px; color:#21334A; margin-left: 5px; padding-left:10px; padding-right:10px;} h3 {font-size:medium; color:#21334A; margin-left: 5px; padding-left:10px; padding-right:10px; font-weight:bold;}
h5 a {color: #95AFC5; font-size: small; font-style: italic; text-align:left; padding-left: 10px; line-height: 1px;
hspace: 1px; padding-top: 0;}
img {hspace:5px;}
a {text-decoration:underline blink; color:#21334A;}
p {margin: 0 0 0 0; font-size:medium; padding-left:10px; padding-right:10px; text-align:justify; line-height:18px}
sup {font-size:small;}
body{background-color: #E3F1F2; margin: 0 0 0 0;}
/* end balises */
/* span */
.video {margin-right: 190px;}
.photo {margin-right: 190px;}
.image { text-align:center;}
.rouge {color: #2A5B80}
/* end span*/
Voila mes codes :
CODE HTML TEMPLATE
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!-- TemplateBeginEditable name="doctitle" -->
<title>Untitled Document</title>
<!-- TemplateEndEditable -->
<!-- TemplateBeginEditable name="head" -->
<!-- TemplateEndEditable -->
<link href="style.css" rel="stylesheet" type="text/css" />
<link rel="icon" href="favicon.ico" type="images/x-icon" />
<link rel="icon" href="templates/favicon.ico" type="images/x-icon" />
</head>
<body>
<div id="container">
<!-- header -->
<table width="780" height="160" border="0" align="center" cellpadding="0" cellspacing="0">
<tr background="../images/top.jpg">
<td scope="col">
<!-- header -->
<div id="menu">
<ul>
<li><a href="../01-index.html">Accueil</a></li>
<li><a href="../02-tarifs.html">Tarifs</a></li>
<li><a href="../03-le_club.html">Le Club</a></li>
<li><a href="../10-contact.html">Contact</a></li>
</ul>
</div>
</td>
</tr>
</table>
<!-- end header -->
<!-- main -->
<div id="main">
<table width="780" border="1" align="center" cellpadding="0" cellspacing="3">
<tr>
<td width="220" valign="top" bordercolor="#36648A" border="2"><h2>Galerie Photos</h2>
<p>
<img src="../images/requin.gif" alt="requin" width="48" height="15" title="requin" /> <a href="../08-la_vie_2009.html" title="2009">Galerie 2009</a><br />
<img src="../images/requin.gif" alt="requin" width="48" height="15" title="requin" /> <a href="../08-la_vie_2008.html" title="2008">Galerie 2008</a><br />
</p>
<p><a title="toutes les photos affichées dans ces galeries sont soumises au Code de la propriété intellectuelle "Le droit d'auteur""><strong></a></p>
<!-- TemplateBeginEditable name="content" -->content ici ajouter le texte de la page<!-- TemplateEndEditable --> </td>
<td width="543" align="justify" valign="top" >
<!-- TemplateBeginEditable name="content1" -->content1<!-- TemplateEndEditable -->
</td>
</tr>
</table>
</div>
<!-- end main -->
<!-- footer -->
<div id="footer">
<div id="menu_footer"><a href="../01-index.html">accueil</a> | <a href="../02-tarifs.html">tarifs</a>o | <a href="../03-le_club.html">le club</a> | <a href="../04-formations.html">formations</a> | <a href="../05-espace_membres.html">espace membres</a> | <a href="../06-agenda.html">agenda</a> | <a href="../07-les_sites.html">les sites</a> | <a href="../08-la_vie_2009.html">la vie</a> | <a href="../09-biologie_sous_marine.html">biologie</a> | <a href="../10-contact.html">contact</a> | </div>
<div id="left_footer">© Copyright 2009 www.csl56.com</div>
<div id="right_footer"><!-- Compteur -->
<script type="text/javascript" src="http://abcompteur.com"></script>
<noscript><a href="http://abcompteur.com/">ABCompteur : compteur gratuit</a></noscript>
<!-- end Compteur --><sup>Visites depuis le 1 nov 2007</sup></div>
</div>
<!-- end footer -->
</div>
</body>
</html>
CODE CSS
@charset "utf-8";
/* CSS Document */
/* div */
#container {width:780px; margin:auto; margin-top:1px; background:url(../images/top.jpg) no-repeat #FFFFFF;}
#menu {margin:110px 0 0 0;}
#menu ul {padding:0; margin:0; height:5px;}
#menu li {list-style: none; float:left; padding:0 10px;}
#menu a {color:#ffffff; text-decoration:none; font-size:14px; line-height:10px; text-transform:lowercase;}
#menu a:hover {border-bottom:2px #FFFFFF solid;}
#main {font-size:medium; color:#21334A; text-align:justify;}
#main li {padding:0 10px; list-style-image: url(../images/puce.gif);}
#number li {padding:0 5px; list-style-image: none; float: none; text-indent:none; margin:0;}
#number ol {list-style: decimal-leading-zero; line-height:20px; text-indent:none; margin:0;}
#video li {padding:0 10px; list-style-image: url(../images/videos.gif);}
#photo li {padding:0 10px; list-style-image: url(../images/camera.gif);}
#nage li {padding:0 20px; list-style-image: url(../images/nage.png);}
#footer {clear:both; height:130px; background:url(../images/footer.jpg) no-repeat; font-size:11px; color:#21334A;}
#footer a {color:#FFFFFF; padding:0 10px 0 10px;}
#menu_footer {text-transform:lowercase;}
#left_footer {float:left; color:#FFFFFF; padding:36px 0 0 140px;}
#right_footer {float:right; padding:10px 50px 0 0; color: #FFFFFF;}
#logo {color:#9DADBB;}
#actualite {min-height:225px; padding:5px 5px;}
#handi {background-image: url(../images/logo_handisport.png); background-position : top; background-repeat: no-repeat;}
#apnee { background-image: url(../images/apnee.png); background-position : top; background-repeat: no-repeat;}
#navigation {text-indent:0; padding:0; border: 0; border-top: 0; margin-top: 0; position: top;}
/* end div */
/* balises*/ h1 {font-size:x-large; line-height:20px; color:#21334A; margin-left: 5px; padding-left:10px; padding-right:10px;} h2 {font-size:large; line-height:20px; color:#21334A; margin-left: 5px; padding-left:10px; padding-right:10px;} h3 {font-size:medium; color:#21334A; margin-left: 5px; padding-left:10px; padding-right:10px; font-weight:bold;}
h5 a {color: #95AFC5; font-size: small; font-style: italic; text-align:left; padding-left: 10px; line-height: 1px;
hspace: 1px; padding-top: 0;}
img {hspace:5px;}
a {text-decoration:underline blink; color:#21334A;}
p {margin: 0 0 0 0; font-size:medium; padding-left:10px; padding-right:10px; text-align:justify; line-height:18px}
sup {font-size:small;}
body{background-color: #E3F1F2; margin: 0 0 0 0;}
/* end balises */
/* span */
.video {margin-right: 190px;}
.photo {margin-right: 190px;}
.image { text-align:center;}
.rouge {color: #2A5B80}
/* end span*/
J'ai testé mais je ne vois pas ce qui ne s'affiche pas comme il faut
C'est le texte "Galerie Photos" , "requin Galerie 2009", "content 1" qui pose pb ?
Parce que là je vois pas ...
C'est le texte "Galerie Photos" , "requin Galerie 2009", "content 1" qui pose pb ?
Parce que là je vois pas ...
Bonjour
Merci pour votre réponse
C'est <!-- TemplateBeginEditable name="content1" -->content1<!-- TemplateEndEditable --> qui pose une problème.
Quand j'ouvre/crée une page liée au template et commence à mettre du texte à la place de content1, mes marges sont trop importants. Il y a au moins 1 centimetre d'espace libre dessus mon texte. Si j'utilise du <p> ou un titre <h1> etc. Il n'y a pas de différence.
Je souhaiterai reduire cet espace vide.
Cordialement
Merci pour votre réponse
C'est <!-- TemplateBeginEditable name="content1" -->content1<!-- TemplateEndEditable --> qui pose une problème.
Quand j'ouvre/crée une page liée au template et commence à mettre du texte à la place de content1, mes marges sont trop importants. Il y a au moins 1 centimetre d'espace libre dessus mon texte. Si j'utilise du <p> ou un titre <h1> etc. Il n'y a pas de différence.
Je souhaiterai reduire cet espace vide.
Cordialement
Vous n’avez pas trouvé la réponse que vous recherchez ?
Posez votre question
ben même en remplaçant content1 par autre chose il se positionne bien en haut de la cellule du tableau TD
ce qui me paraît normal vu que le contenu est forcé de s'aligner en haut via valign="top"
Si j'utilise H2 et bien le texte est parfaitement aligné avec le titre Galerie Photos ce qui est normal
Précision : j'utilise FF 3.5 et IE 8
ce qui me paraît normal vu que le contenu est forcé de s'aligner en haut via valign="top"
Si j'utilise H2 et bien le texte est parfaitement aligné avec le titre Galerie Photos ce qui est normal
Précision : j'utilise FF 3.5 et IE 8
