bordo div con immagine

**Mauro22it** · 15-02-2009, 15:39

Salve a tutti,
Sto impazzendo per riuscire a posizionare un'immagine di cornice intorno al bordo di un DIV container.

Praticamente ho un foglio di stile esterno costruito come segue;

body {
background-color:#FF3399;
text-align: center;
width: auto;
margin:0px;
font-family: verdana;
font-size: small;
font-size : 76%;
}
#container {
margin : 3px;
margin-left : auto;
margin-right : auto;
padding : 2px;
width : 800px;
}
#content {
background-color : white;
height : auto;
width : auto;
font-family : verdana;
font-size : small;
padding : 5px;
border-left : 1px solid #808080;
border-right : 1px solid #808080;
}

Se volessi inserire un'immagine di cornice sul bordo del DIV content o del DIV container pensavo che bastava metterci un border-image: url("imaggine/cornice.jpg") ma in realtà sembra che non è così semplice.

Potete aiutarmi?

**fcaldera** · 15-02-2009, 16:03

finché non ci sarà il pieno supporto ai css3 non puoi impostare un'immagine come bordo

**Gufo** · 15-02-2009, 16:39

Io l'ho realizzato mettendo un div centrale e quattro div ai bordi con un un'immagine di sfondo in modo da creare un bordo, ma è un pagiativo che non so se convenga.
Oppure un div con un background che ai bordi riproduca un bordo e un div più piccolo sovrapposto. Ma ti dico sono tutti pagliativi

**Mauro22it** · 15-02-2009, 17:35

Grazie,
Ho trovato una tabella con i browsers che lo supportano, praticamente quasi nessuno. Per almeno 1 o 2 anno tocca aspettare. http://westciv.com/iphonetests/

Gufo: potresti postare il codice con le due soluzione alternative che avresti trovato?

Grazie.

**Gufo** · 15-02-2009, 20:07

Esempi alternativi
Esempio1

codice:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Documento senza titolo</title>
<style type="text/css">
<!--
#div1 {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 24px;
	font-weight: bolder;
	color: #FFFFFF;
	text-decoration: none;
	background-image: url(div1.jpg);
	height: 500px;
	width: 500px;
	position: absolute;
	left: 50%;
	top: 50%;
	margin: -250px 0 0 -250px;
	padding: 0px;
}
#div2 {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 24px;
	font-weight: bolder;
	color: #FFFFFF;
	text-decoration: none;
	background-image: url(div2.jpg);
	height: 400px;
	width: 400px;
	position: absolute;
	left: 50%;
	top: 50%;
	margin: -215px 0 0 -215px;
	padding: 15px;
	z-index: 10;
}
body {
	background-color: #009966;
}
-->
</style>
</head>

<body>

<div id="div1">
	<div id="div2">Inserire qui i contenuti
contenuti</div>
</div>

</body>
</html>

Esempio2

codice:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<title>Documento senza titolo</title>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
.div-1 {
	border: none;
	height: 438px;
	margin-left: auto;
	margin-right: auto;
	position: relative;
	text-align: left;
	width: 491px;
}

.div-1-1 {
	background: url(b2.jpg);
	border: none;
	height: 438px;
	left: 0px;
	line-height: 438px;
	padding: 0px;
	position: absolute;
	top: 0px;
	width: 14px;
}

.div-1-2 {
	background: url(b1.jpg);
	border: none;
	height: 19px;
	left: 14px;
	line-height: 19px;
	padding: 0px;
	position: absolute;
	top: 0px;
	width: 462px;
}

.div-1-3 {
	background: url(b2.jpg);
	border: none;
	height: 438px;
	left: 476px;
	line-height: 438px;
	padding: 0px;
	position: absolute;
	top: 0px;
	width: 15px;
}

.div-1-4 {
	background: #009966;
	border: none;
	height: 400px;
	left: 14px;
	line-height: 400px;
	padding: 0px;
	text-align: center;
	position: absolute;
	top: 19px;
	width: 462px;
	color: #FFFFFF;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 24px;
	font-weight: bolder;
}

.div-1-5 {
	background: url(b1.jpg);
	border: none;
	height: 19px;
	left: 14px;
	line-height: 19px;
	padding: 0px;
	position: absolute;
	top: 419px;
	width: 462px;
}
body {
	background-color: #00FF99;
}
</style>
	</head>
	<body>
		<div class="div-1">
			<div class="div-1-1"></div>
			<div class="div-1-2"></div>
			<div class="div-1-3"></div>
			<div class="div-1-4">Qui inserire i contenuti</div>
			<div class="div-1-5"></div>
		</div>
	</body>
</html>

**fcaldera** · 16-02-2009, 00:48

Originariamente inviato da Gufo

<body>
<div class="div-1">
<div class="div-1-1"></div>
<div class="div-1-2"></div>
<div class="div-1-3"></div>
<div class="div-1-4">Qui inserire i contenuti</div>
<div class="div-1-5"></div>
</div>
</body>
</html>
[/CODE]

Sinceramente se devo inserire 4 div vuoti per creare un bordo (che presumo ottengano l'effetto solo per certi tipi di bordo ripetuti, visto che imposti l'height per ciascuno di essi), preferisco rifiutarmi di farlo del tutto, questo tipo di soluzione, senza offesa, è l'antitesi della scalabilità e manutenibilità.

La prima soluzione sarebbe già migliore se non fosse che vincoli l'altezza dei div (cosa decisamente da evitare se non conosci a priori quanto testo dovrai inserirvi e pregando che l'utente non aumenti il font-size tramite browser)

Credo che sia uno di quei casi in cui sarebbe più indicato l'uso di javascript non intrusivo,
magari da eseguire solo su quei browser che non supportano i bordi-immagine.

**Gufo** · 16-02-2009, 01:22

Originariamente inviato da fcaldera
Sinceramente se devo inserire 4 div vuoti per creare un bordo (che presumo ottengano l'effetto solo per certi tipi di bordo ripetuti, visto che imposti l'height per ciascuno di essi), preferisco rifiutarmi di farlo del tutto, questo tipo di soluzione, senza offesa, è l'antitesi della scalabilità e manutenibilità.

La prima soluzione sarebbe già migliore se non fosse che vincoli l'altezza dei div (cosa decisamente da evitare se non conosci a priori quanto testo dovrai inserirvi e pregando che l'utente non aumenti il font-size tramite browser)

Credo che sia uno di quei casi in cui sarebbe più indicato l'uso di javascript non intrusivo,
magari da eseguire solo su quei browser che non supportano i bordi-immagine.

La prima cosa che ho detto era che è un pagliativo che non sapevo fin a che punto convenisse, io l'ho postato solo perchè mi è stato chiesto

Discussione: bordo div con immagine

Strumenti discussione

Ricerca discussione

Visualizza

bordo div con immagine

Permessi di invio