28173 sujets

CSS et mise en forme, CSS3

[insolvable abandonné] Calque qui prend toute la page

Encore moi !

Donc c'est juste pour une derniere petite question après je prog tranquillement.

Donc j'ai un calque qui prend le haut à 50px;
En dessous j'en ai un second pour la hauteur je ne sais pas comment faire pour faire en sorte qui prend le reste de la page jusqu'en bas. Car si je met un 100% en height je sors de 50px (logique)

Merci de m'expliquer Smiley cligne
Modifié par Raynox (01 May 2006 - 16:51)
Salut Raynox !

Tu peux essayer soit en te servant des z-index soit en mettant ton image qui doit faire 100% de la hauteur en background dans le body avec un repeat-y.

Smiley cligne
J'ai jamais parlé d'image, je veux juste que le calque va jusqu'en bas de la page (navigateur) Smiley eek

merci
Modifié par Raynox (27 Apr 2006 - 22:57)
Pas d'idee.... ?

Je me suis peut etre mal exprimé.

Donc j'ai un calque qui se situe à 55px de la hauteur et je souhaiterai qu'il prenne toute la page en hauteur. Mais si je met height: 100%; il va dépasser de 55px en bas; (normal car il calcule suivant la taille de la page).

Comment faire?

Merci
salut,

quelque chose comme ceci devrait fonctionner :

html :

<body>
<div id="cadre_haut">
contenu haut
</div>
<div id="cadre_bas">
<p id="bas_first_element"></p>
... Suite du contenu du cadre bas ...
</div>
</body>


css :

html,body {
height:100%;
padding:0;
margin:0;
}

#cadre_haut {
position:absolute;
top:0;
left:0;
width:100%;
height:50px;
}

#cadre_bas {
height:100%;
}

#bas_first_element {
padding-top:55px; /* pardon pour l'erreur c'est padding bien sur et non margin */
}


Pour l'élément block auquel j'ai mis id="bas_first_element", il s'agit d'un <p> dans mon exemple mais ce sera bien sur l'élément que tu estimeras convenir dans ton document html (aussi bien un titre par exemple). L'important c'est qu'il s'agit bien du premier élément que l'on trouve suivant l'ordre du flux dans le conteneur "cadre_bas".
Modifié par clb56 (28 Apr 2006 - 17:58)
Ouais mais le probleme c'est que l'element du bas il a un scroll donc ca va sortir mais bon tu m'as donné une bonne idee quand meme merci. ^^

Je vais faire un div haut et un bas mais le bas je vais lui mettre une marge en bas de 50px puis creer un div a l'interieur ^^ comme ca il sera de 100% du moins je vais essayer

Alle encore merci

Bye
Modifié par Raynox (28 Apr 2006 - 20:10)
AH super cool Smiley biggrin

Merci beaucoup, justement la j'etais entrain de cherche en mettant un padding de 50px au contenu et faire un div content a l'interieur qui prend les 100% mais ca allait pas. Mais bon avec ton lien je sens que ca va fonctionner

merci
A l'arrive j'arrive au meme probleme

http://raynox.homelinux.com/test.html Smiley bawling

Parce que dans ton exemple le scroll est en "dehors" du calque mais le calque sort du navigateur donc quand on le met au calque directement on a le meme probleme

snif snif
Modifié par Raynox (28 Apr 2006 - 21:36)
Raynox a écrit :

Parce que dans ton exemple le scroll est en "dehors" du calque mais le calque sort du navigateur donc quand on le met au calque directement on a le meme probleme


disons que dans mon exemple au lieu de partir simplement de ce que je voudrais j'ai aussi tenu compte de ce que je pouvais faire. Ce qui aide pour éviter les frustrations Smiley lol
Raynox a écrit :
Y a vraiment pas de soluce en CSS? Smiley fache


Bonsoir Raynox,
Le problème vient d'IE 6 et versions antérieures, sinon cela serait très facile. En effet, si un bloc a un positionnement absolu (ou fixe), les propriétés "top", "right", "bottom" et "left" peuvent servir, en dehors de son placement, à lui donner une taille.
Un simple code de ce style pourrait donc suffire : 
div {
	position: absolute;
	top: 50px;
	bottom: 0;
	width: 730px;
	overflow: auto;
}

Mais si ceci fonctionne très bien dans les différents navigateurs et dans IE 7 (testé sur la version bêta), ça n'est pas le cas pour IE 6 et antérieurs.

Concernant IE 5 et 6, il y aurait la possibilité de les faire travailler en Quirks mode (par exemple en utilisant un prologue, qui laisserait IE7 en mode standard). Etant donné que dans le modèle de boîtes microsoft le padding ne s'ajoute pas à la hauteur, ce que tu cherches à faire deviendrait très facile.
Enfin bon, pour finir sur une touche cartésienne, il serait peut être mieux de changer l'ordre de ses désirs, non ?
Modifié par Alan (30 Apr 2006 - 20:08)
Bonjour,

Ouais vous avez raison mais a chaque fois que je change l'ordre du "désir" il a tendance a descendre un peu a la fois ^^. Donc a mon avis je vais faire un popup de taille fixe et mettre une hauteur fixe.

Merci pour m'avoir aidé Smiley cligne
Modérateur
bonjour,

http://forum.alsacreations.com/topic-4-13471-1-Gabarit-compliqu.html

Un autre topic ou le rendu voulu semble ressembler a ce que tu veut (cela passe dans IE).
Au lieu d'un padding-top j'utilise un <div> vide avec pour "id" marge ...quelquechose histoire de rester clair dans le code et ne pas l'oublier Smiley smile . C'est un truc parmis d'autre pour essayer de melanger valeur en pixel et en pourcentage. .

Il y a quelque lien d'indiquer dans le topic par "groumphy", tu peut eventellement glaner la quelques infos suplementaires.
++
<edit>Une version differente
page de cahier avec 1 banniere et 1 menu fixe. Il y a eu d'autre exemples de donné sur le forum, essai une petite recherche, et puis il y a la faq , aussi. </edit>
Modifié par gcyrillus (01 May 2006 - 23:20)
Sujet clos
Aller à