[RESOLU] défilement d'un texte sous la baniére.

mccoy · Message par **mccoy** » 21 déc. 2009, 05:25

plop les gens, j'ai un p'tit probléme.

J'ai crée un model, avec une "entéte" en haut de page,un menu à gauche, zone de texte au milieu, et pied de page.

Et je souhaite en faite que l'entéte et le menu soit fixe dans le navigateur, et que seul le texte défile.

voici mes style :

Code : Tout sélectionner

#entéte {
text-align: center;
margin-bottom: 20px;
position: fixed;
background-color: gray;
width: 100%;
height: 112px;
margin-top: 0;
}
#menu {
position: fixed;
float: left;
width: 150px;
}
#corp {
margin-left: 151px;
margin-top: 0;
margin-right: 10px;
background-color: white;
}
#pied {
text-align: center;
clear: left;
}
h1 {
margin-bottom: 0;
margin-top: 0px;
}
h2 {
margin-top: 0;
margin-left: 0;
text-align: center;
font-weight: bold;
}
ul {
padding-left: 0;
}
li {
list-style-type: none;
}

J'ai l'effet désiré dans Kpz mais pas dans le navigateur

J'ai tenté plein de combinaison, mais pas moyen de fixer ces derniers dans le navigateur

Merci d'avance pour votre aide futur

Message par **pascal** » 21 déc. 2009, 07:11

Sans chercher trop loin, ça ça marche:

Code : Tout sélectionner

#entéte {
text-align: center;
margin-bottom: 20px;
position: fixed;
top:0;
background-color: gray;
width: 100%;
height: 112px;
}
#menu {
position: fixed;
float: left;
width: 150px;
top:112px;
}
#corp {
margin-left: 151px;
margin-top: 112px;
margin-right: 10px;
background-color: white;
}
#pied {
text-align: center;
clear: left;
}
h1 {
margin-bottom: 0;
margin-top: 0px;
}
h2 {
margin-top: 0;
margin-left: 0;
text-align: center;
font-weight: bold;
}
ul {
padding-left: 0;
}
li {
list-style-type: none;
}

Évite les accents dans les id et classes, ça peut être cause de bugs. Je te conseille aussi de lire un tutoriel sur le positionnement en CSS.

mccoy · Message par **mccoy** » 21 déc. 2009, 10:40

nan, marche pô
dans KpZ, l'effet et correcte aussi, mais dans le navigateur rien est fixe.
Du coup, la modif que tu as apporté décale mon text de l'entéte de l'épaisseur de l'entéte

Fabrice.Tres.Net · Message par **Fabrice.Tres.Net** » 21 déc. 2009, 12:20

Le + simple c'est de mettre ta page en ligne, tu peux l'appeler toto.html pour les essais, ensuite tu nous communiques son adresse.
La terminologie que tu emploies me semble incorrecte: tu veux une entête qui reste en haut de la fenêtre du navigateur lorsqu'on fait défiler la page (texte, images,...) avec l'ascenseur. Est-ce bien cela?

Un petit coup d'oeil là : http://openweb.eu.org/articles/initiation_flux devrait t'aider un peu. Surtout continue avec les liens vers le positionnement.

mccoy · Message par **mccoy** » 21 déc. 2009, 12:56

le lien de ce que ça donne : [retiré ]

Fabrice.Tres.Net a écrit : tu veux une entête qui reste en haut de la fenêtre du navigateur lorsqu'on fait défiler la page (texte, images,...) avec l'ascenseur. Est-ce bien cela?

oui, mais que le "menu" soit fixe aussi. En fait, qu'il n'y est que la zone blanche "text" , et le pied de page qui défile grace à l'ascensseur.

merci pour ton aide et

merci pour le tuto, j'my lance de suite

mccoy · Message par **mccoy** » 22 déc. 2009, 17:49

aprés avoir entrevu le tuto, j'ai trouvé un exemple qui collé presque a ce que je voulais faire

Code : Tout sélectionner

.content {
  width: 65%;
  border: 1px solid #000000;
  padding: 1em 1%;
}
.menufixe {
  position: absolute;
  top: 1em;
  right: 2%;
  border: 1px solid #000000;
  padding: 1em;
  width: 18%;
  z-index: 2;
}
html>body .menufixe {
  position: fixed;
}
.menuabsolu {
  position: absolute;
  top: 15em;
  right: 1%;
  border: 1px solid #000000;
  padding: 1em;
  width: 20%;
  background-color: #ffffff;
  z-index: 3;
}

<body>
  <div class="content">

    …
  </div>
  <div class="menu">
    …
  </div>
</body>

il me manquait ça
html>body .menufixe {
position: fixed;
}

Mais malgrés cette exemple, aprés avoir reporté toute les modif sur mon document ( changer mes ID en classe ect .. ),
dans le navigateur, il passait toujours pas alors que le doc test marché normalement.

aprés recherche, la seul difference entre les documents est la toute 1ére ligne:
sur le mien : <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
sur le test : <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
Apparement due au Nvu que j'utilisé à l'époque.
j'ai cherché comment la modifier sur KPZ , pô trouvé.
Donc , nouveau doc avec kompozer

Geckozone

[RESOLU] défilement d'un texte sous la baniére.

[RESOLU] défilement d'un texte sous la baniére.

Re: défilement d'un texte sous la baniére.

Re: défilement d'un texte sous la baniére.

Re: défilement d'un texte sous la baniére.

Re: défilement d'un texte sous la baniére.

Re: défilement d'un texte sous la baniére.

Qui est en ligne ?