вопрос
Здравствуйте, хочу попросить помощи по верстке сайта - http://astra.house/.
Я сверстал главную страницу, все хорошо, как нарисовал "тютелька в тютельку", а когда захожу в полную новость вижу следующее:
1. В общем, верхняя лента почему-то потеряла значение
2. Облака немного уехали с топа.
3. Футер вообще исчез :(
main.tpl:
style.css:
Когда верстаю всегда заморачиваюсь по поводу прижатых элементов в макете, такие как Шапка и Футер. В этот раз решил отталкиваться от одного абсолютного элемента. Потом прижал футер, посмотрев инструкции в интернете. В итоге получилось то что хотел, но не в full-story.
Я сверстал главную страницу, все хорошо, как нарисовал "тютелька в тютельку", а когда захожу в полную новость вижу следующее:
1. В общем, верхняя лента почему-то потеряла значение
position:absolute;
2. Облака немного уехали с топа.
3. Футер вообще исчез :(
main.tpl:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ru" lang="ru">
<head>
{headers}
<link rel="shortcut icon" href="{THEME}/images/favicon.ico" />
<link media="screen" href="{THEME}/style/styles.css" type="text/css" rel="stylesheet" />
<link media="screen" href="{THEME}/style/engine.css" type="text/css" rel="stylesheet" />
<script type="text/javascript" src="{THEME}/js/libs.js"></script>
<script src="http://api-maps.yandex.ru/2.1/?lang=ru_RU" type="text/javascript"></script>
</head>
<body>
{AJAX}
<div class="page">
<div class="sky">
</div>
<div style="position:absolute;z-index:4;width:791px;height:620px;margin:0 auto; bottom:0;top:0;">
<div class="ntitle">[not-aviable=showfull]Лучшие предложения[/not-aviable]</div>
<div class="feedback">
</div>
<div class="ntel">8(81367)</div>
<a href="http://astra.house/"><div class="npere"></div></a>
[aviable=main]<div class="n3">
{include file="engine/modules/blockpro/block.pro.3.php?template=hot&nocache=y&limit=3&remoteImages=y&grabRemote=y&showSmall=y&imgSize=261x261&imgQuality=90&noimage=zimg.jpg&noimageFull=zimg.jpg""}
</div>
<div class="npod">
<table cellspacing="0" cellpadding="0">
<td>
<div class="ndesc">
О нас
</div>
<div class="ndesc2">
{include file="desc.tpl"}
</div>
</td>
<td valign="top">
<div class="nnews">
<script type="text/javascript" src="//vk.com/js/api/openapi.js?115"></script>
<!-- VK Widget -->
<div id="vk_groups"></div>
<script type="text/javascript">
VK.Widgets.Group("vk_groups", {mode: 2, wide: 1, width: "224", height: "400"}, 74470192);
</script>
</div>
</td>
</table>
</div>
</div>[/aviable]
[not-aviable=main]
<div class="ncontent">{content}</div>
[/not-aviable]
<div class="lenta">
<table width="791" class="nlenta" cellspacing="0" cellpadding="0">
<td>
<a href="http://astra.house/">
<img src="{THEME}/img/logow.png" width="48" style="padding:4px 4px 0 25px;">
</a>
</td>
<td>
<div class="nbutt">
НАЙТИ НЕДВИЖИМОСТЬ
</div>
</td>
<td>
<div class="nbutt">
НАЙТИ АГЕНТА
</div>
</td>
<td>
<div class="nbutt">
УСЛУГИ
</div>
</td>
<td>
<div class="nbutt">
КАРЬЕРА
</div>
</td>
<td>
<div class="nbutt">
О КОМПАНИИ
</div>
</td>
<td>
<div class="nbutt">
КОНТАКТЫ
</div>
</td>
</table>
</div>
</div>
<div class="page-buffer"></div>
<footer class="footers">
</footer>
<footer class="footera">
</footer>
<footer class="footerb">
</footer>
<footer class="footerc">
<div style="width:791px;margin:0 auto;">
<table cellspacing="0" cellpadding="0" class="logof">
<td align="left" width="87px">
<img src="{THEME}/img/logof.png" style="margin:9px 0 0 12px;"/>
</td>
<td class="titelf" align="left">
агенство<br>
недвижимости<br>
«Астра»<br>
2014г.<br>
</td>
<td align="right">
<div class="enter"></div>
</td>
</table>
</div>
</footer>
</body>
</html>
style.css:
html, body {
height: 100%;
margin: 0;
padding: 0;
}
body {
background: #65bde6;
margin:0 auto;
}
@font-face {
font-family: 'Whipsmart';
font-style: normal;
font-weight: 400;
src: local('Whipsmart'), url('../img/JhxKN4es.woff') format('woff');
}
@font-face {
font-family: 'Philosopher';
font-style: normal;
font-weight: 400;
src: local('Philosopher'), url('../img/JtTvDyNjb.otf') format('otf');
}
@font-face {
font-family: 'Lobster';
font-style: normal;
font-weight: 400;
src: local('Lobster'), url('../img/Lobster.ttf') format('ttf');
}
.sky {
background:url('../img/sky.png') center;
position:absolute;
left:0;
z-index:1;
height:620px;
width:100%;
margin:0 auto;
}
.page {width:791px;margin: 0 auto;min-height: 100%;
margin-bottom: -50px;}
* html .page {
height: 100%;
}
.page-buffer {height:50px;}
.nlenta {margin:0 auto;font-family:Roboto Regular;font-size:14px;color:#fff;text-shadow:0px 1px 0px rgba(0,0,0,.28);text-shadow:0px 2px 0px rgba(0,0,0,.28);}
.nbutt {margin-top:8px;}
.logo {padding:11px 0 0 10px;width:146px;}
div.logo:after {content:"АСТРА";font-family: Whipsmart;font-size:48px;color:#305f6e;float:left;padding:6px 0 0 8px;}
.lenta {width:100%;height:61px;background:url('../img/lenta.png') repeat-x;position:absolute;left:0;top:0;z-index:1000;}
.nhead {position:absolute;z-index:2;}
.ntitle {position:absolute;z-index:4;left:25px;bottom:94px;font-size:36px;color:#fff;text-shadow:2px 2px 0px rgba(0,0,0,.26);font-family:'Philosopher';}
.feedback {position:absolute;z-index:6;top:66px;right:16px;width:224px;height:44px;background:url('../img/feedback.png');}
.ntel {position:absolute;z-index:6;top:108px;right:16px;font-size:18px;color:#254b64;font-family:Roboto Regular;}
.ntel:after {content:"50-829";font-size:36px;}
.npere {position:absolute;z-index:6;top:104px;left:16px;width:338px;height:168px;}
.n3 {position:absolute;top:531px;width:794px;}
.npod {position:absolute;top:800px;width:791px;}
.ndesc {font-family:'Lobster';font-size:30px;color:#fff;text-shadow:2px 2px 0px rgba(0,0,0,.27);}
.ndesc2 {font-family:Roboto REgular;font-size:14px;color:#fff;text-shadow:0px 1px 0px rgba(0,0,0,.49);}
.hood {background:rgba(255,255,255,0.33);width:791px;position:absolute;top:55px;z-index:1;padding-bottom:16px;}
.nnews {width:300px;height:400px;position:relative;}
.nnews:before {content:url('../img/news.png');width:300px;height:40px;position:absolute;top:-3px;}
/* ХОТ ХОТ ХОТ */
.zelpol {
background: rgba(146,175,69,0.63);
/* Old browsers */
background: -moz-linear-gradient(-45deg, rgba(146,175,69,0.63) 0%, rgba(93,188,36,0.63) 100%);
/* FF3.6+ */
background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,rgba(146,175,69,0.63)), color-stop(100%,rgba(93,188,36,0.63)));
/* Chrome,Safari4+ */
background: -webkit-linear-gradient(-45deg, rgba(146,175,69,0.63) 0%,rgba(93,188,36,0.63) 100%);
/* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(-45deg, rgba(146,175,69,0.63) 0%,rgba(93,188,36,0.63) 100%);
/* Opera 11.10+ */
background: -ms-linear-gradient(-45deg, rgba(146,175,69,0.63) 0%,rgba(93,188,36,0.63) 100%);
/* IE10+ */
background: linear-gradient(135deg, rgba(146,175,69,0.63) 0%,rgba(93,188,36,0.63) 100%);
/* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#92af45', endColorstr='#5dbc24',GradientType=1 );
/* IE6-9 fallback on horizontal gradient */
width:253px;
font-family:Roboto Black;
font-size:18px;
color:#fff;
text-shadow:1px 1px 0px rgba(0,0,0,.24);
padding:8px 0 6px 8px;
position:relative;
z-index:4;
margin-bottom:-24px;
top:12px;
}
.microb {
-webkit-filter: url(#blur);
-webkit-filter: blur(3px);
width:261px;
height:36px;
overflow:hidden;
margin-bottom:-48px;
}
.micro {
width:261px;
overflow:hidden;
margin-right:4px;
}
.summa {font-family:Roboto Black;font-size:24px;color:#fff;text-shadow:3px 3px 0px rgba(0,0,0,.55);position:relative;z-index:4;top:-36px;right:8px;}
div.summa:after {content:"руб";font-family:Roboto Regular;font-size:19px;padding-left:0px;}
.temnoe {
background: #1a5589;
/* Old browsers */
background: -moz-linear-gradient(top, rgba(26,85,137,0) 0%, #000000 100%);
/* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(26,85,137,0)), color-stop(100%,#000000));
/* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(26,85,137,0) 0%,#000000 100%);
/* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(26,85,137,0) 0%,#000000 100%);
/* Opera 11.10+ */
background: -ms-linear-gradient(top, rgba(26,85,137,0) 0%,#000000 100%);
/* IE10+ */
background: linear-gradient(to bottom, rgba(26,85,137,0) 0%,#000000 100%);
/* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1a5589', endColorstr='#000000',GradientType=0 );
/* IE6-9 */
width:261px;
height:261px;
margin-bottom:-261px;
position:relative;
opacity:0.34;
}
.ncontent {position:absolute;top:531px;}
/* 10 10 10 */
.summaten {float:right;position:relative;top:71px;right:14px;font-family:Roboto Black;font-size:24px;color:#000;}
div.summaten:after {content:"руб";font-family:Roboto Regular;font-size:19px;padding-left:7px;}
/* FOOTER */
.footers {background:url('../img/trava.png') center;width:100%;height:634px;}
.footera {width:100%;height:27px;background:url('../img/bot.png') repeat-y center bottom;z-index:1;position:relative;}
.footerb {width:100%;height:19px;background:#bdbdbd center bottom;z-index:1;}
.footerc {width:100%;height:84px;background:url('../img/bot.png') repeat-y center bottom;z-index:1;}
.logof {width:791px;margin:0 auto;}
.titelf {font-family:Roboto Regular;text-transform:uppercase;font-size:12px;color:#5583a0;text-shadow:1px 1px 0px rgba(0,0,0,.5);padding-top:10px;}
.enter {background:url('../img/enter.png') 0 0;width:180px;height:21px;}
.enter:hover {background-position:0 -21px;}
.enter:active {background-position:0 -42px;}
/* ПОЛНАЯ НОВОСТЬ */
.ftitle {font-size:30px;font-family:Roboto Black;color:#fff;height:75px;vertical-align:middle;text-shadow:1px 1px 0px rgba(0,0,0,.26);padding-top:94px;margin-bottom:-17px;}
.ftable {background:#fff;}
.contact {font-family:Roboto Regular;font-size:15px;padding:20px 0 8px 6px;}
.fphone {font-size:14px;color:#fff;text-decoration:none;background:#4a8cd6;padding:4px 9px 5px 9px;text-shadow:1px 1px 0px rgba(0,0,0,0.18);}
.fprice {color:#fff;font-family:Roboto Black;font-size:18px;background:#d23639;padding:11px 8px 10px 8px;position:absolute;text-shadow:0px 1px 1px rgba(0,0,0,0.44);top:27px;right:10px;}
.fprice:before {content:url('../img/price.png');position:absolute;left:-22px;top:0;}
.fprice:after {content:" руб";font-family:Roboto Regular;}
.frazdel {
background: #c1eeb1; /* Old browsers */
background: -moz-linear-gradient(left, #c1eeb1 0%, #7db9e8 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, right top, color-stop(0%,#c1eeb1), color-stop(100%,#7db9e8)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(left, #c1eeb1 0%,#7db9e8 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(left, #c1eeb1 0%,#7db9e8 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(left, #c1eeb1 0%,#7db9e8 100%); /* IE10+ */
background: linear-gradient(to right, #c1eeb1 0%,#7db9e8 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#c1eeb1', endColorstr='#7db9e8',GradientType=1 ); /* IE6-9 */
width:224px;
height:1px;
margin-left:10px;
margin-bottom:10px;
}
.ntitle2 {position:absolute;z-index:4;left:25px;top:-42px;font-size:36px;color:#fff;text-shadow:2px 2px 0px rgba(0,0,0,.26);font-family:'Philosopher';}
/* ПОХОЖИЕ НОВОСТИ */
.rtitle {position:absolute;top:5px;left:5px;font-family:Roboto Black;font-size:12px;color:#fff;width:214px;line-height:12px;z-index:26;}
.rsumma {position:absolute;bottom:1px;right:4px;font-family:Roboto Black;font-size:18px;color:#fff;z-index:26;}
.rsumma:after {content:" руб";font-family:Roboto Regular;}
.rtemnoe {
background: -moz-linear-gradient(top, rgba(0,0,0,.30) 0%, rgba(0,0,0,0) 29%, rgba(0,0,0,0) 74%, rgba(0,0,0,.30) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,0,0,.30)), color-stop(29%,rgba(0,0,0,0)), color-stop(74%,rgba(0,0,0,0)), color-stop(100%,rgba(0,0,0,.30))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(0,0,0,.30) 0%,rgba(0,0,0,0) 29%,rgba(0,0,0,0) 74%,rgba(0,0,0,.30) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(0,0,0,.30) 0%,rgba(0,0,0,0) 29%,rgba(0,0,0,0) 74%,rgba(0,0,0,.30) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, rgba(0,0,0,.30) 0%,rgba(0,0,0,0) 29%,rgba(0,0,0,0) 74%,rgba(0,0,0,.30) 100%); /* IE10+ */
background: linear-gradient(to bottom, rgba(0,0,0,.30) 0%,rgba(0,0,0,0) 29%,rgba(0,0,0,0) 74%,rgba(0,0,0,.30) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000000', endColorstr='#000000',GradientType=0 ); /* IE6-9 */
width:224px;
height:147px;
position:absolute;
top:0;
left:0;
z-index:25;
}
Когда верстаю всегда заморачиваюсь по поводу прижатых элементов в макете, такие как Шапка и Футер. В этот раз решил отталкиваться от одного абсолютного элемента. Потом прижал футер, посмотрев инструкции в интернете. В итоге получилось то что хотел, но не в full-story.
