28173 sujets

CSS et mise en forme, CSS3

Bonjour,

J'ai un p'tit soucis avec mon gabarit
Ma div frame n'apparaît pas en entier...



html, body {
width: 100%;
height: 100%;
}

body {
margin: 0;
padding: 0;
background-color: #fff;
}

.conteneur { 
overflow: hidden;    
width: 100%;
height: 100%;
min-height: 100%;	
/*height: auto!important; en mettant le height auto important, ma div frame apparait en entier mais elle ne "scroll plus sous" l'entete*/
position: absolute;
background-color: blue;
      
}

.header {
height: 100px;
background-color: green;
}

.menu {
position: absolute;
left:0;
width: 150px;
height: 100%;
background-color: blue;
}

.frame {
margin-left: 150px;
width: auto;
height: 100%;  
background-color: white;
overflow: auto;
}

<body>
		<div class="conteneur">
			<div class="header"></div>
			<div class="menu"></div>
			<div class="frame">	
                        </div>
                </div>

Est ce que quelqu'un à un idée d' où ça vient ?
Modifié par p_tite_jo (02 Sep 2006 - 22:30)
Salut

C'est à cause du height: 100%. Quand tu écris cela, la hauteur devient égale à celle du bloc parent, donc de .conteneur.

La hauteur deu conteneur, c'est la hauteur de la fenêtre. Le .frame fait donc la hauteur de la fenêtre.

Le problème, c'est qu'il y a déjà un élément de 100px de hauteur dans le conteneur ! Donc il ne reste plus la place pour mettre tout ton .frame, et comme l'overflow est caché, on n'a pas accès aux 100 derniers pixels ...

PS: joyeux anniversaire, au fait Smiley cligne
Modifié par Sopo (02 Sep 2006 - 13:31)
Tcho,
merci pour ta réponse.. je vais essayer de structurer autrement...
en fait, ce que je fais là c'est pour un copain qui est persuadé que les frames sont mieux que le css Smiley fache
tu comprends qu'il faut ABSOLUMENT que j'y arrive Smiley cligne

Rien à voir avec ce sujet, mais il met des class pour tous ces éléments... et quand je lui demande pourquoi, il me dit que c'est plus facile pour utiliser le javascript...(il garde les id pr l JS) n'y connaissant strictement rien en JS, j'ai pas d'argument pour lui répondre... mais ça m'intéresserait de savoir si c'est vraiment le cas... et alors pourquoi ne pas utiliser que des class?!

P.S : Merci Smiley cligne
Modifié par p_tite_jo (02 Sep 2006 - 13:53)
a écrit :
Tcho,
merci pour ta réponse.. je vais essayer de structurer autrement...
en fait, ce que je fais là c'est pour un copain qui est persuadé que les frames sont mieux que le css fache
tu comprends qu'il faut ABSOLUMENT que j'y arrive cligne
Heu, les frames & les CSS ne sont pas incompatibles, en même temps. C'est 2 choses différentes Smiley ohwell . Et les frames, ce n'est pas toujours le mal Smiley cligne .

Tu risques d'avoir du mal à le convaincre sur ce coup là, cette structure est effectivement plus facile à faire en frames. Par contre, si tu laisses le contenu s'allonger et que tu utilises la barre de défilement normale, c'est très facile à faire. Si tu lui parlais plutôt accessibilité, facilité de mise à jour, référencement ?

Sinon, tu fais un petit style-switcher en baladant ton menu à droite, à gauche, en haut & en bas et tu lui demande de faire pareil avec ses frames, sans toucher au code de sa page html (ou de ses pages, dans ce cas-ci) Smiley biggol
Pour le javascript, je m'y connais pas trop, mais je sais qu'il y a moyen d'accéder à un élément en utilisant son id (avec getElementById). C'est possible avec la classe aussi, mais c'est plus compliqué ...

Maintenant, ça n'empêche pas du tout d'employer des ID pour autre chose que le javascript. C'est pas compliqué, les identifiants pour un élément, unique sur la page, et les classes pour des groupes d'éléments qu'on souhaite styler de la même manière Smiley cligne
Merci pour tes réponses... Elles sont toujours aussi claires et utiles !
Je vais laisser tomber sur ce coup là... Smiley decu A bientôt