StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

POzig zag html css
text
Body
copied!<p>I have a problem regarding HTML and CSS.</p> <p>Design include zig zag "border". Those zig-zag comes at the top and bottom of the page. Between those borders is white paper. Paper must be under zig-zag borders.</p> <p>Here is how it looks at the top of the page now: <img src="https://i.stack.imgur.com/jB7R0.jpg" alt="http://okinformatika.com/zig-zag/zig-zag-top.jpeg"> And here is how it looks at the bottom of page: <img src="https://i.stack.imgur.com/CG835.jpg" alt="http://okinformatika.com/zig-zag/zig-zag.jpeg"></p> <p>Here is my HTML:</p> <pre><code><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> </code></pre> <p>and here is my CSS:</p> <pre><code>@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;} </code></pre> <p>Any suggestions how should I resolve problem?</p> <p>Best regards</p>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload