Etirer la page

Version imprimable

Etirer la page

Bonjour,
A force d'essayer de faire du Voodoo dans mon css, je suis totalement perdu :cry:

Voici mon layout:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<body>
    <div class="page">
        <div id="header">
            <div id="menucontainer">
                <div id="title">
                    <h1>
                        Gestion Prod</h1>
                </div>
                <div id="logindisplay">
                    Welcome <strong>@User.Identity.Name</strong>!
                </div>
                <ul id="menu">
                    <li>@Html.ActionLink("Home", "Index", "Home")</li>
                    <li>@Html.ActionLink("About", "About", "Home")</li>
                    <li>@Html.ActionLink("Admin", "Index", "Admin")</li>
                </ul>
            </div>
        </div>
        <div id="main">
            @RenderBody()
        </div>
        <div id="footer">
        </div>
    </div>
</body>

et le CSS (besoin de plus de details ?)

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
body
{
    position:absolute;
    background-color: #5c87b2;
    font-size: .85em;
    font-family: "Trebuchet MS" , Verdana, Helvetica, Sans-Serif;
    margin: 0;
    padding: 0;
    color: #696969;
    width: 100%;
}
.page
{
    margin: 0;
    padding: 0;
    overflow: hidden;
    top: 0px;
    bottom: 0px;
}
 
header, #header
{
   width: 100%;
   top:0px;
   height:40px;
}
 
#main
{
    top: 40px;
    overflow: auto;
    padding: 15px;
    background-color: #fff;
    border-radius: 4px 0 0 0;
    -webkit-border-radius: 4px 0 0 0;
    -moz-border-radius: 4px 0 0 0;
}
 
footer, #footer
{
    bottom: 0px;
    height: 40px;
    background-color: #fff;
    color: #999;
    padding: 2px 0;
    text-align: center;
    line-height: normal;
    margin: 0 0 30px 0;
    font-size: .9em;
    border-radius: 0 0 4px 4px;
    -webkit-border-radius: 0 0 4px 4px;
    -moz-border-radius: 0 0 4px 4px;
}

Ma page contient des divs (en gris) qui sont censees occuper une grande partie de l'écran, mais voila le resultat.
http://img4.hostingpics.net/pics/114992Untitled.png

Merci pour toute aide

23/05/2013, 15h25
rodolphebrd

bonjour,

Citation:

Envoyé par css

A force d'essayer de faire du Voodoo dans mon css, je suis totalement perdu

faut arrêter les sciences occultes pour se recentrer sur les bases...:mrgreen:

Il y a des propriétés qui trainent sans utilité, top, bottom,...
Body en position absolute... pourquoi cela?
Border-radius n'a plus besoin d'être préfixé...

Réglez vos hauteurs qui sont parfois trop petites, écrasant le contenu des blocs.
23/05/2013, 15h43
Invité

Citation:

Body en position absolute... pourquoi cela?

Car j'ai éssayé de suivre l'exemple donné ici

Maintenant que j'ai un peu épuré et enlevé la position absolute, meme le haut de mes divs n'est plus visible.

Il est certainement util de préciser que le style des divs centrales est généré par un script. disponible ici (jQuery Layout)

Je ne tiens pas a mètre de taille fixe, j'aimerais que ma page s'addapte a son contenu.
23/05/2013, 15h57
rodolphebrd

Il semble que dans l'exemple que vous donnez position relative soit appliqué à Body et position absolute aux enfants de body....

Pour avoir une hauteur qui épouse tous le contenu vous pouvez utiliser height:100% et/ou min-height:100%, à voir en fonction de l'ensemble...

Je viens de nest mes divs dans un

Code:

#TabContainer {width: 100%; height: 100%;}

Et ai modifié mon css comme ceci :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
body
{
    background-color: #5c87b2;
    font-size: .85em;
    font-family: "Trebuchet MS" , Verdana, Helvetica, Sans-Serif;
    color: #696969;
    width: 100%;
}
.page
{
    margin: auto;
    position: absolute;
    left: 0px;
    right: 0px;
    top: 0px;
    bottom: 0px;
}
 
header, #header
{
   width: 100%;
   top:0px;
   height:40px;
}
 
#main
{
    top: 40px;
    overflow: auto;
    padding: 15px;
    background-color: #fff;
    border-radius: 4px 0 0 0;
    -webkit-border-radius: 4px 0 0 0;
    -moz-border-radius: 4px 0 0 0;
}
 
footer, #footer
{
    background-color: #fff;
    color: #999;
    padding: 2px 0;
    text-align: center;
    line-height: normal;
    margin: 0 0 30px 0;
    font-size: .9em;
    border-radius: 0 0 4px 4px;
    -webkit-border-radius: 0 0 4px 4px;
    -moz-border-radius: 0 0 4px 4px;
}

J'obtiens le résultat souhaité, mais est-ce que la logique de ce CSS vous semble correcte ?

23/05/2013, 16h59
rodolphebrd

:faq:http://css.developpez.com/faq/?page=...ement_absolute

Pour les réglages c'est top ou bottom et/ou left ou right.
24/05/2013, 08h49
Invité

Lorsque je met en position relative le conteneur parent (body) le contenu de ma page disparait.
J'aimerais vraiment respecter les normes du CSS mais je n'ai actuellement pas le temps de suivre un tuto pour tout re-apprendre.

Auriez vous une solution a mon problème ?
24/05/2013, 10h56
rodolphebrd

Le problème, c'est que vous avez des connaissances très parcellaires, et ne serait-ce que sur l'élément Body vous ne saisissez pas ce que je tente de vous expliquez:

Placer l'élément Body en absolute implique qu'il se positionnera par rapport à son premier parent positionné, c'est à dire l'élément html.

Dans l'exemple que vous donnez : body est en relative et ces enfants sont en absolute.

Repostez votre code avec les corrections que je vous ai mentionnées pour avancer.
Si vous avez une page en ligne, on ira plus vite...