Page 1 sur 1
un bloc qui s'arrete à 120px du bas de la page ?
Publié : 30 mars 2007, 19:21
par dj.dom
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 envoyé avec : Mozilla/5.0 (Windows; U; Windows NT 5.0; fr; rv:1.8.1.3) Gecko/20070309 Firefox/2.0.0.3
Publié : 01 avr. 2007, 23:27
par dj.dom
Bon, j'arrive maintenant à faire fonctionner "margin-bottom: 120px" mais seulement lorsque je remplace mon
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">
par
Code : Tout sélectionner
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
et uniquement avec Internet Explorer.
Firefox a t-il un bug qui l'empeche de comprendre "margin-bottom: 120px" ? Et pourquoi cela ne fonctionne t-il pas avec
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">
?
Message envoyé avec : Mozilla/5.0 (Windows; U; Windows NT 5.0; fr; rv:1.8.1.3) Gecko/20070309 Firefox/2.0.0.3
Publié : 02 avr. 2007, 09:34
par chinon37
serait-il possible de voir le code de l'ensemble de la page? ce serait plus simple...
Publié : 02 avr. 2007, 13:54
par dj.dom
edit
Message envoyé avec : Mozilla/5.0 (Windows; U; Windows NT 5.0; fr; rv:1.8.1.3) Gecko/20070309 Firefox/2.0.0.3
Publié : 02 avr. 2007, 15:13
par dj.dom
Voici la version actuelle
fichier css :
Code : Tout sélectionner
<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;}
<!--
a:link {text-decoration:none}
a:visited {text-decoration:none}
-->
</style>
la page :
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>
<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>
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 de bas de la page alors que je m'arrache les cheveux depuis deux jours pour qu'il s'arrete avant.
Je ne comprend vraiment pas ce qui cloche dans mon code.
Message envoyé avec : Mozilla/5.0 (Windows; U; Windows NT 5.0; fr; rv:1.8.1.3) Gecko/20070309 Firefox/2.0.0.3