comment faire un cadre avec titre SUR le bord

**adaneels** · 16/10/2007, 12h39

Bonjour,

Je cherche à faire un cadre dont le titre est sur le trait du bord. Voir l'exemple en pièce jointe.

La seule façon que je trouve pour faire ceci est de faire un div avec 3 images pour le haut (rouge sur le dessin) et un div sans bord en haut pour le reste (en bleu sur le dessin).

Existe-t-il un moyen de faire ceci sans image ?

Cordialement,
AD

**onirisme** · 16/10/2007, 13h47

Voilà une approche.
A toi de régler les blocks et tout le reste.

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
45
46
47
48
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
		<title>Untitled Document</title>
		<script type="text/javascript" src="tooltip.js"></script>
 
		<style type="text/css">
	html,body {
		height : 100%;
		}
	h2{
	        color : #cc0000;
		}
	   #contener {
	   	position : relative ;
	   	width : 750px ;
		border : #000000 thin solid ;
		background : #f5f5f5 ;
		height : 100% ;
		margin : auto ;
	   }
	   #content {
	   	width : 700px ;
		height : 120px;
		background : #f5f5f5 ;
		border : #000000 thin solid ;
		margin : 40px auto 0 auto ;
	   }
	   .titre{
	   	display : block ;
	   	position : relative ;
	   	margin : -12px 0 0 20px ;
		float : left ;
		color : #cc0000 ; 
		font-size : 18px ;
		background : #f5f5f5 ;
	   }
	</style>
	</head>
	<body>
		<div id="contener">
			<div id="content">
				<span class="titre">Titre du site</span>
			</div>
		</div>
	</body>
</html>

Il faut en fait mettre une valeur négative à un margin top afin de placer ton titre sur la ligne :

Code :

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

1
2
3
4
5
6
7
8
9
.titre{
	   	display : block ;
	   	position : relative ;
	   	margin : -12px 0 0 20px ;
		float : left ;
		color : #cc0000 ; 
		font-size : 18px ;
		background : #f5f5f5 ;
	   }

Capture :

**adaneels** · 16/10/2007, 14h20

Merci, ça fonctionne impeccable.

Je commence juste à trouver une méthode avec h1 au lieu du span de ton exemple. J'avais aussi tenter avec un span mais sans définir le float:left et le margin-left donc ça n'allait pas !

Merci encore,ça m'aide bien.

comment faire un cadre avec titre SUR le bord

CSS

Discussions similaires

Partager

Partager