Page 1 sur 2
La même chose sans TABLE car je n'y arrive pas...
Publié : 20 mars 2007, 15:19
par guilhem_mdg
Pouvez-vous arrivez au même résultat exactement que le code ci-dessous sans passer par une TABLE ?
Merci beaucoup... infiniment !
Code : Tout sélectionner
<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>
Publié : 20 mars 2007, 16:16
par Invité
Oui
...
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
Publié : 20 mars 2007, 17:26
par guilhem_mdg2
Comment ?
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
Publié : 20 mars 2007, 17:33
par Ymai
Publié : 20 mars 2007, 17:33
par Asumbaa
Salut,
Tu trouveras des tas de modèles, dont celui-ci, chez Alsacreations.
Edit : ah ben c'est déjà à toi que je disais ça dans l'autre topic
Tu as essayé et ça marche pas ? Tu n'as pas trouvé ?
Publié : 21 mars 2007, 09:00
par guilhem_mdg
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
Publié : 21 mars 2007, 13:27
par FF_Olivier
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 :
Code : Tout sélectionner
div#haut {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: auto;
width: 100%;
height: 100px;
}
div#menu {
position: fixed;
top: 100px;
left: 0;
right: 80%;
bottom: 50px;
width: 20%;
height: auto;
overflow: auto;
}
div#corps {
position: fixed;
top: 100px;
left: 20%;
right: 0;
bottom: 50px;
width: 80%;
height: auto;
overflow: auto;
}
div#bas {
position: fixed;
top: auto;
left: 0;
right: 0;
bottom: 0;
width: 1000%;
height: 50px;
}
En jouant avec ça, ça devrait marcher, en tout cas sous FF.
Publié : 23 mars 2007, 10:02
par guilhem_mdg
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
Publié : 23 mars 2007, 14:26
par chinon37
et avec ce code tout css et <div(s)>:
Code : Tout sélectionner
<!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>
pour césar: adapté à tes couleurs de:
http://css.alsacreations.com/modeles/modele4.htm
Publié : 24 mars 2007, 06:35
par guilhem_mdg
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
Publié : 24 mars 2007, 10:57
par chinon37
- 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...
Publié : 24 mars 2007, 12:20
par guilhem_mdg
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
Publié : 24 mars 2007, 13:12
par calimo
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
Publié : 24 mars 2007, 21:39
par alain47
Moi aussi, j'ai le meme pble que toi.
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
Publié : 25 mars 2007, 15:14
par calimo
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