ジグザグhtml css

Question

私はHTMLとCSSに関して問題があります。

ジグザグ「ボーダー」を含むデザイン。これらのジグザグはページの上部と下部にあります。 これらの枠線の間は白い紙です。紙はジグザグの境界線の下になければなりません。 そして、ここでは、ページの一番下にどのように見えるかです：：ここで

は、それが今のページの一番上にどのように見えるかです

ここに私のHTMLれる：

<div id="glava"> 
    <div id="ogrodje-glava"> 
     <div id="scr"></div> 
     <div id="rob-glave"></div> 
     <div id="logo"></div> 
    </div> 
</div> 
<div id="sredina"> 
    <div id="ogrodje"> 
     <div id="leva"></div> 
     <div id="desna"> 
      <div class="vsebina"></div> 
     </div> 
    </div> 

ここに私のCSSがあります：

@CHARSET "UTF-8"; 

h1, h2, h3, h4, h5, h6, p, body, td {margin:0; padding:0;} 

body { font-family:"Palatino Linotype", "Book Antiqua", Palatino, serif ; background-color: #fff; background-image: url("../img/papir-ozadje.jpg"); background-repeat: repeat-all;} 

td {font-size:13px; min-width:50px;} 

table {padding-bottom:15px} 

.clear {clear:both;} 

a {text-decoration:none; color:#333} 

#glava {background-image: url("../img/background-head.png"); 
     background-repeat: repeat-x; 
     width:100%; 
     height:210px; 
     margin-top:10px; 

     } 

#ogrodje-glava {width:1025px; margin: 0 auto; padding:0; height:210px; } 

#noga {background-image: url("../img/background-noga.png"); 
     background-repeat: repeat-x; 
     width:100%; 
     height:160px; 
     position:relative; 

} 

#crta {width:100%; border:1px solid white; position:absolute; top:15px;} 



#logo { background-image: url("../img/logo.gif"); 
     background-repeat: no-repeat; width:172px; height:172px; 
     margin-left:35px; 
     position:relative; 
     top:-10px; 
     } 

#scr { background-image: url("../img/scr.gif"); 
     background-repeat: no-repeat; width:817px; height:41px; 
     float:right; margin-top:85px;} 

#rob-glave {width:800px; height:84px; 
     float:right; 
     /*background-image: url("../img/background-head2.gif"); 
     background-repeat: repeat-x;*/ 
     } 

#sredina { width:100%; background-image: url("../img/ozadje-papir.jpeg"); 
     background-repeat: repeat-y;} 

#ogrodje {width:1030px; margin: 0 auto; min-height:750px; padding:0; /*border:1px solid black;*/} 

#ogrodje #leva {width:230px; min-height:750px; /*border:1px solid black;*/ margin:0; padding:0; float:left;} 

#ogrodje #desna {width:800px; min-height:750px; max-height:750px; /*border:1px solid green;*/ margin:0; padding:0; 
       background-color:#fff; float:left; overflow: auto; padding-bottom:10px; position:relative; } 

.letnice {margin-top:20px; border-bottom:1px solid #828284; height:10px; margin-bottom:40px;} 
.letnice ul {width:100%; margin: 0 auto; padding:0; margin:0; } 
.item-106, .item-107, .item-108, .item-109, .item-110 { float:left; width:90px; list-style:none; 
      background-image: url("../img/letnica.png"); 
      background-repeat: no-repeat; height:25px; text-align:center; margin-left:45px; 

      } 

.item-110 {margin-left:70px;} 



.texti { padding-left:10px;} 

.jeziki ul {/*width:510px; height:30px; background-image: url("../img/jeziki-ozadje.jpg"); 
      background-repeat: no-repeat; */ width:510px; height:30px; 
      background-color:#f1efe5; margin-left:70px; } 

.jeziki li {float:left; width:123px; height:30px; } 
.jeziki .item-102 { list-style-image: url("../img/english.gif"); padding-top:5px; padding-right:2px; } 
.jeziki .item-103 { list-style-image: url("../img/france.gif"); padding-top:5px; padding-right:2px;} 
.jeziki .item-104 { list-style-image: url("../img/english.gif"); padding-top:5px; padding-right:2px;} 
.jeziki .item-105 { list-style-image: url("../img/france.gif"); padding-top:5px; padding-right:2px;} 
.jeziki a {text-decoration:none; color:#666; font-size:13px; } 
.jeziki .current a{color:#BE1E2D;} 

.letnica p {text-decoration:none; color:#333; padding-top:5px; } 


#galerija { height:750px; width:133px; margin:0 auto;} 

#galerija .slika { width:133px; height:100px; float:left; margin-top:5px; border:8px solid white;} 

#galerija .slika-h { visibility:hidden;} 



.besedilo { padding:0px; margin:0px;} 

.besedilo p {font-size:13px; } 
.besedilo h1 {font-size:20px; color:#000; /*border:1px solid black;*/ text-transform:uppercase; padding-bottom:10px;} 
.besedilo h2 {font-size:15px; color:#BE1E2D; /*border:1px solid blue;*/} 
.besedilo h3 {font-size:13px; color:#000; font-style:italic;} 


/** PROGRAMME ***/ 
h4 {font-size:25px; color:#000;} /* programme podnaslov */ 


/*.besedilo p {font-size:13px; } 
.besedilo h1 {font-size:23px; color:#000; padding-top:15px; border:1px solid black;} 
.besedilo h2 {font-size:19px; color:#000; border:1px solid blue;} 
.besedilo h3 {font-size:16px; color:#BE1E2D; } 
*/ 

#info {width:1030px; margin: 0 auto; height:150px; font-size:13px;} 
#info .prazen {width:300px; height:145px; float:left;} 
#info .info {width:200px; height:145px; float:left; padding-top:15px;} 
#info .info2 {width:200px; height:145px; float:left; padding-top:15px;} 
#info .info3 {width:200px; height:145px; float:left; padding-top:15px;} 

#info .info h4 {background-image: url("../img/info-noga.gif"); background-repeat: no-repeat; height:30px; margin-top:5px;} 
#info .info p {padding-left:15px;} 
#info .info p .ime {font-style:italic; } 
#info .info2 p .ime {font-style:italic; } 
#info .info3 p .ime {font-style:italic; } 


/***** JOOMLA *****/ 
.item-page {padding-left: 40px; padding-top:10px; padding-right: 70px; padding-bottom:10px;} 
.item-page p {text-align:justify;} 
.item-page hr { border:1px dotted #BE1E2D; margin-right:300px;} 
.item-page .logo{margin:0 auto;} 
.item-page .home {font-size:15px;} 

私はどのように解決する必要があります何か問題がありますか？

敬具

Answer 1

私は、あなたが探していることのz-index属性だと思います。

http://www.w3schools.com/cssref/pr_pos_z-index.asp