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

Dom83 · 30 Mars 2007

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.

dartyduck · 31 Mars 2007

Voilà ce que je te propose:
[cpp]<div id="main">

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

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

</div>[/cpp]
[cpp]#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;
}[/cpp]

Dom83 · 31 Mars 2007

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

dartyduck · 31 Mars 2007

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)

boub popsyteam · 31 Mars 2007

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

Dom83 · 1 Avril 2007

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 ?

Dom83 · 1 Avril 2007

Bon, j'arrive maintenant à faire fonctionner "margin-bottom: 120px" mais seulement lorsque je remplace mon
[cpp]<!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">[/cpp]par
[cpp]<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">[/cpp]
et uniquement avec Internet Explorer. :sweat:

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

dartyduck · 1 Avril 2007

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

Dom83 · 1 Avril 2007

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

oui, je mets bien mes ";".

Voici ma page de test :

Vous devez être connecté pour voir les liens.

(En gros, c'est une gallerie de dessins et peintures.)

son code :
[cpp]<!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>[/cpp]

et mon fichier .css :
[cpp]<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;}



</style>[/cpp]

dartyduck · 1 Avril 2007

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:

Vous devez être connecté pour voir les liens.

Dom83 · 2 Avril 2007

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.

Vous devez être connecté pour voir les liens.

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

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

dartyduck · 2 Avril 2007

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

dartyduck · 2 Avril 2007

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.

marsien · 2 Avril 2007

Voilà quelques liens qui devraient apporter des réponses précises à ton problème :
■[fr] http://pompage.net/pompe/pieds/
■[fr]

Vous devez être connecté pour voir les liens.

■[en]

Vous devez être connecté pour voir les liens.

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.

Dom83 · 2 Avril 2007

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 :

Vous devez être connecté pour voir les liens.

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

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 :

Vous devez être connecté pour voir les liens.

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 :
[cpp]<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: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;}



</style>[/cpp]

ma page :
[cpp]<!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>

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

<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="" class="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="" class="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="" class="ImageLien" src="http://dj.dom.free.fr/v3/data/drapeau-es.png" /></a> 
</div>

<div id="mainContent">

<img alt="" src="http://dj.dom.free.fr/v3/data/titre-images_fr.png" />

<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 />

<div class="CasePourPreview"><div class="CasePourPreview2"><a href=""><img alt="pépé et mémé noël" class="ImageLien" src="http://dj.dom.free.fr/v3/data/preview-pepe-meme.png" /></a><br />Nom - date<br />Description</div></div>
<div class="CasePourPreview"><div class="CasePourPreview2"><a href=""><img alt="Demetan la petite grenouille et son amie Renatan." class="ImageLien" src="http://dj.dom.free.fr/v3/data/preview-demetan.png" /></a><br />Nom - date<br />Description</div></div>
<div class="CasePourPreview"><div class="CasePourPreview2"><a href=""><img alt="Une image abstraite." class="ImageLien" src="http://dj.dom.free.fr/v3/data/preview-abstrait1.png" /></a><br />Nom - date<br />Description</div></div>
<div class="CasePourPreview"><div class="CasePourPreview2"><a href=""><img alt="Ma premiere peinture numerique." class="ImageLien" src="http://dj.dom.free.fr/v3/data/preview-peinture-num1.png" /></a><br />Nom - date<br />Description</div></div>
<div class="CasePourPreview"><div class="CasePourPreview2"><a href=""><img alt="Soucoupes volantes" class="ImageLien" src="http://dj.dom.free.fr/v3/data/preview-soucoupes.png" /></a><br />Nom - date<br />Description</div></div>
<div class="CasePourPreview"><div class="CasePourPreview2"><a href=""><img alt="Le printemps" class="ImageLien" src="http://dj.dom.free.fr/v3/data/preview-printemps.png" /></a><br />Nom - date<br />Description</div></div>
<div class="CasePourPreview"><div class="CasePourPreview2"><a href=""><img alt="Attends-moi petite princesse" class="ImageLien" src="http://dj.dom.free.fr/v3/data/preview-attends-moi-petite-princesse.png" /></a><br />Nom - date<br />Description</div></div>
<div class="CasePourPreview"><div class="CasePourPreview2"><a href=""><img alt="Aquarium" class="ImageLien" src="http://dj.dom.free.fr/v3/data/preview-aquarium.png" /></a><br />Nom - date<br />Description</div></div>
<div class="CasePourPreview"><div class="CasePourPreview2"><a href=""><img alt="I want to meet you" class="ImageLien" src="http://dj.dom.free.fr/v3/data/preview-i-want-to-2.png" /></a><br />Nom - date<br />Description</div></div>
<div class="CasePourPreview"><div class="CasePourPreview2"><a href=""><img alt="I want to meet you" class="ImageLien" src="http://dj.dom.free.fr/v3/data/preview-i-want-to-1.png" /></a><br />Nom - date<br />Description</div></div>
<div class="CasePourPreview"><div class="CasePourPreview2"><a href=""><img alt="Winnie the DJ" class="ImageLien" src="http://dj.dom.free.fr/v3/data/preview-winnie-dj.png" /></a><br />Nom - date<br />Description</div></div>

<div class="CasePourPreview"><div class="CasePourPreview2"><a href=""><img alt="Dom n Friends - Code Lyoko" class="ImageLien" src="http://dj.dom.free.fr/v3/data/preview-dom-friends-code-lyoko.png" /></a><br />Nom - date<br />Description</div></div>
<div class="CasePourPreview"><div class="CasePourPreview2"><a href=""><img alt="Dom n Friends - Simpson" class="ImageLien" src="http://dj.dom.free.fr/v3/data/preview-dom-friends-simpson.png" /></a><br />Nom - date<br />Description</div></div>
<div class="CasePourPreview"><div class="CasePourPreview2"><a href=""><img alt="Dom n Friends - Charlotte Spitz" class="ImageLien" src="http://dj.dom.free.fr/v3/data/preview-dom-friends-charlotte.png" /></a><br />Nom - date<br />Description</div></div>

<br /><br /><br /><br />

</div>

<div id="BlocBas">
<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>
<? include("+pub2.htm"); ?>
<? include("+copyright_fr.htm"); ?>
</div>

</body>
</html>[/cpp]

marsien · 2 Avril 2007

Je crois que tu ferais bien de lire les liens que je t'ai donné ce matin.

Ton site est tout bonnement non utilisable actuellement du moment que tu as un écran dont la résolution est inférieure à 1024*768 (OK, c'est pas la majorité ; mais nombreux sont ceux qui utilise leur navigateur en mode fenêtre et non plein écran...)

Vous devez être connecté pour voir les images.

Ils sont où les ascenseurs ?

Dom83 · 2 Avril 2007

Les ascenseurs ont disparu et je ne comprend pas pourquoi, je viens de le dire... Je suis en en 1280x960 et il est aussi inutilisable puisque sans ascenseurs je ne vois pas les cinq dernières images de la gallerie.

J'avais déjà lu tes deux derniers liens lors de recherches hier. Je les ai relu mais cela ne m'a pas aidé. J'ai changé mon code pour qu'il reprenne la méthode de ton premier lien, et je ne comprend donc justement pas pourquoi ça ne fonctionne pas.

Mais là je m'apprete à copier/coller le code de ton premier lien et y adapter un par un mes éléments à moi, comme ça je verrai là où je fais une erreur.

dartyduck · 2 Avril 2007

juste une question: tu donne "height: 100%-120px;" puis "padding-bottom: 120px;" à ton conteneur. Pourquoi mettre les deux ?

Dom83 · 2 Avril 2007

Si je ne met pas "height: 100%-120px;" le bloc est trop grand. En retirant "padding-bottom: 120px;" je ne note aucun changement, mais je le laisse puisqu'il est dans le code du premier lien que m'a donné martien.

Dom83 · 2 Avril 2007

J'ai copié/collé le code du premier lien de marsien, en ajoutant juste "height: 100%;" au bloc "container" pour limiter sa hauteur à celle de la fenetre. Je lui ai aussi mis "overflow:hidden;" puisque son contenu ne peut pas dépasser la fenetre si sa hauteur y est limitée.
Le bloc "mainContent" étant plus grand que la fenetre, j'ai voulu lui limiter à lui aussi sa hauteur, avec un "height:100%-120px;", et je lui ai donné "overflow:auto;".

Mais ça ne fonctionne pas.... Dans les deux navigateurs, le bloc "mainContent" continu d'être trop grand, et de ne pas afficher son ascenseur vertical..... J'ai donc forcé l'affichage de ses ascenseurs avec un "overflow: scroll;" au lieu de auto.
Comme vous pouvez le voir :

Vous devez être connecté pour voir les liens.

, les ascenseurs apparaissent mais sont grisés.... Apparement la hauteur de "mainContent" continu de se comporter comme si elle était "auto", alors que je l'ai fixé à "100%-120px", et que le bloc "container" dans lequel il se trouve a lui-aussi une hauteur fixée à "100%".

J'ai bien donné "margin: 0; padding:0; width: 100%; height: 100%;" à "body" et "html", donc les 100% de mes blocs se réfèrent bien à quelque-chose.

Votre explication ?

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

Dom83

dartyduck

Dom83

dartyduck

boub popsyteam

Dom83

Dom83

dartyduck

Dom83

dartyduck

Dom83

dartyduck

dartyduck

marsien

Dom83

marsien

Dom83

dartyduck

Dom83

Dom83