[CSS] faire des boites... [ - Job's Done - ]

Recherche :

Mot : Pseudo : Filtrer
Bas de page
Auteur	Sujet : [CSS] faire des boites... [ - Job's Done - ]

xkamui

Their Destiny Was Foreordained

voilà peu près ce que je veux faire, sachant que la partie contenu (ici en bleu) à une hauteur variable :

la partie rouge reste en haut, la partie bleu varie dans sa hauteur, mais la partie verte reste en bas quelque soit la hauteur de bleu... que cette dernière prenne toute la hauteur de la page ou non...

voici ce que j'ai en css :

Code :

/** TABS **/
.tab-main {width: 900px; height: 100%; border-collapse: collapse;}
.tab-top {width: 886px; height: 50px; border-collapse: collapse; background-color: #F6F6F6;}
.tab-menubar {width: 886px; height: 25px; border-collapse: collapse; background-image: url(../img/menubar/bgmenu.png);}
.tab-content {width: 886px; height: 100%; border-collapse: collapse;}
.tab-bottom {width: 886px; height: 25px; border-collapse: collapse; background-color: #F6F6F6;}
/** CELS **/
/* main */
.td-main-1 {width: 7px; height: 100%; padding: 0px; background-image: url(../img/index/bord-left.png);}
.td-main-2 {width: 886px; height: 100%; padding: 0px; vertical-align: top; text-align: middle;}
.td-main-3 {width: 7px; height: 100%; padding: 0px; background-image: url(../img/index/bord-right.png);}
/* top */
.td-top {width: 886px; height: 50px; padding: 0px; vertical-align: top; text-align: middle;}
/* menu */
.td-extrem {width: 3px; height: 25px; padding: 0px;}
.td-thumbs {width: 80px; height: 25px; padding: 0px;}
/* content */
.td-content{width: 886px; padding: 9px; vertical-align: top; text-align: left;}
/* bottom */
.td-bottom {width: 886px; height: 25px; padding: 0px; border-top: solid 1px #A5A5A5;}

en fait, je veux faire ça pour avoir, de chaque côté, une image qui se répéte...

si vous voulez le fichier html pour voir, demandez moi...

Message édité par xkamui le 09-12-2002 à 13:16:19

Publicité

gm_superstar

Appelez-moi Super

Il est évident que ceci peut être résolu facilement avec dev DIV. Par contre avec les tableaux...

Question : Si le contenu de la page dépasse la hauteur de l'écran, il se passe quoi avec le vert ?

---------------
Incongru : une FAQ abandonnée sur les Standards du Web - FAQ périmée de blabla@Prog

xkamui

Their Destiny Was Foreordained

le vert doit normalement être sous le bleu koi k'il arrive....

en ce moment, et avec le code css en question: le vert n'apparait pas

si le bleu < hauteur de la page : espace entre le bas du bleu et le haut du vert, et le vert en bas de la page (bref, comme l'image)

si le bleu >= hauteur de la page, le vert se retrouve sous le bleu, collé à lui

gm_superstar

Appelez-moi Super

xkamui a écrit :

si le bleu >= hauteur de la page, le vert se retrouve sous le bleu, collé à lui

Y'a pas 360000 manières de faire comme ça : soit en faisant des frames, soit en utilisant la propriété position: fixed (mais ça marche pas avec IE), soit en donnant une propriété d'overflow à la partie bleue (c'est à dire que des barres de défilement apparaîtront le texte dépasse la hauteur maxi)

---------------
Incongru : une FAQ abandonnée sur les Standards du Web - FAQ périmée de blabla@Prog

xkamui

Their Destiny Was Foreordained

non non, je ne veux pas que vert soit toujours toujours visible...

je veux qu'il soit && visible && en bas si bleu < hauteur de la page... car si bleu >= hauteur de la page, vert se pousse normalement sous lui, et là, les scrollbar apparaissent sur tout le document

Hermes le Messager

Breton Quiétiste

xkamui a écrit :

je vais laisser répondre les experts, mais je doute que cela soit possible (du moins en étant compatible IE, Mozilla et Opera).

gm_superstar

Appelez-moi Super

Hermes le Messager a écrit :

je vais laisser répondre les experts, mais je doute que cela soit possible (du moins en étant compatible IE, Mozilla et Opera).

Je confirme.

Il y a une condition qu'on ne peut pas résoudre actuellement : lorsqu'il n'y a pas assez de bleu le vert doit être "accroché" à l'écran (la zone de visualisation) => sa position dépend la taille de l'écran. Lorsqu'il y a trop de bleu, le vert n'est alors plus accroché en bas de l'écran => sa position ne dépend plus de l'écan.

Le passage de l'un à l'autre n'est pas possible (à moins de faire une usine à gaz en JS)

---------------
Incongru : une FAQ abandonnée sur les Standards du Web - FAQ périmée de blabla@Prog

xkamui

Their Destiny Was Foreordained

si c'est possible !!!
j'ai trouvé !!!!!

en fait, il suffit de mettre les 3 lignes dans un tableau de plus...

merci quand même, @+

Flyman30

xkamui a écrit :

si c'est possible !!!
j'ai trouvé !!!!!

en fait, il suffit de mettre les 3 lignes dans un tableau de plus...

merci quand même, @+

Tu as trouvé une solution soit, mais les normes nous demande de ne plus utiliser de tableau pour la mise en page! :kaola:

gm_superstar

Appelez-moi Super

xkamui a écrit :

si c'est possible !!!
j'ai trouvé !!!!!

en fait, il suffit de mettre les 3 lignes dans un tableau de plus...

merci quand même, @+

URL ?

---------------
Incongru : une FAQ abandonnée sur les Standards du Web - FAQ périmée de blabla@Prog

Publicité

xkamui

Their Destiny Was Foreordained

gm_superstar a écrit :

URL ?

oups oui pardon...

en rouge, ce qu'il fallait ajouter :

Code :

<html>
<head>
<title>xkamui.com v.5</title>
<link rel="stylesheet" href="http://xkamui.com.free.fr/v5/style/main.css" type="text/css"/>
</head>
<body>
<table class="tab-main" summary="tab-main">
<tr>
<td class="td-main-1"></td>
<td class="td-main-2">
<table class="tab-all" summary="tab-all">
<tr>
<td class="td-bann">
<table class="tab-top" summary="tab-top">
<tr>
<td class="td-top"></td>
</tr>
</table>
</td>
</tr>
<tr>
<td class="td-menu">
<table class="tab-menubar" summary="tab-menubar">
<tr>
<td class="td-extrem"><img src="img/menubar/menu-extrem.png" alt="img-extrem-start" /></td>
<?
for ($i=0;$i<count($rub);$i++)
{
if ($id==$i){$picstatus="on";} else {$picstatus="off";}
echo "
<td class=\"td-thumbs\"><a href=\"index.php?id=".$i."\"><img src=\"img//menubar/menubar-".$color."/".$rub[$i]."-".$picstatus.".png\" class=\"img-thumbs\" alt=\"img-".$rub[$i]."\" /></a></td>
";
}
?>
<td class="td-extrem"><img src="img/menubar/menu-extrem.png" alt="img-extrem-end" /></td>
</tr>
</table>
</td>
</tr>
<tr>
<td class="td-txts">
<table class="tab-content" summary="tab-content">
<tr>
<td class="td-content">
<? include ("url/".$rub[$id]."/".$rub[$id].".txt" ); ?>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td class="td-copy">
<table class="tab-bottom" summary="tab-bottom">
<tr>
<td class="td-bottom">copy copy</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
<td class="td-main-3"></td>
</tr>
</table>
</body>
</html>

valaaa, et ça passe même au validateur

Message édité par xkamui le 07-12-2002 à 18:33:01

gizmo

ce n'est pas parce que ca passe au validateur que c'est correct!
La preuve: tu utilises un height:100% pour ton tableau principal, ce qui est interdit. Et ça, c'est trop complexe à vérifier par le validateur.

Hermes le Messager

Breton Quiétiste

gizmo a écrit :

ce n'est pas parce que ca passe au validateur que c'est correct!
La preuve: tu utilises un height:100% pour ton tableau principal, ce qui est interdit. Et ça, c'est trop complexe à vérifier par le validateur.

Entièrement d'accord avec toi Gizmo, mais il faut bien reconnaitre dans son cas que les CSS ne lui donne pas de solution pour ce qu'il veut faire exactement.
Après, peut-être que ce qu'il veut faire "est mal", mais ça c'est une autre question.
En l'état actuel des choses, il n'a pas le choix.

Enfin, je termine en disant que visiblement, il met bcp de bonne volonté à s'adapter aux règles et qu'il se pose des questions, ce qui n'est pas le cas de la grande majorité des acteurs du marché. Donc, il doit être encouragé.

gizmo

certes, mais je voulais juste préciser que ce fier les yeux fermé à une machine n'est pas une bonne chose non plus. Il ne faut pas oublier qu'elle est concue par des humains à la base

FORUM HardWare.fr

Programmation

HTML/CSS

[CSS] faire des boites... [ - Job's Done - ]

Sujets relatifs
[CSS] Pkoi ça marche ça ??!!	Souci d'affichage de contenu généré via CSS
Longueur d'une variable... [ - Job's Done - ]	Cellspacing et cellpadding d'un tableau en CSS
Centrage de tableau en CSS	[HTML/JS/CSS] problème avec les styles!!
[CSS] Validateur down ?	fread et fwrite [ - Job's Done - ]
Plus de sujets relatifs à : [CSS] faire des boites... [ - Job's Done - ]

Page générée en 0.098 secondes