28204 sujets

CSS et mise en forme, CSS3

[IrRésolu] Height, min-height 100% et tout ce genre de choses

Bonjour,

J'avais d'affichage qui donnait visuellement ceci:

http://www.cyberbreizh.com/wip/test/normal/

Un peu court, je me suis donc dis "utilisons les principes enseignés par les tuto d'alsacrea" et je vais appliquer un height 100% au body et un min-height au div principal tout en positionnant le pied de page tout en bas grace au positionnement absolut. bref comme c'est savemment expliqué ici

Le pb c'est que ca me donne ceci:

http://www.cyberbreizh.com/wip/test/pobien/

Et je ne vois absoluemment pas d'ou vient le pb ><

J'ai pourtant épluché le code mais rien a faire.

Je le soumets donc a votre oeil érudit =))

CSS:


body {

	background: #C0C0C0; 
	font-family: arial, sans-serif;
	overflow: auto;
	height: 100%;
	
	
	}

#global  {

	width: 800px;
	min-height: 100%;
		
	margin: 0 auto;
	padding-bottom: 10px;
	background: black;	
	
	/* background: url(pix/main_bas.gif) no-repeat; */
	/* border: solid 1px red; voir les limites du block */ 
	
	
	}

	#global h1  {
	
	margin: 0;
	background: transparent url(pix/main_haut.gif) no-repeat;
	/* border: solid 1px green; Pour voir les limites du bloc */
	background-position: center top;
	font-size: smaller;	
	text-align: center;

	
}

	
#conteneur {
	
	padding: 0 15px;
	width: 764px;
	
	
		}

[...]

#footer {

	
	clear: both; /*interdit au bloc d'etre adjacent d'un bloc flottant */
	
	position: absolute;
	bottom: 0;
	height: 40px;
	padding: 10px;
	text-align: center;
	
	background: black;
	color: white;
	font-family: arial,sans-serif;
	font-weight: bold;
	
		
	}



HTML:

<body id="cyberbreizh">

	<div id="global">
	
		<h1>Cyberbreizh, votre prestataire informatique à Douarnenez</h1>
	
		<div id="conteneur">
		
			<?php include('include/header.inc.php'); ?>
			
			<?php include('include/accueil.inc.php'); ?>
		
			<div id="contenu">

				<h2></h2>
				
				<h4><span style= "font-weight: bold;">"Cyberbreizh, le service informatique: conseil, vente, maintenance, réparation, près de chez vous"</span></h4>
			
				<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
			
			</div>
		
			<div id="footer">
			
			<p>Réalisation: <a href="http://www.cyberbreizh.com">Cyberbreizh</a></p>
			
			</div>
		</div>	
	</div>
	
</body>

</html>


Merci d'avance =)
Modifié par xis (26 Jul 2007 - 18:55)
Salut,

Puisque tu t'es basé sur un tutoriel d'Alsa, pourquoi ne pas simplement faire ce qui est recommandé par ce tutoriel, c-à-d donner une hauteur de 100% à html et body et un min-height de 100% à #global ?

html, body {
   margin: 0;
   padding: 0;
   height: 100%;
}
#global {
   min-height: 100%;
}
Dans le code CSS que tu donnes, je ne vois rien concernant la hauteur des éléments Smiley sweatdrop
Erf, j'ai donné le mauvais CSS, c'est corrigé. :X
Modifié par xis (21 Jul 2007 - 18:10)
Bonjour,

+1 Smiley cligne

Je serais parti plutôt comme ça
	   <style type="text/css">
body, html{
height: 100%;
padding: 0; 
margin: 0;
}

body {
	background: #C0C0C0; 
	font-family: arial, sans-serif;
	overflow: auto;
	}

#global  {
min-height: 100%;
	background: red;
	width: 800px;
	margin: 0 auto;
position: relative;			
	}

	#global h1  {
	margin: 0;
	background: lime;	
	background-position: center top;
	font-size: smaller;	
	text-align: center;
}

#conteneur {
	padding: 0 15px;
	width: 764px;
	background: yellow;
		}

#footer {
	height: 40px;
	width: 800px;
	text-align: center;
	position: absolute;
	bottom: 10px;
	left: 0;
	background: black;
	color: white;
	font-family: arial,sans-serif;
	font-weight: bold;

	}
       </style>
   </head>

 <body>
	<div id="global">

		<h1>Cyberbreizh, votre prestataire informatique à Douarnenez</h1>
		<div id="conteneur">	
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas malesuada viverra est. Donec sapien mauris, tempus malesuada, euismod vitae, vehicula non, turpis. Sed leo massa, luctus quis, fringilla tristique, molestie id, magna. Mauris elementum ante. Nulla sodales pretium odio. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam nec ligula. Curabitur tempor iaculis augue. Maecenas pede lectus, bibendum vitae, elementum ac, gravida et, quam. Suspendisse ut elit interdum mi cursus semper. Fusce gravida viverra pede. Sed libero pede, congue eget, eleifend a, ornare ut, orci. Nam vitae risus eu nisl posuere varius.
</p>

			<div id="contenu">

				<h2></h2>
				<h4><span style= "font-weight: bold;">"Cyberbreizh, le service informatique: conseil, vente, maintenance, réparation, près de chez vous"</span></h4>

				<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

			</div>
			<div id="footer">
			<p>Réalisation: <a href="http://www.cyberbreizh.com">Cyberbreizh</a></p>
			</div>
		</div>	
	</div>
</body>
ghost c'est pratiquement le code de la page

http://www.cyberbreizh.com/wip/test/pobien/

J'ai édité le css Smiley cligne

J'ai bien suivi ton css, je ne vois pas le pourquoi de cette partie:


#global h1  {

	margin: 0;

	background: lime;	

	background-position: center top;

	font-size: smaller;	

	text-align: center;

}



-edit- OK je crois que je comprends =)))) Mais euh... je reviens dans 10 min Smiley langue

- edit 10 min plus tard-

Ok.... le probleme venait du "height: 100%" qui doit s'appliquer à l'ensemble de la partir <html> :X

Merci les gens ^^
Modifié par xis (21 Jul 2007 - 19:21)
Re

Attention à IE6 qui ne comprend pas min-height, il te faudra un commentaire conditionnel avec un height: 100% pour ce brave garçon
Merci pour le toyau, malheureusement je viens d'observer un phénomène pour le moins étrange que j'ai screenshoté (et qui selon le fonctionnement du tutoriel ne devrait pas arriver):

http://www.cyberbreizh.com/wip/test/contenuquidepasse.jpg

Le contenu du rectangle bleu de droite dépasse allegrement du #global lorsque la fenêtre est réduite.

Comme j'ai cerveau en bouillie, je crois que je vais aller prendre un bol d'air =)
Iop !

Désolé pour le lag ghost, je me suis éloigné des pcs quelques jours.

Concernant le { clear: both; }, bah a priori c'est séduisant mais ca ne semble pas fonctionner pour un élément postionné en absolu

pour rappel:



        position: absolute;
	bottom: 0px;
	height: 30px;
	padding: 10px;
	text-align: center;


Donc si je retire le postionnement aboslu, le footer reste bien sous le bloc de droite, pour le meilleur et le pire.
C'est à dire que si le bloc de droite fait une hauteur d'écran ou plus, il n'y a pas de soucis, en revanche, quand il ne fait pas plus de 300px, le footer remonte bcp trop haut ds la page.

Voila voila ...=)
Modifié par xis (25 Jul 2007 - 15:58)
Bon apres avoir un jeté un nouveau coup d'oeil à la FAQ je viens de trouver un papier sur le sujet.

http://pompage.net/pompe/pieds/

Visiblement on ne peut obtenir ce que je souhaite que par javascript.
Si un maestro du css veut me démontrer le contraire, je suis preneur Smiley cligne

En attendant, merci a ceux qui ont pris le temps de m'aider. ^^
Modifié par xis (25 Jul 2007 - 19:09)
Sujet clos
Aller à