un bloc qui s'arrete à 120px du bas de la page ?

Matériel : lilichris, narnos45, kekk Le Bistrot : je_rig0le Réseaux : be-bop et 148 utilisateurs inconnus

Voir les posts : Par défaut Tous Les bonnes notes Les notes insuffisantes

Mot : Pseudo : Filtrer
Bas de page
Auteur	Sujet : un bloc qui s'arrete à 120px du bas de la page ?

Dom83

Plus d'informations

30-03-2007 à 15:21:18

Bonjour

Je bloque pour faire une mise en page qui a pourtant l'air toute simple...

____________________________
|------------------------------|
|-----------bloc 1-------------|
|------------------------------|
|------------------------------|
|------------------------------|
|__________________________|
|------------bloc2-------------|
|__________________________|

Le bloc 2 fait 120px de hauteur, s'adapte en largeur à celle de la fenetre, et est collé au bas de la page avec un "bottom:0".

Comment faire pour que le bloc 1 prenne la place restante, en s'arretant bien à 120px du bas pour ne pas se supperposer avec le bloc 2 ?

J'ai essayé avec "margin-bottom: 120px" mais ce n'est pas ça.

Message édité par Dom83 le 31-03-2007 à 02:31:21

---------------
Visitez Mon Site et Le zoo du Pr Savanfou

dartyduck

85x85 : le comble du ridicule :o

Plus d'informations

31-03-2007 à 09:14:53

Masquer

Voilà ce que je te propose:

Code :

<div id="main">
<div id="bloc1">
</div>
<div id="bloc2">
</div>
</div>

Code :

#main {
margin: 0;
pading: 0;
position: relative;
width: 700px;
height: 700px;
}
#bloc1 {
margin: 0;
padding: 0;
position: relative;
width: 100%;
height: 100%;
border: 1px solid #000;
background: #AAA;
}
#bloc2 {
bottom: 0;
padding: 0;
position: absolute;
width: 100%;
height: 120px;
border: 1px solid blue;
background: #777;
}

Message édité par dartyduck le 31-03-2007 à 09:58:24

---------------
GLOIRE A

| Trompi PPC-IDN
n00b intergalactique invincible

MEMBRE DU GROUPUSCULE DES AVATARS EN COLERE [:dartyduck:6]

Dom83

Plus d'informations

31-03-2007 à 18:23:16

Masquer

Ma page ne ferait que 700x700 dans ce cas... Je veux utiliser toute la place disponible, sinon j'utiliserai des valeurs fixes.
Et puis, si la hauteur de bloc1 = 100%, une partie de bloc1 va se retrouver derriere bloc2, et je ne veux pas qu'ils se supperposent...

Message édité par Dom83 le 31-03-2007 à 18:23:59

---------------
Visitez Mon Site et Le zoo du Pr Savanfou

dartyduck

85x85 : le comble du ridicule :o

Plus d'informations

31-03-2007 à 21:06:15

Masquer

nan, j'ai mis 700 comme exemple, apres tu mets ce que tu veux comme largeur.
Pour ce qui est de la superposition des blocs, je sais que c'est pas exactement ce que tu veux, mais dans ce cas, tu vires main, tu mets ton bloc2 en relative, et c'est ton bloc1 que tu dois figer en hauteur.
Ou sinon, attends que qu'elqu'un daigne te proposer une autre solution. mais un bloc en position relative ne peut etre placé quà partir du bloc qui le précède, et non comme on veut sur la page. en absolute il est placé par rapport au haut gauche de son parent (bloc conteneur)

---------------
GLOIRE A

| Trompi PPC-IDN
n00b intergalactique invincible

MEMBRE DU GROUPUSCULE DES AVATARS EN COLERE [:dartyduck:6]

boub popsy team

G.M.G.V.S.O.
Profil : Modo matériel

Plus d'informations

31-03-2007 à 21:28:31

Masquer

Ca marche pas sans hacks et/ou javascript sous IE ...

---------------
SPAM & WAREZ = Ban!
Ultimate Boot CD | Memtest+
Mon bar préféré à Lyon ! | Bijoux Fantaisie de Créateur !

Dom83

Plus d'informations

01-04-2007 à 02:38:33

Masquer

Arf, je me doutais que ça ne serait pas possible...

Je vais donner quelques précisions :

Le bloc 2 contient deux liens en rapport avec la page, une pub, et le copyright. Je veux qu'il reste toujours collé en bas de la page, même lorsqu'on baisse l'ascensseur du bloc 1 pour voir la totalité du contenu de la page. Sa hauteur doit donc etre fixe à 120px, et sa position à bottom = 0.

Le bloc 1 est le contenu de la page. Comme il contient tout le vrai contenu de la page, c'est le seul bloc à avoir un overflow=auto, comme ça tous les autres blocs restent en place quand on baisse l'ascensseur. Je ne veux pas lui donner une hauteur fixe, car dans ce cas soit ce sera trop grand pour les petites résolutions, soit trop petit pour les grandes résolutions..... J'aimerai qu'il occupe simplement la place que le bloc 2 n'utilise pas, c'est à dire 100% de la largeur, et "100% - 120px" de la hauteur.

Pour sa largeur, j'utilise 100% mais avec en fait un "margin-left: 290px" pour qu'il laisse la place à un bloc de menu dont je n'ai pas parlé pour ne pas compliquer inutilement la chose. Pour la largeur, ça fonctionne, le bloc 1 prend la largeur que le bloc menu ne prend pas. J'ai donc essayé de faire pareil pour mon probleme, avec un "margin-bottom:120px" mais ça ne fonctionne pas : il continu de descendre jusqu'en bas...
J'ai essayé de lui donner "100% - 120px" comme hauteur, mais je vois qu'on ne peut pas mettre un calcul comme valeur, puisque les deux navigateurs ont alors fait comme si je n'avais pas spécifié de hauteur...

Donc voilà. Mon idée avec deux blocs n'est peut-etre pas la meilleur, si quelqu'un a une autre solution à me proposer pour pouvoir mettre mes deux liens, ma pub, et mon copyright, toujours en bas sans gêner le contenu de la page, je suis preneur.

boubpopsyteam :
Les "hacks" en questions fonctionnent chez tout le monde ou juste chez certains comme le javascript ?

Message édité par Dom83 le 01-04-2007 à 02:54:27

---------------
Visitez Mon Site et Le zoo du Pr Savanfou

Dom83

Plus d'informations

01-04-2007 à 23:21:12

Masquer

Bon, j'arrive maintenant à faire fonctionner "margin-bottom: 120px" mais seulement lorsque je remplace mon

Code :

<!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">

par

Code :

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

et uniquement avec Internet Explorer. :sweat:

Firefox a t-il un bug qui l'empeche de comprendre "margin-bottom: 120px" ?

Message édité par Dom83 le 01-04-2007 à 23:21:38

---------------
Visitez Mon Site et Le zoo du Pr Savanfou

dartyduck

85x85 : le comble du ridicule :o

Plus d'informations

01-04-2007 à 23:30:48

Masquer

ton code ne respecte pe pas les standards xhtml... juste une question con: as-tu mis un ";" à la fin de ta ligne css "margin-bottom: 120px" ?

---------------
GLOIRE A

| Trompi PPC-IDN
n00b intergalactique invincible

MEMBRE DU GROUPUSCULE DES AVATARS EN COLERE [:dartyduck:6]

Dom83

Plus d'informations

02-04-2007 à 00:04:12

Masquer

"margin-bottom: 120px" ça ne respecte pas les standards xhtml ???

oui, je mets bien mes ";".

Voici ma page de test : http://dj.dom.free.fr/v3/images_fr.php (En gros, c'est une gallerie de dessins et peintures.)

son code :

Code :

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Mes images - Le site de Dominique Bray</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="keywords" content="Dominique Bray, dessins, animations, infographie, 2D, 3D, peintures, huile, aquarelle, numériques" />
<meta name="Description" content="Le petit monde de Dominique Bray, réalisateur de dessins animés 2D 3D, dessinateur, peintre, musicien, compositeur, auteur, et un peu DJ." />
<meta name="author" content="BRAY Dominique" lang="fr" />
<meta name="copyright" content="Dominique Bray" />
<meta name="identifier-url" content="http://dj.dom.free.fr" />
<link rel="shortcut icon" href="mon_favicon.ico" />
<link rel="stylesheet" type="text/css" href="style1.css" />
</head>
<body alink="#51C7FF" link="#51C7FF" vlink="#51C7FF">
<div id="Panda"><img alt="" src="http://dj.dom.free.fr/v3/data/panda-peinture.png" /></div>
<? include("+pub1.htm" ); ?>
<? include("+menu_fr.htm" ); ?>
<div id="Langues">
<a href="http://dj.dom.free.fr/v3/accueil_fr.php"><img alt="" id="ImageLien" src="http://dj.dom.free.fr/v3/data/drapeau-fr.png" /></a> 
<a href="http://dj.dom.free.fr/v3/accueil_en.php"><img alt="" id="ImageLien" src="http://dj.dom.free.fr/v3/data/drapeau-en.png" /></a> 
<a href="http://dj.dom.free.fr/v3/accueil_es.php"><img alt="" id="ImageLien" src="http://dj.dom.free.fr/v3/data/drapeau-es.png" /></a> 
</div>
<div id="mainContent">
<center><img alt="" src="http://dj.dom.free.fr/v3/data/titre-images_fr.png" /></center>
<br /><br />Bienvenue sur mon tout nouveau site !<br /><br />
Voici mes plus belles créations mélangeant 2D et 3D. J'ai utilisé Vue Esprit, Blender, Painter, et Photoshop.<br />
<center>
<div id="CasePourPreview"><img alt="pépé et mémé noël" id="ImageLien" src="http://dj.dom.free.fr/v3/data/preview-pepe&meme.png" /><br />Nom - date<br />Description</div>
<div id="CasePourPreview"><img alt="pépé et mémé noël" id="ImageLien" src="http://dj.dom.free.fr/v3/data/preview-pepe&meme.png" /><br />Nom - date<br />Description</div>
<div id="CasePourPreview"><img alt="pépé et mémé noël" id="ImageLien" src="http://dj.dom.free.fr/v3/data/preview-pepe&meme.png" /><br />Nom - date<br />Description</div>
<div id="CasePourPreview"><img alt="pépé et mémé noël" id="ImageLien" src="http://dj.dom.free.fr/v3/data/preview-pepe&meme.png" /><br />Nom - date<br />Description</div>
<div id="CasePourPreview"><img alt="pépé et mémé noël" id="ImageLien" src="http://dj.dom.free.fr/v3/data/preview-pepe&meme.png" /><br />Nom - date<br />Description</div>
<div id="CasePourPreview"><img alt="pépé et mémé noël" id="ImageLien" src="http://dj.dom.free.fr/v3/data/preview-pepe&meme.png" /><br />Nom - date<br />Description</div>
<div id="CasePourPreview"><img alt="pépé et mémé noël" id="ImageLien" src="http://dj.dom.free.fr/v3/data/preview-pepe&meme.png" /><br />Nom - date<br />Description</div>
<div id="CasePourPreview"><img alt="pépé et mémé noël" id="ImageLien" src="http://dj.dom.free.fr/v3/data/preview-pepe&meme.png" /><br />Nom - date<br />Description</div>
<div id="CasePourPreview"><img alt="pépé et mémé noël" id="ImageLien" src="http://dj.dom.free.fr/v3/data/preview-pepe&meme.png" /><br />Nom - date<br />Description</div>
<div id="CasePourPreview"><img alt="pépé et mémé noël" id="ImageLien" src="http://dj.dom.free.fr/v3/data/preview-pepe&meme.png" /><br />Nom - date<br />Description</div>
<div id="CasePourPreview"><img alt="pépé et mémé noël" id="ImageLien" src="http://dj.dom.free.fr/v3/data/preview-pepe&meme.png" /><br />Nom - date<br />Description</div>
<div id="CasePourPreview"><img alt="pépé et mémé noël" id="ImageLien" src="http://dj.dom.free.fr/v3/data/preview-pepe&meme.png" /><br />Nom - date<br />Description</div>
<div id="CasePourPreview"><img alt="pépé et mémé noël" id="ImageLien" src="http://dj.dom.free.fr/v3/data/preview-pepe&meme.png" /><br />Nom - date<br />Description</div>
<div id="CasePourPreview"><img alt="pépé et mémé noël" id="ImageLien" src="http://dj.dom.free.fr/v3/data/preview-pepe&meme.png" /><br />Nom - date<br />Description</div>
<div id="CasePourPreview"><img alt="pépé et mémé noël" id="ImageLien" src="http://dj.dom.free.fr/v3/data/preview-pepe&meme.png" /><br />Nom - date<br />Description</div>
<div id="CasePourPreview"><img alt="pépé et mémé noël" id="ImageLien" src="http://dj.dom.free.fr/v3/data/preview-pepe&meme.png" /><br />Nom - date<br />Description</div>
<div id="CasePourPreview"><img alt="pépé et mémé noël" id="ImageLien" src="http://dj.dom.free.fr/v3/data/preview-pepe&meme.png" /><br />Nom - date<br />Description</div>
<div id="CasePourPreview"><img alt="pépé et mémé noël" id="ImageLien" src="http://dj.dom.free.fr/v3/data/preview-pepe&meme.png" /><br />Nom - date<br />Description</div>
</center>
<br /><br /><br /><br />
</div>
<div id="BlocBas">
<center><div id="Bas">
<a href="http://dj.dom.free.fr/forums/fsb/sujet.php?message=139#139">Commentez mes images</a> - 
<a href="http://dj.dom.free.fr/v3/news.htm">Restez informe(e) des nouveautes</a> - 
</div></center>
<center><? include("+pub2.htm" ); ?></center>
<center><? include("+copyright_fr.htm" ); ?></center>
</div>
</body>
</html>

et mon fichier .css :

Code :

<style type="text/css">
html { margin: 0; padding:0; width: 100%; height: 100%; overflow:hidden;}
body{ margin:0px; padding:0px; overflow:hidden; height:100%; width: 100%-300px; margin-left: 330px; margin-bottom: 120px; color: rgb(255, 255, 255); background-color: #023554; text-align: center; font-weight: bold; font-size: 16px;}
#mainContent{ height:100%; width:100%; overflow:auto;}
#BlocBas { position: absolute; width: 100%; height: 111px; bottom:0px; left:0; overflow:hidden; text-align: center;}
#Bas { position: relative; text-align: center;}
#Pub2 { position: relative; top:3px;}
#Copyright { position: relative; top:2px;}
#Panda { position: absolute; bottom:0px; right:0px; text-align: right;}
#Pub1 { position: absolute; bottom:0; left:0}
#Langues { position: absolute; top:17px; right:20px;}
#ImageLien{ border: 0pt none ;}
#CasePourPreview{ border: 0pt none ; width: 250px; height:215px; float: left; font-size: 12px; text-align: center; margin-left:25px; margin-right:25px;}
#Menu { position: absolute; top:0px; left:0; text-align: left; width:290px; height:100%; background-image: url(http://dj.dom.free.fr/v3/data/menu_fr.png); background-repeat: no-repeat;}
#MenuLienAccueil { position: absolute; top:49px; left:28px; width:56px; height:15px;}
#MenuLienImages { position: absolute; top:72px; left:28px; width:91px; height:15px;}
#MenuLienAnimations { position: absolute; top:94px; left:28px; width:119px; height:15px;}
#MenuLienMusiques { position: absolute; top:116px; left:28px; width:109px; height:15px;}
#MenuLienJeuxVideos { position: absolute; top:138px; left:28px; width:119px; height:15px;}
#MenuLienLivres { position: absolute; top:160px; left:28px; width:78px; height:15px;}
#MenuLienCommissions { position: absolute; top:182px; left:28px; width:101px; height:15px;}
#MenuLienBoutique { position: absolute; top:204px; left:28px; width:91px; height:15px;}
#MenuLienForum { position: absolute; top:226px; left:28px; width:134px; height:15px;}
#MenuLienContact { position: absolute; top:248px; left:28px; width:60px; height:15px;}
#MenuLienZoo { position: absolute; top:349px; left:20px; width:133px; height:13px;}
#MenuLienMix { position: absolute; top:368px; left:20px; width:169px; height:13px;}
#MenuLienAMPP { position: absolute; top:387px; left:20px; width:161px; height:13px;}
#MenuLienPresid2007 { position: absolute; top:405px; left:20px; width:184px; height:13px;}
#MenuLienPartenaires { position: absolute; top:424px; left:20px; width:118px; height:13px;}
<!--
a:link {text-decoration:none}
a:visited {text-decoration:none}
-->
</style>

Message édité par Dom83 le 02-04-2007 à 00:06:38

---------------
Visitez Mon Site et Le zoo du Pr Savanfou

dartyduck

85x85 : le comble du ridicule :o

Plus d'informations

02-04-2007 à 00:23:28

Masquer

premiere chose:
tous tes "<div id="CasePourPreview">" sont des styles qui se répetent souvent dans ton site, mieux vaut utiliser des class. Les div c'est pour les styles uniques.
deuxieme chose:
c'est quoi ces "<center></center>" ?
et pour vérifier la validité de ton code, j'ai trouvé ça:
http://validator.w3.org/check?uri= [...] ges_fr.php

---------------
GLOIRE A

| Trompi PPC-IDN
n00b intergalactique invincible

MEMBRE DU GROUPUSCULE DES AVATARS EN COLERE [:dartyduck:6]

Dom83

Plus d'informations

02-04-2007 à 01:23:03

Masquer

J'encadre un élément entre des balises "center" pour le centrer horizontalement. Mais apparement ça ne sert à rien...

Voilà, j'ai presque tout corrigé, et ma page est valide.
http://dj.dom.free.fr/v3/images_fr.php

Il y a juste ça que je ne comprend pas :

Citation :

Warning Line 25 column 25: processing instruction does not start with name.
<? include("+pub1.htm" ); ?>

Mais ça ne fonctionne toujours pas avec le xhtml. Dans Ie j'ai deux barres de défilement vertical, dans Firefox je n'en ai plus...
Et Firefox continu d'ignorer mon "margin-bottom: 120px".

Message cité 1 fois
Message édité par Dom83 le 02-04-2007 à 01:28:00

---------------
Visitez Mon Site et Le zoo du Pr Savanfou

dartyduck

85x85 : le comble du ridicule :o

Plus d'informations

02-04-2007 à 01:51:08

Masquer

essaie de changer l'extension de ton pub1.htm par php

---------------
GLOIRE A

| Trompi PPC-IDN
n00b intergalactique invincible

MEMBRE DU GROUPUSCULE DES AVATARS EN COLERE [:dartyduck:6]

dartyduck

85x85 : le comble du ridicule :o

Plus d'informations

02-04-2007 à 01:53:24

Masquer

a écrit :

Mais ça ne fonctionne toujours pas avec le xhtml. Dans Ie j'ai deux barres de défilement vertical, dans Firefox je n'en ai plus...

normal: une pour le div (overflow: auto; ) et une pour la page complete. en gros, ton bloc du bas est trop bas ! la fentre FF est moins fournie en icones et onglets que IE, et donc il affiche plus d'info dans une page.

Message édité par dartyduck le 02-04-2007 à 01:54:52

---------------
GLOIRE A

| Trompi PPC-IDN
n00b intergalactique invincible

MEMBRE DU GROUPUSCULE DES AVATARS EN COLERE [:dartyduck:6]

marsien

Je me la pête
Profil : /!\ Docteur - PDG

Plus d'informations

02-04-2007 à 06:19:58

Masquer

Voilà quelques liens qui devraient apporter des réponses précises à ton problème :

Il y a dedans un état des lieux des solutions actuelles, avec leurs avantages et compatibilité, en utilisant ou non des hack css et/ou du javascript.

---------------
.: La Pipicy Team :love:

Dom83

Plus d'informations

02-04-2007 à 15:26:29

Masquer

Citation :

normal: une pour le div (overflow: auto; ) et une pour la page complete.

J'ai mis "overflow:hidden" pour body, car aucun élément ne peut dépasser la taille de la page, sauf si je fais une erreur dans mon css. Sur l'ancienne version de mon site, j'avais fait la meme chose, et je n'avais qu'une seule barre, regardes : http://dj.dom.free.fr/pro/images2d3d.htm .
Quoi qu'il en soit, je n'ai plus du tout de barre maintenant... Enfin si, IE en met une mais elle reste grisée.

Citation :

Voilà quelques liens qui devraient apporter des réponses précises à ton problème :

Mon code applique la méthode de ton premier lien, avec pour seule différence que le contenu est (sensé être) limité à "100%-120px" de la hauteur de la fenetre.

Mais ce n'est toujours pas bon : http://dj.dom.free.fr/v3/images_fr.php

Non seulement "mainContent" ne s'arrete pas à 120px du bas comme il devrait avec son "padding-bottom: 120px", mais en plus il n'affiche pas de scrolling vertical alors que j'ai bien mis "overflow:auto" et que son contenu dépasse sa taille....
J'ai définie la hauteur de la même manière que la largeur : "100%-120px" et "100%-290px". La largeur fait bien "100%-290px" et ne dépasse pas de la page, mais la hauteur reste à 100% et atteint le bas de la page alors que je m'arrache les cheveux depuis deux jours pour qu'il s'arrete avant. :fou:
Je ne comprend vraiment pas ce qui cloche dans mon code.

mon css :

Code :

<style type="text/css">
html { margin: 0; padding:0; width: 100%; height: 100%; overflow:hidden;}
body{ margin:0; padding:0; overflow:hidden; height:100%; width: 100%; color: rgb(255, 255, 255); background-color: #023554; text-align: center; font-weight: bold; font-size: 16px; A:active {color: #51C7FF;}; A:link {color: #51C7FF;}; A:visited {color: #51C7FF;};}
#mainContent {width:100%-290px; height:100%-120px; padding-bottom: 120px; margin-left: 290px; overflow:auto;}
#BlocBas { position: absolute; width: 100%; height: 111px; bottom:0px; left:0; overflow:hidden; text-align: center;}
#Bas { position: relative; text-align: center;}
#Pub2 { position: relative; top:3px;}
#Copyright { position: relative; top:2px;}
#Panda { position: absolute; bottom:0px; right:16px; text-align: right;}
#Pub1 { position: absolute; bottom:0; left:0}
#Langues { position: absolute; top:17px; right:20px;}
.ImageLien{ border: 0 none ;}
.CasePourPreview{ border: 0pt none ; width: 300px; height:215px; float: left;}
.CasePourPreview2{ border: 0pt none ; width: 250px; height:215px; font-size: 12px; text-align: center; margin-left:auto; margin-right:auto;}
#Menu { position: absolute; top:0px; left:0; text-align: left; width:290px; height:100%; background-image: url(http://dj.dom.free.fr/v3/data/menu_fr.png); background-repeat: no-repeat;}
#MenuLienAccueil { position: absolute; top:49px; left:28px; width:56px; height:15px;}
#MenuLienImages { position: absolute; top:72px; left:28px; width:91px; height:15px;}
#MenuLienAnimations { position: absolute; top:94px; left:28px; width:119px; height:15px;}
#MenuLienMusiques { position: absolute; top:116px; left:28px; width:109px; height:15px;}
#MenuLienJeuxVideos { position: absolute; top:138px; left:28px; width:119px; height:15px;}
#MenuLienLivres { position: absolute; top:160px; left:28px; width:78px; height:15px;}
#MenuLienCommissions { position: absolute; top:182px; left:28px; width:101px; height:15px;}
#MenuLienBoutique { position: absolute; top:204px; left:28px; width:91px; height:15px;}
#MenuLienForum { position: absolute; top:226px; left:28px; width:134px; height:15px;}
#MenuLienContact { position: absolute; top:248px; left:28px; width:60px; height:15px;}
#MenuLienZoo { position: absolute; top:349px; left:20