High-Tech Santé Médecine Droit-Finances

Grippe A

Que dois-je faire ?

Rechercher : dans
Par :

Bords arrondis et bordures extensibles

Dernière réponse le 10 jan 2008 à 20:10:47 AaSensuio, le 4 sep 2007 à 15:56:13 
 Signaler ce message aux modérateurs

Bonjour...

Je reprensd le taf sur mon site et je souhaiterais faire des cadres avec des bords arrondis...
Je dois dire que l'on trouve de nombreux tutos sur le sujet mais après avoir essayé trois méthodes différentes, j'ai finalement opté pour une méthode trouvée sur le site du zero (et faite par un zéro)

http://www.siteduzero.com/...

La méthode marche très bien, cependant pour mes besoins il me f aut l adapter car les bordures sont des images qui se repètent (repeat-x etc) or moi il me faut une image fixe mais étirable. Je sais pas si c 'est très clair alors avec le code ce devrait être mieux.

XHTML 

      
<div id="corps">
        <div class="coin_hg">
                <div class="coin_hd">
                        <div class="bordure_h"><img src="./images/haut.png" width=100% height=19px alt="">
                        </div>
               	</div>
        </div>
                                 
        <div class="cote_gauche"><img src="./images/gauche.png" width=19px height=100%  alt="">
                <div class="cote_droit"><img src="./images/droite.png" align=right width=19px height=100%  alt="">
                        <div class=contenu_cadre >    yooo test
                        </div>
                </div> 
       	</div>
                           
        <div class="coin_bg">
                <div class="coin_bd">
                         <div class="bordure_b"><img src="./images/bas.png" width=100% height=19px alt="">
                         </div>
                </div>
        </div>
</div>


CSS 
div.coin_hg
{
        background: url('../images/hautgauche.png') left top no-repeat;
        padding-left: 19px;
	margin-left: 13%;	
        border: 1px solid #ff0707;
}

div.coin_hd
{
        background: url('../images/hautdroit.png') right top no-repeat;
        padding-right: 19px;
        margin-right:15%;
        border: 1px solid #ff0707;
}

div.bordure_h
{
        height:19px;
        border: 1px solid #ff0707;
}

div.cote_gauche
{
        margin-left:13%;
	border: 1px solid #00f7f7;
}

div.cote_droit
{
        margin-left:19px;
        margin-right:15%;
	border: 1px solid #00f7f7;
}
	
div.contenu_cadre
{
        margin-left:19px;
        margin-right:19px;
	border: 1px solid #00f7f7;
}	

div.coin_bg
{
        background: url('../images/basgauche.png') left top no-repeat;
        padding-left: 19px;
        margin-left: 13%;
}

div.coin_bd
{
        background: url('../images/basdroit.png') right top no-repeat;
        padding-right: 19px;
	margin-right:15%;
}

div.bordure_b
{
        height: 19px;
}


Voila deux jours que je bosse sur ce problème et je suis à court d'idée, alors j'aimerais bien savoir déjà, si mon idée est réalisable, et si elle l'est si quelqu'un a une idée pour m'éclairer.
Afin que vous vous rendez mieux compte de ce que je souhaite et surtout de ce que j'obtiens:

http://aasensuio.isa-geek.net/Aasensuio/cadre1.php (Visualisez l'effet sous un navigateur gérant la transparence sinon vous ne verrez pas les images.)

Soyez indulgent mon site n'en est qu'à ses débuts. Merci pour vôtre aide. McGyver de l'informatique:
Avec un pot de yaourt je vous fais planter tout un système.
Configuration: Linux
Firefox 2.0.0.6

Meilleures réponses pour « Bords arrondis et bordures extensibles » dans :
Enlever la bordure sur une image dans un lien en HTML/CSS VoirVous avez fait une image cliquable en mettant une balise IMG au sein d'un lien et le navigateur vous affiche un cadre ou plus exactement une bordure autour de l'image. Il existe deux façons de supprimer cette bordure...
Télécharger WinSnap VoirWinSnap est un logiciel de capture d'écran apportant quelques nouveautés par rapport aux autres logiciels de capture : Capture des fenêtres non rectangulaires par exemple avec des bords arrondis Capture multiple de plusieurs fenêtres avec...
Télécharger BorderMaker VoirAjoutez un cadre photo à une image virtuel n'est pas évident. Alors pour faire simple, des programmes sont spécialisés dans cette tâche bien précise. Bordermaker est un outil permettant d'ajouter des bordures, des textes ou un effet de filigrane...
Posez votre question Répondre

1

gryzzly, le 4 sep 2007 à 21:54:46

Ton site est inaccessible.

tu veuxc vraiment des images pour faires tes bordures ?
en css, il y a la propriété border-radius (fonctionne pas sous IE ou tres mal si j'ai bon souvenir) Deux choses sont infinies : l'Univers et la bêtise humaine. ­
Mais en ce qui concerne l'Univers, je n'en ai pas encore acq­uis la certitude absolue. A. Einstein

   
Répondre à gryzzly

2

Dalida, le 4 sep 2007 à 22:48:43

Salut Gryzzly,

border-radius c'est la spec CSS version 3.0…
c'est un peu tôt encore !!!
-:op

il y a bien '-moz-border-radius' mais qui bien sûr ne tourne que sous Mozzila !
[ Mathieu ] 

Il y a surement des pandas pour ne dépendre de rien

   
Répondre à Dalida

3

gryzzly, le 4 sep 2007 à 23:41:28

Faut prendre de l'avance....


ok........
je sors.. Deux choses sont infinies : l'Univers et la bêtise humaine. ­
Mais en ce qui concerne l'Univers, je n'en ai pas encore acq­uis la certitude absolue. A. Einstein

   
Répondre à gryzzly

4

Gihef, le 5 sep 2007 à 00:05:12
   
Répondre à Gihef

5

Dalida, le 5 sep 2007 à 00:22:19

Ave !

"Je en suis pas sûr de bien comprendre. "
t'as encore le ventilo qui tourne ?
-:oDDD

mais que voulais-tu dire par là ?
[ Mathieu ] 

Il y a surement des pandas pour ne dépendre de rien

   
Répondre à Dalida

6

Gihef, le 5 sep 2007 à 00:59:19

Ciao,

“mais que voulais-tu dire par là ?”
Par là, quoi, à quel sujet ?

Si c'est ce post :
“une image fixe mais étirable”

Si c'est le ventilo :
Mon ordi. est plutôt silencieux, mais lorsqu'il est très sollicité (75 % pour le navigateur), le ventilo. se met en marche pour améliorer le refroidissement de la CPU.
Et là, il est beaucoup moins silencieux. Forcément (-:
Et quand c'est pour ça /-(

--

   
Répondre à Gihef

8

Dalida, le 5 sep 2007 à 08:43:21

Salut,

ba vi ça j'avais compris quand même !
non je te chambrais juste sur la faute de frappe, tu n'es pas coutumié du fait, j'allais pa te louper !

mais surtout je me suis demandé pourquoi tu postais deux liens et surtout pourquoi tu mettais un 'ou' entre les deux.
comme j' avais envie de ne pas m'éterniser devant l'écran je pensais qu'en te demandant tu nous ferais un petit topo sur les différences entre les deux techniques (je suppose qu'il y en a).

voili, voila&helllip;

pour le ventilo, il fait d'ailleurs que je me penche sérieusement sur le problème. je dois me monter une nouvelle machine et le bruit sera le premier critère de choix, j'en peux plus du mien !!!
[ Mathieu ] 

Il y a surement des pandas pour ne dépendre de rien

   
Répondre à Dalida

9

Gihef, le 5 sep 2007 à 14:59:06

Ja na l'eveis mâma pas vua…


Je me doutais bien que tu avais compris (-;
Mais, un éventuel visiteur…


La différence intéressante :
http://www.search-this.com/2007/02/12/css-liquid-round-corne­rs = 6 images
http://www.456bereastreet.com/lab/flexible_custom_corners_bo­rders/ = 2 images (ce qui correspond assez à mon goût)

--

   
Répondre à Gihef

11

Dalida, le 5 sep 2007 à 15:17:40

Ah oui, c'est bien vu l'économie de bitmap !!!
mais tu crois qu'on y gagne vraiment ?
parce qu'il utilise quand même un gif de 1600 de large !!!
[ Mathieu ]

"Les jeunes c'est l'insécurité
il faudrait tous les enfermer!" BxN 1985

   
Répondre à Dalida

7

AaSensuio, le 5 sep 2007 à 06:35:26

Merci pour ces liens mais malheureusement je suis pas assez bon en anglais pour saisir ce qui s'y dit... Oui gryzzly mon site est hébergé sur mon pc et vu qu'il est en développement je ne le laisse pas forcément allumé tout le temps d'où son inaccessibilité temporaire, j'en suis désolé. McGyver de l'informatique:
Avec un pot de yaourt je vous fais planter tout un système.

   
Répondre à AaSensuio

10

Gihef, le 5 sep 2007 à 15:13:03

“pas assez bon en anglais”

Ça peut peut-être te donner une idée :
http://fets3.freetranslation.com/...
http://fets3.freetranslation.com/...
Il faut être patient. Ça traduit.

+ Quelques outils.

--

   
Répondre à Gihef

12

thifoolish, le 5 sep 2007 à 17:24:25

Bonjour,

Pour les bords arrondis... il y a un éventail de solutions...

Après plusieurs essais sur des plateformes différentes, je conseille l'usage de la librairie des nifty corners...
maintenant c'est vous qui voyez (dans les coins, arrondis de préférence)

Ah oui la doc est bien sûr en anglais, mais vous devrez facilement trouver des tutos en français sur le web avec google.

Au revoir. On ne court jamais assez vite derrière le Temps.
C'est pour cela qu'on devient trop vieux avant d'avoir vécu.

   
Répondre à thifoolish

13

manu, le 6 sep 2007 à 20:47:14

Délai d'attente dépassé
Le serveur à l'adresse aasensuio.isa-geek.net met trop de temps à répondre.

* Le site est peut-être temporairement indisponible ou surchargé. Réessayez plus
tard ;

* Si vous n'arrivez à naviguer sur aucun site, vérifiez la connexion
au réseau de votre ordinateur ;

* Si votre ordinateur ou votre réseau est protégé par un pare-feu ou un proxy,
assurez-vous que Firefox a l'autorisation d'accéder au Web.

C'est pas possible!! On peut jamais acceder au site http://aasensuio.isa-geek.net/Aasensuio/cadre1.php Si tu heberge un site, faut penser à laisser ta machine en route, j'veux bien qu'il en soit a ces debut Oui gryzzly mon site est hébergé sur mon pc et vu qu'il est en développement je ne le laisse pas forcément allumé tout le temps d'où son inaccessibilité temporaire, j'en suis désolé. mais il ne risque pas d'avoir beaucoup de visiteurs si il est toujours éteint.

   
Répondre à manu

14

manu2, le 6 sep 2007 à 20:49:25

C'est sur ca fait chier c't'indisponibilité
Ah Non mais ^^ !!!

   
Répondre à manu2

15

manu3, le 6 sep 2007 à 20:51:06

Grave;......................................................­.................................................;..........­............................................................­.................................;..........................­............................................................­.................;..........................................­............................................................­.;..........................................................­.............................................;..............­............................................................­.............................;..............................­............................................................­.............;..............................................­.........................................................;..­............................................................­.........................................;..................­............................................................­.........................;..................................­............................................................­.........;..................................................­.....................................................;......­............................................................­.....................................;......................­............................................................­.....................;......................................­............................................................­.....;......................................................­.................................................;..........­............................................................­.................................;..........................­............................................................­.................;..........................................­............................................................­.;..........................................................­.............................................;..............­............................................................­.............................;..............................­............................................................­.............;..............................................­.........................................................;..­............................................................­.........................................;..................­............................................................­.........................;..................................­............................................................­.........;..................................................­.....................................................;......­............................................................­.....................................;......................­............................................................­.....................;......................................­............................................................­.....
;...........................................................­............................................;...............­............................................................­............................;...............................­............................................................­............;...............................................­........................................................;...­............................................................­........................................;...................­............................................................­........................;...................................­............................................................­........;...................................................­....................................................;.......­............................................................­....................................;.......................­............................................................­....................;.......................................­............................................................­....;.......................................................­................................................;...........­............................................................­................................;...........................­............................................................­................;...........................................­............................................................­;...........................................................­............................................;...............­............................................................­............................;...............................­............................................................­............;...............................................­........................................................;...­............................................................­........................................
;...........................................................­............................................

   
Répondre à manu3

16

AaSensuio, le 17 sep 2007 à 01:14:53

J'ai mis en résolu pour clôturer le sujet mais il ne l'est pas, j'ai simplement construit mon site différemment. Merci McGyver de l'informatique:
Avec un pot de yaourt je vous fais planter tout un système.

   
Répondre à AaSensuio

17

Copain, le 8 jan 2008 à 11:22:55
   
Répondre à Copain

18

Dalida, le 8 jan 2008 à 12:42:53

Salut,

c'est pas la politesse ni les commentaires qui t'étouffent !
-;o)

parce qu'il faudrait quand même préciser que les pseudo-classes ':before' et ':after' ne sont pas gérées par IE6.

[ Mathieu ]
« On embauchera plus s'il est moins compliqué de licencier. » LP, 29 août 2007.

   
Répondre à Dalida

19

 AaSensuio, le 10 jan 2008 à 20:10:47

--

McGyver de l'informatique:
Avec un pot de yaourt je vous fais planter tout un système.

   
Répondre à AaSensuio
Posez votre question Répondre
Ils ont besoin de votre aide