28172 sujets

CSS et mise en forme, CSS3

Problème height 100% mozilla et safari

Bonjour,

Premièrement je sais que le sujet height 100% a déja été traité dans de nombreux postes et astuces sur ce site mais je n'ai pas réussit (je dois pas être doué ^^)

Donc voila je veux que mon image de fond soit sur tout le document.Je pensais donc simplement mettre le div concerné à height 100%. Mais ce dernier prend la taille de la fenetre et non du document (je ne sais pas si je suis claire) uniquement sous mozilla, chrome et safari (pas de prob sous opera et ie8).


HTML
{
 height:100%;
 width:100%;
 margin: 0;
 padding: 0;
}

BODY 
{
 background: url('images/montage.jpg') no-repeat;
 background-position:top center;
 background-color:#06072c;
 height:100%;
 margin: 0;
 padding: 0;
 left:auto;
 right:auto;
 color: #333540;
 margin: 0px;
 font-family: Verdana, Arial, sans serif;
 font-size: 10px;
}

DIV.general {
  background: url('images/skin/fond_gris_blanc.jpg') repeat-y; /*Il s'agit de ce div qui doit etre sur tout le contenu et non sur la fenêtre)*/
  height:100%;
  width: 900px;
}

Pouvez m'aider?
Modifié par Arpeges (27 Jun 2009 - 09:18)
Merci d'avoir répondu si vite ^^

j'avais déja essayé avec min-height et meme resultat le body prend la dimension de la fenetre et non du contenu
Hello Arpeges et bienvenue parmi nous Smiley smile ,

en tant que modérateur, je me dois de te faire remarquer que tu n'as malheureusement pas respecté l'une des Règles de base du forum qui est d'afficher les codes et exemples proprement à l'aide des boutons [ code]... ici ton code HTML, CSS, PHP, etc.[ /code] (sans espace).

upload/1-code.gif

Je te remercie par avance de bien vouloir éditer ton message afin de le rendre conforme à cette règle. Smiley cligne

D'ailleurs, je rappelle que l'Aide (dont le lien est fourni lors de l'inscription) contient des pistes de recherche, des indications sur les règles de vie de la communauté, etc.
Voici le code html

<html>
<head>
...
</head>
<body>
<div id="general">
blablabla
</div>
</body>
</html>


Rien de bien compliqué ... Smiley bawling
Arpeges a écrit :
Voici le code html

DIV[#red].[/#]general {
  background: url('images/skin/fond_gris_blanc.jpg') repeat-y;
  height:100%;
  width: 900px;
}

<html>
<head>
...
</head>
<body>
<div [#red]id[/#]="general">
blablabla
</div>
</body>
</html>


Rien de bien compliqué ... Smiley bawling


Non effectivement...Une recherche préalable et un peu d'attention peut-être ? Smiley cligne
Quelle est la différence entre une classe et un id ?
Tant que nous y sommes : height 100% ?
C'est à mon avis plus problématique qu'autre chose de fixer une hauteur ainsi, cela dépend évidemment de ce que tu veux obtenir et doit se faire en toute connaissance de cause Smiley cligne

Bonne continuation,
Cdt,
Sylvain
Erratum Dans mon code j'ai bien un class="general" et pas id, je me suis trompé en recopiant, je suis pas trop en forme le Samedi matin ^^

Je sais bien que c'est problématique mais la hauteur de mes pages est variable en fonction de notre produit proposé par exemple
Modifié par Arpeges (27 Jun 2009 - 11:09)
Question: quel est le design recherché? Quel comportement pour un contenu court? Quel comportement pour un contenu long?

«height:100%» c'est bien gentil mais ça ne veut pas dire grand chose.
Modifié par Florent V. (27 Jun 2009 - 12:34)
Je veux que mon image de fond ce répète dans tout le contenu de la page, mais chez moi elle s'arrête à la taille de la fenêtre.

Je ne sais pas si je suis claire ^^
Bonjour,
Qu'est ce tu appelles le document ?
Si il n'y a pas de contenu, pas de scroll et donc les hauteurs de fenêtre et document sont égales.

Fais un dessin Smiley biggol
Ben justement si il y a du contenu, j'ai marqué blabla pour vous épargnez les nombreux div qui sont à l'intérieur de <div class="general"></div>.

Euh j'ai oublié de préciser qu'il s'agissait d'un site oscommerce (je ne suis pas responsable de ce choix, je ne suis qu'un dommage collatéral Smiley langue )
Arpeges a écrit :
Ben justement si il y a du contenu, j'ai marqué blabla pour vous épargnez les nombreux div qui sont à l'intérieur de <div class="general"></div>.

Euh j'ai oublié de préciser qu'il s'agissait d'un site oscommerce (je ne suis pas responsable de ce choix, je ne suis qu'un dommage collatéral Smiley langue )

Peut importe le choix du cms, le bien comprendre, en lisant la doc par exemple, ou bien appréhender ce que l'on tente d'obtenir; en lisant la doc également, en cherchant un peu sur le web (dans les tutoriels, les articles, les problèmes déjà rencontrés...) a ici beaucoup plus d'intérêt Smiley cligne

Appliquer les méthodes de "debogages" classiques (mettre des bordures, des fonds de couleurs marquées, pour se rendre compte des "forces en présence") peut également s'avérer payant Smiley cligne

Fournir un lien vers la page qui te pose problème ou vers une page de test reproduisant le phénomène ne serait pas inutile...voir le malade pour lui donner le traitement approprié est encore ce qui fonctionne le mieux, non ? Smiley hmm

Ceci étant dit : Peut-être voir du côté du contexte de formatage ?

A te lire,
Cdt,
Sylvain
J'ai trouvé comment résoudre le problème !

Bon c'est pas très orthodoxe mais bon ca marche partout maintenant ^^

j'ai remplacé 

<div class="general">
blablabla
</div>


par : 


<table>
<tr>
<td class="general">
blablabla
<td>
</tr>
</table>


et voici le css si un jour quelqu'un rencontre le même problème


HTML
{
margin: 0;
padding: 0;
}

BODY 
{
background: url('images/montage.jpg') no-repeat;
background-position:top center;
background-color:#06072c;	
color: #333540;
font-family: Verdana, Arial, sans serif;
font-size: 10px;
margin: 0;
padding: 0;
}

TD.general 
{
width: 900px;
background: url('images/skin/fond_gris_blanc.jpg') repeat-y;
}


Merci encore pour toutes vos réponses
Je n'ai toujours pas compris quel était le problème ou l'objectif poursuivi. S'il s'agit d'avoir un conteneur qui s'adapte à ses contenus... eh bien il suffit de ne pas figer sa hauteur (pas de height:100% ou height: 1000px par exemple). La seule subtilité, à la rigueur, c'est quand le contenu de ce conteneur vient à «dépasser» parce qu'il est positionné en absolu ou flottant. Mais ce sont des cas qui se gèrent bien sans avoir à passer par un tableau.
Sujet clos
Aller à