28172 sujets

CSS et mise en forme, CSS3

[Résolu] Décalage d'un bandeau

Décalage d'un bandeau

Bonjour à toutes et à tous,

Décalage d'un bandeau

//*** Solution

Il s'agit ici d'un problème de fusion de marge.
La solution est obtenu par : padding : 1px 0;
//***************************************

J'ai affaire à deux bandeaux, le premier, le plus haut, affiche un titre, le second, situé immédiatement en-dessous, affiche un menu. L'affichage de la page index est correct. En revanche, quand j'ouvre une page (A savoir), à partir du menu, je constate que les deux bandeaux sont disjoints.
Que faut-il faire pour que les deux bandeaux soient joints?

Index.html
<div id="bandeau1">
<h1>Le premier Site de Papy</h1>
</div>
<div id="bandeau2">
<ul class="menu3">
<li><a href="#">Logiciels</a>
<span> <a href="kompozer.html">KompoZer</a> <a href="#">Notepad++</a>
<a href="#">Blueship</a> <a href="#">MD5</a> <a href="#">Validator</a>
</span>
</li>
<li><a href="#">Documentation</a> <span> <a href="tutoriels.html">tutoriels</a>
<a href="">Forum</a> <a href="#">Livres</a> <a href="#">Astuces</a>
</span></li>
<li><a href="#">Exemples</a></li>
<li><a href="asavoir.html">A savoir</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>

styles.css
div#bandeau1{
clear:both;
width:790px;
height:50px;
background-color:#00CCFF;
}
div#bandeau2{
width:790px;
height:40px;
background-color:red;
}
Index
Page A savoir

Avec mes remerciements
Cordialement
Papy
Modifié par Jean Sympa (22 Jan 2011 - 09:24)
Merci rs459,

Voici le html de asavoir

<html>
<head>
<meta http-equiv="Content-Type"
content="text/html; charset=iso-8859-1">
<link rel="stylesheet" type="text/css" href="css/styles.css">
<title>Tutoriel Papy cree un site Web</title>
<style>
Codes CSS externes
</style>
</head>
<body>
<div id="bandeau1">
<h1>Le premier Site de Papy</h1>
</div>
<div id="bandeau2">
<h2>A savoir</h2>
</div>
<div id="menu">Menu vertical</div>
<div id="contenu">
<p>Codes HTML et CSS <br>
</p>
<p>Pour créer un site web on utilise deux types de codes, HTML et CSS.
Le texte a été supprimé pour alléger le fichier
La casse (majuscules ou minuscule) ne compte pas. </htm></p>
</div>
<div id="pied_page">Ceci est le pied de page</div>
</body>
</html>

Avec mes remerciements
Pour des soucis de compréhension, peux tu utiliser les balises "code" ?
Personnellement avec des couleurs je situe bien plus facilement le problème.
Merci à vous deux,

A l'attention de Mabelle
J'ai visité le site et ai découvert la feuille de styles de base. Je vais essayer de l'appliquer.
En as-tu l'expérience?

A l'attention de fogofo

C'est par inexpérience que je n'ai pas employé les balises ''code''

Index.html
<div id="bandeau1">
<h1>Le premier Site de Papy</h1>
</div>
<div id="bandeau2">
<ul class="menu3">
<li><a href="#">Logiciels</a>
<span> <a href="kompozer.html">KompoZer</a> <a href="#">Notepad++</a>
<a href="#">Blueship</a> <a href="#">MD5</a> <a href="#">Validator</a>
</span>
</li>
<li><a href="#">Documentation</a> <span> <a href="tutoriels.html">tutoriels</a>
<a href="">Forum</a> <a href="#">Livres</a> <a href="#">Astuces</a>
</span></li>
<li><a href="#">Exemples</a></li>
<li><a href="asavoir.html">A savoir</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div> 

styles.css
div#bandeau1{
    clear:both;
	width:790px;
	height:50px; 
	background-color:#00CCFF;
	}
div#bandeau2{  
        width:790px;
	height:40px; 
	background-color:red;
	}

Cordialement
Papy
Bonjour,

Pour commencer tu as déjà deux erreurs.

1: tu n'as pas fermé ton <br> ==> <br/>.
2: à un endroit tu as une balise </htm> qui ne doit pas etre là.

Ensuite c'est peut être un problème de marge sur ton H2.

Il faudrait l'ensemble du code CSS, pour savoir.

Ensuite pour mettre en valeur ton code c'est pratique de bien séparer les deux html et css les couleurs utilisées sont différente et permettent de rapidement cerner un problème éventuel (exemple) :


<html>
<head>
</head>
<body>
<h1 class="maclass-xyx" id="mon-super-h1">Bienvenue sur Alsacreations.com</h1>
</body>
</html>


h1 {
background-color : #cdc;
}

Modifié par rs459 (21 Jan 2011 - 08:59)
Merci rs459,

J'ai supprimé la balise </html>.
Je croyais qu'on ne fermait pas la balise <br>.
Je suis débutant. Mon codage est loin d'être parfait, des erreurs sont possibles
A la suite de la réponse de Mabelle, j'ai ajouté au début du fichier styles.css, le fichier bases.css.
Cela n'a rien changé. Il me reste à découvrir les avantages du fichier bases.css.
En revanche, dans asavoir.html, j'ai supprimé du texte pour alléger le fichier, le pied de page
n'est plus à sa place. Les deux bandeaux sont toujours disjoints.

Fichier styles.css

@charset "utf-8";
/* Fichier base 
 http://www.alsacreations.com/astuce/lire/654-feuille-de-styles-de-base.html  */
 
/* Page */ 
html { 
  font-size: 100%; /* Évite un bug d'IE 6-7. (1) */ 
} 
body { 
  margin: 0; 
  padding: 1em; /* Remettre à zéro si nécessaire. */ 
  /* Pensez à utiliser une collection de polices (2), par ex: 
  font-family: Arial, Helvetica, FreeSans, sans-serif; */ 
  font-size: .8em; /* À adapter pour la police choisie. (3) */ 
  line-height: 1.4; /* À adapter au design. (4) */ 
  color: black; 
  background: white; 
} 
 
/* Titres */ 
h1, h2, h3, h4, h5, h6 { 
  margin: 1em 0 .5em 0; /* Rapproche le titre du texte. (5) */ 
  line-height: 1.2; 
  font-weight: bold; /* Valeur par défaut. (6) */ 
  font-style: normal; 
} 
h1 { 
  font-size: 1.75em; 
} 
h2 { 
  font-size: 1.5em; 
} 
h3 { 
  font-size: 1.25em; 
} 
h4 { 
  font-size: 1em; 
} 
 
/* Listes */ 
ul, ol { 
  margin: .75em 0 .75em 32px; 
  padding: 0; 
} 
 
/* Paragraphes */ 
p { 
  margin: .75em 0; /* Marges plus faibles que par défaut. (7) */ 
} 
address { 
  margin: .75em 0; 
  font-style: normal; 
} 
 
/* Liens */ 
a { 
  text-decoration: underline; 
} 
a:link { 
  color: #11C; 
} 
a:visited { 
  color: #339; 
} 
a:hover, a:focus, a:active { 
  color: #00F; 
} 
 
/* Pas de bordure autour des images dans les liens */ 
a img { 
  border: none; 
} 
 
/* Divers éléments de type en-ligne (8) */ 
em { 
  font-style: italic; 
} 
strong { 
  font-weight: bold; 
} 
 
/* Formulaires */ 
form, fieldset { 
  margin: 0; 
  padding: 0; 
  border: none; 
} 
input, button, select { 
  vertical-align: middle; /* Solution pb. d'alignement. (9) */ 
}

/*  Début du fichier styles.css */
/*div {
	text-align:center;
	} */
h1{
  color:blue;
  text-align:center;
}
p{ 
  font-size: 16pt ; 
  color: green ; 
  background-color: #FFFFCC ; 
  }
div#bandeau1{
        clear:both;
	width:790px;
	height:50px; /* 50 */
	background-color:#00CCFF;
	}
div#bandeau2{  
float:none; 
        clear:both;
	width:790px;
	height:40px; /* 50 ul.menu3 li a */
	background-color:red;
	}
div#menu {
	float:left;
	top:90px;
	width:100px;
	height:650px;
	background-color:#FF6699;
	}
div#contenu {
	float:left;
	top:90px;
	width:690px;
	height:650px;
	background-color:#FFCC00;
	}
div#pied_page {
	clear:both;
	width:790px;
	height:50px;
	background-color:#33FF99;
	}
	/* CSS Debove Demo 3 +++++++++++++++++++++++++++ */
body {
	font-family:Verdana, Geneva, sans-serif;
	font-size:11px;
}

/* 07 et 08 Personnaliser la liste */
ul.menu3 {
	margin: 0; /* + 07 */
	padding: none; /* + 07 */
	list-style: none; /* + 07 */
	float: left;
	width: 750px; /* 600 initial/ 790++++++++++++++++++++*/
	background-color: #000000;
	position:relative;
}
/* 09 Vertical vers horizontal */
ul.menu3 li {
	float: left;
	margin: 0; padding: 0;
}
/* 10 Du style des boutons */
ul.menu3 li a {
	float: left;
	padding: 0 10px 0 10px;
	text-align:center;
	height:40px;  /* 50 hauteur du bandeau2*/
	line-height:40px; /*JS 50px*/
	font-weight:bold;
	color:#FFF;
	text-decoration:none;
}
/* 11 Effet de survol */
ul.menu3 li a:hover {
	background-color:red;
}
/* 12 Personnaliser la sous-liste */
ul.menu3 li span {
	display: none;
	float: left;
	width: 600px;
	background-color:red;
	position: absolute;
	left: 0; 
	top:40px;
}
/* 13 Personnaliser les liens de la sous-liste */
ul.menu3 li:hover span { 
	display: block; 
} 

ul.menu3 li span a { 
	display: inline; 
}

ul.menu3 li span a:hover {
	text-decoration: underline;
}

ul.menu3 li span a:active {
	color:#CCC;
}
/* 14 Apparition du sous-menu */
ul.menu3_b li a:hover {
	background:url(../images/bg-menu.jpg) 0 -56px repeat-x;
}


Fichier asavoir.html

<html>
<head>
  <meta http-equiv="Content-Type"
 content="text/html; charset=iso-8859-1">
  <link rel="stylesheet" type="text/css" href="css/styles.css">
  <title>Tutoriel Papy cree un site Web</title>
  <style>
		Codes CSS externes            
	</style>
</head>
<body>
<div id="bandeau1">
<h1>Le premier Site de Papy</h1>
</div>
<div id="bandeau2">
<h2>Informations dispersées</h2>
</div>
<div id="menu">Menu vertical</div>
<div id="contenu">
<p> Codes HTML et CSS<br>
Pour créer un site web on utilise deux types de codes, HTML et CSS. On
Sépare le fond (Codage HTML) et la forme (codage CSS). Par exemple une
poupée Barby, nue, dépouillée de tous ses vêtements représentent le
fond, ses vêtements représentent la forme. On peut changer ses
vêtements de bien des manières; le corps de la poupée n'est pas
modifié.
Les débutants, utilisateurs de KompoZer, ne perçoivent pas toujours
l'importance des codes CSS. <br>
</p>
<div id="pied_page">Ceci est le pied de page</div>
</div>
</body>
</html>

Cordialement
papy
Alors pour le code tu as "Colorisation Syntaxique" "bouton CODE" "Langage". Là tu peux choisir le langage utilisé HTML & CSS, c'est beaucoup plus pratique.

Le base CSS sert à remettre à plat les différences de rendus qui peuvent exister d'un navigateur à l'autre, et d'une version à l'autre. C'est d'ailleurs pour cette raison qu'il est très conseillé d'indiquer sur quelle navigateur tu as un problème ainsi que sa version.

Il faut que tu penses également à mettre un DOCTYPE à ta page.

http://www.alsacreations.com/article/lire/560-dtd-html-xhtml-comment-choisir.html



div#bandeau1 {
    clear:both; /* tu peux l'enlever */
    
}

div#bandeau2 {
    clear: both;  /* idem */
    float : none; /* ne sert à rien par défaut une div n'est pas flottante. */
}





Par Contre fige ton code, tu as un bug tu soumets ce bug , si tu fais evoluer ton HTML, nous on suit pas. (base.css tu peux le virer ca va t'induire en erreur si tu apprends).

Mets les balises code html/css en editant ton message, parce que là c'est gênant. Tu verras que ca t'aideras toi aussi à y voir plus clair.

(t'as toujours pas corrigé tes BR)
Modifié par rs459 (21 Jan 2011 - 13:43)
Merci Merci rs459,

Pour la colorisation j'utilise notepad++, je ne trouve pas ''Colorisation syntaxique''.
J'ai viré base.css, clear both et float.
Pour mettre les balises html/css faut-il faire un copier/coller à partir de notepad++?

Voici, l'affichage de la page asavoir avec les derniers codes que j'ai envoyés.

Cordialement
Papy upload/33688-0121111353.png
non c'est sur le forum que tu utilises la balise code comme ceci [ code=html ] ton code html [ /code ][ code=css ] ton code css [ /code ]


Seulement saches que ici pour obtenir une aide rapide, tu dois être concis et clair. Soit :

0 Etre poli (pas de soucis de ton coté Smiley cligne )
1 Expliquer ton bug. (ok)
2 Quand est ce qu'il survient. (ok)
3 Dans quel(s) navigateur(s) précisément tu rencontres le problème. (NON)
4 Faciliter la lecture de ton code en fournissant celui-ci dés le départ. (NON)
5 Séparer autant que possible le html du css pour simplifier la lecture du code. (PAS ENCORE MAIS PRESQUE CA Smiley cligne )
6 [Optionnel] fournir un exemple en ligne. (PAS NECESSAIRE)

Pour ton bug, c'est un problème de fusion de marge comme dit plus haut.

La solution : 

div#bandeau2 {
padding : 1px 0;
}


http://www.alsacreations.com/article/lire/629-fusion-des-marges.html
Modifié par rs459 (21 Jan 2011 - 14:49)
Merci Merci rs459,

Ton article est intéressant.
Tu conseilles de s'occuper d'un bug avant de passer au suivant. Je te suis.
Après avoir lu ton message, j'ai corrigé le fichier styles.css.
Le problème qui faisait l'objet de ce message est résolu.
En revanche toujours avec les mêmes codes, j'ai un nouveau problème: le pied de page s'est déplacé vers le haut, comme le montre ma dernière figure. Il empiète sur le div contenu.

Cordialement
Papy
Sujet clos
Aller à