[Résolu] [Débutante] Mise en forme en pourcentage...

Bonjour, je ne suis vraiment pas pro des css, mais bon... Je travail sur un Intranet et je recommence à zéro toute l'interface graphique. Pour le moment la mise en forme est faite à patir de tableau, et quitte à recommencer, je veux faire le tout dans les règles de l'art !

L'intranet doit absolument fonctionner en pourcentage car le data que j'y insère n'a pas toujours la même taille et je ne peux me restreindre à 1000px de large et 800px de haut. Faut absolument que cela soit flexible pour permettre le scroll de haut en bas (si nécessaire), et de gauche à droite (cas vraiment rare, mais quand même).

Donc pour le moment j'ai :

<div class="Text8n" style="background-color [langue]alegoldenrod;width:100%;height:98%;">
           test1
</div>
<div class="Text8n" style="background-color:YellowGreen;width:100%;height:2%;margin-top:auto;">
            test2
</div>

Mais test1 ne fait pas 98% de la page. J'aimerais que Test2 soit un petite bande au bas de ma page... mais je n'y arrive pas!

Est-ce que quelqu'un saurait me mettre sur la voie!!!

Merci
Modifié par poussy-puce (02 Apr 2007 - 22:31)

Bonjour,

100% de la largeur correspond à 100% de ton écran a ta résolution, si ta résolution change, il fera toujours 100%, c'est donc extensible en largeur.

Pour la hauteur, pour avoir un % de la hauteur, il faut la définir, c'est comme ça le média web!. Comme ta hauteur n'est pas définie c'est donc 98% de quelque chose d'aléatoire en fonction du navigateur...

De toute manière, en fonction de ta quantité de contenu, la hauteur de page est toujours extensible, donc pas de tracas de ce coté là et ton test2 sera toujours disposé en bas de ta page si il reste dans le flux.

Ouaif, j'sais si je suis clair sur ce coup là

heuuuu, j'suis dsl, mais j'ai rien compris... Peut-être avec des petit example tu m'aiderais à comprendre!!!

Dans le fond ce que je veux c'est me retrouver avec un bas de page...

Bonjour,

poussy-puce a écrit :
Dans le fond ce que je veux c'est me retrouver avec un bas de page...

C'est facile : mets un paragraphe à la fin de ton code HTML (avant de fermer les éléments body et html), et tu auras un « pied de page ».

Qu'est-ce que tu veux réaliser exactement ? D'après ta description, c'est loin d'être clair.

Le rendu d'un document web, si on ne fixe pas les largeurs ou (plus difficilement) les hauteurs, fonctionne de la manière suivant :
- En largeur, les éléments de type bloc (conteneurs, paragraphes, ul et li, etc.) vont prendre toute la largeur disponible, et s'adapteront en fonction de la résolution d'écran. Faire un design adaptable en largeur signifie donc 1) ne pas donner de largeur fixe en pixels ou en EM ou bien 2) travailler avec des largeurs en pourcentage de la largeur totale disponible.
- En hauteur : les éléments de type bloc se positionnent les uns sous les autres, et la hauteur du document dépendra de l'accumulation des éléments. Si ça dépasse la hauteur du « viewport » (la partie « visualisation » de la fenêtre du navigateur), une barre de défilement apparait et permet d'accéder à l'ensemble du contenu.

La question est donc : en quoi ce comportement ne te satisfait-il pas ? Et que voudrais tu faire au juste qui s'en écarte ?

Concernant le pied de page, voudrais-tu réaliser :
- un pied de page « fixe », toujours visible à l'écran même si le contenu se poursuit hors champ ?
- un pied de page qui vient se placer le plus en bas possible, c'est à dire soit tout en bas du viewport (la fenêtre) dans le cas où le contenu de la page est court, et tout en bas du contenu lorsque le contenu est long ?

Bon, ce que je cherche à faire c'est précisément ça:

Florent V. a écrit :

- un pied de page qui vient se placer le plus en bas possible, c'est à dire soit tout en bas du viewport (la fenêtre) dans le cas où le contenu de la page est court, et tout en bas du contenu lorsque le contenu est long ?

Mais je n'y arrive pas!

Une piste : Page sur toute la hauteur de la fenêtre, avec pied de page en bas.

J'y suis arrivée... voici à l'aide de quoi:

http://pompage.net/pompe/pieds/

Et mon code:

Css:

html, body 
{
    height: 100%;
}
body {
    margin: 0;
	padding: 0;
}
#Container 
{
    position: relative;
	min-height: 100%;
}
#Content 
{
    padding: 10px;
	background-color: white;
	padding-bottom: 48px;
}
#Footer {
	position: absolute;
	bottom: 0;
	padding: 10px;
	background-color: #bfcbcc;
	width : 98%;
	border-top-color :Black ;
    border-top-style : solid ;
    border-top-width : 1px; 
    border-bottom-color :Black ;
    border-bottom-style : solid ;
    border-bottom-width : 1px; 
}

html:

<div id="Container">
        <form id="form1" runat="server">
            <div id="Content">
                <asp:contentplaceholder id="ContentPlaceHolder1" runat="server">
                </asp:contentplaceholder>
            </div>
            <div id="Footer" class="Text8n">
                <asp:LinkButton ID="lbArista" runat="server"><asp:Literal ID="litArista" runat="server" Text="<%$ Resources:Lassonde, Arista %>"/></asp:LinkButton>&nbsp;&nbsp;
                <asp:LinkButton ID="lbCanton" runat="server"><asp:Literal ID="litCanton" runat="server" Text="<%$ Resources:Lassonde, Canton %>"/></asp:LinkButton>&nbsp;&nbsp;
                <asp:LinkButton ID="lbFruite" runat="server"><asp:Literal ID="litFruite" runat="server" Text="<%$ Resources:Lassonde, Fruite %>"/></asp:LinkButton>&nbsp;&nbsp;
                <asp:LinkButton ID="lbOasis" runat="server"><asp:Literal ID="litOasis" runat="server" Text="<%$ Resources:Lassonde, Oasis %>"/></asp:LinkButton>&nbsp;&nbsp;
            </div>
        </form>
    </div>

PS: Dsl pour les balises ASP.NET

Merci beaucoup à tous, mais à l'aide de quelques tutos de Alsacréations, j'ai compris comment faire ce que je voulais faire!!!