tableau contour arrondi

[freestyle83]

Bonjour à tous,

C'est la première fois que je poste sur ce site. D'habitude je ne suis pas dans le besoin, mais là c'est different.

J'ai passé la nuit sur ce fichu contour arrondi des tableaux. Et j'avoue que là ça m'énerve parce que je suis sur que c'est un petit détail de rien du tout, et j'ai du passé à coté!

Je précise que je n'ai jamais fait de css ( en realité j'ai commencé il y a 4jours pour faire mon site).

Donc voici le problème.

Dans le centre de mon site je veux y mettre un texte entouré par un contour arrondi. Donc direction photoshop j'ai préparé le haut en image, le bas, et la longueur ( de 1px) pour pouvoir après agrandir comme je veux.

Donc j'ai crée ma boite, et j'ai mis donc le titre et le paragraphe. J'ai crée un style pour le titre, et un style pour le paraphe. Dans chaque style j'y met l'arrière plan qu'il faut pour que ça ressemble après a mon rectangle arrondi.

Le hic c'est que je n'arrive pas a décaler le texte pour qu'il ne soit pas sur le le contour. ( je sais pas si vous me suivez là )

J'ai essayé plusieurs méthodes, mais la methode qui me semble le mieux c'est de mettre la boite par exemple a 955px, configurer la boite du titre h2 a 955px, mettre l'arrière plan ( qui fait la meme taille), et faire un remplissage de la boite du titre a gauche, de manière a ce que le titre se pousse un peu.

Mais ça ne fonctionne pas, au lieu de décaler le titre cela décale ma boite ...

Alors je sais plus trop comment m'y prendre, et a force de faire et refaire, je sais plus ce que j'ai fait pas fait. Bref j'espère que vous aller pouvoir m'éclairer sur ce point.

Je vous copie le css si ça peut vous aider.

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
#centre {
	width: 955px;
	float: left;
	border: 1px solid #F00;
}
#centre h2 {
display: block;
background-repeat: no-repeat;
width: 955px;
margin-top: 10px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
font-size: 18px;
padding-top: 0px;
padding-bottom: 0px;
padding-left: 0%;
height: 23px;
color: #FFF;
background-position: center;
padding-right: 0%;
background-image: url(../contour-haut.png);
}
#centre p {
	background-image: url(../contour-longueur.png);
	background-repeat: repeat-y;
	display: block;
	width: 955px;
	margin-right: 0px;
	margin-left: 0px;
	margin-top: 0px;
	margin-bottom: 0px;
	padding-right: 0px;
	background-position: center center;
	padding-top: 0px;
	padding-bottom: 0px;
	padding-left: 0px;
}

Merci d'avance à tous

[papouuu]

Sinon il y a la propriété

Code :

moz-border-radius

Mais à vérifier si ca passe sur tous les navigateurs, je suis pas sûr du tout

[freestyle83]

Bon finalement j'ai trouvé à la mc gyver.
Si quelqu'un a quelque chose de plus simple à me proposer je suis preneuse.

@papouuu : merci pour la propriété, mais comme je ne la connais pas, j'ai préféré faire avec ce que je connais. Surtout que j'aime bien comprendre ce que je fait.

Donc ci dessous, pour ceux que ça interesse, je copie/colle mon code css, ainsi que la parti html.
Mon problème était que lorsque je voulais poussé le texte, celui si faisait décaller la boite. J'ai donc crée une balis e div pour le fond, et une pour le titre, le tout dans une autre balise . Enfin regardez par vous même.

Attention, je ne recommence absolument pas ce code, ça marche ( en tout cas sur chrome ça marche, et sur IE aussi.) mais ça ne doit pas etre la meilleur façon de faire.

Donc voici le css :

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
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
#centre {
	height: 600px;
	width: 954px;
	margin-right: auto;
	margin-left: auto;
	float: left;
	border: 2px solid #F00;
}
#centre1 {
	background-image: url(../contour-haut.png);
	width: 954px;
	float: left;
	background-repeat: no-repeat;
	background-position: center;
	margin-top: 10px;
	margin-right: 0px;
	margin-bottom: 0px;
	margin-left: 0px;
	background-color: #48688F;
}
#centre1a h2 {
	color: #FFF;
	width: 600px;
	float: left;
	font-size: 18px;
	font-family: "Comic Sans MS", cursive;
	margin-right: auto;
	margin-left: auto;
	padding-left: 50px;
	margin-bottom: 5px;
}
#centre2 {
	background-image: url(../contour-longueur.png);
	background-repeat: repeat-y;
	background-color: #48688F;
	width: 954px;
	margin-right: auto;
	margin-left: auto;
	background-position: center;
	clear: both;
	float: left;
}
#centre2a p {
	width: 600px;
	float: left;
	margin-right: auto;
	margin-left: auto;
	clear: both;
	padding-left: 50px;
}
#centre3 {
	background-image: url(../contour-bas.png);
	margin-right: auto;
	margin-left: auto;
	float: left;
	width: 954px;
	background-repeat: no-repeat;
	background-position: center;
}

Et le html :

Code html :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<!--debut de centre -->
  <div id="centre">
    <div id="centre1">
      <div id="centre1a"> 
        <h2>A la Une</h2>
      </div>
    </div>
    <div id="centre2">
      <div id="centre2a">
        <p>blablablablablbalablablablablabalbalbalbalbalbalbalab</p>
      </div>
    </div>
    <div id="centre3"></div>
  </div>
<!--fin de centre -->

Si quelqu'un a mieux, j'écoute volontier