Переделайте центровщик. Оберните еще в 1 блок.
Немного перепишите стили для nav. И все у вас будет Ок =)
p.s. вот он цены барыжит за такой шаблон =)
1 лайк
Там вообще по всему сайту цены какие-то дикие, ИМХО.
Ну так-то на битриксе делает все, я сначала не посмотрел )
Цены норм для битиркса) вполне нормальные 
.aside-community input[type="radio"] + label {
…
padding: 10px 15.2px;
…
}
Ответ кроется тут, про то что ТЭГ выпадает)
1 лайк
Ясно, я не знал про Битрикс. Погуглил немного.
<offtop>
А на сайте у автора интересная «пасхалка», если её можно так назвать: у ссылки-логотипа title на языке Ктулху.
</offtop>
Красавчик… Кодировку на сайте криво юзает =)
Выпадающий блок поправил. Структуру header изменил вроде правильно, но nav убрал, отпала в нем необходимость, хотя и сам header не используется в стиилях.
Было так:
Стало так:
Адаптивность хотелось бы сделать, буду читать об этом, но сейчас не знаю дааже с чего начать, потому и вопросов пока нет.
Еще раз скажу: семантичность важней, необязательно каждый блок должен стилизоваться. Пусть он останется пустым nav в виде обертки, но он будет указывать роботам, что это главная навигация.
Про .wrapper-container в hedaer'e уже правильно 
Тут хочется сказать про кнопку:
<div><a class="button" href="#reedmore">Read More</a></div>
Зачем использовать пустой ДИВ? Можно отступ сделать и от родителя, либо с помощью «соседнего» селектора.
Цитату .article-quote лучше сделать с помощью специального тега blockquote.
P.s. Пожалуйста, вставьте в следующий раз исходный код и после его выделения нажмите CTRL+K
P.s.s. Вас самого не пугает такая запись у body: padding:8px 0 0 0, неужели так задумано? о_0
1 лайк
- За семантику понял, сделал с nav и header, спасибо за настойчивую рекомендацию.
- Лишний div убрал. Скорее всего изначально без него сделал, но потом что-то корректировал и добавил.
- Весь блок цитаты сделал в blockquote, имя автора в cite.
- Сделал Padding: 8px 0 0; (убрал один 0)
Можно сделать так:
Padding: 0;
Padding-top: 8px;
Но здесь вопрос личных предпочтений, мне ближе одна строка, а не две.
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Calm</title>
<meta name="description" content="">
<meta name="keywords" content="">
<link href="style.css" rel="stylesheet">
<link href='http://fonts.googleapis.com/css?family=Lato:400,700,400italic,700italic' rel='stylesheet' type='text/css'>
</head>
<body>
<header>
<div class="nav-container">
<div class="wrapper-container">
<span>Free Creative Simple Portfolio</span>
<nav>
<ul class="nav-menu">
<li><a href="#home">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#portfolio">Portfolio</a></li>
<li><a class="active" href="#blog">Blog</a></li>
<li><a href="#contact">Contact</a></li>
<li><input type="search"></li>
</ul>
</nav>
</div>
</div>
<div class="page-heading wrapper-container">
<h1>Blog</h1>
<p>What we Think, latest news</p>
</div>
</header>
<div>
<div class="wrapper-container main-background">
<div class="column-left">
<article>
<img src="../calm/article-first.jpg" alt="A good old Standard Post for Computer Clusters" title="A good old Standard Post for Computer Clusters">
<div class="article-heading h2-first">
<h2>A good old Standard Post for Computer Clusters</h2>
<ul class="article-statistic">
<li>June 3, 2013</li>
<li>12 Comments</li>
<li>Public ,News</li>
<li>124 Views</li>
</ul>
</div>
<div class="article-preview">
The components of a cluster are usually connected to each other through fast local area networks (“LAN”), with each node (computer used as a server) running its own instance of an operating system. Computer clusters emerged as a result of convergence of a number of computing trends including the availability of low cost microprocessors, high speed networks, and software for high performance distributed computing.
</div>
<a class="button" href="#reedmore">Read More</a>
</article>
<article>
<video controls poster="../calm/article-video.jpg">
<source src="#" type="video/mpg4">
<source src="#" type="video/ogg">
<source src="#" type="video/webm">
</video>
<div class="article-heading h2-second">
<h2>The Cure – Disintegration</h2>
<ul class="article-statistic">
<li>June 3, 2013</li>
<li>23 Comments</li>
<li>Public ,News</li>
<li>307 Views</li>
</ul>
</div>
<div class="article-preview">
The components of a cluster are usually connected to each other through fast local area networks (“LAN”), with each node (computer used as a server) running its own instance of an operating system. Computer clusters emerged as a result of convergence.
</div>
</article>
<blockquote>
<p>There are two ways to be rich: One is by acquiring much, and the other is by desiring little</p>
<cite>- Jackie French Koller</cite>
</blockquote>
<ul class="page-number">
<li><a class="active" href="#1">1</a>
<li><a href="#2">2</a>
<li><a href="#3">3</a>
<li><a href="#4">4</a>
<li><a href="#5">5</a>
</ul>
<div class="pagination">
<a href="#back"></a>
<a href="#forward"></a>
</div>
</div>
<aside>
<ul class="aside-social">
<li>
<a href="#rss"></a>
<div class="aside-social-stats">+1000</div>
</li>
<li>
<a href="#facebook"></a>
<div class="aside-social-stats">1241</div>
</li>
<li>
<a href="#twitter"></a>
<div class="aside-social-stats">2541</div>
</li>
<li>
<a href="#dribbble"></a>
<div class="aside-social-stats">5474</div>
</li>
</ul>
<div class="aside-categories">
<div class="aside-title">Categories</div>
<table class="aside-categories-left">
<tr>
<td><a href="#technology">Technology</a></td>
<td>( 25 )</td>
</tr>
<tr>
<td><a href="#news">News</a></td>
<td>( 11 )</td>
</tr>
<tr>
<td><a href="#photography">Photography</a></td>
<td>( 21 )</td>
</tr>
<tr>
<td><a href="#design">Design</a></td>
<td>( 10 )</td>
</tr>
<tr>
<td><a href="#web-design">Web Design</a></td>
<td>( 5 )</td>
</tr>
</table>
<table class="aside-categories-right">
<tr>
<td><a href="#development">Development</a></td>
<td>( 11 )</td>
</tr>
<tr>
<td><a href="#html5-css3">HTML5&CSS3</a></td>
<td>( 22 )</td>
</tr>
<tr>
<td><a href="#javascript">JavaScript></a></td>
<td>( 02 )</td>
</tr>
<tr>
<td><a href="#tutorials">Tutorials</a></td>
<td>( 25 )</td>
</tr>
<tr>
<td><a href="#other">Other</a></td>
<td>( 70 )</td>
</tr>
</table>
</div>
<ul class="aside-community">
<li>
<input type="radio" name="inset" id="inset-1" checked>
<label for="inset-1">Popular</label>
<div>
<ul class="aside-popular">
<li>
<img src="../calm/aside-popular1.jpg" alt="Popular">
<a href="#popular1">Simple Audio Post with The Whole Kaboodle ..</a>
<p>21 March 2013</p>
</li>
<li>
<img src="../calm/aside-popular2.jpg" alt="Popular">
<a href="#popular2">Morbi iaculis viverra metus sed</a>
<p>21 March 2013</p>
</li>
<li>
<img src="../calm/aside-popular3.jpg" alt="Popular">
<a href="#popular3">Duis a lorem enim sodales dui liquam lectus diam</a>
<p>21 March 2013</p>
</li>
<li>
<img src="../calm/aside-popular4.jpg" alt="Popular">
<a href="#popular4">Standard Post with The blog</a>
<p>21 March 2013</p>
</li>
</ul>
</div>
</li>
<li>
<input type="radio" name="inset" id="inset-2">
<label for="inset-2">Recent</label>
<div class="aside-recent">
<p><a href="#post1">Curabitur pharetra, ante!</a><br>
<span>23 January 2015</span></p>
<p><a href="#post2">Gentle Marimba by Alastair Cameron</a><br>
<span>23 January 2015</span></p>
<p><a href="#post3">Curabitur pharetra, ante!</a><br>
<span>22 January 2015</span></p>
<p><a href="#post4">Gentle Marimba by Alastair Cameron</a><br>
<span>21 January 2015</span></p>
<p><a href="#post2">Jemma Lewis by Gerard Willis</a><br>
<span>21 January 2015</span></p>
</div>
</li>
<li>
<input type="radio" name="inset" id="inset-3">
<label for="inset-3">Comments</label>
<div>
<ul class="aside-comments">
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
</li>
<li>
<input type="radio" name="inset" id="inset-4">
<label for="inset-4">Tags</label>
<div class="aside-community-tags">
<a href="#windows10">Windows 10</a><a href="#apple">Apple</a><a href="#paint">Paint</a><a href="#cms">CMS</a><a href="#twitter">Twitter</a><a href="#html5">HTML5</a><a href="#wordpress">WordPress</a><a href="#php">PHP</a><a href="#facebook">Facebook</a><a href="#google">Google</a><a href="#photoshop">Photoshop</a><a href="#linux">Linux</a><a href="#python">Python</a><a href="#css3">CSS3</a><a href="#gnu">GNU</a><a href="#html-academy">HTML Academy</a><a href="#adobe">Adobe</a><a href="#telegram">Telegram</a><a href="#android">Android</a><a href="#c++">C++</a><a href="#windows-phone">Windows Phone</a><a href="#watsapp">WatsApp</a><a href="#iphone6">iPhone 6</a><a href="#yahoo">Yahoo</a><a href="#ios">iOS</a><a href="#bing">Bing</a><a href="#mozilla-firefox">Mozilla Firefox</a><a href="#habrahabr">Habrahabr</a><a href="#joomla">Joomla</a><a href="#mobile">Mobile</a><a href="#mac">Mac</a><a href="#javascript">Javascript</a><a href="#intel">Intel</a><a href="#instagram">Instagram</a><a href="#drupal">Drupal</a>
</div>
</li>
</ul>
<div class="aside-ads">
<div class="aside-title">Ads 140x140</div>
<a href="#ads1"><img src="http://dmink.ru/calm/aside-ads.jpg" alt="ads-140x140"></a>
<a href="#ads2"><img src="http://dmink.ru/calm/aside-ads.jpg" alt="ads-140x140"></a>
<a href="#ads3"><img src="http://dmink.ru/calm/aside-ads.jpg" alt="ads-140x140"></a>
<a href="#ads4"><img src="http://dmink.ru/calm/aside-ads.jpg" alt="ads-140x140"></a>
</div>
<div class="aside-flickr-img">
<div class="aside-title">Flickr images</div>
<a href="#flickr-image1"><img src="../calm/flickr-image1.jpg" alt="flickr-image"></a>
<a href="#flickr-image2"><img src="../calm/flickr-image2.jpg" alt="flickr-image"></a>
<a href="#flickr-image3"><img src="../calm/flickr-image3.jpg" alt="flickr-image"></a>
<a href="#flickr-image4"><img src="../calm/flickr-image4.jpg" alt="flickr-image"></a>
<a href="#flickr-image5"><img src="../calm/flickr-image5.jpg" alt="flickr-image"></a>
<a href="#flickr-image6"><img src="../calm/flickr-image6.jpg" alt="flickr-image"></a>
<a href="#flickr-image7"><img src="../calm/flickr-image7.jpg" alt="flickr-image"></a>
<a href="#flickr-image8"><img src="../calm/flickr-image8.jpg" alt="flickr-image"></a>
</div>
<div class="aside-tags">
<div class="aside-title">Tag</div>
<a href="#classic">Classic</a><a href="#apple">Apple</a><a href="#photo">Photo</a><a href="#videos">Videos</a><a href="#art">Art</a><a href="#youtube">YouTube</a><a href="#standard">Standard</a><a href="#music">Music</a><a href="#wordpress">Wordpress</a><a href="#painting">Painting</a><a href="#data">Data</a><a href="#gaming">Gaming</a><a href="#awesome">Awesome</a>
</div>
<div class="aside-title">Newsletter</div>
<form action="#subscribe" method="get">
<input type="text" placeholder="Your email address"><br>
<input class="button" type="submit" name="email" value="Subscribe">
</form>
</aside>
</div>
</div>
<footer>
<div class="wrapper-container">
<ul class="footer-content">
<li>
<h3>About Us</h3>
<p>Duis id eros ac eros cursus gravida a non magna. Sed vitae nisl diam, non sollicitudin mi. In dui arcu, rhoncus ac consequat eget, cursus sit amet risus.</p>
<p>Address: Street 9890, New Something 1234, Country</p>
<p>Telephone: 1234 5678</p>
<p>Fax: 9876 5432</p>
<ul class="footer-social">
<li><a href="#twitter"></a></li>
<li><a href="#facebook"></a></li>
<li><a href="#flickr"></a></li>
<li><a href="#dribbble"></a></li>
<li><a href="#instagram"></a></li>
</ul>
</li>
<li>
<h3>Latest post</h3>
<p><a href="#post1">Curabitur pharetra, ante!</a><br>
<span>25 April 2013</span></p>
<p><a href="#post2">Gentle Marimba by Alastair Cameron</a><br>
<span>01 May 2013</span></p>
<p><a href="#post3">Curabitur pharetra, ante!</a><br>
<span>25 April 2013</span></p>
<p><a href="#post4">Gentle Marimba by Alastair Cameron</a><br>
<span>01 May 2013</span></p>
</li>
<li>
<h3>Latest comments</h3>
<div>
<a href="#comment1">Dann Petty on Curabitur pharetra, ante lobortis dictum.</a>
</div>
<div>
<a href="#comment2">Kevin Kalde on Aliquam vulputate, pede vel vehicula accumsan, mi neque rutrum erat, eu congue orci lorem eget lorem.</a>
</div>
<div>
<a href="#comment3">Sean McCabe on Class aptent taciti sociosqu ad litora torquent per</a>
</div>
</li>
<li>
<h3>Flickr photostream</h3>
<a href="#photostream1"><img src="../calm/photostream1.jpg" alt="photostream"></a>
<a href="#photostream2"><img src="../calm/photostream2.jpg" alt="photostream"></a>
<a href="#photostream3"><img src="../calm/photostream3.jpg" alt="photostream"></a>
<a href="#photostream4"><img src="../calm/photostream4.jpg" alt="photostream"></a>
<a href="#photostream5"><img src="../calm/photostream5.jpg" alt="photostream"></a>
<a href="#photostream6"><img src="../calm/photostream6.jpg" alt="photostream"></a>
<a href="#photostream7"><img src="../calm/photostream7.jpg" alt="photostream"></a>
<a href="#photostream8"><img src="../calm/photostream8.jpg" alt="photostream"></a>
<a href="#photostream9"><img src="../calm/photostream9.jpg" alt="photostream"></a>
<a href="#photostream10"><img src="../calm/photostream10.jpg" alt="photostream"></a>
<a href="#photostream11"><img src="../calm/photostream11.jpg" alt="photostream"></a>
<a href="#photostream12"><img src="../calm/photostream12.jpg" alt="photostream"></a>
</li>
</ul>
<hr>
<div class="footer-copyright">
Copyright 2013 Calm. All Rights Reserved.
</div>
<ul class="footer-menu">
<li><a href="#home">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#portfolio">Portfolio</a></li>
<li><a href="#blog">Blog</a></li>
<li><a href="#features">Features</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</div>
</footer>
</body>
</html>
1 лайк
CSS
html,
body {
margin: 0;
padding: 8px 0 0;
}
body {
font-family: "Lato", Arial, sans-serif;
font-size: 13px;
background: url("../calm/bg-header.jpg") no-repeat 50% 85px,
#34495E url("../calm/background.jpg");
}
a {
text-decoration: none;
}
.wrapper-container {
width: 1170px;
margin: 0 auto;
}
.main-background {
background: white;
border-radius: 4px;
}
.nav-container {
color: #bdc3c7;
height: 77px;
background: white;
}
.nav-menu input[type="search"] {
line-height: 20px;
border: 1px solid #bdc3c7;
background: url("../calm/search-icon.png") no-repeat 100% 50%;
}
.nav-menu {
float: right;
list-style: none;
margin: 0;
padding: 0;
}
.nav-menu li {
display: inline-block;
}
.nav-menu a {
display: block;
color: #707070;
padding: 13px 16px;
margin-top: 20px;
text-transform: uppercase;
font-weight: bold;
}
.nav-menu a:hover {
border-radius: 4px;
background: #1abc9c;
color: white;
}
.nav-container span {
float: left;
font-size: 12px;
margin: 0;
padding: 38px 50px 10px 100px;
background: url("../calm/logo.png") no-repeat 0 28px;
}
.page-heading {
height: 186px;
color: white;
}
.page-heading p {
font-size: 15px
}
h1 {
font-size: 42px;
text-transform: uppercase;
margin: 0;
padding-top: 75px;
}
.column-left {
float: left;
width: 770px;
padding: 30px 15px 30px 30px;
background: white;
border-radius: 7px 0 0 7px;
}
aside {
float: right;
width: 310px;
padding: 30px 30px 30px 15px;
background: white;
border-radius: 0 7px 7px 0;
}
article {
margin-bottom: 55px;
}
.article-heading {
padding: 23px 0 15px 77px;
}
h2 {
font-size: 22px;
color: #34495e;
margin: 0;
}
.h2-first {
background: url("../calm/article-pic-01.png") no-repeat 0 20px;
}
.h2-second {
background: url("../calm/article-pic-02.png") no-repeat 0 20px;
}
.article-statistic {
font-size: 14px;
list-style: none;
color: #d0d3d7;
margin: 0;
padding: 0;
}
.article-statistic li {
display: inline-block;
padding: 10px 0 5px 25px;
}
.article-statistic li:first-child {
background: url("../calm/article-date.png") no-repeat 0 60%;
}
.article-statistic li:nth-child(2){
margin-left: 25px;
background: url("../calm/article-comments.png") no-repeat 0 60%;
}
.article-statistic li:nth-child(3) {
margin-left: 25px;
background: url("../calm/article-public.png") no-repeat 0 60%;
}
.article-statistic li:last-child {
margin-left: 25px;
background: url("../calm/article-views.png") no-repeat 0 60%;
}
.article-preview {
font-size: 17px;
color: #a1a8af;
}
.article-preview .button {
margin-top: 35px;
}
blockquote {
font-size: 24px;
color: white;
margin: 0;
padding: 1px 45px 25px 100px;
border-radius: 4px;
background: url("../calm/article-quote.png") no-repeat 27px 35px,
#1abc9c;
}
cite {
font-size: 18px;
font-style: normal;
padding: 0;
margin: 0;
}
video {
width: 100%;
height: 370px;
color: #1abc9c;
}
.button{
display: inline-block;
font-size: 17px;
font-weight: bold;
color: white;
background: #1abc9c;
padding: 10px 16px;
border-radius: 4px;
}
.button:hover,
.pagination a:hover,
.aside-social a:hover,
.aside-tags a:hover,
.aside-community-tags a:hover {
opacity: 0.8;
}
article .button {
margin-top: 25px;
}
.page-number {
float: left;
list-style: none;
font-size: 16px;
font-weight: bold;
padding: 0;
margin-top: 53px;
}
.page-number li{
display: inline-block;
margin-right: 4px;
}
.page-number a {
display: block;
color: #34495e;
background: #ecf0f1;
padding: 11px 19px;
border-radius: 4px;
}
.page-number a:hover,
a.active {
color: white;
background: #1abc9c;
}
.pagination {
float: right;
}
.pagination a {
display: inline-block;
height: 40px;
width: 46px;
margin-top: 53px;
margin-left: 4px;
background: #1abc9c;
border-radius: 4px;
}
.pagination a:first-child {
background: url("../calm/page-back.png") no-repeat 50% 50%,
#1abc9c;
}
.pagination a:last-child {
background: url("../calm/page-forward.png") no-repeat 50% 50%,
#1abc9c;
}
.aside-title {
font-size: 16px;
font-weight: bold;
color: #34495e;
margin: 25px 0 10px 0;
padding: 4px 0 12px 7px;
border-left: 3px solid #1abc9c;
border-bottom: 1px solid #e7e7e7;
}
.aside-social {
list-style: none;
color: #444444;
padding: 0;
margin: 0;
}
.aside-social li {
display: inline-block;
text-align: center;
width: 60px;
}
.aside-social li:not(:last-child) {
margin-right: 20px;
}
.aside-social a {
display: block;
height: 38px;
}
.aside-social-stats {
background: #e7e7e7;
padding: 5px 0;
box-shadow: 0 1px 0 0 #d9d9d9;
}
.aside-social li:first-child a {
box-shadow: 0 1px 0 0 #f73905;
background: url("../calm/aside-rss.png") no-repeat 50% 50%,
#fb7922;
}
.aside-social li:nth-child(2) a {
box-shadow: 0 1px 0 0 #0d1f5d;
background: url("../calm/aside-fb.png") no-repeat 50% 50%,
#3a599a;
}
.aside-social li:nth-child(3) a {
box-shadow: 0 1px 0 0 #1173c7;
background: url("../calm/aside-tw.png") no-repeat 50% 50%,
#41abe1;
}
.aside-social li:last-child a {
box-shadow: 0 1px 0 0 #d7174a;
background: url("../calm/aside-db.png") no-repeat 50% 50%,
#ea4c89;
}
aside table a {
color: #707070;
}
aside table a:hover {
border-bottom: 1px dotted #707070;
}
aside table {
color: #707070;
width: 140px;
margin-bottom: 30px;
}
.aside-categories-left {
float: left;
}
.aside-categories-right {
float: right;
}
aside table td {
padding: 8px 0;
border-bottom: 1px solid #e7e7e7;
}
aside table td:last-child {
text-align: right;
}
.aside-community {
position: relative;
list-style: none;
height: 305px;
margin: 0;
padding: 0;
}
.aside-community li div {
position: absolute;
top: 38px;
margin-left: 3px;
}
.aside-community input[type="radio"] {
display: none;
position: absolute;
}
.aside-community input[type="radio"] + label {
float: left;
vertical-align: top;
padding: 10px 15.1px;
margin-right: 5px;
background: #ebeef2;
cursor: pointer;
box-shadow: 0 1px 0 0 #1abc9c;
}
.aside-community li:last-child label {
margin-right: 0;
}
.aside-community input[type="radio"] + label:hover {
background: #1abc9c;
color: white;
}
.aside-community input[type="radio"]:checked + label {
position: relative;
background: #1abc9c;
color: white;
cursor: default;
}
.aside-community input[type="radio"] ~ div {
display: none;
}
.aside-community input[type="radio"]:checked ~ div {
display: block;
margin-top: 10px;
}
.aside-popular {
list-style: none;
margin: 0;
padding: 0;
}
.aside-popular li {
display: block;
position: relative;
font-size: 14px;
height: 57px;
padding-left: 71px;
margin-bottom: 10px;
}
.aside-popular li img {
position: absolute;
top: 0;
left: 0;
box-shadow: 0 0 0 1px #e6e6e6;
}
.aside-popular li p {
font-size: 12px;
color: #5f5f5f;
padding-left: 25px;
background: url("../calm/aside-popular-date.jpg") no-repeat 0 50%;
}
.aside-popular a {
color: #444444;
}
.aside-popular a:hover {
border-bottom: 1px dotted #444444;
}
.aside-community-tags a {
display: inline-block;
padding: 10px 10px 10px 0;
}
.aside-ads a {
float: left;
margin-right: 30px;
box-shadow: 1px 1px 0 0 #eaeaea;
}
.aside-ads a:first-of-type {
margin-bottom: 20px;
}
.aside-flickr-img a {
float: left;
margin-right: 20.5px;
box-shadow: 1px 1px 0 0 #dfdfdf;
}
.aside-flickr-img a:first-of-type,
.aside-flickr-img a:nth-of-type(2),
.aside-flickr-img a:nth-of-type(3),
.aside-flickr-img a:nth-of-type(4) {
margin-bottom: 18px;
}
.aside-flickr-img a:nth-of-type(4n),
.aside-ads a:nth-of-type(2n),
.footer-content>li:last-child a:nth-of-type(4n){
margin-right: 0;
}
.aside-tags a,
.aside-community-tags a {
display: inline-block;
color: #666666;
background: #e7e7e7;
padding: 3px 10px;
margin: 0 5px 6px 0;
box-shadow: 0 1px 0 0 #d9d9d9;
border-radius: 4px;
}
input[type="text"] {
font-size: 14px;
width: 292px;
color: #bdc3c7;
padding: 15px 0 15px 15px;
margin-bottom: 12px;
border: 1px solid #dcdcdc;
box-shadow: 0 3px 0 -2px #f1f1f1;
border-radius: 4px;
}
input[type="submit"] {
float: right;
border: none;
cursor: pointer;
}
footer {
color: #bdc3c7;
margin-top: 55px;
background: white;
}
h3 {
color: #707070;
font-size: 16px;
text-transform: uppercase;
}
.footer-content {
list-style: none;
margin: 0;
padding: 0;
}
.footer-content>li {
display: inline-block;
margin-right: 37px;
margin-top: 70px;
vertical-align: top;
}
.footer-content>li span,
.aside-recent span {
font-size: 10px;
}
.footer-content>li:first-child {
width: 280px;
}
.footer-content>li:nth-child(2) {
width: 230px;
}
.footer-content>li:nth-child(2) a,
.footer-content>li:nth-child(3) a {
color: #bdc3c7;
}
.footer-content>li:nth-child(2) a:hover,
.footer-content>li:nth-child(3) a:hover {
border-bottom: 1px dotted #bdc3c7;
}
.footer-content>li:nth-child(3) {
width: 270px;
}
.footer-content>li:last-child {
width: 270px;
margin-right: 0;
}
.footer-content>li div {
background: #ecf0f1;
margin-bottom: 10px;
padding: 15px 19px;
}
.footer-social {
list-style: none;
padding: 0;
margin: 30px 0 0 0;
}
.footer-social li {
display: inline-block;
}
.footer-social a {
display: block;
width: 42px;
height: 36px;
border-radius: 4px;
}
.footer-social li a:hover {
border-radius: 4px;
}
.footer-social li:first-child a {
background: url("../calm/footer-twitter.png") no-repeat 50% 50%,
#ecf0f1;
}
.footer-social li:nth-child(2) a {
background: url("../calm/footer-facebook.png") no-repeat 50% 50%,
#ecf0f1;
}
.footer-social li:nth-child(3) a {
background: url("../calm/footer-flickr.png") no-repeat 50% 50%,
#ecf0f1;
}
.footer-social li:nth-child(4) a {
background: url("../calm/footer-dribbble.png") no-repeat 50% 50%,
#ecf0f1;
}
.footer-social li:last-child a {
background: url("../calm/footer-instagram.png") no-repeat 50% 50%,
#ecf0f1;
}
.footer-social li:first-child a:hover {
background: url("../calm/footer-twitter-logo.png") no-repeat 50% 50%,
#00acee;
}
.footer-social li:nth-child(2) a:hover {
background: url("../calm/footer-facebook-logo.png") no-repeat 50% 50%,
#3a599a;
}
.footer-social li:nth-child(3) a:hover {
background: url("../calm/footer-flickr-logo.png") no-repeat 50% 50%,
white;
}
.footer-social li:nth-child(4) a:hover {
background: url("../calm/footer-dribbble-logo.png") no-repeat 50% 50%,
#ea4c89;
}
.footer-social li:last-child a:hover{
background: url("../calm/footer-instagram-logo.png") no-repeat 50% 50%,
#2E5E86;
}
.footer-content>li:last-child a {
float: left;
margin: 0 15px 15px 0;
box-shadow: 0 0 0 3px white,
0 0 0 4px #ecf0f1;
}
.footer-content>li:last-child a:hover {
box-shadow: 0 0 0 3px white,
0 0 0 4px #bdc3c7;
}
.footer-content>li:last-child img,
.aside-flickr-img img,
.aside-ads img {
display: block;
}
hr {
border: none;
background-color: #bdc3c7;
height: 1px;
margin-top: 35px;
}
.footer-copyright {
float: left;
font-size: 12px;
color: #707070;
margin: 29px 0;
}
.footer-menu {
float: right;
font-size: 12px;
color: #707070;
list-style: none;
margin: 24px 0;
padding: 0;
}
.footer-menu li {
display: inline-block;
}
.footer-menu a {
display: block;
color: #707070;
padding: 5px 10px;
border-radius: 4px;
}
.footer-menu a:hover{
color: white;
background: #1abc9c;
border-radius: 4px;
}
.wrapper-container::after,
.pagination::after,
.aside-categories::after,
.aside-community::after,
.aside-ads::after,
.aside-flickr-img::after {
content: "";
display: table;
clear: both;
}Я больше имел ввиду что за отступ сверху получается, разве такой нужен? Но соглашусь, лучше сокращенную запись)
Отступ нужен, он в макете есть
Сам уже понял, прописал этот отступ в другом месте
Не-не-не, выталкивать блок внутренним отступом плохая затея =) лучше header'у
1 лайк
Влез в тему с иным вопросом к автору.
Как ты разместил свой сайт в интернете? где, по чём?
Все просто.
-
Выбираете хостинг (он будут обслуживать ваш сайт). У меня ukraine.com.ua, российский самый популярный вроде reg.ru. Но какая страна не имеет значения на самом деле, важно чтобы была хорошая тех. поддержка и удобство.
-
Здесь же на хостинге придумываете домен (имя сайта), проверяете его на незанятость и покупаете. В зоне .ru недорого, 1 год - 200-250 р. примерно.
-
Оплачиваете сам хостинг. Можно помесячно, можно на год. У меня 1 месяц - 190 р.
Вот и все. Пользуетесь сайтом. Для практики/знакомством с CMS можно сразу же на хостинге поустанавливать разные CMS.
Есть много бесплатных хостингов, платить ни за что не надо, но это будет не ваш сайт, имя не ваше, плюс не везде есть доступ к коду.
1 лайк
Спасибо большое!
Если память не изменяет - cite, семантически, указывает на источник цитаты, название произведения а не его автора.
http://web-standards.ru/articles/cite-blockquote-reloaded/
Не все однозначно с этом тегом
… разработчики могут вновь использовать для того, чтобы разными способами сослаться на источник: например, указать название работы, имя автора или ссылку на источник…