zig zag html css

Question

J'ai un problème concernant HTML et CSS.

La conception inclut zig zag "border". Ces zig-zag viennent en haut et en bas de la page. Entre ces frontières est un livre blanc. Le papier doit être placé sous des bordures en zigzag.

Voici comment il regarde en haut de la page maintenant: Et voici à quoi il ressemble au bas de la page:

Voici mon 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> 

et voici mon 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;} 

Toutes les suggestions comment dois-je résoudre problème?

Meilleures salutations

Answer 1

Je pense que ce que vous cherchez est l'attribut z-index.

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