Page 1 sur 1
[RESOLU] défilement d'un texte sous la baniére.
Publié : 21 déc. 2009, 05:25
par mccoy
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
Re: défilement d'un texte sous la baniére.
Publié : 21 déc. 2009, 07:11
par pascal
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.
Re: défilement d'un texte sous la baniére.
Publié : 21 déc. 2009, 10:40
par mccoy
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
Re: défilement d'un texte sous la baniére.
Publié : 21 déc. 2009, 12:20
par Fabrice.Tres.Net
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.
Re: défilement d'un texte sous la baniére.
Publié : 21 déc. 2009, 12:56
par mccoy
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
Re: défilement d'un texte sous la baniére.
Publié : 22 déc. 2009, 17:49
par mccoy
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
