Forums d'assistance et de discussion sur les logiciels produits par Mozilla ou créés à partir des technologies Mozilla. Ce site ne dépend pas de la fondation Mozilla et est maintenu par un collectif de bénévoles.
HTML5, CSS3, Javascript, support des mobiles... Que penser de votre site ? Vous manquez d'informations pour la construction d'un site qui puisse s'afficher correctement partout ? C'est un problème simple, un peu complexe ? Venez ici !
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Quirks Mode Rendering</title>
<style type="text/css">
body{
color:#000;
background-color:#fff;
margin:0;
padding:0;
text-align:center;
}
table{
width:800px;
height:100%;
margin:0 auto 0 auto;
border-spacing:0px;
border-collapse:collapse;
}
table td{
vertical-align:top;
}
#header{
background-color:red;
padding-bottom:10px;
height:30px;
}
#header-bottom{
height:4px;
}
#menu{
background-color:blue;
width:140px;
}
#menu-right{
width:3px;
}
#page{
background-color:yellow;
}
#footer-top{
height:4px;
}
#footer{
background-color:green;
height:30px;
}
</style>
</head>
<body>
<table>
<tr id="header"><td colspan="3">Header</td></tr>
<tr id="header-bottom"><td></td></tr>
<tr id="centre">
<td id="menu">Menu</td>
<td id="menu-right"></td>
<td id="page">
<p>The table tag for the table containing this text looks like this:</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. In augue. Sed vitae urna feugiat ante faucibus scelerisque.
Maecenas non risus vitae velit auctor tincidunt. Ut facilisis elit non metus. Quisque ac dolor. Morbi eget erat in
eros rhoncus imperdiet. Aenean egestas lectus ac sapien. Pellentesque non metus ac justo luctus feugiat. Nam elit elit,
sagittis vel, eleifend quis, imperdiet non, lorem. In hac habitasse platea dictumst. Suspendisse convallis, dui vitae
auctor elementum, eros orci porta nisl, in ullamcorper leo wisi eget mi. Sed eget sem. Lorem ipsum dolor sit amet,
consectetuer adipiscing elit. Proin sit amet diam at elit lacinia convallis. Nullam massa ligula, posuere sit amet,
gravida a, placerat ac, justo. Cras vulputate. Aliquam sed enim non justo sollicitudin tempor.</p>
</td>
</tr>
<tr id="footer-top"><td></td></tr>
<tr id="footer"><td colspan="3">Footer</td></tr>
</table>
</body>
</html>
Message envoyé avec : Mozilla/5.0 (Windows; U; Windows NT 5.1; fr; rv:1.8.1.2) Gecko/20070219 Firefox/2.0.0.2
Non, ca ne marche pas car le contenu (gauche et droite) est dynamique et les modèles proposés par Alsa. bugguent si il y a plus de contenu à gauche qu'à droite (comme d'autres modèles d'ailleurs)...
Bref, pas de solution !
Et puis : http://info.sio2.be/kpz/3/1.php
ne correspond pas à ce que je demande car pas d'hauteur à 100% car si beaucoup plus de contenu qu'à l'écran le scroll doit apparaître... Message envoyé avec : Mozilla/5.0 (Windows; U; Windows NT 5.1; fr; rv:1.8.1.2) Gecko/20070219 Firefox/2.0.0.2
Dernière modification par guilhem_mdg le 24 mars 2007, 12:21, modifié 1 fois.
Essaie en définissant 4 <div> en position: fixed, ajuste les top/right/bottom/left et width/height en px et % qui te conviennent, et ajoute l'attribut overflow: auto sur les <div> dont le contenu risque de déborder.
qqc comme :
En jouant avec ça, ça devrait marcher, en tout cas sous FF.
openSUSE 12.2 - FF v24.0 FR - TB v24.0 FR ma config en détails - Décrivez la vôtre ici userContent.css : modifiez l'apparence et le contenu des sites visités !
Non, car si je met beaucoup de contenu dans "corps" le pied de page reste fixe et un ascenceur se rajoute dans "corps".
OR :
l'ascenceur doit être etre dans la fenêtre (pour ne pas casser le flux naturel de la page) et le pied de page ne doit pas être fixé au bas de la fenêtre (sauf si il n'y a pas d'ascenceur)...
Autre solution ?
Message envoyé avec : Mozilla/5.0 (Windows; U; Windows NT 5.1; fr; rv:1.8.1.3) Gecko/20070309 Firefox/2.0.0.3
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta name="generator" content="HTML Tidy for Windows (vers 14 February 2006), see www.w3.org">
<title>
Largeur fluide, header/menu gauche/contenu/footer.
</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
body {
margin: 0;
padding: 0;
font-family: Verdana,Arial,Helvetica,sans-serif;
font-size: 0.8em;
}
#header {
border-bottom: 10px solid #ffffff;
height: 100px;
background-color: #ff0000;
}
#conteneur {
position: absolute;
width: 100%;
background-color: #0000ff;
}
#centre {
border-left: 10px solid #ffffff;
margin-left: 150px;
background-color: #ffff00;
}
#gauche {
position: absolute;
left: 0;
width: 150px;
}
#pied {
border-top: 10px solid #ffffff;
height: 30px;
background-color: #008000;
}
.menugauche {
margin: 0;
padding: 0;
list-style-type: none;
background-color: #0000ff;
}
.menugauche li {
margin-bottom: 5px;
}
.menugauche a {
margin: 0 2px;
color: #000000;
text-decoration: underline;
}
.menugauche a:hover {
text-decoration: none;
}
p {
margin: 0 0 10px;
}
</style>
</head>
<body>
<div id="conteneur">
<div id="header">
header
</div>
<div id="gauche">
<p>
menu
</p>
<p>
largeur fixe : 150px
</p>
<ul class="menugauche">
<li>
<a href="">Menu 1</a>
</li>
<li>
<a href="">Menu 2</a>
</li>
<li>
<a href="">Menu 3</a>
</li>
<li>
<a href="">Menu 4</a>
</li>
</ul>
</div>
<div id="centre">
partie centrale qui "pousse" les colones vers le bas.<br>
partie avec du contenu occupant le reste de la largeur<br>
partie avec du contenu occupant le reste de la largeur<br>
partie avec du contenu occupant le reste de la largeur<br>
partie avec du contenu occupant le reste de la largeur<br>
partie avec du contenu occupant le reste de la largeur<br>
partie avec du contenu occupant le reLorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui
officia deserunt mollit anim id est laborum.<br>
<br>
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem
aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.
Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores
eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet,
consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam
quaerat voluptatem.<br>
<br>
Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea
commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae
consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?ste de la largeur<br>
partie avec du contenu occupant le reste de la largeur<br>
partie avec du contenu occupant le reste de la largeur<br>
partie avec du contenu occupant le reste de la largeur<br>
partie avec du contenu occupant le reste de la largeurLorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in
voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident,
sunt in culpa qui officia deserunt mollit anim id est laborum.<br>
<br>
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem
aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.
Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores
eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet,
consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam
quaerat voluptatem.<br>
<br>
Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea
commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae
consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?<br>
partie avec du contenu occupant le reste de la largeur<br>
partie avec du contenu occupant le reste de la largeur<br>
</div>
<div id="pied">
pied de page
</div>
</div>
</body>
</html>
Tout d'abord merci pour ton code.
2 problèmes :
* Le footer n'est pas collé en bas, si il y a peu de contenu dans le "centre"
* si il y a beaucoup de contenu dans "menugauche" celui-ci passe par-dessus le "pied". Ce qui est moche.
Bref, la solution est pas mal mais encore buggée...
Message envoyé avec : Mozilla/5.0 (X11; U; Linux i686; fr; rv:1.8.1.2) Gecko/20061023 SUSE/2.0.0.2-1.1 Firefox/2.0.0.2
- Il s'agit uniquement d'une base de travail, d'autant que je n'ai pas eu l'impression d'avoir un cahier des charges très précis.
- Les forums sont là pour aider, pas pour faire...
Bah il me semble que ton code est celui de Alsacréations et j'ai bien précisé au début de mon post que ces derniers ne correspondaient pas à ce que je voulais faire... Vrai ?
Cela dit je te remercie quand même pour ta réponse bien que je sois déçu que tu ne puisses pas résoudre mon problème...
Si je m'adresse à ce forum c'est parce que je n'arrive pas à trouver de solutions et que je sais, par expérience, que les membres de ce forum sont compétents
Message envoyé avec : Mozilla/5.0 (X11; U; Linux i686; fr; rv:1.8.1.2) Gecko/20061023 SUSE/2.0.0.2-1.1 Firefox/2.0.0.2
Je ne suis pas sur d'avoir compris exactement ce que tu souhaites faire. Cela dit, n'oublie pas que le web n'est pas l'imprimerie : tout n'est pas forcément possible en CSS.
Mais si tu arrives à le faire avec des <table>, alors tu peux tout à fait les émuler en CSS, bien que je ne sois pas sur de la compatibilité et de l'efficacité de cette technique
Message envoyé avec : Mozilla/5.0 (X11; U; Linux i686; fr; rv:1.8.1.2) Gecko/20070220 Firedragon Firefox/2.0.0.2
Pour le pied de page qui reste à sa place, il me semble que c'est faisable (il faut mettre un "height" dans chaque partie (le 'header', le 'content' et le 'footer') et que la somme fasse 100 %. Comme ca, meme si le contenu du 'content' comporte peu de texte ... le 'footer' restera quand meme à sa place, tout en bas.
Il faut utiliser 'position' en 'absolute' , pas en relative. Et avec 'top'...
Par contre, il demeure le pble du texte qui "sort" du 'content' (quand il a beaucoup de texte) et qui va empietter sur le 'footer'. J'ai essayé avec "overflow" en pensant qu'en mettant un ascenseur , le texte ne descendrait pas sur le footer mais peine perdue. Ou alors je ne mets pas l'instruction qu'il convient à propos de 'overflow'. je continue mes recherches.
Message envoyé avec : Mozilla/5.0 (Windows; U; Windows NT 5.1; fr; rv:1.8.1.2) Gecko/20070219 Firefox/2.0.0.2
alain47 a écrit :Par contre, il demeure le pble du texte qui "sort" du 'content' (quand il a beaucoup de texte) et qui va empietter sur le 'footer'. J'ai essayé avec "overflow" en pensant qu'en mettant un ascenseur , le texte ne descendrait pas sur le footer mais peine perdue.
Normalement, c'est effectivement l'effet de l'overflow:scroll. Maintenant, il y a peut-être une erreur ailleurs dans ton code
Message envoyé avec : Mozilla/5.0 (X11; U; Linux i686; fr; rv:1.8.1.2) Gecko/20070220 Firerenard Firefox/2.0.0.2
