Bonjour,
après plusieurs jours de lecture et de documentation, je me suis enfin mis à ma première maquette.
Je vous explique rapidement ce que je souhaite obtenir: il s'agit d'une page découpée classiquement en trois parties: en-tête, corps et pied de page, contenue dans un conteneur qui doit remplir toute la page. L'en-tête a une hauteur fixe et est suceptible d'être divisée en deux parties; le pied de page a également une hauteur fixe et se retrouve en fond de page, tout en bas, puisque le conteneur remplit la page. Le corps doit donc contenir tout le reste, et si le contenu est trop grand un ascenceur apparait uniquement pour cette partie. J'espere être assez clair
Voilà ce que j'obtiens en l'état actuel des choses:
http://www.vikchill.fr/maquette.htm
http://www.vikchill.fr/maquette2.htm (en remplissant un peu dans l'espoir de faire apparaitre un overflow)
et le code:
Comme vous pouvez le voir, c'est pas tout à fait ce que je souhaite... sans même savoir si c'est forcément réalisable. Pour commencer, le résultat est plus fidèle est sympa sous FF que sous IE, mais jusque là tout est normal. Mes plus grandes difficultés sont d'avoir cette fameuse partie centrale qui scroll, sans que la fenêtre scrolle si possible, pour ne pas avoir deux barres de défilement côte à côte.
Voilà, je m'arrête là pour le moment, toute aide est la bienvenue, tout comme les critiques/conseils pour m'éviter des fautes courantes et me permettre d'être le plus facilement "portable" d'un explorateur à l'autre.
Et si la réponse se trouve ici dans un document que j'aurais raté, mes excuses, mais quand on débute c'est pas toujours évident de trouver la solution, et pourtant j'ai beaucoup beaucoup lu. Et au passage merci à tous, parce qu'ici j'ai vraiment beaucoup appris, même si ça ne se voit pas forcément dans le css
Modifié par Vikchill (21 Jul 2006 - 01:03)
après plusieurs jours de lecture et de documentation, je me suis enfin mis à ma première maquette.
Je vous explique rapidement ce que je souhaite obtenir: il s'agit d'une page découpée classiquement en trois parties: en-tête, corps et pied de page, contenue dans un conteneur qui doit remplir toute la page. L'en-tête a une hauteur fixe et est suceptible d'être divisée en deux parties; le pied de page a également une hauteur fixe et se retrouve en fond de page, tout en bas, puisque le conteneur remplit la page. Le corps doit donc contenir tout le reste, et si le contenu est trop grand un ascenceur apparait uniquement pour cette partie. J'espere être assez clair
Voilà ce que j'obtiens en l'état actuel des choses:
http://www.vikchill.fr/maquette.htm
http://www.vikchill.fr/maquette2.htm (en remplissant un peu dans l'espoir de faire apparaitre un overflow)
et le code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<link rel="stylesheet" href="styles.css" type="text/css" media="all" />
<title>Maquette</title>
<style type="text/css">
html
{
height: 100%;
}
body
{
padding: 0;
margin: 0;
font-size: 0.8em;
font-family: Tahoma, Verdana, sans-serif;
background-color: pink;
height: 100%;
}
#conteneur
{
background-color: maroon;
position: relative;
min-height: 100%;
height: auto;
width: 100%;
}
#header
{
background-color: navy;
height: 100px;
}
#gauche
{
width: 190px;
background-color: blue;
float: left;
padding: 5px;
}
#droite
{
background-color: red;
margin-left: 200px;
padding: 5px;
}
#mainframe
{
background-color: green;
border: black solid 1px;
overflow: auto;
padding: 5px;
}
#footer
{
background-color: black;
text-align: center;
color: white;
height: 50px;
position: absolute;
bottom: 0;
width: 100%;
}
</style>
</head>
<body>
<div id="conteneur">
<div id="header">
<div id="gauche">
<strong>Header gauche:</strong> Ici on mets le message de bienvenue, la date/heure et un bouton pour se déloguer.
</div>
<div id="droite">
<strong>Header droite:</strong> les deux menus. La partie haute n'est coupée en deux qu'après l'identification. remplissage<br />remplissage<br />remplissage<br />
</div>
</div>
<div id="mainframe">
La fenêtre principale.<br />C'est ici que ça se passe, il faut d'ailleurs ajouter un tableau.<br />
Remplissage<br /> Remplissage<br /> Remplissage<br /> Remplissage<br /> Remplissage<br /> Remplissage<br />Remplissage<br /> Remplissage<br /> Remplissage<br /> Remplissage<br /> Remplissage<br /> Remplissage<br />
</div>
<div id="footer">
admin©Vikchill.fr
</div>
</div>
</body>
</html>Comme vous pouvez le voir, c'est pas tout à fait ce que je souhaite... sans même savoir si c'est forcément réalisable. Pour commencer, le résultat est plus fidèle est sympa sous FF que sous IE, mais jusque là tout est normal. Mes plus grandes difficultés sont d'avoir cette fameuse partie centrale qui scroll, sans que la fenêtre scrolle si possible, pour ne pas avoir deux barres de défilement côte à côte.
Voilà, je m'arrête là pour le moment, toute aide est la bienvenue, tout comme les critiques/conseils pour m'éviter des fautes courantes et me permettre d'être le plus facilement "portable" d'un explorateur à l'autre.
Et si la réponse se trouve ici dans un document que j'aurais raté, mes excuses, mais quand on débute c'est pas toujours évident de trouver la solution, et pourtant j'ai beaucoup beaucoup lu. Et au passage merci à tous, parce qu'ici j'ai vraiment beaucoup appris, même si ça ne se voit pas forcément dans le css
Modifié par Vikchill (21 Jul 2006 - 01:03)
Si le rendu correspond assez bien à ce que je voulais obtenir (occupation totale de la page, barre de défilement en fonction de la résolution choisie par l'utilisateur, etc...), je ne suis pas complètement satisafait de la façon de faire, ça fait trop "bidouille", chaque id ayant un petit complément "spécial IE". De plus, malgré ce complément, il reste un soucis avec l'en-tête droit, que je n'arrive pas à rendre scrollable sous IE comme pour Mozilla et Opera. Mais le livre de Raphaël viens de m'être livré et peut-être y trouverais-je la solution 
), Mozilla et Opera, c'est nickel sauf sous IE forcément où ça reste acceptable, si des gens veulent bien me dire ce que ça donne sous un autre navigateur?