Overflow: auto et tableau

Salut à tous,

J'ai un problème avec une page web sur la compatibilité de l'attribut overflow:auto et la hauteur de ma page.

Vous pouvez trouver la page complète (en travaux) sur :
http://alifproductions.com/kelli/kelli.php

Inutile d'y aller : pour simplifier le problème, j'ai supprimé tout ce qui était inutile et fait cette page :
http://alifproductions.com/kelli/essai.php

Je veux faire une page dont la taille s'ajuste toujours à celle de la fenêtre du navigateur. Naturellement, j'utilise un tableau dont la hauteur et la largeur sont de 100%.

La page comprend :
- une barre fixe en haut (hauteur fixe et largeur proportionnelle)
- une barre fixe à gauche (hauteur proportionnelle et largeur fixe)
- et le contenu du site proprement dit, en bas à droite qui doit inclure différentes pages de taille différente (grâce à la fonction include).
Les barres sont donc fixes et seul le contenu doit disposer d'une barre de défilement.

Tant que je ne mets pas de texte dans la zone en bas à droite, les proportions sont conservées.

La zone en bas à droite contient un div, avec l'attribut "overflow: auto;". La taille du div n'est ni fixe, ni proportionnelle à la taille de la fenêtre (car la taille des barres en haut et à gauche sont fixes!) mais elle doit être la même que celle de la case du tableau qui la contient.

Que dois-je faire pour que la fonction overflow fonctionne?

Si quelqu'un veut bien m'aider, je le remercie d'avance.
Modifié par korben (29 Oct 2005 - 15:23)

En d'autres termes, le div ou la case du tableau contenant le texte changeant doit avoir la taille suivante :
- hauteur : hauteur de la fenêtre MOINS 100px
- largeur : largeur de la fenêtre MOINS 100px
S'il n'existe pas de solution simple, peut-être pourrais-je utiliser du php reprenant les deux équations ci-dessus. Je pense que je vais m'orienter là dessus. Qu'en pensez-vous? Suis-je sur la bonne voie ou me conseillez-vous d'abandonner les ordinateurs, de m'installer à la campagne loin de toute civilisation technologique et de cultiver du maïs?

Au secours, qui que vous soyez, vous êtes mon seul espoir!
Modifié par korben (29 Oct 2005 - 20:06)

(Re)Salut a toi !

Bon je regarde un peu ça... Première chose, je pense que ce serait bien de penser à laisser tomber les tableaux .... J'ai commencé a regarder en remplaçant par des blocs, mais il y a quelques petits sourcis au niveau de la compatibilité entre IE et firefox...

Sinon tu peux bien sur passer par du php si les hauteurs et largeurs sont définies dans ta page et pas dans une feuille de style externe...! Dis nous quelle solution tu retiendrais plutôt !


A+,


PierreAd
Modifié par PierreAd (30 Oct 2005 - 11:24)

Je redonne l'adresse du site :
http://alifproductions.com/kelli/intro.html

J'ai essaye avec des div, mais ce me pose d'autres problemes :
- un cadre 1 en haut a gauche avec le logo et le nom du peintre (taille fixe car image)
- un cadre 2 juste en dessous sur le cote gauche avec largeur fixe et longueur = jusqu'en bas de la fenetre
Jusque la, pas de pb.

Continuons :
- en haut a droite, un cadre 3 avec le menu (taille fixe car image, a moins de definir un code php qui fasse que cela garde les proportions de l'image)
- entre le cadre 1 et 3, un cadre 4 qui sert a faire la jonction entre les deux (car les deux ont une taille fixe, contrairement a la fenetre) et qui contient en background une image qui se repete a l'infini. Le cadre 4 a une largeur de 100% et est en arriere plan afin de remplir le vide entre 1 et 3.

Avec l'attribut float: right; je peux placer le cadre 3 a droite. Le probleme est qu'il est toujours en arriere plan (meme si je mets z-index= un trillion). Donc il passe toujours derriere le cadre 4.

Maintenant que j'y reflechi, peut etre est-il possible de definir la taille du cadre 4 par l'equation suivante (mais en php) :

a écrit :
width du cadre 4 = 100% MOINS width des cadres 1 et 3

Comme ca, pas de probleme de superposition.

Ainsi, pour le cadre 5, celui en bas a gauche et qui contient le texte, le fait commencer a top:100 et left:100 et je determine sa taille par le code php :

a écrit :
width = 100% - 100px
height = 100% - 100px

Faut il faire comme cela ou je me prend la tete pour rien. Mon probleme est que j'ai du mal (ou plutot je suis completement a l'ouest) sur l'utilisation de cadres a taille fixe (car contenant des images), tout en conservant une page proportionnelle a la fenetre et en sachant que les cadres (dont la taille varie afin de rendre le tout proportionnel) doivent contenir des motifs aui se repetent. (et tous les tutoriels que l'on trouve avec les div sur internet sont toujours pour des sites beaucoup plus simple que le mien).

A+
Modifié par korben (30 Oct 2005 - 13:46)

Euh pourrais tu nous donner l'url de la page sur laquelle tu travailles actuellement ?? ou au moins le code que tu as fait avec les div stp...?

Sinon pour la partie droite de ton header, tu devrais avoir quelque chose comme ceci :

<div id="header">
    <img src="imageDeGauche.jpg" alt="..." class="imageGauche" />
    <a href="...." title="..." ><img src="...." alt="...." /></a>
    <a href="...." title="..." ><img src="...." alt="...." /></a>
    <a href="...." title="..." ><img src="...." alt="...." /></a>
</div>

div#header {
... ;
text-align:right;
background-image:url("imageDeFond.gif");
background-repeat:repeat-x;
}

img.imageGauche {
float:left;
}

Il y a surement moyen d'améliorer tout ça, je vais tester un peu pour voir mais je pense que ça doit fonctionner...!


PierreAD

J'ai mis en ligne la page :
http://alifproductions.com/kelli/div.php

J'ai créé un div "frame" qui prend la largeur de toute la page. Vu que le texte ne doit pas passer sous le header et la barre de gauche, il doit commencer à "width=120px" et height="100px". J'ai donc créé un table dans le div et cela marche.

Par contre, les différentes zones cliquable sur le header s'affiche avec un border.

EDIT : Je suis plus chez moi, mais je pense regler cela avec :
<img style="border: 0px solid".....

De plus, quand on réduit la taille de la fenêtre, les différents éléments change de ligne. Comment fait on pour interdire cela? (j'ai déjà essayé nowrap, ça marche pas)

EDIT : idem avec un min-width ou un truc du genre.

Donc si je me trompe pas dans les edit, tout marche impec!

EDIT de l'EDIT : je me rejouissais trop tot. Ca marche sur ie et mozilla sur pc et sur safari sur mac. Par contre, ie mac me fait une grosse #$%de et n'aime pas mon tableau dans la div "frame". Je deteste Bill Gates.
Modifié par korben (31 Oct 2005 - 00:18)

Salut l'ami,

Pour les images cliquables, c'est normal, puisque dans ton code xhtml tu as un lien autour de ces images !

Pour régler ça, tu peux utilser au niveau de ta feuille de style quelque chose comme :

a img {
border-width:0px;
border-style:none;
}

... ce qui revient au même que ta solution, mais évite de repréciser le style a chaque image utilisée en tant que lien !!!

Cdlt,


PierreAd

J'ai quasiment fini le site. Encore deux ou trois et c'est fini. Le seul gros boulot qui me reste est de rajouter des bandes sur toutes les photos, car, en plus d'un slideshow php, j'utilise un autre avec une animation flash (dewslider, très bien fait) mais qui nécessite que les images soient tous du même format. Je suis donc obligé de rajouter des bandes blanches pour qu'elles fassent tous 700*400. Aaaaaarg! (y a 150 images dans les différents slideshow).

En tout cas, merci pour ton aide, ça m'a beaucoup aidé. Tu peux voir le résultat sur kellibickman.net

A+

<hs>

korben a écrit :
(dewslider, très bien fait)

C'est pénible à la fin ce Dew qui produit tant de truc bien: Phedio, Dewplayer, Dewslider. Que nous réserve t-il encore?
</hs>