Bordure un peu spéciale

Version imprimable

21/12/2005, 00h02
SangKou

Bordure un peu spéciale

Salut,

J'aimerais bien avoir un bordure un peu spéciale :

D'habitude :

|------------------------------|
| |
| |
|------------------------------|

J'aimerais bien avoir ceci :

|-texte-----------------------|
| |
| |
|------------------------------|

Comment faire ? :)
21/12/2005, 00h25
Linaa

J'vois pas ce que tu veux obtenir...
T'as juste rajouté 'texte' ?!
21/12/2005, 00h37
SangKou

J'aimeais bien avoir le texte :

http://img386.imageshack.us/img386/7...bordure6vz.jpg

Tu vois ?

Ahhh...

Code:

1
2
3
4
<fieldset>
<legend>texte</legend>
Contenu...
</fieldset>

21/12/2005, 01h29
SangKou

Ha mince...

J'ai un souci...

C'est parce que j'utilise la div via css... Comment faire alors ?
21/12/2005, 01h46
francis m

si ta bordure est celle d'un div, je pense qu'il n'est possible en css de faire ce que tu souhaites : la bordure est vraiment un contour de ton div. Ce que tu désires n'est plus un contour mais un cadre se trouvant à l'intérieur d'un div. La proposition de Linaa me paraît la plus simple.

La réponse de Linaa est la plus appropriée mais si tu veux absolument utiliser un div. Tu peux utiliser plusieurs éléments ensemble pour obtenir le même effet.

3 éléments :
1 balise div principale (la boîte)
1 balise h1 pour le titre de la boîte
1 balise div pour le contenu de la boîte

Exemple de code :

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
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
<head>
<title>Boîte avec titre</title>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<style type="text/css">
div.boite {
        position: relative;
        border: 1px solid #000;
        font-family: Arial, Helvetica, sans-serif;
}
 
div.boite h1 {
        position: absolute;
        font-size: 1em;
        font-weight: bold;
        margin: 0;
        padding: 0 5px 0 5px;
        background: #fff;
        left: 10px;
        top: -10px;
}
 
div.boite-contenu {
        font-size: 1em;
}
 
div.boite-contenu p {
        margin: 15px 10px 10px 10px;
}
</style>
</head>
 
<body>
 
<div class="boite"> 
  <h1>Titre de la boîte</h1>
  <div class="boite-contenu">
    <p>Contenu de la boîte</p>
  </div>
</div>
 
</body>
</html>

La balise h1 est en position absolue par rapport à la boîte.

Le résultat est très semblable. ;)

21/12/2005, 08h27
kevinf
slt,
est-il possible de mettre un backgroundcolor à
Code:

1 2 3 4 <fieldset> <legend>texte</legend> Contenu... </fieldset>
Si oui, comment?

Merci

Code:

1
2
3
fieldset{
  background-color: #CCCCCC;
}

21/12/2005, 10h28
kevinf

super! merci
21/12/2005, 13h51
Linaa

C'est bizarre que sous IE, le legend est en bleu... :roll:
21/12/2005, 13h53
siddh

oui c est ie qui fais ca :P et les coins du fieldset sont arrondis
21/12/2005, 13h54
Linaa

Par contre, pour les coins arrondis, c'est plus joli ! :D
21/12/2005, 13h55
franculo_caoulene

Salut,

Il faut un peut bidouiller pour rendre les fieldset et legend compatibles : http://bb.public.free.fr/css/formulaire.html
21/12/2005, 14h17
balu

@franculo_caoulene : Le rendu du formulaire est excellent avec Firefox mais c'est un peu moins bien avec IE comme l'espace blanc sur les côtés des légendes et l'espace plus large entre les champs. C'est quand même un détail mineur. ;)
21/12/2005, 14h23
franculo_caoulene

Saleté j'avais pas vu!
23/12/2005, 18h35
SangKou

merci beaucoup c'est reglé pour moi ;)