28173 sujets

CSS et mise en forme, CSS3

[RESOLU]Mise en page d'un site avec hauteur sur la totalité de l'écr

Bonjour,

Excusez moi, je me permets de poster pour vous poser une petite question à laquelle je ne trouve pas de réponse...
Je vous pose mon problème, je souhaite créer un site dont l'image de fond prend toute la hauteur grace à un repeat-y. Le problème c'est que je pensais pouvoir utiliser la fonction height:100% mais quand je l'utilise mes images disparaissent... Je teste pour le moment que sous firefox et ie 6. Sur firefox il n'y a plus rien, sous ie 6 il y a environ 20px de l'image en hauteur.

Pour être un peu plus pertinent je vais vous montrer mon code, ça sera peut être plus simple de me montrer mon erreur comme ça.

Style.css
/* CSS Document */

html, body
	{
	background-color:#CCCCCC;
	margin: 0px;
	}

#global
	{
	width: 100%;
	height: 100%;
	}
	
#site_conteneur
	{
	width: 800px;
	min-height: 100%;
	margin-left: auto;
    margin-right: auto;
	margin-top: 0px;
	padding: 0px;
	}
	
.cadre_gauche
	{
	float: left;
	height: 100%;
	width: 7px;
	background-image:url(images/v3_03.gif);
	background-repeat:repeat-y;
	}
	
.conteneur_principal
	{
	float: left;
	height: 100%;
	width: 786px;
	background-color:#FFFFFF;
	}
	
.cadre_droit
	{
	float: right;
	height: 100%;
	width: 7px;
	background-image:url(images/v3_05.gif);
	background-repeat:repeat-y;
	}


Index.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<link rel="shortcut icon" type="image/x-icon" href="images/favicon.ico">
<link href="style.css" rel="stylesheet" type="text/css" />

</head>

<body>

<div id="global">
	<div id="site_conteneur">
		<div class="cadre_gauche"></div>
		<div class="conteneur_principal"></div>
		<div class="cadre_droit"></div>
	</div>
</div>
	
</body>
</html>


Merci d'avance pour votre aide Smiley smile
Modifié par kisscool31 (09 Mar 2007 - 10:19)
j'ai deja vu ce lien et je ne crois pas car sur ce lien le problème vient d'ie, moi c'est ie et firefox, mais surtout firefox en fait.
euh si en fait...
je viens de virer 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

et maintenant ça marche, comment ça se fait ???
que dois je mettre à la place si c'est utile de laisser ça ? Est ce mon code qui n'est pas conforme au w3c ??

edit : par contre ça ne marche pas plus sur ie, en plus mtn les quelques pixels visibles sont décalés sur la page lol
Modifié par kisscool31 (08 Mar 2007 - 12:33)
Bonjour,

Si l'objectif est de faire une cadre, la construction est un peu douteuse.
Un conteneur doit contenir ... du contenu.

Pour faire ce genre de chose, d'autant plus simple sur une taille de conteneur fixée en pixel, est d'utiliser une image de fond unique (qui contient les deux bordures, soit une image de 800px de large) sur le conteneur principal.

Ensuite, on règle les marges des conteneurs internes.

NB : fixer la largeur à 760px est plus sage pour éviter un scroll en 800/600 ...
Mon objectif est de mettre une bande de chaque coté d'une zone blanche (le background étant un gris). Je souhaite donc que cette zone blanche prenne toute la hauteur de la page, les bandes l'entourant idem Smiley smile
Je ne peux donc utiliser une image de fond unique sachant que la taille de chaque écran est différente. De plus je cherche à avoir une page la plus légère possible, donc il ne faut pas utiliser une grande image en background.

Pour la largeur a 760 je ne vois pas pourquoi, peux tu m'en dire plus ? j'ai chez moi un écran en 15" et je n'ai pas de problème de scroll horizontal.
Personne poiur m'en dire un peu plus sur le problème ?
dois je mettre un doctype ou ce n'est pas obligatoire ? Je pense que ça ne l'est pas mais bon je préfère avoir confirmation.
en l'enlevant j'arrive à avoir ce que je recherche sur firefox, sur ie aussi maintenant, mais sur ce dernier, ce n'est plus centré (c'est collé a gauche) Smiley decu
pourquoi ?
Salut,
kisscool31 a écrit :
Personne poiur m'en dire un peu plus sur le problème ?
dois je mettre un doctype ou ce n'est pas obligatoire ? Je pense que ça ne l'est pas mais bon je préfère avoir confirmation.
en l'enlevant j'arrive à avoir ce que je recherche sur firefox, sur ie aussi maintenant, mais sur ce dernier, ce n'est plus centré (c'est collé a gauche) Smiley decu
pourquoi ?

Le DOCTYPE est bel & bien obligatoire ! Cette petite ligne de code en tête de page indique aux navigateurs quelles règles ils doivent appliquer pour rendre ta page visuellement. Si tu l'enlèves, ils vont travailler au petit bonheur la chance, IE fonctionnera en mode Quirks, et tu n'as pas la moindre chance d'obtenir le résultat voulu sur les différents navigateurs.

Concernant la mise en page sur toute la hauteur de la page, il faut commencer par agrandir les éléments <html> et <body> pour qu'ils occupent toute la surface de la fenêtre : 
html, body {
   margin: 0;
   padding: 0;
   height: 100%;
}
Ensuite tu peux indiquer à un élément à l'intérieur de ta page, qui portera l'image de fond, qu'il doit être au moins aussi haut que son parent : 
<html>
   <head>
   ...
   </head>
   <body>
      <div id="page">
      ...
      </div>
   </body>
</html>
#page {
   min-height: 100%;
   background: url(.....) 0 0 repeat-y;
   width: ???px;
   margin: 0 auto;
}
merci c'est super Smiley smile
je vais essayer tout de suite ce que tu me conseille Smiley smile
je croise les doigts pour ne plus avoir à vous ennuyer à ce sujet Smiley langue
T'es fantastique !!!
J'ai seulement rajouté le height:100%; et ça marche avec le doctype sous firefox et sous ie !
franchement chapeau bas Smiley smile
Merci beaucoup à tout le monde pour la réactivité Smiley smile
Si vous le voulez bien je vais poser mes valises ici et m'installer car ce site et son forum sont une source d'info impressionante Smiley smile

Au fait, vous pouvez fermer le topic si vous le voulez (je ne connais pas encore les pratique ici Smiley langue )
Modifié par kisscool31 (09 Mar 2007 - 10:18)
Administrateur
kisscool31 a écrit :
Au fait, vous pouvez fermer le topic si vous le voulez (je ne connais pas encore les pratique ici Smiley langue )

Hello Smiley smile

Non non, on ne ferme un sujet que lorsqu'il est contraire aux règles du forum, ou si la discussion s'envenime. Ce qui n'est pas le cas.
Le sujet a été marqué comme [Résolu] et c'est une bonne chose : cela facilitera les recherches similaire à l'avenir. Il reste ouvert car il est possible que de nouvelles informations ou corrections viennent s'ajouter.

Bonne journée Smiley cligne

EDIT : au fait, pour le height 100% c'est exactement ce que je te donnais dans mon premier lien Smiley smile
Modifié par Raphael (09 Mar 2007 - 10:27)
Raphael a écrit :

Hello Smiley smile

Non non, on ne ferme un sujet que lorsqu'il est contraire aux règles du forum, ou si la discussion s'envenime. Ce qui n'est pas le cas.
Le sujet a été marqué comme [Résolu] et c'est une bonne chose : cela facilitera les recherches similaire à l'avenir. Il reste ouvert car il est possible que de nouvelles informations ou corrections viennent s'ajouter.

Bonne journée Smiley cligne

EDIT : au fait, pour le height 100% c'est exactement ce que je te donnais dans mon premier lien Smiley smile

Maintenant que je le relis bah oui c'est ce que tu donnais... désolé Smiley decu
j'avais mal compris en fait ce petit article.
Sujet clos
Aller à