28172 sujets

CSS et mise en forme, CSS3

Configuration d'un ascenseur

//***********************************************
Reformulation du problème
La question a mal définie au départ. Je l'ai reformulée ici, dans mon message daté :# 23 Jan 2011 - 10:17:40

//***********************************************
Bonjour à toutes et à tous,

Configuration d'un ascenseur

J'utilise notepad++ 5.8.5 et firefox 3.6.13
Je voudrais avoir uniquement un ascenseur vertical, sans décalage du pied de page

Problème
Définition de l'ascenseur 

 style="height: 650px; overflow-y: auto; width: 690px;"


overflow-y: auto affiche deux ascenseurs: vertical et horizontal.
Le pied de page est décalé vers la droite.
overflow-y: scroll donne le même affichage.




div#bandeau1{
    width:790px;
	height:50px; /* 50 */
	background-color:#00CCFF;
	}
div#bandeau2{  
    padding: 1px 0;
	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 { /* contient le texte ---------------*/
	float:left;
            padding: 1px;
	top:90px;
	width:690px;
	height:650px;
	background-color:#FFCC00;
	}
div#pied_page { /* est décalé
	top:950px;
	width:790px;
	height:50px;
	background-color:#33FF99;
	}

Comment éviter le décalage du pied de page ?
Comment supprimer l'ascenseur horizontal ?

Avec mes remerciements
Cordialement
Papy upload/33688-110122Deca.png
Modifié par Jean Sympa (23 Jan 2011 - 10:20)
Je ne comprends pas bien ce que tu raconte...

Tu appelles quoi ascenseur ? La barre de défilement ?

Quel effet voudrait tu exactement ?
Merci Justaman,

Il s'agit des barres de défilement verticale et horizontale.
Je ne veux que la barre verticale.
Je précise, le problème se pose pour l'affichage d'une page appelée à partir d'une option d'un menu placé dans index.html

Le pied de page est décalé. Il devrait débuter à l'alignement de la plage rose, ce n'est pas le cas. Je veux supprimer ce décalage.

Cordialment
Papy
comment se fait-il que tu ais une barre de défilement alors que tu n'as aucun overflow dans ton css ?

peut tu afficher une capture d'écran de ce que ca donne, les petits cadres qu'on voit sur ton image ne permettent pas de se faire une idée.
Merci Justaman,

Voici une copie d'écran montrant le décalage du pied de page.
Dans définition de la barre de défilement
[code=html]
style="height: 650px; overflow-y: auto; width: 690px;"
[code]
j'ai remplacé height: 650px par height: 550px. Cela ajoute un déplacement du pied de page vers le haut.

Le décalage du pied de page est manifeste:
La figure montre que la position du pied de page varie avec la valeur de height dans la définition de la barre de défilement

Autrement dit le pied de page est dépendant de div contenu, en corrigeant cette dépendance le problème sera résolu.

Cordialement
Papy
//---------- upload/33688-1101221323.png
Modifié par Jean Sympa (22 Jan 2011 - 14:28)
Bonjour,

Tu fais encore la même erreur, pas de source HTML, ni le navigateur, ni sa version. Les gens peuvent pas savoir pourquoi ton problème existe.

Tu as surement un mot trop long quelque part dans ton code, dur à dire sans ton code...

Rajoutes ça après div contenu et avant div pied de page:


<div class="spacer"></div>


Et ça dans ton CSS

.spacer { 
  clear: both; 
}


(Penses à mettre ton code en valeur ca facilite la lecture et donc le nombre de personne voulant t'aider)

http://www.alsacreations.com/article/lire/53-guide-de-survie-du-positionnement-css.html
Modifié par rs459 (22 Jan 2011 - 14:58)
Merci rs459,

Tu m'aides à progresser. J'ai indiqué au début de ce message que j'utilisais firefox 3.6.13 .
Je ne connais pas le volume maximal autorisé pour les messages. Je réponds à ta demande.
Fichier index.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>
</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>
[//code]

Fichier styles.css
[code=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; /* 50 */
	background-color:#00CCFF;
	}
div#bandeau2{  
    padding: 1px 0;
	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;
padding: 1px;
	top:90px;
	width:690px;
	height:650px;
	background-color:#FFCC00;
	}
div#pied_page {
	top:950px;
	width:790px;
	height:50px;
	background-color:#33FF99;
	}
	.spacer {  
  clear: both;  
} 
	/* 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; 
	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>
<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">
<div /* ascenseur */
style="height: 550px; overflow-y: scroll; width: 690px;"

<p>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.


</p>
</div>
<div class="spacer"></div>
<div id="pied_page">Ceci est le pied de page</div>
</div>
</body>
</html>
[/code]

J'ai allégé le texte de asavoir

Je viens de découvrir la plage colorée du pied de page n'apparaissait plus dans l'affichage du fichier index.html, c'est nouveau.

Cordialement
Papy
Y'a personne qui va t'aider si tu fais pas d'effort pour mettre ton code proprement dans les bonnes balises CODE

[ code=html ] <html><head></head><body><div id="test" class="autretest"></div></body></html> [ /code ]

Ce qui donne 
 <html><head></head><body><div id="test" class="autretest"></div></body></html>


[ code=css ] #test {
background : #dcd;}

.autretest {
border 1px solid;
}

[ /code ]

Ce qui donne :
 #test {
background : #dcd;}

.autretest {
border 1px solid;
}


Très Cordialement.
Bonjour à toutes et à tous

Reformulation du problème
La question a mal définie au départ.

Données
J'appelle une page,asavoir, depuis un menu placé dans index.html. Je place un long texte dans une page, asavoir, et j'essaie de lui associer une barre de défilement verticale.

Problème
En poursuivant mes essais et en tenant compte des réponses, j'ai constaté que :

1 )- les variations de la valeur de la propriété height trouvée dans la définition
d'une barre de défilement faisant varier, en hauteur, la position du div pied de page.

Définition de la barre de défilement (page asavoir) :

style="height: 550px; overflow-y: scroll; width: 690px;"


2 ) - le pied de page est décalé vers la droite

3 ) -il y avait une barre de défilement horizontale

4 ) -dans l'affichage de la page index il subsistait le texte pied de page mais pas la couleur du pied de page

Données
Les fichiers index.html et styles.css sont dans mon message daté du : # 22 Jan 2011 - 17:58:52
Je n'avais pas placé correctement les balises 
 et
du fichier asavoir.html,
j'affiche à nouveau ce fichier


<!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">
<h2>Informations dispersées</h2>
</div>
<div id="menu">Menu vertical</div>
<div id="contenu">
<div  /* ascenseur */
 style="height: 550px; overflow-y: scroll; width: 690px;"

<p>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.


</p>
</div> 
<div class="spacer"></div> 
<div id="pied_page">Ceci est le pied de page</div>
</body>
</html>


Question 1
Comment éviter que les variations de la valeur de height de la barre de défilement
fassent varier, verticalement, la position du pied de page ?
Autrement dit comment rendre indépendants les div contenu et pied de page.

Question 2
Comment éviter le décalage, vers la droite de pied de page ?

Question 3
Comment afficher uniquement la barre de défilement verticale ?

J'ai pris la précaution de valider le code à l'aide de validator.w3 et jigsaw.w3.org/css-validator/
Ce dernier demande la suppression de la propriété padding dans ul.menu3.
J'ai supprimé cette propriété: le comportement de l'application est inchangé.
Donc, le code publié ici est correct.

Cordialement
Papy
Salut,
Déjà à priori la div contenu ou la div ascenceur n'est pas refermée ce qui explique peut être le mauvais positionnement du pied de page.
Ensuite il faut savoir que si tu mets des barres de défilement, si tu a un mot (comme une url parfois ou un mot très long) qui prend plus de place que la largeur de son conteneur (si tu la spécifies en pixel par exemple), tu auras aussi une barre de défilement horizontal qui apparaîtra. Enfin une page en ligne aide souvent à trouver rapidement et facilement le problème avec des outils adaptés comme firebug ou la barre d'outil web developper que tu peux télécharger (extensions firefox).
Bonne chance Smiley smile
Sujet clos
Aller à