зигзаг html css - PullRequest
Новая
       27

зигзаг html css

0 голосов
/ 15 марта 2012

У меня проблема с HTML и CSS.

Дизайн включает зигзаг "бордюр".Эти зигзаги появляются вверху и внизу страницы.Между этими границами находится белая бумага.Бумага должна находиться под зигзагообразными границами.

Вот как она выглядит сейчас вверху страницы: http://okinformatika.com/zig-zag/zig-zag-top.jpeg А вот как она выглядит внизу страницы: http://okinformatika.com/zig-zag/zig-zag.jpeg

Вот мой 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;}

Есть предложения, как решить проблему?

С уважением

1 Ответ

0 голосов
/ 30 марта 2012

Я думаю, что вы ищете атрибут z-index.

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

...