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 that you have read and understand our privacy policy and code of conduct.

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