5568 sujets

Sémantique web et HTML

[Résolu] Double bordure particulière

Bonjour à tous.
Je souhaiterais réaliser le même type de double bordure que celle produite par un button imbriqué dans un div. Il s'agit de supprimer la balise button qui n'est pas prévue pour cela.
 
<!DOCTYPE HTML>
<head>
	<meta charset="utf-8" />
	<meta http-equiv="content-type" content="text/html" />
	<title>Double bordure</title>
<style>
body{
	background-color: darkgreen;
}
.exterieur{
	border-bottom:4px solid #f0f0f0;
	border-right:4px solid #d2d2d2;
	border-top:4px solid #666666;
	border-left:4px solid #7b7b7b;
	width: 15.0em;
	height: 16.0em;
}
.interieur{
	background-color: white;
	border: 2px solid black;
	width: 100%;
	height: 100%;
	text-align: justify;
}
p{
	margin: 10px;
}
</style>
</head>
 
<body>
<div class="exterieur">
	<button class="interieur">
		<p>Praesent euismod. Donec nulla augue, venenatis scelerisque, dapibus a, consequat at, leo. Pellentesque libero lectus, tristique ac, consectetuer sit amet, imperdiet ut, justo. Sed aliquam odio vitae tortor. Proin hendrerit tempus arcu. In hac habitasse platea dictumst. Suspendisse potenti. Vivamus vitae massa adipiscing est lacinia sodales. Donec metus massa, mollis vel, tempus placerat, vesti bulum condi mentum, ligula.</p>
	</button>
</div>
</body>
</html>


J'ai essayé plein de chose, mais visiblement pas les bonnes.
Concrêtement...

Les essais div par div. À gauche quelques essais, à droite ce que je veux obtenir :
<!DOCTYPE HTML>
<head>
	<meta charset="utf-8" />
	<meta http-equiv="content-type" content="text/html" />
	<title>Double bordure1</title>
<style>
body{
	background-color: darkgreen;
}
.un{
	border-bottom:4px solid #f0f0f0;
	border-right:4px solid #d2d2d2;
	border-top:4px solid #666666;
	border-left:4px solid #7b7b7b;
	width: 15.0em;
}
.deux{
	background-color: white;
	border: 2px solid black;
	width: 15.0em;
	text-align: justify;
}
.trois{
	border-bottom:4px solid #f0f0f0;
	border-right:4px solid #d2d2d2;
	border-top:4px solid #666666;
	border-left:4px solid #7b7b7b;
	width: 15.0em;
	overflow:hidden;
	background-color: white;
	box-shadow:inset 0 0 0 2px black;
	text-align: justify;
}
.quatre{
	width: 15.0em;
	border-style:double;
	border-width:3px;
	border-color:black;
}
 
p{
	margin: 10px;
}
</style>
</head>
 
<body>
<? $lorum='Praesent euismod. Donec nulla augue, venenatis scelerisque, dapibus a, consequat at, leo. Pellentesque libero lectus, tristique ac, consectetuer sit amet, imperdiet.'; ?>
	<div class="un">
		<p><? echo $lorum; ?></p>
	</div>
	<div class="deux">
		<p><? echo $lorum; ?></p>
	</div>
	<div class="trois">
		<p><? echo $lorum; ?></p>
	</div>
	<div class="quatre">
		<p><? echo $lorum; ?></p>
	</div>
</body>
</html>

Le résultat :
http://img4.hostingpics.net/pics/541725bordure4.png

Comment procéder ? Merci pour votre aide.
Modifié par Pyanepsion (08 Jun 2012 - 07:35)
Bonjour,

Je dirais qu'en prenant ton modèle un et en mettant la classe deux au p à l'intérieur tu devrait obtenir le résultat voulu (avec peut être un ajustement des marges et des longueurs)
Merci Romain.E.

La solution semble sur la bonne voix. Par contre, button contient en réalité plusieurs p, h2, blockquote, h3, etc.
Bonjour,

pourquoi ne pas utiliser une bordure de 2px noire et un outline: 4px outset #aaa; ?
C'est le rôle de outline de créer une bordure externe, et ça évite d'ajouter une balise superflue.
La solution de Ten semble pourtant bien convenir, pourquoi ne pas l'utiliser ?
border : 2px black solid;
outline : 4px gray outset;

Modifié par Gothor (08 Jun 2012 - 09:02)
Parce que je n'avais pas compris. En fait le navigateur interne de ce *?’™ž de ¶@§©« de phpDesigner n'interprétrait pas correctement.

Smiley biggrin Le résultat obtenu n'est pas exactement ce qui était demandé, mais ça y ressemble furieusement. Merci à tous.

Voici donc le source final :
<!DOCTYPE HTML>
<head>
	<meta charset="utf-8" />
	<meta http-equiv="content-type" content="text/html" />
	<title>Double bordure1</title>
<style>
body{
	background-color: darkgreen;
}
.trois {
	background-color: white;
	border-color: #666666 #d2d2d2 #f0f0f0 #7b7b7b;
	border-style: solid;
	border-width: 4px;
	box-shadow: 0 0 0 2px black inset;
	overflow: hidden;
	text-align: justify;
	width: 15em;
}
.cinq {
	background-color: white;
	border: 2px solid black;
	outline: 4px outset gray;
	width: 15em;
}
p{
	margin: 10px;
}
</style>
</head>

<body>
<? $lorum='Praesent euismod. Donec nulla augue, venenatis scelerisque, dapibus a, consequat at, leo. Pellentesque libero lectus, tristique ac, consectetuer sit amet, imperdiet.'; ?>
	<div class="trois">
		<p><? echo $lorum; ?></p>
		<p><? echo $lorum; ?></p>
	</div>
	<p>&nabla;</p>
	<div class="cinq">
		<p><? echo $lorum; ?></p>
		<p><? echo $lorum; ?></p>
	</div>
</body>
</html>
Sujet clos
Aller à