Верстка макета, простая задача, но мозг отказывается работать

241

15 декабря 2016, 16:24

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

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

Answer 1

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

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;}

Answer 2

*{ 
 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>

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