28221 sujets

CSS et mise en forme, CSS3

Salut a tous, je souhaite savoir si il est possible de mettre une bordure mais avec une image a nous

Merci a tous
Administrateur
Il n''existe pas de balise ou de propriété pour le faire.
Cependant, rien ne t'empêche de créer un contour à l'aide de tes propres balises et d'y mettre les images en arrière-plan.
Raphael a écrit :
Il n''existe pas de balise ou de propriété pour le faire.
Cependant, rien ne t'empêche de créer un contour à l'aide de tes propres balises et d'y mettre les images en arrière-plan.

Ah oui ? Bizarre, j'y arrive avec ça :
<img src="image.png" alt="image" style="border: 3px solid #f00;" />


...?
Modifié le 28 Nov 2004 - 19:33
Administrateur
Nyro Xeo a écrit :

Ah oui ? Bizarre, j'y arrive avec ça :
<img src="image.png" alt="image" style="border: 3px solid #f00;" />


...?

La question, à mon avis, est d'avoir une bordure personnalisée (pas les simple dotted, dashed, solid, etc. mais des images comme ici)


EDIT : je déplace en salon "CSS et mise en forme", le sujet n'a rien à faire ici.
Oups desolé d'avoir poser dans la mauvaise categorie, toute mes excuse

Alors moie en faite j'ai une class "global" et sur cette clase jaimeraio mettre une bordure a gauche et a droite d'une image que je possede
J'ai pas tres bien compri comment faire, desolé .

Mon code du global est :
.global {
width: 750px;
border: 2px solid #000000;
}



merci a vous pour m'eclaircir Smiley lol
Pour faire comme dans l'exemple cité, tu te dois de créé 3 sections:
-Une pour le haut de la boite
-Une pour le corps
-Une pour le bas

Chacune de ces sections auront une image de "background" différente. En haut et en bas tu peux utilisé "no-repeat" pour ne pas le répéter le corps utiliseras un "repeat-y" pour qu'il se répète de haute en bas. Le seul problème à cette méthode c'est qu'elle doit être d'une largeur fixe.

J'espère que ça t'a aidé!
Modifié le 01 Dec 2004 - 21:18
Goofyboy a écrit :
Pour faire comme dans l'exemple cité, tu te dois de créé 3 sections:
-Une pour le haut de la boite
-Une pour le corps
-Une pour le bas

Chacune de ces sections auront une image de "background" différente. En haut et en bas tu peux utilisé "no-repeat" pour ne pas le répéter le corps utiliseras un "repeat-y" pour qu'il se répète de haute en bas. Le seul problème à cette méthode c'est qu'elle doit être d'une largeur fixe.

J'espère que ça t'a aidé!


C'est tout à fait possible en effet, mais il ne faudrait pas détourner des balises de leur sens premier pour réaliser un effet esthétique uniquement, on est bien d'accord. Smiley cligne
C'est certain que détourné des tags de leur but premier n'est pas toujours la meilleure solution mais ici, c'est pas mal la seule solution si c'est absolument nécessaire de le faire. On a pas beaucoup de choix pour le moment.
Goofyboy a écrit :
C'est certain que détourné des tags de leur but premier n'est pas toujours la meilleure solution mais ici, c'est pas mal la seule solution si c'est absolument nécessaire de le faire. On a pas beaucoup de choix pour le moment.


Utiliser 3 <div> imbriqués dans un but purement esthétique n'est jamais "absolument nécessaire". Dans ce cas, autant prendre "Photoshop" et rajouter la bordure à l'image.
Administrateur
Stephan a écrit :

Dans ce cas, autant prendre "Photoshop" et rajouter la bordure à l'image.

Oui, ou Before / After Smiley cligne ... quoi que pour les bordures latérales ça ne fonctionnerait pas Smiley bawling
Re salut et merci a tous pour votre aide.
J'ai essayé de faire ca avec un div ou le global serai flotant a gauche
Mais j'ai un petit probleme : http://www.omsalam.com/decoupe/index.php
Vous voyez sur ce lien que les menu ce decal correctement par raport a la bordure mais pas le hedaer ce qui créé un decalage pour le reste
Je ne vois pas pourquoi
dans la class global il y a une autre class header :

Je rajoute aussi , j'aimerai savoir si c'es possible que l'image se repetent en fonction de la hauteur du div class global ?
voici les code

.global {
width: 750px;
border: 0px solid #000000;
background-color:#c6e2ff;
margin:0px;

}

.lignegauche {
background-image: url('lignegauche.bmp');
background-repeat: repeat-y;
float:left;
width: 25px;
}

[code].header {
background-image: url('header.bmp');
width: 750px;
height: 175px;

}

Modifié le 03 Dec 2004 - 20:04