Page 2 sur 2
Publié : 26 mars 2007, 01:20
par alain47
Effectivement, Calimo, ca marche maintenant avec 'Overflow'. J'ai préféré le mettre à AUTO plutot que SCROLL car avec scroll j avais la barre d'ascenseur sur le cote droit (ascenseur vertical) et en dessous egalement (ascenseur horizontal). J'ecrivais dans un espace de largeur (WIDTH) de 90 %.
En utilisant AUTO avec overflow, l'ascenseur horizontal a disparu (ce qui est plus esthetique selon moi).
Et ca marche !
Maintenant, le texte dans le '<DIV id="content"> ..</DIV>' n'empiete plus sur le <DIV id="footer">.
Dès que le texte depasse la hauteur 'autosisée', l'ascenseur dans le 'content' apparait. et ca n'empiete plus sur le 'footer' du dessous.
Message envoyé avec : Mozilla/5.0 (Windows; U; Windows NT 5.1; fr; rv:1.8.1.2) Gecko/20070219 Firefox/2.0.0.2
Publié : 26 mars 2007, 14:20
par guilhem_mdg
Voici le code qui répond à ton problème mais pas au mien car ici le footer est fixe
Code : Tout sélectionner
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
<style type="text/css">
body{
margin:0;
padding:0;
}
#conteneur{
width:800px;
margin:0 auto 0 auto;
}
#header{
background-color:#E1EAF1;
height:80px;
}
#banniere{
background-color:red;
height:30px;
}
#centre{
position:relative;
}
#centre #menu{
background-color:green;
position:absolute;
top:0;
left:0;
width:150px;
height:expression(document.documentElement.clientHeight - 140);
overflow:auto;
}
#centre #page{
background-color:yellow;
position:absolute;
top:0;
left:150px;
height:expression(document.documentElement.clientHeight - 140);
width:650px;
overflow:auto;
}
#footer{
background-color:orange;
position:absolute;
bottom:0;
width:800px;
height:30px;
}
</style>
<!--[if !IE]> <-->
<style type="text/css">
#centre{
position:absolute;
top:110px;
bottom:0;
}
#centre #menu{
position:absolute;
top:0;
bottom:30px;
}
#centre #page{
position:absolute;
top:0;
bottom:30px;
}
</style>
<!--> <![endif]-->
</style>
</head>
<body><div id="conteneur">
<div id="header">header</div>
<div id="banniere">Bannière</div>
<div id="centre">
<div id="menu">menu</div>
<div id="page">
partie avec du contenu occupant le reste de la largeur<br />
partie avec du contenu occupant le reste de la largeur<br />
partie avec du contenu occupant le reste de la largeur<br />
partie avec du contenu occupant le reste de la largeur<br />
partie avec du contenu occupant le reste de la largeur<br />
partie avec du contenu occupant le reste de la largeur<br />
partie avec du contenu occupant le reste de la largeur<br />
partie avec du contenu occupant le reste de la largeur<br />
partie avec du contenu occupant le reste de la largeur<br />
partie avec du contenu occupant le reste de la largeur<br />
partie avec du contenu occupant le reste de la largeur<br />
partie avec du contenu occupant le reste de la largeur<br />
partie avec du contenu occupant le reste de la largeur<br />
partie avec du contenu occupant le reste de la largeur<br />
partie avec du contenu occupant le reste de la largeur<br />
partie avec du contenu occupant le reste de la largeur<br />
partie avec du contenu occupant le reste de la largeur<br />
partie avec du contenu occupant le reste de la largeur<br />
lll
</div>
</div>
<div id="footer">pied de page</div>
</div></body>
</html>
Publié : 26 mars 2007, 19:17
par alain47
Merci pour ton code Guilhem
(j'avais fini par trouver idem).
Effectivement, mon footer est fixe (car je prefere eviter de perdre de vue le header et donc le menu, lorsque la partie principale du milieu est trop grande sinon il faut rajouter un lien vers le haut de page) mais toi, tu veux l'inverse.
Tu veux que, lorsque la partie centrale soit tres grande, tu aies un ascenseur vertical sur TOUTE la hauteur de la page (et non pas uniquement sur la partie centrale, comme moi par exemple).
Message envoyé avec : Mozilla/5.0 (Windows; U; Windows NT 5.1; fr; rv:1.8.1.2) Gecko/20070219 Firefox/2.0.0.2
Publié : 27 mars 2007, 13:43
par guilhem_mdg
Exactement Alain47 et sans tableau, je sais pas comment faire...
Message envoyé avec : Mozilla/5.0 (Windows; U; Windows NT 5.1; fr; rv:1.8.1) Gecko/20061010 Firefox/2.0
Publié : 27 mars 2007, 18:32
par alain47
J'avoue que je ne connais pas la solution !
A priori, pour avoir les deux sous-menus (gauche et droite) qui descendent au fur et à mesure que le texte à l'intérieur est important, il faut utiliser des DIV en "position:relative" , et la ca marche bien vers le bas (entre les blocs du centre et le footer)... MAIS ..
mais si tu utilises "position:relative", sur mon ordi et avec mes essais, il semble qu'on ne puisse pas maitriser la largeur sur laquelle le texte s'affichera. le WIDTH ne semble pas marcher efficacement sur le texte avec "position:relative" alors qu'il marche tres bien avec "position:absolute"(comme dans l'exemple que tu m'as transmis).
J'ai essayé les deux propositions de FF_OLIVIER et de CHINON37 (ils utilisent tous les deux, "position:absolute"): ils marchent ... mais comme tu le dis , dès que tu ajoutes du texte dans les DIV des blocs du centre pour que ca depasse les limites des blocs, tout devient décalé : soit le texte soit la couleur va s'afficher dans le bloc d'à-côté , ou bien il n'est pas possible d'avoir 2 blocs centraux de meme hauteur !
Désolé. Je te conseille de voir egalement (mais tu l'as probablement deja fait) :
http://openweb.eu.org/ ou bien alsacreations (mais pour ce dernier, tu as de la pub sur ce site, ce que je n'aime pas du tout).
Mais un autre internaute de ce forum, va surement te donner la solution
Message envoyé avec : Mozilla/5.0 (Windows; U; Windows NT 5.1; fr; rv:1.8.1.2) Gecko/20070219 Firefox/2.0.0.2
Publié : 28 mars 2007, 16:50
par alain47
Tiens, je t'envoie le resulat de mes essais (fais un copier/coller pour l'essayer chez toi). Tu as l'ascenceur sur toute la page
... mais comme tu le verras, la partie CENTRE_DROIT ne respecte pas le HEIGHT et deborde vers le bas (sur le FOOTER) !
De plus, le CENTRE_GAUCHE ne s'affiche pas completement sur la droite (voir la 2eme ligne : sur mon ecran, la fin de ligne - qui termine par FIN - le N ne s'affiche pas . Il deborde sur la droite mais on ne le voit pas car la partie CENTRE_DROIT le recouvre).
mais quelqu'un du forum va surement te dire ce qu il faut faire maintenant
Voila le code :
Code : Tout sélectionner
<html>
<head><title> SANS les TABLES</title>
<style>
BODY {
margin:5px;color:#000000;
background-color:#fff;}
#header {
position:relative;top:0%; left:10%;
height: 5%;
width: 80%;
background-color:#ff0000;
text-align:center; padding:5 px;}
#centre_gauche {
position:relative;top:0%;left:10%;
float:left;
width:15%;
height:90%;
background-color:blue; padding:5 px;}
#centre_droite {
position:relative; top:0%;left:10%;
width:65%;
height:90%;
float:left;
background-color:yellow;padding:5 px;}
#footer {
position:relative; top:0%;left:10%; bottom:5%;
float:left;
width: 80%;
background-color:#008000;
text-align:center;}
</style>
</head>
<body>
<div id="header">--- HEADER ---</div>
<div id="centre_gauche">centre_gauche(MENU)
<p>**************F_I_N</p>
<p>****</p>
<p>****</p>
<p>****</p>
FIN de ligne.</div>
<div id="centre_droite">centre_droite
<p>texte </p>
<p>***</p>
<p>oooooooouuuuuuuuuuuuuuuuaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa__________et ca passe !! </p>
<p>***</p>
<p>***</p>
<p>***</p>
<p>***</p>
<p>***</p>
<p>***</p>
<p>***</p>
<p>***</p>
<p>***</p>
<p>***</p>
<p>***</p>
Et voila, derniere ligne et apparition de l'ascenseur pour TOUTE la page :-)<br>
... sur l'ecran 14' de mon portable</div>
<div id="footer">--- FOOTER ---</div>
</body>
</html>
NB: j'ai fait mes essais sur FF 2.O
Message envoyé avec : Mozilla/5.0 (Windows; U; Windows NT 5.1; fr; rv:1.8.1.2) Gecko/20070219 Firefox/2.0.0.2
Publié : 05 avr. 2007, 00:08
par Jeece
Bonsoir à tous,
Si j'ai bien compris le but est d'avoir le pied de page soit en fin d'article, soit collé au bas de la fenêtre si le contenu est moins long que la fenêtre.
Il existe bien une méthode qui traine justement dans mes favoris.
Elle est recensée dans l'article
53 CSS-Techniques You Couldn’t Live Without
Accés direct :
http://www.themaninblue.com/experiment/footerStickAlt/
Suivez les liens et vous serez bluffé.
L'astuce consistant à préciser la
hauteur minimum de 100% au bloc contenant le pied de page et de coller le pied en bas de ce bloc. Mais il semble qu'un bug apparaisse dans certains cas avec Gecko. Donc un bienfaiteur a decidé de sortir le pied du bloc de hauteur mini de 100%, reste à appliquer une marge négative judicieusement choisie pour remonter le pied juste ce qu'il faut pour qu'il soit collé en bas de la fenêtre.
@+
Morale : Pensez à faire des recherches dans la langue de shakespeare
Message envoyé avec : Mozilla/5.0 (X11; U; Linux i686; fr; rv:1.8.1.3) Gecko/20060601 Firefox/2.0.0.3 (Ubuntu-edgy)