Block avec bordure complete en CSS

Block avec bordure complete en CSS - HTML/CSS - Programmation

Marsh Posté le 19-04-2006 à 22:49:09    

Yo les moules  [:ohello]  
Juste pour le fun ce soir je me suis amusé à faire un block avec une bordure tout autour.
bien evidement il y a une jolie pyramide de div (6 divs) dans le bouzin.
On peut reduire le code à 5 div, <div class="t"> devenant le conteneur principal, mais pour plus de lisibilité, je laisse la bête comme ça.
Mais nous sommes bien d'accord qu'un truc comme ça c'est à utiliser avec précaution.
et puis c'est juste pour l'effet de style.
 
http://gatsu.ftp.free.fr/html/bord [...] ersV2.html
 
Pour voir les images utilisées c'est ici  
http://gatsu.ftp.free.fr/html/borders/
En gros je voudrais vos avis sur ma façon d'opérer.
 
J'ai utilisé un doctype sans URI, et je vais voir ce que ça donne avec d'autres doctype.
les gens qui ont safari, s'ils peuvent envoyer une capture d'écran ça serait gentil :o
edit : ça fonctionne nickel sous safari, firefosque, IE, operette [:kbchris]  
 
la technique repose essentiellement sur les images.  
je part du haut, puis dans le sens des aiguilles d'une montre je met un background à chaque div interne.
puis sur le dernier coin, je rajoute un background sur .ctn pour cacher le coin miséreux.
PS: J'ai la flème de décrire comment ça fonctionne [:petrus75]
 
Il y a une seule limitation, c'est si les coins arrondis de votre blocs sont transparents. Ca laisse passer les défaut engendrés par la technique. Mais bon, quand on veut quelque chose, il faut bien faire des concessions d'un autre coté  [:petrus75]  
 
 
le code pour ceux qui veulent comprendre :  

Code :
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 
  2.  
  3. <html> 
  4. <head> 
  5.     <title></title> 
  6.     
  7.    <style type="text/css"> 
  8.       .t { background:url(rondtop.png) no-repeat left top;} 
  9.       .r { background:url(rondright.png) no-repeat right top;} 
  10.       .b { background:url(rondbottom.png) no-repeat right bottom;} 
  11.       .l { background:url(rondleft.png) no-repeat left top ;} 
  12.       .ctn {background:url(rondlittlebrcorner.png) no-repeat bottom left ; padding:30px;} 
  13.         
  14.    </style> 
  15. </head> 
  16.  
  17. <body> 
  18.  
  19. <div id="block"> 
  20.    <div class="t"><div class="r"><div class="b"><div class="l"> 
  21.       <div class="ctn"> 
  22.        Lorem ipsum dolor sit amet, consectetuer adipiscing elit. 
  23.  Phasellus ante elit, nonummy quis, mattis vel, placerat  
  24. consectetuer, metus. Mauris consectetuer iaculis lectus. 
  25.  Phasellus elit metus, accumsan id, elementum ut, 
  26.       </div> 
  27.    </div></div></div></div> 
  28. </div> 
  29.  
  30. </body> 
  31. </html>


Message édité par gatsu35 le 20-04-2006 à 00:10:53
Reply

Marsh Posté le 19-04-2006 à 22:49:09   

Reply

Marsh Posté le 19-04-2006 à 23:23:21    

Venant de là: http://www.snugtech.com/safaritest/
 
 
ç donne :
http://87.3.30.216/safaritest/1145481667-full.png
 
;)
 
Sinon sympa et subtil, mieux que ce que j'avais fait il y a quelques jours pour un mec passant par là  :p
 
EDIT: Mais c'est un peu triché  :ange:

Message cité 1 fois
Message édité par xtof_83 le 19-04-2006 à 23:25:56
Reply

Marsh Posté le 19-04-2006 à 23:26:10    

Ca passe très bien avec mon environnement presque tout nouveau qui est I.E. 5.5 sous AOL sur Windows Millennium.
Mais comme le fond est blanc, on ne se rend pas compte si la bordure est transparente ou non.
Le code est simple et élégant. Bravo !
 

Reply

Marsh Posté le 19-04-2006 à 23:26:41    

en fait je joue sur un truc tout con
la superposition des couches mais seulement sur un coté à chaque fois.
suffit de regarder la gueule des 5 images utilisés.
 
A la fin en fait on se retrouve avec un coin qui foire malheureusement, du coup il suffit de lui rajouter un coin tout connement.

Message cité 1 fois
Reply

Marsh Posté le 19-04-2006 à 23:27:39    

la bordure est transparente. mais comme il y a un antialiasing sur la bordure, je ne peux pas forcément conserver la transparence que je souhaitait


Message édité par gatsu35 le 19-04-2006 à 23:30:16
Reply

Marsh Posté le 19-04-2006 à 23:31:20    

gatsu35 a écrit :

en fait je joue sur un truc tout con
la superposition des couches mais seulement sur un coté à chaque fois.
suffit de regarder la gueule des 5 images utilisés.
 
A la fin en fait on se retrouve avec un coin qui foire malheureusement, du coup il suffit de lui rajouter un coin tout connement.


 
Mais imagine le gars à du 2000 je sais pas combien en résolution .... :D  
 
Mais ouais au début, j'arrivais à choper que le coin en plus, donc je comprenais pas la manip...ensuite j'ai tout m'est apparu plus clair.

Message cité 1 fois
Reply

Marsh Posté le 19-04-2006 à 23:31:42    

xtof_83 a écrit :

Venant de là: http://www.snugtech.com/safaritest/
 
 
ç donne :
http://87.3.30.216/safaritest/1145481667-full.png
 
;)
 
Sinon sympa et subtil, mieux que ce que j'avais fait il y a quelques jours pour un mec passant par là  :p
 
EDIT: Mais c'est un peu triché  :ange:


 
Comment ça triché [:petrus dei]  
mais pas du tout, c'est une technique comme toutes les autres, sauf que celle-ci est compliant, et n'entraine pas des problèmes sur tous les navigateurs

Reply

Marsh Posté le 19-04-2006 à 23:33:50    

xtof_83 a écrit :

Mais imagine le gars à du 2000 je sais pas combien en résolution .... :D  
 
Mais ouais au début, j'arrivais à choper que le coin en plus, donc je comprenais pas la manip...ensuite j'ai tout m'est apparu plus clair.


 
 
et puis des images en 2000x30 c'est pas enorme je pense [:petrus75]  
mais on peut aussi les faire en 5000 comme ça on est sur de ne pas avoir de problème :D
 
m'enfin c'est juste pour l'effet de style, et je trouve l'effet plutôt bon.
 
Maintenant, ce que je recherche c'est avant tout des critiques, les problèmes que ça peut engendrer et les emmerdes que ça procure, aussi bien pour le dev que pour le client

Message cité 1 fois
Reply

Marsh Posté le 19-04-2006 à 23:37:05    

gatsu35 a écrit :

et puis des images en 2000x30 c'est pas enorme je pense [:petrus75]  
mais on peut aussi les faire en 5000 comme ça on est sur de ne pas avoir de problème :D
 
m'enfin c'est juste pour l'effet de style, et je trouve l'effet plutôt bon.
 
Maintenant, ce que je recherche c'est avant tout des critiques, les problèmes que ça peut engendrer et les emmerdes que ça procure, aussi bien pour le dev que pour le client


 
Iep tu as raison, car comme on le sait tous, ce truc est anti sémantique, donc on est plus à sa près.
 
Enfin là, la limitation de div, et d'ajustements permet de s'assurer de la stabilité du truc....

Reply

Marsh Posté le 19-04-2006 à 23:45:44    

le truc est très stable, et très semantiquement propre comparé à ce qu'on voit la plupart du temps [:petrus75].
Mais bon c'est pas moi qui irait utiliser ça dans un site

Message cité 1 fois
Reply

Marsh Posté le 19-04-2006 à 23:45:44   

Reply

Marsh Posté le 20-04-2006 à 00:33:54    

gatsu35 a écrit :

le truc est très stable, et très semantiquement propre comparé à ce qu'on voit la plupart du temps [:petrus75].
Mais bon c'est pas moi qui irait utiliser ça dans un site


 
Ils doivent pas implémenter cela dans les spécification CSS à venir ?

Message cité 1 fois
Reply

Marsh Posté le 20-04-2006 à 00:48:36    

xtof_83 a écrit :

Ils doivent pas implémenter cela dans les spécification CSS à venir ?


les multiples backgrounds dans un block, ainsi que les bordures avec images.
mais le temps que les navigateurs qui utilisent cela  sortent et soient courament utilisés. On a encore beaucoup de chemin à faire

Message cité 1 fois
Reply

Marsh Posté le 20-04-2006 à 00:53:56    

gatsu35 a écrit :

les multiples backgrounds dans un block, ainsi que les bordures avec images.
mais le temps que les navigateurs qui utilisent cela  sortent et soient courament utilisés. On a encore beaucoup de chemin à faire


 
Ouais surtout qu'on s'en passe un peu ;)
 
Mais bon, ce serait utile dans le sens où tout les designs possibles doivent être accessible (simplement)...
 
Bon moi  :sleep: XML me pique les yeux... On verra demain ce que pensent les autres.

Reply

Sujets relatifs:

Leave a Replay

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