1

Доброго времени суток! То ли лето, то мне пора в отпуск, но что-то я заглумился с одним макетом. Дизайнеры люди творческие, и всякие штуки придумывают, вот попался мне макет и ломаю голову я, хотя опыта верстки хоть отбавляй. Может посоветуете что нить. Такая задача: введите сюда описание изображения

серый 1 и 2 участки - это меню и футер, тут ничего специфичного, далее желтая область блок с текстом, высота динамическая, в зависимости сколько напишут, всегда должен быть одной ширины и центрироваться по вертикале относительно малинового 4 блока. 4 малиновый блок - занимает всю оставшуюся часть, внутри содержит слайдер изображений, при изменений размеров экрана должен уменьшаться в ширине кадрируя картинку, и 5 это рамочка, которая ровно по контуру огибает 3й блок(с учетом динамической высоты 3го блока) и заходит на картинку, как показано на скрине, при изменений экрана всегда имеет ровные отступы справа и слева. Вот как все реализовать без js ума не приложу, а с js мне кажется не совсем кошерная верстка. Вот собственно задача, сильно не пинайте, либо переработал либо лето сказывается. Буду рад советам.

1
  • Вы начните, а мы поможем, а если вопрос ставить так - то фриланс в помощь. 30 июн 2015 в 16:20

2 ответа 2

2

Вопрос, полагаю, скорее всего не актуален. Но из спортивного интереса попробовал сделать. Получилось без каких-либо сильных заморочек, но с небольшими ограничениями. Верстка исключает скролл, почти все размеры и отступы в процентах, высота контента боковушки по идее не должна превысить дозволенного ему места.

http://jsfiddle.net/fycfyvjq/

<div class="wrapper">
<div class="header"></div>
<div class="content">

    <div class="table-wrapper">
        <table>
            <tr>
                <td style="width: 20%;"></td>
                <td>
                    <div class="image"></div>
                </td>
            </tr>
        </table>
    </div>

    <div class="table-wrapper">
        <table>
            <tr>
                <td>
                    <div class="inner-wrapper">
                        <div class="inner-left">
                            <div class="text-left">111 <br> 222</div>
                            </div>
                            <div class="inner-right">
                                <div class="text-right"></div>
                            </div>
                            <div style="clear: both;"></div>
                        </div>
                        </td>
                    </tr>
                </table>
            </div>

    </div>
    <div class="footer"></div>
</div>

CSS

*{-moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;}
html, body{height: 100%;}
body{margin: 0;}
table{width: 100%; height: 100%; border-collapse: collapse;}
table td{padding: 0; height: 100%;}

.wrapper{height: 100%;}
.header, .footer{height: 10%; background: #818181;}
.content{position: relative; height: 80%;}
.image{height: 100%; background: rgba(237, 0, 140, 0.2);}
.text{height: 100%; border: 1px solid grey; border-right: 0;}
.text-right{height: 100%; border: 1px solid grey; border-left: 0;}
.table-wrapper{position: absolute; left: 0; top: 0; right: 0; height: 100%;}
.inner-wrapper{position: relative;}
.inner-left{float: left; width: 20%; padding-left: 2%; height: 100%; position: relative;}
.inner-right{float: right; width: 80%; padding-right: 2%; height: 100%; position: absolute; right: 0;}
.text-left{border: 1px solid grey; border-right: 0; padding: 20px; background: rgba(255, 255, 0, 0.2);}
.text-right{border: 1px solid grey; border-left: 0;}
0

*{
 margin:0;
 padding:0;
}
.header,.footer{
 width:100%;
 height:100px;
 background:lightgrey;
 position:relative;
 top:0;
}
.wrapper{
 width:100%;
 min-height:500px;
 background:;
 overflow:hidden;
}
.wrapper .aside,.article{
 float:left;
 box-sizing:border-box;
 min-height:500px;
}
.aside{
  width:25%;
  background:#f1f1f1;
}
.article{
  width:75%;
  background:lightblue;
}
<!DOCTYPE HTML>
<html lang="en-US">
<head>
	<meta charset="UTF-8">
	<title></title>
	<link rel="stylesheet" href="style.css" />
</head>
<body>
	<header class="header">
	
	</header>
	<div class="wrapper">
		 <aside class="aside">
		 
		 </aside>
		 <article class="article">
		 
		 </article>
	</div>
	<footer class="footer">
	
	</footer>
</body>
</html>

вроде бы так -- посмотрите

7
  • Спасибо за ответ!, но вы немного не правильно поняли. 5ть - это не блок, а рамка, которая должна опоясывать два блока - желтый и малиновый, а блок 4 не ограничевается рамкой под номером 5ть, блок 4е это все малинового цвета, получается большой блок со слайдером - малиновый, блок поменьше - желтый, с текстом, центрируется по вертикали, относительного малинового, а рамка, опоясывает из как на скрине. При этом у желтого блока фиксированная ширина, а у малиновый жмется по высоте.
    – DexColt
    1 июл 2015 в 5:20
  • я просто не совсем въехал - малиновый он другой высоты что ли ?
    – user33274
    1 июл 2015 в 10:11
  • cloud.mail.ru/public/5EzL/KMZUjGij6 вот скачай это , там архив - в нём вёрстка - посмотри -- больше не буду верстать , надоело
    – user33274
    1 июл 2015 в 11:16
  • спасибо вам за труды. Но вы не много не по теме, мне нужен не просто двух колоночный макет.
    – DexColt
    1 июл 2015 в 13:32
  • я не понимаю ваше желание - в моде минимализм , а городьба - лишнее , две или три колонки -- это нормально , больше (из моего опыта ) не надо не кому
    – user33274
    1 июл 2015 в 15:29

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.