Как сверстать такой блок

Светлана Гр. · February 26, 2013

Здравствуйте!

Есть такой макет:

ссылка на изображение, размер: 143 кбайт, 1024 x 641 точек

Задача состоит в том, как сверстать большой полупрозрачный блок.

Я использую верстку с прижатым футером.

Код:


<body id="inner">
<div id="wrapper" class="w100" style="background-image:url(maneBg_2.jpg); background-position:0 0;">
<div id="main">
	 <div id="all">
	 <header class="strip">
		 <div id="header_c">
		 <nav id="menu_l">
			 <ul>
				 <li><a href="#">Парикмахерский зал</a></li>
				 <li><a href="#">Ногтевой сервис</a></li>
				 <li><a href="#">Косметология</a></li>
				 <li><a href="#">Массаж</a></li>
			 </ul>
		 </nav><!-- /#menu_l -->
		 <nav id="menu_r">
			 <ul>
				 <li><a href="#">Солярий</a></li>
				 <li><a href="#">Контакты</a></li>
				 <li><a href="#">Наши работы</a></li>
				 <li><a href="#" class="active">Главная</a></li>
			 </ul>
		 </nav><!-- /#menu_r -->
		 <div id="cntr">
			 <div id="logo"><a href="/">Салон красоты</a></div>
		 </div><!-- /#cntr -->
		 </div><!-- /#header_c -->
	 </header>
		 <div id="content" class="w940">
			 <h1>Наши работы</h1>
		 </div><!-- /#content -->
	 </div><!-- /#all -->
</div><!-- /#main -->
<div id="footer">
<article class="center txtStyle_1 w655">
		 <article>
			 <span class="tel_f">+7(499) 123 45 67</span>
		 </article>
	 </article>
	 <footer class="w655">
	 <small>
		 <span class="elem"> </span>
			 <p class="center">2013, Салон красоты</p>
		 </small>
	 </footer>
</div><!-- /#footer -->
</div><!-- /#wrapper -->
</body>

CSS:



html{
    height:100%;
    min-width:960px;
    font-family: Arial, Helvetica, sans-serif;
    font-size:12px;
    color:#fff;
    background:#000;
}
body{
    height:100%;
    margin:0;
}
h1,h2,h3,h4,h5,h6,input,button,label,select, fieldset, textarea{
    padding:0;
    margin:0;
}
h1{
    font-size:18px;
    font-weight:normal;
    text-transform:uppercase;
}
small{
    display:block;
}
::selection{
    background:#c9aa93;
    color:#000;
}
input[type="search"]:focus{
    outline:none;
}
button::-moz-focus-inner{ /* убираем внутренний отступ у кнопки в FF, который зарезервирован для рамки при фокусе */
    padding:0;
    border:0;
}
.clearfix:after{
    content:"";
    display:block;
    clear:both;
}
.clear{
    clear:both;
}
a{
}
a:hover{
    text-decoration:none;
}
p {
    margin:0;
}
ul{
    list-style:none;
    margin:0;
    padding:0;
}
img{
    border:0;
}
.w100{
    width:100%;
}
.w940{
    width:940px;
    margin:auto;
}
#wrapper{
    position:relative;
    height:100%;
    margin:auto;
    background:url(maneBg.jpg) no-repeat 100% 100%;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='', sizingMethod='scale');
    -ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='', sizingMethod='scale')";
}

#main{
    min-height:100%;
    margin:0 0 -214px;
}
#inner #main{
    margin-bottom:-150px;
}
#all{
    padding:0 0 214px;
}
#inner #all{
    padding:0 0 150px;
}
/*
#all.h350{
    min-height:350px;
}*/
header{
    position:relative;
    padding:38px 0 0;
    height:147px;
}
.txtStyle_1{
    padding:26px 0 0;
    font-size:14px;
    font-style:italic;
    line-height:18px;
}
.txtStyle_2{
    display:block;
    font-size:12px;
    font-family:Arial, Helvetica, sans-serif;
    color:#bedb00;
    font-style:normal;
    font-weight:bold;
    text-transform:uppercase;
    letter-spacing:1px;
    padding:12px 0 0;
}
.sale{
    font-size:18px;
}
#cntr{
    margin:0 194px;
}
.nameComp{
    position:absolute;
    display:inline-block;
    width:93px;
    height:27px;
    background: url(name.png) no-repeat;
    text-indent:-9999em;
}
.center{
    text-align:center;
}
.left{
    float:left;
}
.right{
    float:right;
}
.w655{
    width:655px;
    margin:auto;
}
.w940{
    width:940px;
    margin:auto;
}
#menu_l{
    float:left;
    width:194px;
    text-align:right;
}
#menu_r{
    float:right;
    width:194px;
}
#logo{
    width:182px;
    height:123px;
    background: url(logo.png) no-repeat;
    margin:auto;
}
#logo a{
    display:block;
    height:123px;
    text-decoration:none;
    text-indent:-9999em;
    overflow:hidden;
}
#header_c{
    overflow:hidden;
    width:655px;
    margin:auto;
}
header nav ul{
    line-height:24px;
}
header nav a{
    font-family: 'Didact Gothic', sans-serif;
    color:#fff;
    font-size:11px;
    font-weight:bold;
    letter-spacing:1px;
    text-transform:uppercase;
    text-decoration:none;
}
header nav a:hover{
    text-decoration:underline;
}
header nav a.active{
    color:#bedb00;
}
#footer{
    height:214px;
    overflow:hidden;
}
#inner #footer{
    height:150px;
}
small p{
    font-size:11px;
    color:#bedb00;
}
.strip{
    background:rgba(0, 0, 0, .65);
}
.tel_f{
    display:block;
    font-family: 'Istok Web', sans-serif;
    font-size:24px;
    line-height:24px;
    font-weight:bold;
    font-style:normal;
    letter-spacing:0.1em;
    padding:6px 0 0;
}
.elem{
    display:block;
    overflow:hidden;
    background:url(elem.png) no-repeat;
    width:26px;
    height:27px;
    margin:6px auto 5px;
}

Светлана Гр. · March 1, 2013

Вот здесь находится страница: http://gardenflo.ru/salon/vnutr2_responsive.html

Не обращайте внимание на кодировку - кривые настройки сервера.

Sensei · March 1, 2013

Что-то тема продублировалась.

Я вам еще вчера предложил решение http://jsfiddle.net/sensei/bZL5H/

Светлана Гр. · March 29, 2013

Что-то тема продублировалась.
Я вам еще вчера предложил решение http://jsfiddle.net/sensei/bZL5H/

Да, я видела Ваше решение. Пока не разобралась. А не могли бы Вы объяснить Ваше решение на примере уже моей верстки?

Светлана Гр. · March 30, 2013

Все сделала в точности с Вашим примером. Получилось. Спасибо огромное! )

Sign In

Как сверстать такой блок

Question

Светлана Гр.

Link to comment

Share on other sites

4 answers to this question

Recommended Posts

Светлана Гр.

Link to comment

Share on other sites

Sensei

Link to comment

Share on other sites

Светлана Гр.

Link to comment

Share on other sites

Светлана Гр.

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information