28172 sujets

CSS et mise en forme, CSS3

Barre de défilement surprenante

Bonjour à toutes et à tous,

Barre de défilement surprenante

J'ai acheté deux livres :
Savoir tout faire pour le web Avec les css de julien Above et,
Premiers pas ec CSS et HTML.
A ma grand surprise seul le premier évoque, en deux demi-lignes, la notion de barre de défilement
J'ai cherché, sans succès, un article dédié aux barres de défilement.

Je galère pour d'installer une barre de défilement verticale. L'affichage de la page index présente un décalage du div contenu, celui d'une page (asavoir), là où j'utilise une barre de défilement, est également perturbé. Je viens solliciter votre aide pour corriger cet affichage.
La div continu n'occupe pas sa place. Je pense que c'est c'est le codage de la barre de défilement
qui est responsable de cette anomalie.

Fichier index.html
 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<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>
</head>
<body>
<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>
<div id="menu">Menu vertical</div>
<div id="contenu"><h2>Bienvenue</h2></div>
<div id="pied_page">Ceci est le pied de page</div>
</body>
</html>


fichier styles.css

@charset "utf-8";


/*  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{
    width:790px;
	height:50px; 
	background-color:#00CCFF;
	}
div#bandeau2{  
    padding: 1px 0;
	width:790px;
	height:40px; /*  ul.menu3 li a */
	background-color:red;
	}
div#menu {
	float:left;
	top:90px;
	padding: 1px; /* hoy*/
	width:100px;
	height:650px;
	background-color:#FF6699;
	}
div#contenu {
	float:left; /* joue dans la position du div */
    padding: 1px;
	top:90px;  /* Normalise la position de contenu 1051*/
	width:690px; /* 690*/
	height:650px;
	background-color:#FFCC00;
	}
div#pied_page {
/*	top:950px;*/
clear:both;
	width:790px;
	height:50px;
	background-color:#33FF99;
	}
<!	.spacer {  
  clear: both;  
} 
div#barredef{
 height: 650px; 
 overflow-x: hidden; 
 overflow-y: auto; 
 width: 690px; 
 }
	/* 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

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<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>
 

 </head>
<body>
/*<div style=" height: 650px;  overflow-x: hidden;  overflow-y: auto;  width: 690px;*/
 <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">
<div id="barredef">
<p>A savoir

Codes HTML et CSS
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.

Fichiers index.html et styles.css

A la manière d'un livre les informations : texte, images et liens sont placées dans des fichiers, appelés pages; les pages correspondent approximativement à des chapitres. Deux fichiers se distinguent des autres :

Le fichier index.html (en minuscule) qui peut-être comparé à un centre de tri et de commandement.
Le fichier styles.css, encore appelée feuille de styles

Localisation des fichiers

Les fichiers sont placés dans un dossier, que nous nommerons ici, Appli.

Le fichier styles.css est placé dans un sous répertoire de Appli, nommé css (minuscules).
Les images sont placées dans le sous dossier de Appli nommé images (minuscules).
La totalité des autres pages est placée dans le dossier Appli

Remarques
On peut choisir librement le nom du dossier Appli.
Certains placent les pages autres que index .html etstyles.css dans un sous dossier de Appli nommé pages.

Structure générale du fichier index.html



Les deux sections, donc leurs codes, ont des fonctions différentes
Ce que contient la section body, code css et balises est qualifié d'inline

Validation des codes

Il est nécessaire de valider les codages HTML et Css à l'aide de logiciels tels que Validator (HTML) et Validator(CSS).

La recherche des informations sur Google

Vous serez amené , très souvent, à chercher des informations et des explications sur Google
Commencez toujours vos question par l'un des mot suivant: tutoriel, HTML ou CSS

Exemples

HTML cadre
Html tableau
La casse (majuscules ou minuscule) ne compte pas.
</p>
</div>  /* barredef */
</div> /* contenu */
<div class="spacer"></div> 
<div id="pied_page">Ceci est le pied de page</div>
</body>
</html>



Le problème semble se situer entre l'affichage des deux premiers bandeaux .

Avec mes remerciements
Cordialement
Papy
Bonjour,

Je pense que le soucis provient des marges internes.

#menu et #contenu ont un padding de 1px et des largeurs de 100 et 690px respectives.
Ces deux la vont occuper 1px + 100px +1px +1px +690px + 1px = 794px en largeur.

Pour forcer une barre de defilement permanente ou pour test , on peut appliquer :
 overflow-y: scroll;


Voir du coté de "modeles de boites" et overflow.

Cordialement,
GC
Sujet clos
Aller à