Discussion :

[chillansky]

Voila, mon but est de faire des "bordure" pour encadrer mon texte.
Avec des tableaux, pas de problème. Mais avec css
En plus impossible d'utiliser border-image (ie gère pas ).

Pour vous donner une idée ça doit ressembler à ce site.

Les images du parchemin sont composé d'une image de fond, et bords gauche droite haut bas. Avec les tableaux, facile, mais en css comment faire ?

[Chronax]

bah au lieu d'une

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

table class =".."

tu fais un

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

div class =".."

Et si je me souviens bien dans ta Css tu fais quelque chose comme ca:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
."nom de ta classe" {
border-style:solid; //style de la bordure
border-width:1px; // largeur de la bordure
border-color:red; //si  tu veux y mettre de la couleur
}

Voila a doit etre quelque chose ds le style...

[chillansky]

oui mais les bordures sont des images ! C'est la que ça coince

[Chronax]

Ah d'accord j'avais pas tout suivi alors desolé

bah alors ca doit ressembler a quelque chose comme ca :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
."nom de ta classe" {
background: url("images\.....") right top

}

i faut bien sur que tu les places et tu fais pareil pour chaque coin j'entends pas la left top, left bottom et right bottom chaque image a sa place...
voila je crois que c'est ca ou peut etre essaye avec background-image si ca marche pas ..

[chillansky]

Attend je ne comprends pas. Je fais donc plusieur background: url("images\.....") par image que je veux positioner. Ce qui donnera qqch comme ça alors:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
 
background: url("images\.....") right;
background: url("images\.....") top;
...

[chillansky]

Voila j'ai donc creer ceci:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
 
#header {
	float:left;
}
 
#gauche {
	clear:both; 
	float:left;
	background-image: url("../img/menu/menu_f.png")  ;
	background-repeat: repeat;
}
#borduregauche
{
	float:left;
	background: url("../img/menu/menu_g.png") left ;
	background-repeat: repeat-y;
}
 
#borduredroite
{
	float:left;
	background: url("../img/menu/menu_d.png") right ;
	background-repeat: repeat-y;
}
 
#bordurehaut
{
	float:left;
	background: url("../img/menu/menu_h.png") top ;
	background-repeat: repeat-x;
}
 
#bordurebas
{
	float:bottom;
	background: url("../img/menu/menu_b.png") bottom ;
	background-repeat: no-repeat;
}
 
.menugauche {
	list-style-type: none;
}

Avec le code html suivant: (simplifié)

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
 
<div id="gauche">
	<div id="borduregauche">
		<div id="borduredroite">
			<div id="bordurehaut">
				<div id="bordurebas">
					<ul class="menugauche">
						<li><b>Introduction</b></li>
						...
						...
						...
						...
					</ul>
				</div>
			</div>
		</div>
	</div>
</div>

Mais le problème est que l'image du bas, n'est pas correcte. Elle doit normalement fermer le cadre. Il ne doit pas y avoir de texte dessus. Mais là le bas se positionne par rapport à la taille du coté gauche et droit (Voir image)
Comment résoudre ça ?

PS: image de mauvaises qualité mais c'est normal

[Chronax]

Oui tu peux faire comme ca mais tu peux aussi données de proprités a chacun de tes bords.

J'ai rien de concret à te montrer mais ca c'est deja pas mal...c'est une partie d'une Css d'un Menu et comme tu peux le voir pour chaque image il y une classe et pour chaque classe des proprités selon bien sur ce que tu souhaites faire !!

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
 
 
#header li {
  float:left;
  background:url("left.jpg") no repeat left top;
 
  margin:0;
  padding:0 0 0 9px;
  border-bottom:1px solid #765;
  }
#header #current {
  background-image:url("right.jpg");
  border-width:0;
  }
 
.......
......
.......

EDIT: je ne vois pas tres bien sur la photo mais ton image en bas a droite ne ce calle pas bien c'est ca ?? et c'est la quelle dans le CSS bottom ?

[chillansky]

Oui l'image en bas n'est pas assez basse. Elle doit normalement "fermer" les 2 image/bordure sur le coté.
C'est #bordurebas dans le css

[Chronax]

Bah je sais pas faudrait voir la tete de tes images mais en fait non.....certainement le no-repeat peut etre ....ou ton image qui foire ! je ne vois rien d'autre la !

sinon essaye ca :
background: url("../img/menu/menu_b.png") left ;

ou encore avec un float :left;

enfin en essayant de trifouiller tu vas finir par trouver !

[chillansky]

ça marche merci ! mais j'ai un autre problème... nouveau post