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

HTML5, CSS3, Javascript, support des mobiles... Que penser de votre site ? Vous manquez d'informations pour la construction d'un site qui puisse s'afficher correctement partout ? C'est un problème simple, un peu complexe ? Venez ici !
Répondre
dj.dom
Gecko
Messages : 88
Inscription : 22 juin 2006, 02:58

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

Message 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
Haut
dj.dom
Gecko
Messages : 88
Inscription : 22 juin 2006, 02:58

Message 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
Haut
chinon37
Animal mythique
Messages : 5319
Inscription : 21 mars 2005, 10:17

Message par chinon37 »

serait-il possible de voir le code de l'ensemble de la page? ce serait plus simple...
Préferez Kompozer 0.8 à Nvu
Défendons nos valeurs, adhérons à l'APRIL
La Démocratie, c'est quand on frappe à votre porte à 6h00 du matin, et que c'est le laitier.
Haut
dj.dom
Gecko
Messages : 88
Inscription : 22 juin 2006, 02:58

Message 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
Dernière modification par dj.dom le 02 avr. 2007, 15:14, modifié 1 fois.
Haut
dj.dom
Gecko
Messages : 88
Inscription : 22 juin 2006, 02:58

Message 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&eacute;riques" />
  <meta name="Description" content="Le petit monde de Dominique Bray, r&eacute;alisateur de dessins anim&eacute;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>&nbsp;
	<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>&nbsp;
	<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>&nbsp;
</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&eacute;ations m&eacute;langeant 2D et 3D. J'ai utilis&eacute; Vue Esprit, Blender, Painter, et Photoshop.<br />

	<div class="CasePourPreview"><div class="CasePourPreview2"><a href=""><img alt="p&eacute;p&eacute; et m&eacute;m&eacute; no&euml;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>&nbsp;-&nbsp;
		<a href="http://dj.dom.free.fr/v3/news.htm">Restez informe(e) des nouveautes</a>&nbsp;-&nbsp;
	</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. :x
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
Haut
Répondre

Revenir à « Développement web »

Qui est en ligne ?

Utilisateurs parcourant ce forum : Aucun utilisateur inscrit et 5 invités