18030 sujets

Questions générales et questions de débutants

[Résolu] Marge entre le bas du texte du 1er bloc et le 2ème bloc

Bonjour,

Désolé si mon titre est pas très clair.

En tests, j'ai une page avec N°s de pages et une sans N°s.

Pour avoir un espace entre le bas du texte de la page avec N°s placés au-dessus du "footer" et la page sans N°S avec le "footer", à part mettre un" margin-top" sur la 1ère page mais ça n'influe pas sur la page sans N°s, comment faire ?

J'ai essayé pas mal de sélecteurs sans résultats et je suis complètement perdu

Merci d'avance de vos réponses.

Codes que j'ai simplifiés :
Page avec N°s :
<!DOCTYPE html>

<html lang="fr">

<head>
<meta charset="UTF-8" />
<link rel="stylesheet" href="test4_marges.css" />


<title>Test 4 HTML 5 avec balises Header, Section et Footer</title>


<!--[if lt IE 9]>
<script src="Script html5shiv/aFarkas-html5shiv-84b5018/src/html5shiv.js"></script>
<![endif]-->

</head>
	
<body id="haut">

<div id="bloc_page">
	
	<header> <!-- Header -->
    </header> <!-- /Header -->

<section> <!-- Contenu principal -->
<h2>Problèmes divers</h2>

<ul class="ul_probs">
	<li class="li_probs">Problèmes d'insertion de lettres et/ou de chiffres de la clé de licence :</li></ul>
		<ul>
			<li class="li2eme">Pour éviter toute possibilité de confusion, les lettres A - E - I - L - N - O - U - Z et les chiffres 0 - 1 - 5 ne sont pas utilisés dans les N°s de clés.<br />
Exemples : S avec 5 - O avec 0 (zéro)- I ou l (petit L) avec 1 (chiffre).<br />
Si cela est possible, entrez la clé en faisant un copier/coller.</li></ul>
<!-- N°s de page -->
<p class="pages">1&nbsp;-&nbsp;<a href="probsdivers2.html" title="Page 2">2</a>&nbsp;-&nbsp;<a href="probsdivers3.html" title="Page 3">3</a>&nbsp;-&nbsp;<a href="probsdivers4.html" title="Page 4">4</a>&nbsp;<a href="probsdivers2.html" title="Page suivante">&nbsp;&nbsp;&nbsp;&lgt;</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="probsdivers4.html" title="Dernière page">&lgt;&lgt;</a></p>
<!-- Fin N°s de page -->


</section> <!-- /Contenu principal -->
<!-- Début footer -->
<footer>
	<div id="w3c">
		<div class="w3cxhtml"><a href="http://validator.w3.org/check?uri=referer"><img src="footer/w3c_xhtml_avec_coche.jpg" title="W3C XHTML valide" alt="W3C XHTML valide" /></a></div>
    	<div class="w3ccss"><a href="http://jigsaw.w3.org/css-validator/check/referer"><img src="footer/w3c_css_avec_coche.jpg" title="W3C CSS valide" alt="W3C CSS valide" /></a></div></div>
    <div id="mentions">
    	<div class="mentions"><a href="mentions.html">Mentions légales - Ressources</a></div></div>
	<div id="accueil">
    	<div class="accueil"><a href="index.html">Retour Accueil</a></div></div>
	<div id="hdpage">
		<div class="hdpage"><a href="#haut">Haut</a></div></div>
</footer><!-- Fin footer -->
    </div> <!-- Fin /bloc-page -->
    
</body>
</html>


Page sans N°s :
<!DOCTYPE html>

<html lang="fr">

<head>
<meta charset="UTF-8" />
<link rel="stylesheet" href="test4_marges.css" />

<title>Test 4 HTML 5 avec balises Header, Section et Footer</title>

<!--[if lt IE 9]>
<script src="Script html5shiv/aFarkas-html5shiv-84b5018/src/html5shiv.js"></script>
<![endif]-->

</head>
	
<body id="haut">

<div id="bloc_page">

<header> <!-- Header -->
    	</header> <!-- /Header -->

<section> <!-- Contenu principal -->
<h2>Norton Internet Security 2012<br />
Identity Safe : Configuration, Sauvegarde et Restauration</h2>

<p><span class="gras souligne">Nouveauté :</span> Si le produit est expiré vous pouvez quand même exporter les identifiants. Il faut passer par la <span class="gras">barre d'outil Norton</span> de votre navigateur.</p>

<ul>
	<li>Exportation en .DAT : Toutes les données sont exportées. Le fichier est crypté et donc aucune donnée est lisible.</li>
    <li>Exportation en .CSV : Seuls les identifiants et notes sont sauvegardés. Ce fichier est en texte simple et peut être ouvert avec Excel par exemple. Vous retrouvez en clair les Logins et Mots de passe.</li>
</ul>
</section>

<!-- Début footer -->
<footer>
	<div id="w3c">
		<div class="w3cxhtml"><a href="http://validator.w3.org/check?uri=referer"><img src="footer/w3c_xhtml_avec_coche.jpg" title="W3C XHTML valide" alt="W3C XHTML valide" /></a></div>
    	<div class="w3ccss"><a href="http://jigsaw.w3.org/css-validator/check/referer"><img src="footer/w3c_css_avec_coche.jpg" title="W3C CSS valide" alt="W3C CSS valide" /></a></div></div>
    <div id="mentions">
    	<div class="mentions"><a href="mentions.html">Mentions légales - Ressources</a></div></div>
	<div id="accueil">
    	<div class="accueil"><a href="index.html">Retour Accueil</a></div></div>
	<div id="hdpage">
		<div class="hdpage"><a href="#haut">Haut</a></div></div>
</footer> <!-- Fin footer -->
     
     </div> <!-- Fin id bloc-page -->
    
</body>
</html>


CSS :
/* CSS Document */

body
{ 
	margin: 10px 0; 
	background:#EEF2F2;  
} 

#bloc_page
{
	width: 900px;	
	margin: 0 auto;	
	border: 2px solid #D9F5EE;	
	background-image: url(images/630B1604_transparent_70.jpg);	
}

header, section, footer
{
	display: block;
}

/* L'En-tête */
header
{
	height: 150px;
	border-bottom: 2px solid #D9F5EE;
}

section
{  
	width: 900px;
} 
	
h1
{
	font-family: Arial, "Times New Roman";
	font-size: 1.75em;
	text-align: center;
}	
h2
{
	font-family: Arial, "Times New Roman";
	font-size: 1.5em;
	text-align: center;
}

.souligne
{
	text-decoration: underline; /* Le texte sera souligné */
}
a	/* Liens */
{
	text-decoration: none;	/* Les liens ne seront pas soulignés */
	color: blue;	/* Les liens seront bleus */
}
a:hover	/* Quand on pointe sur le lien */
{
	color: red;	/* Les liens seront rouges */
}

ol
{
	list-style-type: decimal;
}
ul
{
	line-height: 1.4em;
	list-style-type: circle;
}


li
{
	font-family: "Times New Roman", Arial;
	font-size: 1.0em;
	list-style-position: outside;
	margin-right: 5px;
}
.li1er
{
	list-style-type: none;
	margin-left: -20px;
}
.li2eme
{
	list-style-type:disc;
	list-style: outside;
	margin-left: 40px;
	margin-right: 10px;
}
.li3eme
{
	line-height: 1.2em;
	list-style:circle outside;
}
.li4eme
{
	margin-left: 40px;
}
.ul_probs
{
	list-style-type: none;
	padding-top: 30px;
	padding-left: 30px;
}
.li_probs
{
	background-image: url(images/help3.png);
	background-repeat: no-repeat;
	padding-left: 18px;
	padding-top: 1px;
	font-weight:bold;
}

p
{
	font-family: "Times New Roman", Arial;
	font-size: 1.0em;
	margin-left: 15px;
	margin-right: 10px;
}
.centre
{
	text-align: center;
}
.retrait
{
	margin-left: 25px;
}
.gras
{
	font-weight:bold;
}
/* Début N°s de page */
.pages
{
	text-align: right;
	margin-right: 30px;
	margin-top: 100px;
}
/* Fin N°s de page */

/* Début Pied de page */

footer
{
	border-top: 2px solid #D9F5EE;
	height: 60px;
}
#w3c	/* Images faites avec Xara Designer pro 6 */
{
  	float: left;
  	margin-left: 15px;
  	width: 120px;
  	height: 40px;
  	margin-top: 10px;
}
.w3cxhtml
{
	width: 110px;
}

.w3ccss
{
	width: 110px;
	margin-top: 3px;
}
#mentions
{
	float: left;
	margin-left: 230px;
	width: 170px;
	height: 25px;
	margin-top: 15px;
}
.mentions
{
	font-size: 0.80em;
}
#accueil
{
	float: left;
	margin-left: 180px;
	width: 100px;
	height: 25px;
	margin-top: 15px;
}
.accueil
{
	font-size: 1.0em;	
}

#hdpage
{
	float: right;
	margin-right: 15px;
	margin-top: 15px;
	width:35px;
	height: 25px;
}
.hdpage
{
	font-size: 1.0em;
}
/* Fin Pied de page */
img	/* Toutes les images seront sans bordures */
{
	border: none;
}

Modifié par Auguste (13 Mar 2013 - 18:10)
Bonjour JuseN

Regarde les liens stp. Pour que ce soit un peu plus clair, je voudrai un espace entre le bas du texte et le haut du "footer" mais avec la page où il y a les N°s de pages que veux laisser au-dessus du "footer", je peux pas espacer la page sans N°s.
J'avais déjà essayé. Je n'ai pas de margin-top sur le footer mais sur p .pages (les N°s).

Si j'enlève le margin-top et que je met un padding-bottom sur la section, ça remonte les N°s de page que je voudrai laisser au-dessus du footer.

Tu veux que je supprime des infos dans le code HTML pour que ce soit plus clair ? Il y a longtemps que je suis venu sur le forum mais je lis toujours le site Alsacreations Smiley cligne
Modifié par Auguste (13 Mar 2013 - 17:20)
Non au pire tu rajoute une div en dessous de section qui s'arrete AVANT les N° de pages (pour les deux sites) et tu lui met un ID et un padding bottom, mais a la div, pas a la section cette fois ci. la div ne contenant pas les N° de pages, cela devrait normalement marché.
Ok c'est bon ! Smiley biggrin

J'avais pourtant essayé plusieurs fois en mettant des div Smiley fache Smiley confused

Quand mes neurones se mélangent je m'arrête et je reprends mais là... le repos n'y a rien fait. P'tet faire une défragmentation du cerveau Smiley cligne

Merci encore et Bonne fin de journée !
Modifié par Auguste (13 Mar 2013 - 18:10)
Sujet clos
Aller à