Transformer un table en div !

[masta64]

Bonjour, je viens vous demandez de l'aide car je m'arrache les cheveux sur une chose qui en fait parait simple !!!

Deja je vais tenter de m'expliquer et de me faire comprendre, voila je souhaiterais construire des cadres (avec des bords arrondi en bas), avec des images !!! pour cela j'utilise 6 images (en transparence s'il vous plait [cligne] ):

- verticale_left.png qui se repete verticalement

- verticale_right.png qui se repete verticalement aussi

- coin_bas_left.png qui ne se repete pas

- coin_bas_right.png qui se repete pas non plus

- bottom_mid.png qui se repete en horizontale

- et pour le back du cadre, pix_repeat.png qui se repete en x et y !!!

J'espere que jusqu'a la vous me suivez [cligne]

Pour mettre en place tout ca sur mon css, ca va (meme si je suis pas totalement sur de mon code), organiser tout ca avec un tableau n'est pas trop compliquer non plus, mais pour l'organiser avec des balises DIV .... aie aie aie , ca se corse et je n'y parvient pas !!! Help me please

Ahhh j'oubliais en haut du cadre va venir se coller a une barre title composée de 3 images dont 2 en transparence aussi !!!

- bar_left.png qui ne se repete pas !!!

- bar_mid.jpg qui se repete en x !!!

- bar_right.png qui ne se repete pas !!!

Pour vous donner un apercu de ce que j'ai deja realiser pour mieux que vous comprenniez le BINzzzzzz !!!!

L'explication en image c'est mieux

Acces direct au CSS (c'est mieux aussi pour les feineant lol [cligne] )

et pour recuperer les images je vous fait confiance aussi !!! [cligne]

[stopher]

Salut,

Comme il est plus intéressant pour toi de le faire par toi meme , je vais juste te conseiller une lecture sur ce site ...

Alsacreations

Un petit tutoriel sur le positionnement en CSS.

J'espère qu'après cette lecture tu arrivera à positionner tes blocs comme il faut .

Si tu n'y arrive vraiment pas .. et bien re-poste un message sur le forum ;-)

Good luck ,

Stopher.

[Callisto]

masta64 : passer des tables au div, c'est pas juste changer le nom des balises, c'est une approche totalement différente. Tu ferais mieux de partir sur une feuille blanche (aussi bien pour le html que pour le css) pour que tu ne sois pas influencé par le code à base de tableaux.

Le lien que t'as donné stopher est très bien. Je t'ajoute ceux-ci :

Initiation au positionnement CSS : 1.flux et position relative

Initiation au positionnement CSS : 2.position float

Initiation au positionnement CSS : 3. position absolue et fixe

Bonne chance !

[masta64]

merci a vous deux pour votre aide si precieuse !! mais au passage, penser que je demande de l'aide sans avoir essayer de trouver par moi meme, ca fait trois jour que je me prend la tete avec ce css et ces sacré float , je suis loin d'etre un expert, je bidouille et j'essaie juste d'apprendre, mais la j'avoue que je cale un peu, j'ai passer de longue heure sur l'excellent site d'alsacreation mais je pense que je vais y passer encore de nombreuse heure histoire d'acquerir au maxi la technique des div, float, position, absolute, relative, inherit, fixed, static.....et jen passe !!!

sur le fofo d'alsacrea on ma orienter la dessus http://web.covertprestige.info/test/06-pag...tml-et-css.html , et apparament cela pouvait coller et ainsi me donner satisfaction , mais apres essaie de ma part (creation des image, redimmensionnement, perso du css...etc) ehhh ben non !!!! grrrrr

Je rappel que la difficulté dans ce que je souhaite realisé est que les images sont des png transparente, que les cadres doivent etre extensible en hauteur et largeur et le plus important c'est que le tout doit pesé leger !!!

Le style de mise en page que je souhaite creer est un genre de ca http://css.alsacreations.com/xmedia/exempl.../exemple-3.html , sauf qu'a la place des colone (20%, 60%, 20%) justement c'est MES FAMEUX cadres transparent et redimmensionnable !!!

[stopher]

images sont des png transparente

Attention les png avec transparence sont incompatibles avec IE < V7 ... ou alors il faut insérer du javascript mais je trouve cette méthode un peut bricoleux ...

[masta64]

oui oui merci je sais , je me suis deja assez pris la tete avec ce fameux IEx, , je reorianterai vers un autre css pour les utilisateur de Iex 6,7 ... etc

de toute facon le design que je crai c 'est pour ma communauté linuxienne donc.....a mort iex !!! lol mdr

[stopher]

Voilà un debut ...

http://cdesaintlegerserv.free.fr/aaa.tar.gz

Il n'y a que la barre du dessus , mais tu peux utiliser la meme logique pour creer celle du dessous ..

Apres il y a pleins de facons differentes de faire ce genre de chose , selon le besoins ..

[masta64]

merci a toi, je vais etudier ca en profondeur et essayer de m'en sortir, merci enormement pour ton aide !!!

Voila le style de mise en page que je voudrait mettre en place !!! http://masta64.neuf.fr/testMEP.html

[masta64]

J'ai bien etudier le principe des position sur le fichier que tu m'as envoyer mais j'ai enormement de mal a parvenir a un bon resultat !!!

pourrait tu regarder mon css et mon code html et m'indiquer ou ca pose probleme car je me noie !!!

Merci d'avance

http://masta64.neuf.fr/box_test.html

[stopher]

Salut ,

donnes moi une archive comme je t'ai fait ...

[masta64]

ok merci a toi de m'accorder du temps!!! http://masta64.neuf.fr/Test_box.zip

[stopher]

Voilà un debut ,

j'ai essayé de faire clair .. Archive ici

Apres , je ne vois pas bien à quoi sert ton image box_pix.png ...

J'espère que ça va t'aider ...

[masta64]

merci a toi , en fait j'ai du mal m'expliquer , c'est donc pour cela que tu ne comprend pas pourquoi il y a le fichier box_pix.png !!!

En fait c'est hyper utile, ainsi que les fichiers vert_L_trans et vert_R_trans !!!

vert_L et R sont extensible automatiquement en fonction du texte ecrit !!!

box_pix lui est extensible en x et y et c'est donc le background de mes box !!!

le fichier que tu m'as envoyer (encore merci a toi de ta patience) ne m'aide pas beaucoup car si j'ecrit du texte en plus, la box n'est pas extensible en hauteur et en largeur !!!

[stopher]

Ok j'ai compris .. je modifie le css ..

[drakulls]

c'est presque du helpdesk en live ca ? wow le HUB m' eppatera toujours...

[masta64]

c'est clair !! l'est trop sympa ce stopher

[drakulls]

Bien que je ne pense pas qu'il te rende service..... enfin si.. pour cette fois. Mais la prochaine fois que tu devras le refaire, Stoppher sera certainement plus là.....

PS: un height: auto; et c'etait bon.... avec l'overflow de ton choix bien sur....

[masta64]

je sais , je sais !! tinkiet pas je ne suis pas un feineant, j'y suis depuis hier soir dessus ce sacré arrondi extensible !!! c'est juste histoire de voir et d'etudier en regardant son exemple, je n'ai aucunement l'intention de faire appel au forum a chaque fois que j'ai un probleme !!! c'est juste quand je cale

[stopher]

Et voilà ...

Archive => ici

_AT_drakulls:

J'ai essayé height:auto mais sans succes ..

Je ne suis pas encore bien alaise dans le css ... je n'utilise pas forcement les solutions les plus simple .. mais bon , c'est en forgeant que l'on deviens .. vous avez deviné .. "forgeron" :-)

Modifié 8 Novembre 2007 par stopher

[masta64]

YESSSSSS !!! c'est ca !!! ta tout capter la, cest vrai que j'ai du mal à expliquer les choses lol !!!

Un grand merci a toi stopher, je vais enfin pouvoir partir sur de bonne baze et etudier le principe avec un bon exemple !!!

Au fait sur le zip que jtai envoyer en mp, est ce que as ton avis il serait possible de mettre les deux colone fixe en partie sur la hauteur avec un max-height ??

pour ceux qui veule voir de quoi je parle c'est ici http://masta64.neuf.fr/testMEP.html

Modifié 8 Novembre 2007 par masta64

[stopher]

Tu vas rires lol ..

J'ai pas bien compris ce que tu veux ..

A la limite fait un schéma car expliquer du "graphisme" en texte , c'est pas évidant !!

[masta64]

PTDR !!! je me doutais que je mettais encore mal expliquer, c'est pas grave c'est de ma faute auttant pour moi !!!

Bon je vais essayer donc de faire plus clair pour ceux qui auront besoin du topic a l'avenir en se posant la meme questions !!!

Bon en fait , tu vois que les deux colone fixe ont un emplacement bien defini a rapport au " top: 375px", ce qui donne bien lorsque l'on ne scroll pas la page, mais des que l'on scroll, vu que le header n'est pas fixe , ca laisse un grand espace a rapport au top, donc moi je voudrais par exemple affecter un scroll maximum et minimum aux deux colone fixe de maniere à ce qu'elle comble cet espace vide une fois la page tout a fait en bas !!!

Oula je crois que je fais fort au niveau de l'explication et jsui pas sur de bien m'etre fait compris !!! esperons que tu as l'esprit aussi compliquer que le mien

[stopher]

Si j'ai bien compris , tu veux que tes colonnes s'étendent en Y et arrivé à une certaine valeur "max-height" on scroll !!

Ba là il faut tester ...

Tu met un max-height:xxxpx; puis : overflow-y : scroll; .. sans etre certain du resultat .. ( jamais fait )

Si ca marche tiens nous au courant ...

[masta64]

ok pani probleme, je testerai ca ce soir car la j'ai pas dormi de la night, alors mes yeux commence a etre lourd !!!! ptite sieste et apres je reattak

merci a toi !!!

[masta64]

salut, bon je revien car j'ai encore quelques petit probleme dans mon css !!!

Je vous explique en image