[css] [XHTML 1.1] bordures sans tableaux

Version imprimable

13/06/2006, 10h28
chillansky

[css] [XHTML 1.1] bordures sans tableaux

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 :aie: ).

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 ?
13/06/2006, 10h36
Chronax
bah au lieu d'une

Code:

table class =".."

tu fais un

Code:

div class =".."

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

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...
13/06/2006, 10h41
chillansky

oui mais les bordures sont des images ! C'est la que ça coince :(
13/06/2006, 10h49
Chronax
Ah d'accord j'avais pas tout suivi alors desolé :oops:

bah alors ca doit ressembler a quelque chose comme ca :
Code:

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 ..
13/06/2006, 11h15
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:

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

Voila j'ai donc creer ceci:

Code:

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:

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

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:

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 ?

13/06/2006, 12h44
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
13/06/2006, 12h55
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 !
13/06/2006, 13h06
chillansky

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