Cadre souple - HTML/CSS - Programmation
Marsh Posté le 16-04-2006 à 18:46:25
personnellement j'essai aussi d'en créer mais le problème c'est qu'il y a pleins de bugs d'affichage avec internet explorer, et quand on arrive a trouver un moyen de corriger ces bugs, on s'appercois que le cadre ne s'affiche pas du tout de la même façon avec firefox, c'est un vrai casse tête
Marsh Posté le 16-04-2006 à 20:04:27
Tiens :
http://alistapart.com/d/mountaintop/example2.html
http://alistapart.com/articles/mountaintop/
http://www.alsacreations.com/articles/cadre/
Marsh Posté le 16-04-2006 à 20:27:26
dans ces exemples il n'y a que des images dans les coins
le but de l'opération si j'ai bien compris ce que demande vonzzz c'est de faire tout le cadre en images : 1 image de font + 4 coins + 4 cotés qui s'étendent, et le tout sur un cadre extensible en largeur et en hauteur
Marsh Posté le 16-04-2006 à 20:30:51
C'est pareil...
Qu'il mixe les exemples et il trouvera...On va pas lui macher le boulot non plus...
Marsh Posté le 16-04-2006 à 20:46:39
4 images mis en float en bas et en haut du cadre intérieure c'est pas du tout pareil qu'un cadre complexe comme celui qu'il souhaite faire
Marsh Posté le 16-04-2006 à 20:52:53
je dis ça car j'ai déjà essayé de faire ce genre de cadre en CSS et je n'ai pas réussi car il y a encore trop de bug et de différences de positionnement entre IE et Firefoxe
Marsh Posté le 17-04-2006 à 15:11:17
ClD a bien compris ce que je voulais faire.
Pour tes tutos xtof_83, je les ai déja rencontré, il en existe de trés nombreux de ce type, mais ca ne correspond pas a ce que je veux.
Comme ClD l'a dit, je dispose de 8images, les 4 coins, et les images qui se repetent pour chaque bords (haut, bas, gauche, droite) pour pouvoir faire un cadre étirable en hauteur et en longueur.
Aprés pas mal d'essais, j'ai réussi a obtenir quelque chose de potable sous firefox, mais impossible d'adapter a IE, celui-ci affiche les images un peu (beaucoup) n'importe comment etc... bref et je n'ai pas trouvé de hack pour contourner les problèmes que je rencontre, d'ou ma question: quelqu'un aurait-il un lien vers une technique permettant de réaliser ce que je souhaite?
Marsh Posté le 17-04-2006 à 15:36:24
pour l'instant le seul moyen que j'ai trouvé pour que ça fonctionne sur tous les navigateurs c'est d'utiliser des <TABLE>
Marsh Posté le 17-04-2006 à 15:46:11
ClD a écrit : pour l'instant le seul moyen que j'ai trouvé pour que ça fonctionne sur tous les navigateurs c'est d'utiliser des <TABLE> |
Solution trop facile
Marsh Posté le 18-04-2006 à 14:43:48
Voici le code, déja juste pour faire le haut du cadre, IE affiche de
manière bizard: il affiche correctement le haut, mais comme
apparament il ne prend pas en compte le dimentionnement que je lui
donne dans mon css, il repete l'image du milieu sur l'axe Y car il
semble que la taille qu'il attribut a la div qui contient (automatiquement vu qu'il ne prend
pas en compte ce que je lui donne) soit trop grande.
Le code étant simlplissime je ne comprend pas pourquoi IE ne prend pas en compte le dimentionnement..
Le HTML:
Code :
|
Le CSS:
Code :
|
Marsh Posté le 18-04-2006 à 15:05:34
Si tu mets repeat c'est logique...
Met repeat-x
Ensuite met dans ton css
Code :
|
Et continue
Marsh Posté le 18-04-2006 à 15:20:49
Oui en effet c'est mieux... Mais ca reste pas trés logique qu'avec "repeat" seulement IE répete l'image et ne prenne pas en compte les dimensions exacte de l'image que je lui donne...
Un autre problème, si mes bords sont transparents (pour pouvoir par exemple afficher la couleur/image de fond autour du cadre qui a un effet d'ombrage sur ses bords) IE me met en fond une couleur bleu-gris plutot moche et malvenue. Ca se généralise avec n'importe quelle image ayant un fond transparent et c'est assez facheux...
Marsh Posté le 18-04-2006 à 15:22:08
Bon moi j'ai fini , je t'attend
EDIT: marche sous IE, FF, FF linuxiens, opera etc...
ClD :
Marsh Posté le 18-04-2006 à 15:28:08
lol justement, j'ai tjr le même problème finalement: en mettant repeat-x, IE ne repette en effet plus l'image sur l'axe des Y, mais il y a toujours un espace vide en dessous... Bref finalement la taille que IE assigne est toujours trop grande et il ne prend toujours pas en compte les dimensions que je lui donne.
Marsh Posté le 18-04-2006 à 15:31:54
Ca marche? Pas d'espace en dessous de l'image qui se repete? Perso ca veu tjr pas sous IE, je peut même enlever les attributs height, IE en a rien a faire il affichera toujours avec la même dimension...
Marsh Posté le 18-04-2006 à 15:38:10
Oui avec ce code, en mettant les bords de la div top_border, on voit nettement l'espace... Et tte facon quelque soit la valeur que je donne a height, IE ne la prend pas en compte:
CSS:
Code :
|
HTML:
Code :
|
Marsh Posté le 18-04-2006 à 15:52:30
xtof_83 a écrit : Bon moi j'ai fini , je t'attend |
je suis curieux de voir comment tu as fais
car pour l'instant ton est un peu injustifié
Marsh Posté le 18-04-2006 à 15:55:26
ClD a écrit : je suis curieux de voir comment tu as fais |
Tiens le tien aussi....
Marsh Posté le 18-04-2006 à 15:58:23
le mien ? tu parle de quoi ?
Marsh Posté le 18-04-2006 à 16:00:18
ReplyMarsh Posté le 18-04-2006 à 16:00:34
Non pas de lien dsl j'ai pas encore d'hébergement sinon jvs aurai déja filé le lien ^^.
Ms mon pb est facile a immaginer, l'image est bien affiché, mais IE met un espace en plus en desous de celle-ci. Si on met repeat, ben l'image se repète sur Y, si utilise le repeat-x, ca prend la couleur (si il y a) de fond de la div... Et comme je l'ai dit, IE ne prend pas du tt en compte les dimensions que je lui donne. Le code étant trés court et simple, je vois vraiment pas pk...
Marsh Posté le 18-04-2006 à 16:01:55
j'ai jamais mis ce smilley a coté de ton pseudo
et moi je me suis jamais venté d'avoir la solution, j'attend la tienne
Marsh Posté le 18-04-2006 à 16:05:04
ClD a écrit : j'ai jamais mis ce smilley a coté de ton pseudo |
vonzzz >> fait tout ton truc...et tu vois à la fin ce que ça donne...
Et fait moi un screen...
ClD >> je laisse un peu vonzzz faire seul, après si ça veux pas, je pond le code, comme un oeuf de pâques...
Marsh Posté le 18-04-2006 à 16:09:08
Que je fasse mon code en entier ou pas le pb est toujours le même. Ca fait longtemps que mon code est fini et fonctionne trés bien sous firefox, mais IE n'accepte tjr pas... Et j'utilise l'exemple du haut du cadre histoire de trvailler sur un code plus court.
Je peut t'envoyer un screen si tu veu ms il me faut une adresse ^^.
Marsh Posté le 18-04-2006 à 16:11:14
Tu le posts ici
Et tu vas sur http://imageshack.us/ pour la mettre en ligne
Marsh Posté le 18-04-2006 à 16:16:36
En fait je pense avoir compris pk ca ne fonctionne pas.
J'ai crée une div bidon avec fond rouge, je l'ai redimentionné, et il semble que IE attribue une valeur minimum en hauteur a une div: a partir de 19pixels, tu ne peut plus réduire la taille de la div en hauteur... En largeur en revanche aucun pb il accepte toute valeur (c'est pas trés logique je trouve quelque chose doit m'échaper).
Voila, la seule solution, c'est utiliser une image de hauteur 19pixels minimum ce qui est un peu trop grand a mon gout pr un simple cadre...
Marsh Posté le 18-04-2006 à 16:18:37
ReplyMarsh Posté le 18-04-2006 à 16:25:31
clic droit, afficher image, propriétés....
lol.
25px * 25px
Marsh Posté le 18-04-2006 à 16:27:18
Essai avec des image de 15px de hauteur et tu tombera sur le pb que j'ai eu.
Marsh Posté le 18-04-2006 à 16:31:41
http://forum.alsacreations.com/faq/#item58
Et c'est parfait vu qu'ils donnent une astuce pour ne pas rencontrer le problème.
Marsh Posté le 18-04-2006 à 16:42:06
xtof_83 a écrit : http://southriders.free.fr/vrachtm [...] testt.html |
ha oui ça marche bien comme ça, en n'utilisant pas de positionnement en absolu ça évite les bug d'IE
bravo
Marsh Posté le 18-04-2006 à 16:45:28
Mdr désolé javai pas du faire correctement mon copier coller
http://forum.alsacreations.com/faq/#item58
Marsh Posté le 16-04-2006 à 16:35:31
Hello,
Je recherche un lien/document qui donnerai une (plusieurs) technique(s) pour créer un cadre graphique souple en longueur ET en hauteur avec CSS et sans tableau.
Ca serait donc un cadre qui utilise de nombreuses images pour chaque partie du cadre (pas d'utilisation de la propriété border).
Jusque la j'ai croisé quelques tutos pour créer des cadre fixes, ou souple en hauteur seulement, ou utilisant la propriété border, mais aucun qui parle de cadre graphique totalement souple...
Merci d'avance de vos réponses.