我对 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;}
有什么建议我应该如何解决问题?
此致