Добрый день.
Совсем недавно начал верстать первый сайт, вначале все шло хорошо, но потом начал натыкаться на "подводные камни".
Index'ная страница (остальные страницы будут на ее основе) почти сверстана с использованием кусков кода и применении их на резиновый шаблон, однако нужна помощь знакотов в этом деле.
Вот несколько проблем с которыми столкнулся:
1) Никак не могу закрепить ёлки по бокам, если использовать position:fixed; то они появляются не там где надо (надо чтобы они были под шапкой и меню, а также чтобы они были на фоне)
2) Как сделать чтобы боковые панели (ёлки) были под хеадером и меню, чтобы при прокручивании станицы вниз елки занимали всю высоту страницы?
3) Как сделать чтобы боковые панели (ёлки) при изменении размера окна оставались 100% в высоту ?
4) Еще не могу сделать так чтобы акордеон уменьшался в размере при изменении размера страницы.
Html:
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
50.
51.
52.
53.
54.
55.
56.
57.
58.
59.
60.
61.
62.
63.
64.
65.
66.
67.
68.
69.
70.
71.
72.
73.
74.
75.
76.
77.
78.
79.
80.
81.
82.
83.
84.
85.
86.
87.
88.
89.
90.
91.
92.
93.
94.
95.
96.
97.
98.
99.
100.
101.
102.
103.
104.
105.
106.
107.
108.
109.
110.
111.
112.
113.
114.
115.
116.
117.
118.
119.
120.
121.
122.
123.
124.
125.
126.
127.
128.
129.
130.
131.
132.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>ООО "Гарант-Сервис"</title>
<link href="style.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#topnav li").prepend("<span></span>");
$("#topnav li").each(function() { var linkText = $(this).find("a").html();
$(this).find("span").show().html(linkText); });
$("#topnav li").hover(function() {
$(this).find("span").stop().animate({ marginTop: "-40" }, 250);} , function() {
$(this).find("span").stop().animate({marginTop: "0" }, 250);});});
</script>
</head>
<body>
<div id="container">
<div id="header">
<a href="index.html">
<div id="Logo">
</div> </a>
<div id="newyear">
</div>
<div id="reklama">
</div>
<div id="reklama2">
</div>
</div>
<a href="index.html"><div style="z-index: -1; position:fixed; top:130px; left:2%; box-shadow: 0 0 10px #FFF;"><img src="img/logo.jpg" width="210px"></div></a>
<div id="line">
<div class="con">
<ul id="topnav" class="v1">
<li><a href="ChaikTV.html">Чайковский ТВ</a></li>
<li><a href="kabelnoe.html">Кабельное телевидение</a></li>
<li><a href="Telecom.html">Интернет</a></li>
<li><a href="Oborudovanie.html">Торговое оборудование</a></li>
<li><a href="CTO.html">Контрольно-кассовая техника</a></li>
<li><a href="Remont.html">Ремонт аудио-видео</a></li>
</ul>
</div></div>
<div style="float:left; position:fixed; margin-top:200px; margin-left:2%; width:11%; overflow:hidden;">
<section class="ac-container">
<div>
<input id="ac-1" name="accordion-1" type="checkbox" />
<label for="ac-1">Торговое оборудование</label>
<article class="ac-large">
<ul style="list-style: none; margin-left:-5%;">
<p><li><a href="oborudovanie/KKT.html#kass">Кассы</a>
<li><a href="oborudovanie/KKT.html#fisk">Фискальные регистраторы</a>
<li><a href="oborudovanie/KKT.html#aspd">АСПД</a>
<li><a href="oborudovanie/detekt.html#det">Детекторы валют</a>
<li><a href="oborudovanie/detekt.html#scet">Счетчики купюр и монет</a>
<li><a href="oborudovanie/scaner.html">Сканеры</a>
<li><a href="oborudovanie/check.html">Чековая лента и этикетки</a>
<li><a href="oborudovanie/others.html#den">Денежные ящики</a>
<li><a href="oborudovanie/others.html#prin">Принтеры этикеток</a>
<li><a href="oborudovanie/others.html#pos">POS компьютеры</a>
<li><a href="oborudovanie/others.html#pro">Прочее</a></ul></p>
</article>
</div>
<div>
<input id="ac-2" name="accordion-1" type="checkbox" />
<label for="ac-2">Кабельное телевидение</label>
<article class="ac-small">
<ul style="list-style: none; margin-left:-5%;">
<p><li><a href="kabelnoe.html#usl">Об услуге</a>
<li><a href="kabelnoe.html#podkl">Как подключиться</a>
<li><a href="kabelnoe.html#opl">Как оплатить</a>
<li><a href="kabelnoe.html#vop">Часто задаваемые вопросы</a>
<li><a href="kabelnoe.html#otz">Отзывы</a></ul>
</article>
</div>
<div>
<input id="ac-3" name="accordion-1" type="checkbox" />
<label for="ac-3">Центр тех обслуживания</label>
<article class="ac-small">
<ul style="list-style: none; margin-left:-5%;">
<p><li><a href="kabelnoe.html#usl">Об услуге</a>
<li><a href="kabelnoe.html#podkl">Автоматизация</a>
<li><a href="kabelnoe.html#opl">Наши услуги</a>
<li><a href="kabelnoe.html#tar">Преимущества</a>
<li><a href="kabelnoe.html#vop">Часто задаваемые вопросы</a></ul>
</article>
</div>
<div>
<input id="ac-4" name="accordion-1" type="checkbox" />
<label for="ac-4">Контакты</label>
<article class="ac-medium">
<ul style="list-style: none; margin-left:-5%;">
<p><li>Наш адрес: </p>
<p><li>г. Чайковский </p>
<p><li>ул.Мира д.8 </p>
<BR>
<p><li>Контактные телефоны: </p>
<p><li>Секретарь - 3-38-00</p>
<p><li>Диспетчер - 3-19-19</p>
<p><li>Бухгалтерия - 3-26-00</p></ul>
</article>
</div>
</section>
</div>
<div id="reklama3">
</div>
<div id="treeleft">
</div>
<div id="content" style="text-indent:20px; padding-left:2%; padding-right:2%;">
<h1>Main Content </h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent aliquam, justo convallis luctus rutrum, erat nulla fermentum diam, at nonummy quam ante ac quam.Maecenas urna purus, fermentum id, molestie in, commodo porttitor, felis. Nam blandit quam ut lacus. Quisque ornare risus quis ligula. Phasellus tristique purus a augue condimentum adipiscing. Aenean sagittis. Etiam leo pede, rhoncus venenatis, tristique in, vulputate at, odio. Donec et ipsum et sapien vehicula nonummy. Suspendisse potenti. Fusce varius urna id quam. Sed neque mi, varius eget, tincidunt nec, suscipit id, libero. In eget purus. Vestibulum ut nisl. Donec eu mi sed turpis feugiat feugiat. Integer turpis arcu, pellentesque eget, cursus et, fermentum ut, sapien. Fusce metus mi, eleifend sollicitudin, molestie id, varius et, nibh. Donec nec libero.</p>
</p>
</div>
<div onClick="window.location='#'" style="cursor:pointer" id="upper">
</div>
<div id="treeright">
</div>
<div id="clear"></div>
<div id="Footer"></div>
</div>
</body>
</html>
CSS:
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
50.
51.
52.
53.
54.
55.
56.
57.
58.
59.
60.
61.
62.
63.
64.
65.
66.
67.
68.
69.
70.
71.
72.
73.
74.
75.
76.
77.
78.
79.
80.
81.
82.
83.
84.
85.
86.
87.
88.
89.
90.
91.
92.
93.
94.
95.
96.
97.
98.
99.
100.
101.
102.
103.
104.
105.
106.
107.
108.
109.
110.
111.
112.
113.
114.
115.
116.
117.
118.
119.
120.
121.
122.
123.
124.
125.
126.
127.
128.
129.
130.
131.
132.
133.
134.
135.
136.
137.
138.
139.
140.
141.
142.
143.
144.
145.
146.
147.
148.
149.
150.
151.
152.
153.
154.
155.
156.
157.
158.
159.
160.
161.
162.
163.
164.
165.
166.
167.
168.
169.
170.
171.
172.
173.
174.
175.
176.
177.
178.
179.
180.
181.
182.
183.
184.
185.
186.
187.
188.
189.
190.
191.
192.
193.
194.
195.
196.
197.
198.
199.
200.
201.
202.
203.
204.
205.
206.
207.
208.
209.
210.
211.
212.
213.
214.
215.
216.
217.
218.
219.
220.
221.
222.
223.
224.
225.
226.
227.
228.
229.
230.
231.
232.
233.
234.
235.
236.
237.
238.
239.
240.
241.
242.
243.
244.
245.
246.
247.
248.
249.
250.
251.
252.
253.
254.
255.
256.
257.
258.
259.
260.
261.
262.
263.
264.
265.
266.
267.
268.
269.
270.
271.
272.
273.
274.
275.
276.
277.
278.
279.
280.
281.
282.
283.
284.
285.
286.
287.
288.
289.
290.
291.
292.
293.
294.
295.
296.
297.
298.
299.
300.
301.
302.
303.
304.
305.
306.
307.
308.
309.
310.
311.
312.
313.
314.
315.
316.
317.
318.
319.
320.
321.
322.
323.
324.
325.
326.
327.
328.
329.
330.
331.
332.
333.
334.
335.
336.
337.
338.
339.
340.
341.
342.
343.
344.
345.
346.
347.
348.
349.
350.
351.
352.
353.
body, html {
margin: 0px;
padding: 0px;
text-align: center;
height: 100%;
width: 100%;
background-image : url(img/BackFon.png);
background-attachment: scroll;
}
#container {
margin: 0 auto;
text-align: left;
min-width: 600px;
height: 100%;
width:expression( (document.compatMode && document.compatMode == 'CSS1Compat') ? (document.documentElement.clientWidth < 550?"550px":"auto"):(document.body.clientWidth < 550?"550px":"auto"));
z-index: -2;
overflow: hidden;
}
#header {
margin: 0 auto;
width: 100%;
height: 15%;
min-width:768px;
background-image : url(img/Head.jpg);
background-repeat: no-repeat;
z-index: 1;
float:left;
}
#Logo {
max-width: 100%;
width: 25%;
min-width: 5%;
margin: 0 auto;
height: 127px;
background-image : url(img/Logo.jpg);
background-repeat: no-repeat;
background-size: 100%;
float: left;
margin-top: 20px;
margin-left: 20px;
z-index: 2;
}
#treeright {
background-image : url(img/treer.png);
background-repeat: no-repeat;
background-size: 100%;
float: right;
width: 32.5%;
height: 100%;
z-index: -1;
}
#treeleft {
background-image : url(img/tree.png);
background-repeat: no-repeat;
background-size: 100%;
float:left;
width:27%;
height: 100%;
z-index:0;}
#newyear {
max-width: 100%;
width: 15%;
min-width: 5%;
background-image : url(img/newyear2.png);
background-repeat: no-repeat;
background-size: 100%;
float:left;
height: 150px;
z-index:1;
margin-left:2%;}
#reklama {
max-width: 100%;
width: 25%;
min-width: 10%;
margin:1%;
float:right;
height:150px;
background-image : url(img/Reklama.jpg);
background-repeat: no-repeat;
background-size: 100%;
z-index: 3;
clear:inherit;
}
#reklama2 {
max-width: 100%;
width: 25%;
min-width: 5%;
margin:1%;
float:right;
height:150px;
background-image : url(img/Reklama.jpg);
background-repeat: no-repeat;
background-size: 100%;
z-index: 3;
clear:inherit;
}
#line {
margin: 0;
z-index: -1;
height: 30px;
width: 100%;
background-image : url(img/backmenu.gif);
box-shadow: 0px 0px 10px #333;
float:left;
}
.con {
width: 920px;
height: 30px;
margin: 0 auto;
}
ul#topnav {
margin: 0px;
padding: 0;
list-style: none;
font-size: 0.8em;
font-family:"Franklin Gothic Heavy", "Franklin Gothic Medium", Tahoma;
clear: both;
float: left;
width: 920px;
overflow: hidden;
}
ul#topnav li{
margin: 0;
padding: 0;
overflow: hidden;
float:inherit;
height:30px;
}
ul#topnav a, ul#topnav span {
padding: 5px 5px;
float: left;
text-decoration: none;
color: #fff;
text-transform: uppercase;
clear: both;
height: 20px;
line-height: 20px;
background: #1d1d1d;
}
ul#topnav a { color: #7bc441; }
ul#topnav span {
display: none;
}
ul#topnav.v1 span{
background: url(img/bg.gif) repeat-x left top;
text-shadow: 0px 0px 5px #333;
}
img {
border: none;
z-index: inherit;
}
ul#topnav.v1 a{
color: #555;
background: url(img/bg.gif) repeat-x left bottom;
}
#content {
text-indent:20px; padding-left:2%; padding-right:2%;
text-indent: 20px;
text-align:justify;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
-moz-box-shadow: 0px 0px 4px #000000;
-webkit-box-shadow: 0px 0px 4px #000000;
box-shadow: 0px 0px 4px #000000;
background-image : url(img/FrontFon.png);
padding: 10px;
margin: 0px;
margin-left: 15%;
margin-right: 15%;
z-index: 1;
position: absolute;
top: 210px;
float:left;
min-width: 400px;
}
#bottons{
}
#content h1 {
margin: 0px;
}
#content p {
margin: 0px;
padding: 0px;
}
#clear {
height: 0;
font-size: 1px;
line-height: 0px;
clear: both;
}
#upper {
background-image : url(img/Upper.png);
width: 103px;
height: 37px;
z-index: 3;
top: 90%;
margin-left:2%;
position: fixed;
}
#upper:hover {
background-image : url(img/Upperhov.png);
width: 103px;
height: 37px;
z-index: 3;
top: 90%;
margin-left:2%;
position: fixed;
}
#footer {
background-color: #d292bc;
z-index: -2;
float: left;
}
#footer p {
margin: 0px;
padding: 10px 0;
}
/*---------------------------------------АКОРДЕОН-----------------------------------*/
/*---------------------------------------АКОРДЕОН-----------------------------------*/
/*---------------------------------------АКОРДЕОН-----------------------------------*/
.ac-container{
width: 400px;
margin: 10px auto 30px auto;
text-align: left;
}
.ac-container label{
font-family: 'BebasNeueRegular', 'Arial Narrow', Arial, sans-serif;
padding: 5px 14px;
position: relative;
z-index: 20;
display: block;
height: 30px;
cursor: pointer;
color: #777;
text-shadow: 1px 1px 1px rgba(255,255,255,0.8);
line-height: 33px;
font-size: 19px;
background: #ffffff;
background: -moz-linear-gradient(top, #ffffff 1%, #eaeaea 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(1%,#ffffff), color-stop(100%,#eaeaea));
background: -webkit-linear-gradient(top, #ffffff 1%,#eaeaea 100%);
background: -o-linear-gradient(top, #ffffff 1%,#eaeaea 100%);
background: -ms-linear-gradient(top, #ffffff 1%,#eaeaea 100%);
background: linear-gradient(top, #ffffff 1%,#eaeaea 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#eaeaea',GradientType=0 );
box-shadow:
0px 0px 0px 1px rgba(155,155,155,0.3),
1px 0px 0px 0px rgba(255,255,255,0.9) inset,
0px 2px 2px rgba(0,0,0,0.1);
}
.ac-container label:hover{
background: #fff;
}
.ac-container input:checked + label,
.ac-container input:checked + label:hover{
background: #FA9143;
color: #666666;
text-shadow: 0px 1px 1px rgba(255,255,255, 0.6);
box-shadow: 0px 0px 0px 1px rgba(155,155,155,0.3),
0px 2px 2px rgba(0,0,0,0.1);
}
.ac-container label:hover:after,
.ac-container input:checked + label:hover:after{
content: '';
position: absolute;
width: 24px;
height: 24px;
right: 13px;
top: 7px;
background: transparent url(../images/arrow_down.png) no-repeat center center;
}
.ac-container input:checked + label:hover:after{
background-image: url(../images/arrow_up.png);
}
.ac-container input{
display: none;
}
.ac-container article{
background: rgba(255, 255, 255, 0.5);
margin-top: -1px;
min-width:400px;
overflow: hidden;
height: 0px;
position:relative;
z-index: 10;
-webkit-transition: height 0.3s ease-in-out, box-shadow 0.6s linear;
-moz-transition: height 0.3s ease-in-out, box-shadow 0.6s linear;
-o-transition: height 0.3s ease-in-out, box-shadow 0.6s linear;
-ms-transition: height 0.3s ease-in-out, box-shadow 0.6s linear;
transition: height 0.3s ease-in-out, box-shadow 0.6s linear;
}
.ac-container article p{
font-style: italic;
color: #777;
line-height: 10px;
font-size: 14px;
padding: -10px;
margin:0px;
text-shadow: 1px 1px 1px rgba(255,255,255,0.8);
}
.ac-container input:checked ~ article{
-webkit-transition: height 0.5s ease-in-out, box-shadow 0.1s linear;
-moz-transition: height 0.5s ease-in-out, box-shadow 0.1s linear;
-o-transition: height 0.5s ease-in-out, box-shadow 0.1s linear;
-ms-transition: height 0.5s ease-in-out, box-shadow 0.1s linear;
transition: height 0.5s ease-in-out, box-shadow 0.1s linear;
box-shadow: 0px 0px 0px 1px rgba(155,155,155,0.3);
}
.ac-container input:checked ~ article.ac-small{
height: 140px;
}
.ac-container input:checked ~ article.ac-medium{
height: 200px;
}
.ac-container input:checked ~ article.ac-large{
height: 250px;
}
Спасибо. |
