Bordure un peu spéciale

**SangKou** · 21/12/2005, 00h02

Salut,

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

D'habitude :

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

J'aimerais bien avoir ceci :

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

Comment faire ?

**Linaa** · 21/12/2005, 00h25

J'vois pas ce que tu veux obtenir...
T'as juste rajouté 'texte' ?!

**SangKou** · 21/12/2005, 00h37

J'aimeais bien avoir le texte :

Tu vois ?

**Linaa** · 21/12/2005, 00h41

Ahhh...

Code :

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

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

**SangKou** · 21/12/2005, 01h29

Ha mince...

J'ai un souci...

C'est parce que j'utilise la div via css... Comment faire alors ?

**francis m** · 21/12/2005, 01h46

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.

**balu** · 21/12/2005, 07h54

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 :

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
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.

**kevinf** · 21/12/2005, 08h27

slt,
est-il possible de mettre un backgroundcolor à

Code :

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

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

Si oui, comment?

Merci

**siddh** · 21/12/2005, 10h23

Code :

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

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

**kevinf** · 21/12/2005, 10h28

super! merci

**Linaa** · 21/12/2005, 13h51

C'est bizarre que sous IE, le legend est en bleu...

**siddh** · 21/12/2005, 13h53

oui c est ie qui fais ca

et les coins du fieldset sont arrondis

**Linaa** · 21/12/2005, 13h54

Par contre, pour les coins arrondis, c'est plus joli !

**franculo_caoulene** · 21/12/2005, 13h55

Salut,

Il faut un peut bidouiller pour rendre les fieldset et legend compatibles : http://bb.public.free.fr/css/formulaire.html

**balu** · 21/12/2005, 14h17

@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.

**franculo_caoulene** · 21/12/2005, 14h23

Saleté j'avais pas vu!

**SangKou** · 23/12/2005, 18h35

merci beaucoup c'est reglé pour moi

Bordure un peu spéciale

HTML

Vue hybride

Discussions similaires

Partager

Partager