Aller au contenu

Transformer un table en div !

masta64

Par masta64
dans (X)HTML et CSS

 Partager

Sujets conseillés

masta64

masta64

Posté
Posté

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

stopher

Posté
Posté

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

Callisto

Posté
Posté

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

masta64

Posté
  • Auteur
Posté

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

stopher

Posté
Posté
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

masta64

Posté
  • Auteur
Posté

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

stopher

Posté
Posté

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

masta64

Posté
  • Auteur
Posté

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 !!!

drakulls

drakulls

Posté
Posté

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

masta64

Posté
  • Auteur
Posté

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

stopher

Posté
Posté (modifié)

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é par stopher
masta64

masta64

Posté
  • Auteur
Posté (modifié)

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é par masta64
stopher

stopher

Posté
Posté

Tu vas rires lol ..

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

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

masta64

masta64

Posté
  • Auteur
Posté

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

stopher

Posté
Posté

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

masta64

Posté
  • Auteur
Posté

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 !!!

Veuillez vous connecter pour commenter

Vous pourrez laisser un commentaire après vous êtes connecté.



Connectez-vous maintenant
 Partager
Aller sur la liste des sujets
×
×
  • Créer...