28173 sujets

CSS et mise en forme, CSS3

Problème avec min-height

Bonjour,

Je sais que le sujet a été abordé maintes et maintes fois ... j'ai été lire les différents posts sur alsacréations, sur pompage, webmasterhub etc ... mais je n'arrive pas à solutionner mes 2 problèmes :

>>cf page test<<
code de la page 

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
	<head>
	            <style type="text/css">
	                      body{
	                        width:760px;
	                        margin:auto;
	                        color:#fff;
	                        background-color:#000;
	                        font:0.98em/1.15em Arial, helvetican, sans-serif;
	                        overflow:auto;
	                        height:100%;
                              }
                               html{
                                 height:100%;
                                 margin:0;
                               }
                               #page{
                                 position:relative;
                                 color:#ccc;
                                 background-color:#ff0;
                                 min-height: 100%;
                               }
                               #texte{
                                 position:absolute;
                                  top:180px;
                                 left:190px;
                                 width:540px;
                                 line-height:1.5em;
                                 border:1px solid #eee;
                                 padding:14px;
                                 text-align:justify;
                                 color:#000;
                                 background-color:#fff;
                               }
                       </style>
	</head>
	
	
	<body>
		<div id="page">
			<div id="texte">
				<p>#</p><p>#</p> ...
			</div>
		</div>
	</body>
</html>



problème #1 : je n'arrive pas à étendre le fond jaune jusqu'en bas de la page Web (il s'arrete à la hauteur de la fenetre du navigateur - Opera ou Firefox testés)

problème #2 : est-ce possible de mettre une sorte de footer vide qui permettrait que le fond blanc ne colle pas au cadre du navigateur en bas ? J'ai essayé de faire comme le montre le tuto de pompage sur le footer mais rien ne change dans mon affichage ..

Merci de votre aide

Smiley smile
Modifié par Gunner4902 (15 Feb 2007 - 16:02)
J'ai mis le overflow afin que la page soit toujours centré sur le navigateur qu'il y ait ou pas la barre de scrolling vertical. La page passe "en dessous" en quelque sorte au lieu de s'arrêter à cette barre (donc width - largeur de la barre) Smiley cligne
Gunner4902 a écrit :
problème #1 : je n'arrive pas à étendre le fond jaune jusqu'en bas de la page Web (il s'arrete à la hauteur de la fenetre du navigateur - Opera ou Firefox testés)

Le contenu de div#page est positionné en absolu. Il n'est donc pas pris en compte dans le calcul de la hauteur de div#page. Solution : ne pas positionner en absolu les éléments dont la hauteur doit être pris en compte pour le positionnement ou le dimensionnement d'autres éléments.

Gunner4902 a écrit :
problème #2 : est-ce possible de mettre une sorte de footer vide qui permettrait que le fond blanc ne colle pas au cadre du navigateur en bas ?

Tu peux avoir, à la fin de div#texte, un bloc ayant un fond jaune, qui « simulera » une marge entre les bords inférieurs de div#page et div#texte.

Si tu places un pied de page positionné en absolu... ben voilà, positionné en absolu, donc pas pris en compte par les autres éléments, bla bla.

À voir aussi ce qu'il est possible de faire avec des margin/padding, en faisant attention aux problèmes potentiels de fusion des marges.
Pour le Overflow:auto
j'ai expérimenté ceci en partant de la page : http://openweb.eu.org/articles/overflow_fond_fixe/
je me suis dit que ce coulissement permettrait peut etre de "faire passer la page sous" la barre de défilement, et celà est le cas, sous Firefox 2, Opera 9 et IE7 ... validé CSS2 Smiley cligne ... celà ne devrait pas ?


==================================

il reste toutefois 1 petit problème, meme si celà a bien avancé Smiley smile 

#texte{
	      position:relative;
	     top:180px;
	     left:190px;
	     width:540px;
	     line-height:1.5em;
	     border:1px solid #eee;
	     padding:14px;
	     text-align:justify;
	     color:#000;
	     background-color:#fff;
          }
         #footer{
	     position:relative;
	     background-color:#f00;
	     height:20px;
         }
    </style>
</head>
	
	
	<body>
		<div id="page">
			<div id="texte"><p>#</p><p>#</p>...
				<div id="footer"></div>
			</div>


J'ai mis sur le serveur la page modifiée : ici

reste de probleme : le bloc texte étant avec un top:180px; il y a un décalage de 180 pixels entre la fin du jaune et le blanc ... j'ai donc tenté de mettre un margin-top, mais alors blanc et jaune commençait à 180px du haut de page ... comment faire pour respecter ce décalage en haut, mais que les couleurs jaunes et blanches se terminent ensemble ?

Smiley smile
Modifié par Gunner4902 (15 Feb 2007 - 17:04)
Gunner4902 a écrit :
je me suis dit que ce coulissement permettrait peut etre de "faire passer la page sous" la barre de défilement, et celà est le cas, sous Firefox 2, Opera 9 et IE7 ... validé CSS2 Smiley cligne ... celà ne devrait pas ?

Euh... ça me semble bizarre. À vrai dire, je ne vois pas du tout la différence avec le overflow:auto et sans...

Gunner4902 a écrit :
reste de probleme : le bloc texte étant avec un top:180px; il y a un décalage de 180 pixels entre la fin du jaune et le blanc

Ben forcément, quand on utilise du positionnement relatif à tout va... Smiley rolleyes
En passant, tu as beaucoup d'éléments positionnés en relatif ou en absolu... une petite crise de positionnite ?

Gunner4902 a écrit :
... j'ai donc tenté de mettre un margin-top, mais alors blanc et jaune commençait à 180px du haut de page ...

(note en passant : faut vraiment s'accrocher pour suivre ces histoires de blanc et de jaune... ça serait plus simple si tu indiquais de quels blocs il s'agit... en l'occurrence div#page et div#texte)

C'est un problème de fusion des marges.
http://web.covertprestige.info/test/04-blocs-imbriques-et-fusion-des-marges.html
Au pire, rajouter un bloc au début de div#page pour créer ce retrait.
Florent V. a écrit :

Euh... ça me semble bizarre. À vrai dire, je ne vois pas du tout la différence avec le overflow:auto et sans...

Je l'ai vu sur un site que j'ai développé pour l'administration, les pages étaient parfois très courtes et celà évitait le décalage de toute la page, mais je reste étonné que l'on puisse détourner overflow également ...

Florent V. a écrit :
Ben forcément, quand on utilise du positionnement relatif à tout va... Smiley rolleyes
En passant, tu as beaucoup d'éléments positionnés en relatif ou en absolu... une petite crise de positionnite ?

Lol, j'ai commencé avec la divite, puis j'ai enchainé avec la positionnite ... je vais remettre tout ça dans le flux afin de limiter l'utilisation de "position:"



Florent V. a écrit :
(note en passant : faut vraiment s'accrocher pour suivre ces histoires de blanc et de jaune... ça serait plus simple si tu indiquais de quels blocs il s'agit... en l'occurrence div#page et div#texte)

Mea culpa, j'étais à regarder les couleurs, je pigeais pas, alors j'ai été plus visuel que précis ...

Florent V. a écrit :
C'est un problème de fusion des marges.
http://web.covertprestige.info/test/04-blocs-imbriques-et-fusion-des-marges.html
Au pire, rajouter un bloc au début de div#page pour créer ce retrait.

Merci pour ton aide Florent Smiley smile
Sujet clos
Aller à