Box con angoli stondati e bordo

**nextpic** · 23-07-2009, 22:44

Ciao a tutti, ho letto un pò di post ma non ho trovato nulla di cha possa fare al caso mio. Il problema è questo. Con PS ho creato un retangolo (vedasi allegato). Ho scomposto questa immagine in 3 parti: 1)la parte superiore; 2) la parte inferiore e 3) ho tagliato la parte centrale creando una striscia alta 10px e larga 550px che vorrei urare come corpo del box in modo da creare i bordi e l'interno del box. Ora però non riesco a scrivere il codice html e css per ricreare questo box. Come posso fare?
Grazie

**kodem** · 23-07-2009, 23:10

io ho risolto così:

codice html

codice:

<div id="contenitore"> 
<div id="sopra"></div> 
<div id="centro"> 
 
</div> 
<div id="sotto"></div> 
</div>

codice css

codice:

div#contenitore {

width: px; 
/*larghezza immagine*/  
margin: 0 auto;  

} 
div#sopra {  
width: px; /*larghezza immagine*/  
height: px; /*altezza immagine*/  
background: url("percorso/immaginesopra.jpg") no-repeat;    
} 
div#centro {  
width: px; /*larghezza immagine*/ 
height: px; /*altezza immagine*/  
background: url("percorso/immaginecentro.jpg") repeat-y;   
}
 div#sotto {  
width: px; /*larghezza immagine*/  
height: px; /*altezza immagine*/  
background: url("percorso/immaginesotto.jpg") no-repeat;   
}

**nextpic** · 23-07-2009, 23:26

ora provero anche la tua soluzione e intanto ti ringrazio. Io ho risolto così:

codice html:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Documento senza titolo</title>
<link rel="stylesheet" type="text/css" href="riq.css">
</head>

<body>
<div class="boxarr">
<h1>News</h1>

aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</p>

bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</p>
</div>
</body>
</html>

mentre per il css:
body {
margin:0;
padding:0;
background:url(Immagini/sfo.gif) repeat;
}
.boxarr{
margin:0;
padding-bottom:20px;
background: url(Immagini/botton.gif) bottom left no-repeat;
width: 550px;
}

.boxarr h1{
margin:0;
font:16px Verdana, Geneva, sans-serif;
color:#FFF;
text-align:center;
padding-bottom:2px;
background: url(Immagini/top.gif) top left no-repeat;
}

.boxarr p{
margin:0;
padding:0 5px;
background:url(Immagini/i2bordi.gif) repeat-y;
}

Che dici potrà andare?

Discussione: Box con angoli stondati e bordo

Strumenti discussione

Ricerca discussione

Visualizza

Box con angoli stondati e bordo

Permessi di invio