Ancrage d'un boc

26 décembre 2005 à 18:22:49

Bonjour,

J'ai un problème pour faire un truc en css.

Sur un page web, j'ai un conteneur qui englobe tout le reste. Dans ce conteneur, admettons que j'ai du texte en haut et un bloc (div) en dessous de ce texte. Ce que je n'arrive pas à faire, c'est faire que ce bloc, quelque soit la résolution du client, aille jusqu'en bas du conteneur. Le conteneur, quant à lui, va jusqu'en bas de la page, mais ne doit pas dépasser (je sais pas si je m'exprime bien...

)

Voici le code html de la page :

<html>
<head>
<link rel="stylesheet" type="text/css" media="screen" href="style.css" />
</head>
<body>
<div id="conteneur">
<p>
machin
<br />
truc
<br />
machin
<br />
truc
<br />
(ma partie texte en fait, on va dire...)
</p>

<div id="bloc1">
Lorem ipsum dolor sit amet.
</div>
</div>
</body>
</html>

Et voici mon CSS :

html
{
height: 100%;
}

body
{
height: 100%;
margin-top: 20px;
margin-bottom: 20px;
background-color: rgb(200, 200, 200);
text-align: center;
}

#conteneur
{
width: 600px; /* largeur du conteneur */
height: 100%;
text-align: left;
background-color: rgb(220, 220, 220);
}

#bloc1
{
margin: 10, 10, 0, 10;
background-color: rgb(230, 230, 230);
height: 100%;
}

En fait, sous IE (par ce que ca doit marcher sous IE), le tout dépasse du bas de l'écran, ce qui crée une scrollbar verticale. Ce n'est pas du tout l'effet recherché.

Je voudrais que mon bloc gris clair arrive en bas de la page, avec le conteneur aussi. Pourquoi il continue jusqu'à perpète alors que partout j'ai mis height à 100% ?

Voilà, je vous remercie.

suman

27 décembre 2005 à 12:54:49

J'ai fait une erreur dans mon titre... :honte:

C'est ancrage d'un bloc et non pas d'un boc.
Voilà...

Sinon personne ne peut m'aider ?

strucky

27 décembre 2005 à 13:06:24

Salut,

C'est normal que ta page soit plus grande que le body, puisque tu mets height: 100% pour ton #bloc1, mais tu mets aussi à l'intérieur de ton #conteneur des <p> ansi que des <br>, donc le tout fait plus que la hauteur de ton body.

Donc enlèves le height: 100% de ton #bloc1.

Ensuite tu appliques des marges à ton #bloc1, mais tu ne précises pas les unités, certainement un oubli

Tangui

27 décembre 2005 à 13:21:55

height 100% si j'ai bien compris ton message

suman

27 décembre 2005 à 16:10:27

Tangui, j'ai déjà été voir le lien que tu m'a donné, mais ca résout pas mon problème. Merci quand même.

Sinon, effectivement, si je vire le height: 100% sur le bloc1, plus rien ne dépasse. Mais je voudrais que mon bloc aille jusqu'en bas de mon conteneur, qu'il y ait 1 ligne ou 50 lignes d'affichées (si ca dépasse, je met un overflow sur mon bloc de toute manière). Mais le but de la manoeuvre, c'est ca. C'est pas que mon bloc1 fasse toute la hauteur de la page, c'est qu'il soit ancré au bas de mon conteneur en fait.

Si quelqu'un sait... Merci.

suman

28 décembre 2005 à 19:11:43

Bon j'ai beau cherché dans tout les sens... je vois pas.

Y'aurai pas quelqu'un pour m'aider, s'il vous plait ?... :euh:

strucky

28 décembre 2005 à 19:33:59

En fait, je comprend pas trop ton problème, car en faisant un truc du style que tu as fais, mais en enlevant les margin du body, toute ta page est occupée.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<link rel="stylesheet" type="text/css" media="screen" href="style.css" />
<style type="text/css">
body
{
height: 100%;
margin: 0;
padding: 0;
background-color: rgb(200, 200, 200);
text-align: center;
}

#conteneur
{
width: 600px; /* largeur du conteneur */
height: 100%;
margin: 0 auto;
background-color: rgb(220, 220, 220);
}

#bloc1
{
margin: 10px, 10px, 0, 10px;
background-color: rgb(230, 230, 230);
}
p{margin: 0}
</style>
</head>
<body>
<div id="conteneur">
<p>
machin
<br />
truc
<br />
machin
<br />
truc
<br />
(ma partie texte en fait, on va dire...)
</p>

<div id="bloc1">
Lorem ipsum dolor sit amet.
</div>
</div>
</body>
</html>

suman

29 décembre 2005 à 11:40:03

Voici une image du résultat que je voudrais obtenir:

Image utilisateur

En fait, le conteneur de doit pas dépasser du bas de la fenêtre. Et le bloc1 doit aller jusqu'en bas du conteneur, même s'il n'y a pas assez de texte dedans. Et ceci, quelque soit la résolution du navigateur (IE, je le rappelle).
Si le texte contenu dans bloc1 est trop important, je mettrais une barre verticale avec overflow sur bloc1. Mais le but du truc ca serait de faire en sorte que le bloc1 ailles jusqu'en bas du conteneur, qui lui va jusqu'en bas de la fenêtre.
As-tu mieux compris ?

strucky

29 décembre 2005 à 13:08:01

Alors voilà, un code qui fait exactement l'image que tu m'as montré.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<link rel="stylesheet" type="text/css" media="screen" href="style.css" />
<style type="text/css">
body
{
margin: 0;
padding: 10px;
background-color: rgb(200, 200, 200);
text-align: center;
}

#conteneur
{
position: relative;
width: 600px; /* largeur du conteneur */
height: 100%;
margin: 0 auto;
padding: 0;
background-color: rgb(220, 220, 220);
}

#bloc1
{
position: absolute;
bottom: 10px;
left: 10px;
margin: 0;
padding: 0;
width: 580px;
height: 50%;
background-color: rgb(230, 230, 230);
overflow: auto;
}
p{
margin: 0
}
</style>
</head>
<body>
<div id="conteneur">

<p>
Conteneur
</p>

<div id="bloc1">
Bloc1
<br><br><br><br><br><br><br>
<br><br><br><br><br><br><br>
<br><br><br><br><br><br><br>
Bloc1
</div>

</div>
</body>
</html>

A toi d'adaper ensuite.

suman

29 décembre 2005 à 18:18:08

Alors ...
Déjà merci beaucoup d'essayer de solutionner ce problème, ca fait plaisir.

Et sinon ce que tu m'a filé c'est pas mal du tout, le truc c'est que le bloc1 doit commencer là où se termine ce qu'il y a au dessus. Parce que là, par exemple, il y a un blanc entre 'Conteneur' et le début du bloc1. Et pire, si tu colles plusieurs 'Conteneur <br />' à la suite, à un moment ca passe sous le bloc1. Le truc c'est que le bloc1 commence après ce qu'il y a avant. Parce que là, c'est plutôt bien, mais ca ne s'adapte pas à toutes les résolutions, vu que le bloc1 commence à 50% de la hauteur.
Tu vois ce que je veux dire ? o_O

strucky

29 décembre 2005 à 19:02:51

Là, je crois que ce que tu désires obtenir, n'est pas faisable, enfin je ne vois pas comment, si j'ai bien compris tu as du texte dans ton #conteneur d'une longueur aléatoire, et qu'ensuite, ton #bloc1 s'affiche juste à la fin de ce texte, et qu'il occupe le restant du #conteneur.

Franchement, je vois pas comment faire ça, et ce que je t'ai mis s'adapte à toutes les résolutions.

Sinon, fais deux blocs, dont chacun aura une hauteur de 50%, avec un overflow en cas de contenu plus grand.

suman

29 décembre 2005 à 19:13:57

Et ca serait pas possible de faire 2 blocs comme tu dis, le premier de taille fixe, et le 2e (le bloc1 du coup....) qui prenne le reste de la hauteur, avec l'overflow comme avant ?

strucky

29 décembre 2005 à 19:25:14

Ben si, si le premier est de taille fixe, il sera alors possible de donner une dimension au second, et lui indiquer sa position.

suman

30 décembre 2005 à 9:57:58

Moi j'ai ca, mais ca ne va pas non plus. Parce que maintenant, le bloc2 (ancien bloc1... je sais, faut suivre...

), il est accroché en bas, mais vers le haut il est libre. Le problème est donc inversé. Comment on fait pour lui dire d'être accroché en bas et après le bloc1. En fait, il faudrait qu'il puisse s'étirer en hauteur le bloc2.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<style type="text/css">
body
{
margin: 0;
padding: 10px;
background-color: rgb(200, 200, 200);
text-align: center;
}

#conteneur
{
position: relative;
width: 600px; /* largeur du conteneur */
height: 100%;
/*margin: 0 auto;*/
padding: 10px;
background-color: rgb(220, 220, 220);
text-align: left;
}

#bloc1
{
height: 400px;
width: 580px;
background-color: rgb(227, 227, 227);
}

#bloc2
{
position: absolute;
bottom: 10px;
left: 10px;
width: 580px;
height: 45%;
background-color: rgb(230, 230, 230);
overflow: auto;
}
</style>
</head>
<body>
<div id="conteneur">

<div id="bloc1">
Bloc1<br>
Bloc1<br>
Bloc1<br>
Bloc1<br>
Bloc1<br>
Bloc1<br>
Bloc1<br>
Bloc1<br>
Bloc1<br>
Bloc1<br>
Bloc1<br>
Bloc1<br>
Bloc1<br>
Bloc1<br>
Bloc1<br>
Bloc1<br>
Bloc1<br>
Bloc1<br>
Bloc1<br>
Bloc1<br>
Bloc1<br>

</div>

<div id="bloc2">
Bloc2

<br><br><br><br><br><br><br>
<br><br><br><br><br><br><br>
Bloc2
</div>

</div>
</body>
</html>

Voilà. Tu comprend mieux ce que je voudrais faire ?

jp949

30 décembre 2005 à 10:31:20

il y a la position:fixed qui est une solution mais qui ne marche sous IE qu'avec un hack dont je ne me souviens plus. Pour ca direction " alsacreations "

suman

30 décembre 2005 à 11:51:54

Oui mais même si je mets un position: fixed; ca ne s'adaptera pas à toutes les résolutions. C'est quand même bête qu'avec un height: 100% sur le bloc, il n'aille pas jusqu'en bas de la page...

strucky

30 décembre 2005 à 13:58:25

Tu ne peux pas utiliser en même temps les pourcentages et les pixels pour tes hauteurs.

Je ne sais pas quel est le but de tout ça, mais je trouve que tu te compliques la vie pour créer ta page.

suman

30 décembre 2005 à 14:14:08

Bah là oui. Je suis un peu obligé. Mais si tu as un moyen simple pour faire ce que je voudrais, je suis preneur !

Ya pas une propriété css qui permet de faire descendre un bloc jusqu'en bas de la page, tout bêtement ?

strucky

30 décembre 2005 à 14:38:29

Non, enfin je n'en connais pas.

Il faudrait faire que bloc1 occupe xhauteur dans conteneur et que bloc2 occupe le restant de l'espace dans le conteneur, et ça désolé, je ne vois pas comment le réaliser sans définir les hauteurs de chacun de ces blocs.

suman

30 décembre 2005 à 14:52:41

Citation : strucky

Il faudrait faire que bloc1 occupe xhauteur dans conteneur et que bloc2 occupe le restant de l'espace dans le conteneur

Voilà, c'est exactement ca. Parce que moi aussi je sais le faire pour une résolution donnée. Mais pour faire que ca s'adapte tout seul, je suis comme toi, je vois pas. :euh:

Ancrage d'un boc

× Après avoir cliqué sur "Répondre" vous serez invité à vous connecter pour que votre message soit publié.

× Attention, ce sujet est très ancien. Le déterrer n'est pas forcément approprié. Nous te conseillons de créer un nouveau sujet pour poser ta question.

Ancrage d'un boc

Ancrage d'un boc

Supprimer

Modérer

Signaler le message aux modérateurs