Cadre souple

Cadre souple - HTML/CSS - Programmation

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.

Reply

Marsh Posté le 16-04-2006 à 16:35:31   

Reply

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


Message édité par ClD le 16-04-2006 à 18:47:10

---------------
NOUVEAU!! Février 2024 : j'ai créé un nouveau jeu en ligne : https://www.boblybots.com
Reply

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


---------------
NOUVEAU!! Février 2024 : j'ai créé un nouveau jeu en ligne : https://www.boblybots.com
Reply

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

Reply

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


---------------
NOUVEAU!! Février 2024 : j'ai créé un nouveau jeu en ligne : https://www.boblybots.com
Reply

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


Message édité par ClD le 16-04-2006 à 20:53:41

---------------
NOUVEAU!! Février 2024 : j'ai créé un nouveau jeu en ligne : https://www.boblybots.com
Reply

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?

Reply

Marsh Posté le 17-04-2006 à 15:31:53    

Donne nous ton code, ce sera un peu plus simple

Reply

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>


---------------
NOUVEAU!! Février 2024 : j'ai créé un nouveau jeu en ligne : https://www.boblybots.com
Reply

Marsh Posté le 17-04-2006 à 15:36:24   

Reply

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>


 
 :pfff:  
 
Solution trop facile ;)

Reply

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 :
  1. <!DOCTYPE html PUBLIC "–//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1–strict.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
  3.    <head>
  4.        <title>Cadre</title>
  5.        <meta http–equiv="Content–Type" content="text/html; charset=iso–8859–1" />
  6.        <link rel="stylesheet" media="screen" type="text/css" title="Test du css" href="style.css" />
  7.    </head>
  8.    <body>
  9.         <div class="frame">
  10.             <div class="top_border">
  11.                 <div class="top_lcorner"></div> <div class="top_rcorner"></div>
  12.             </div>
  13.         </div>
  14.    </body>
  15. </html>


Le CSS:

 
Code :
  1. body {
  2.     background: url("back6.jpg" );
  3. }
  4. .top_border {
  5.     background: url('border_top_repeat.png') repeat;
  6.     width: 50%;
  7.     height: 10px ;
  8. }
  9. .top_lcorner {
  10.     float: left;
  11.     background: url('border_top_left_corner.png') no-repeat;
  12.     width: 16px;
  13.     height: 10px ;
  14. }
  15. .top_rcorner {
  16.     float: right;
  17.     background: url('border_top_right_corner.png') no-repeat;
  18.     width: 16px;
  19.     height: 10px ;
  20. }
 

Reply

Marsh Posté le 18-04-2006 à 15:05:34    

Si tu mets repeat c'est logique...  :o  
 
Met repeat-x
 
Ensuite met dans ton css  
 

Code :
  1. * {
  2. margin:0;
  3. padding:0;
  4. }


 
Et continue :D

Reply

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

Reply

Marsh Posté le 18-04-2006 à 15:22:08    

Bon moi j'ai fini :p, je t'attend ;)
 
EDIT: marche sous IE, FF, FF linuxiens, opera etc...  :na:  
 
ClD : :kaola:

Message cité 1 fois
Message édité par xtof_83 le 18-04-2006 à 15:28:59
Reply

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. :fou:

Reply

Marsh Posté le 18-04-2006 à 15:29:47    

Reply

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...  :heink:

Reply

Marsh Posté le 18-04-2006 à 15:34:45    

Avec le code que tu m'a filé??

Reply

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 :
  1. * {
  2. margin:0;
  3.     padding:0;
  4. }
  5. body {
  6. background: url("back6.jpg" );
  7. }
  8. .frame {
  9. border: 1px solid orange;
  10. }
  11. /* Le haut du cadre */
  12. .top_border {
  13. background: url('border_top_repeat.png') repeat-x;
  14. width: 50%;
  15. height: 10px ;
  16. border: 1px red solid;
  17. }
  18. .top_lcorner {
  19. float: left;
  20. background: url('border_top_left_corner.png') no-repeat;
  21. width: 16px;
  22. height: 10px ;
  23. }
  24. .top_rcorner {
  25. float: right;
  26. background: url('border_top_right_corner.png') no-repeat;
  27. width: 16px;
  28. height: 10px ;
  29. }


HTML:

Code :
  1. <!DOCTYPE html PUBLIC "–//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1–strict.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
  3.    <head>
  4.        <title>Exemple de barre de navigation verticale</title>
  5.        <meta http–equiv="Content–Type" content="text/html; charset=iso–8859–1" />
  6.    <link rel="stylesheet" media="screen" type="text/css" title="Test du css" href="style.css" />
  7.    </head>
  8.    <body>
  9.  <div class="frame">
  10.   <div class="top_border">
  11.    <div class="top_lcorner"></div><div class="top_rcorner"></div>
  12.   </div>
  13.  </div>
  14.    </body>
  15. </html>

Reply

Marsh Posté le 18-04-2006 à 15:45:10    

tu as un lien ou je peux matter...

Reply

Marsh Posté le 18-04-2006 à 15:52:30    

xtof_83 a écrit :

Bon moi j'ai fini :p, je t'attend ;)
 
EDIT: marche sous IE, FF, FF linuxiens, opera etc...  :na:  
 
ClD : :kaola:


 
je suis curieux de voir comment tu as fais
 
car pour l'instant ton :kaola: est un peu injustifié


---------------
NOUVEAU!! Février 2024 : j'ai créé un nouveau jeu en ligne : https://www.boblybots.com
Reply

Marsh Posté le 18-04-2006 à 15:55:26    

ClD a écrit :

je suis curieux de voir comment tu as fais
 
car pour l'instant ton :kaola: est un peu injustifié


 
 
Tiens le tien aussi.... :sarcastic:

Reply

Marsh Posté le 18-04-2006 à 15:58:23    

le mien ? tu parle de quoi ?


---------------
NOUVEAU!! Février 2024 : j'ai créé un nouveau jeu en ligne : https://www.boblybots.com
Reply

Marsh Posté le 18-04-2006 à 16:00:18    

ClD a écrit :

le mien ? tu parle de quoi ?


 
de  :kaola:  
 
 :pfff: laisse tombé... Et toi alors tu as résolu le probléme  :??:

Reply

Marsh 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...


Message édité par vonzzz le 18-04-2006 à 16:01:38
Reply

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


---------------
NOUVEAU!! Février 2024 : j'ai créé un nouveau jeu en ligne : https://www.boblybots.com
Reply

Marsh Posté le 18-04-2006 à 16:05:04    

ClD a écrit :

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


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

Reply

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 ^^.

Reply

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 ;)

Reply

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


Message édité par vonzzz le 18-04-2006 à 16:19:04
Reply

Marsh Posté le 18-04-2006 à 16:18:37    

Reply

Marsh Posté le 18-04-2006 à 16:20:57    

Lol oui tes images ont quelle hauteur?

Reply

Marsh Posté le 18-04-2006 à 16:25:31    

clic droit, afficher image, propriétés....
 
lol.
 
25px * 25px

Reply

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.

Reply

Marsh Posté le 18-04-2006 à 16:28:27    

je vois pas pourquoi....  :o

Reply

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.


Message édité par vonzzz le 18-04-2006 à 16:45:57
Reply

Marsh Posté le 18-04-2006 à 16:33:57    

... :??:


Message édité par xtof_83 le 18-04-2006 à 16:34:25
Reply

Marsh Posté le 18-04-2006 à 16:42:06    


 
 
ha oui ça marche bien comme ça, en n'utilisant pas de positionnement en absolu ça évite les bug d'IE
 
bravo  :jap:


---------------
NOUVEAU!! Février 2024 : j'ai créé un nouveau jeu en ligne : https://www.boblybots.com
Reply

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

Reply

Marsh Posté le    

Reply

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed