D_P_A_K_O_H
Member | Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
Здравствуйте ув знатоки КСС.
ПОследний раз занимался веб дизайном много лет назад,когда ксс тока начали появляться. сейчас возникла острая необходимость в сайте, который вот уже делаю несколько дней.
в оригинальном шаблоне присутствует КСС код слайдера - меняющейся картинки и цитаты в теле страницы. после изменения шаблона - изменилась и область для слайдов и цитат, я не могу изменить код CSS так чтобы он работал на измененной странице:
ВОТ ОРИГИНАЛ ШАБЛОНА с оригинальным расположением:
http://cdn.livedemo00.template-help.com:82/wt_39935/
там видно, что при нажатии на 1 2 и 3 меняется картинка, выезжает новая, а также меняется цитата!
ВОТ КОД МОЕГО ИЗМЕНЕННОГО ШАБЛОНА где изменены размеры картинки.
СЛАЙДЕР заккоментен, в середине кода.
Код:
<html>
<head>
<title></title>
<link rel="stylesheet" type="text/css" media="screen" href="css/slider.css">
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
</head>
<body bgcolor="#2D282C" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<table id="Table_01" width="977" height="1246" border="0" cellpadding="0" cellspacing="0">
<tr>
<td>
<img src="images/img_01.jpg" width="14" height="153" alt=""></td>
<td colspan="4" bgcolor="#FFFFFF">
</td>
<td colspan="3">
</td>
<td>
</td>
<td>
<img src="images/spacer.gif" width="1" height="153" alt=""></td>
</tr>
<tr>
<td>
<img src="images/img_05.jpg" width="14" height="76" alt=""></td>
<td colspan="7">
<img src="images/img_06.jpg" width="942" height="76" alt=""></td>
<td>
<img src="images/img_07.gif" width="20" height="76" alt=""></td>
<td>
<img src="images/spacer.gif" width="1" height="76" alt=""></td>
</tr>
<tr>
<td>
<img src="images/img_08.jpg" width="14" height="254" alt=""></td>
<td colspan="3">
<!---===========slider============ -->
<div id="slide">
<div class="slider">
<ul class="items">
<li><img src="images/slide0.jpg" alt="">
<div class="banner">“QUOTE 1<br> <span>AUTHOR1</span><br><strong>Founder</strong></div>
</li>
<li><img src="images/slide-1.jpg" alt="">
<div class="banner">QUOTE 2<br> <span>AUTHOR 2</span><br><strong>Founder</strong></div>
</li>
<li><img src="images/slide-2.jpg" alt="">
<div class="banner">“QUOTE 3<br> <span>AUTHOR</span><br><strong>Founder</strong></div>
</li>
</ul>
<div class="clear"></div>
</div>
<a href="#" class="prev"> </a><a href="#" class="next"> </a>
</div>
==========slider==============-->
</td>
<td colspan="4">
</td>
<td>
<img src="images/img_11.gif" width="20" height="254" alt=""></td>
<td>
<img src="images/spacer.gif" width="1" height="254" alt=""></td>
</tr>
<tr>
<td rowspan="5">
<img src="images/img_12.jpg" width="14" height="762" alt=""></td>
<td colspan="2">
<img src="images/img_13.gif" width="7" height="115" alt=""></td>
<td>
<img src="images/img_14.jpg" width="314" height="115" alt=""></td>
<td colspan="2">
<img src="images/img_15.jpg" width="292" height="115" alt=""></td>
<td colspan="2">
<img src="images/img_16.jpg" width="329" height="115" alt=""></td>
<td>
<img src="images/img_17.gif" width="20" height="115" alt=""></td>
<td>
<img src="images/spacer.gif" width="1" height="115" alt=""></td>
</tr>
<tr>
<td>
<img src="images/img_18.gif" width="1" height="1" alt=""></td>
<td rowspan="3">
<img src="images/img_19.jpg" width="6" height="608" alt=""></td>
<td colspan="5" rowspan="3">
</td>
<td rowspan="2">
<img src="images/img_21.gif" width="20" height="17" alt=""></td>
<td>
<img src="images/spacer.gif" width="1" height="1" alt=""></td>
</tr>
<tr>
<td rowspan="2">
<img src="images/img_22.jpg" width="1" height="607" alt=""></td>
<td>
<img src="images/spacer.gif" width="1" height="16" alt=""></td>
</tr>
<tr>
<td>
<img src="images/img_23.gif" width="20" height="591" alt=""></td>
<td>
<img src="images/spacer.gif" width="1" height="591" alt=""></td>
</tr>
<tr>
<td colspan="2">
<img src="images/img_24.gif" width="7" height="39" alt=""></td>
<td colspan="4">
<img src="images/img_25.gif" width="637" height="39" alt=""></td>
<td>
<img src="images/img_26.gif" width="298" height="39" alt=""></td>
<td>
<img src="images/img_27.gif" width="20" height="39" alt=""></td>
<td>
<img src="images/spacer.gif" width="1" height="39" alt=""></td>
</tr>
<tr>
<td>
<img src="images/spacer.gif" width="14" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="1" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="6" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="314" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="112" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="180" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="31" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="298" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="20" height="1" alt=""></td>
<td></td>
</tr>
</table>
<!-- End Save for Web Slices -->
</body>
</html>
|
вот код SLIDER.CSS
Код:
/*--------- slider ---------*/
#slide {width:940px;position:relative; overflow:hidden; z-index:1; margin:0 auto; height:398px;}
.slider {position: relative; z-index:1;width:620px; height:398px;float:right; overflow:visible !important;}
.items {display:none;}
.banner{width: 225px;height:240px;position:absolute;top: 43px;left:-285px; z-index:15; text-align:left; line-height: 30px;
font-size: 24px;font-family: 'Fanwood Text', serif;color:#fff ;}
.banner span{font-family: "Trebuchet MS", Arial, Helvetica, sans-serif; color:#fff; font-size:16px;font-weight:normal;line-height:20px;display:inline-block; margin:28px 0 0 0;}
.banner strong{font-family: "Trebuchet MS", Arial, Helvetica, sans-serif; color:#fff; font-size:14px;font-weight:normal;color:#635d62;line-height:20px;}
.pagination {position:absolute;top:338px; z-index:1000; left:-320px;display: block;width:320px; height:59px;border-bottom:1px solid #2d282c; background: url(../images/bg-pagination.jpg) 0 0 repeat-x #1f1c1f;}
.pagination li {float:left; margin: 18px 0 0 0; font-family: "Trebuchet MS", Arial, Helvetica, sans-serif; font-size:14px;padding-right:11px; padding-left:12px;background: url(../images/bg-li-pagination.jpg) left 1px no-repeat;}
.pagination li:first-child{margin-left:9px;background:none;}
.pagination li a {display: inline-block;color:#635d62;padding:2px 10px;}
.pagination li.current a, .pagination li:hover a{color:#fff;}
.prev{background: url(../images/prev-arrow.png) 0 0 no-repeat; width: 5px; height: 9px; position:absolute; top:366px; left:254px; z-index:1000; display:block;}
.prev:hover {background-position:0 -9px;}
.next {background: url(../images/prev-next.png) 0 -9px no-repeat; width: 5px; height: 9px; position:absolute; top:366px; left:294px; z-index:1000; display:block;}
.next:hover {background-position:0 0;}
|
имен слайдов - SLIDE1.jpg side0.jpg side3.jpg
я пытался изменить код, но я ничего не понимаю про позиции и у мен вообще ничего не срабатывает(
если кто может преобразовать этот небольшой код так, чтобы в мой шаблон он вставлял правильно слайды.... я подозреваю, что для знающего КСС это займет 3 минуты прописать правильные позиции слоев на странице...
ОЧЕНЬ БЛАГОДАРЕН ЗА ПОМОЩЬ
|
Всего записей: 386 | Зарегистр. 17-09-2001 | Отправлено: 01:04 19-04-2014 | Исправлено: D_P_A_K_O_H, 01:10 19-04-2014 |
|
