Резиновый макет как застваить сжиматься-разжиматься

param · June 29, 2012

Здравствуйте. Решил попробовать поверстать резиновые макеты, далеко не пошёл, взял отсюда: http://forum.htmlbook.ru/index.php?showtopic=14398&st=0. Задавал вопросы сначала там, но кажется в тему уже давно некто не ходит, поэтому решил спросить тут.

Проблемы возникли с самого начала с шапкой, у меня там идёт шесть блоков, каждый из которых содержит свой элемент, ширина блоков указана в процентах, допустим у себя с разрешением 1960 пикселей, я вижу всё нормально, при разрешение 1024 пикселя, у меня последний блок выпадет и переносится на другую строчку. Как заставить, его сжиматься-разжиматься в зависимости от разрешения.

Я не знаю нужна ли вообще шапка в данном макете, ведь потом надо будет заставить содержание контента как то коррелировать с элементами шапки...

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<meta charset="utf-8" />
	<!--[if IE]><script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
	<title></title>
	<link rel="stylesheet" href="style.css" type="text/css" />
<style type="text/css">

</style>
</head>

<body>

<div id="wrapper">

<header id="header">
		<div id="logo"></div>
        <div id="logotext">
            <span id="phonecode">(499)</span>
            <span id="logophone">234-56-78</span>
		</div>
        <div id="woman"></div>
        <div id="onlinebancking">
        	<span>online банкинг</span>
            <a href="#">Твой банк всегда на связи</a>
        </div>
        <div id="upbuttons">
        	<div id="buttons"><img src="images/buttons.jpg" width="48" height="28"></div>
      	</div>
   		<div id="languages">
   	 		<div id="upline">
      			<span><a href="#">rus</a> <a href="#">eng</a> <a href="#">deu</a></span>
      		</div>
   		</div>
  </header>

	<section id="middle">

		<div id="container">
			<div id="content">
				<strong>Content:</strong> Sed placerat accumsan ligula. Aliquam felis magna, congue quis, tempus eu, aliquam vitae, ante. Cras neque justo, ultrices at, rhoncus a, facilisis eget, nisl. Quisque vitae pede. Nam et augue. Sed a elit. Ut vel massa. Suspendisse nibh pede, ultrices vitae, ultrices nec, mollis non, nibh. In sit amet pede quis leo vulputate hendrerit. Cras laoreet leo et justo auctor condimentum. Integer id enim. Suspendisse egestas, dui ac egestas mollis, libero orci hendrerit lacus, et malesuada lorem neque ac libero. Morbi tempor pulvinar pede. Donec vel elit.
			</div>
		</div>

		<aside id="sideLeft">

		</aside>

	</section>

</div><!-- #wrapper -->

<footer id="footer">

</footer>

</body>
</html>

* {
	margin: 0;
	padding: 0;
}
html {
	height: 100%;
}
header, nav, section, article, aside, footer {
	display: block;
}
body {
	font: 12px/18px Arial, Tahoma, Verdana, sans-serif;
	height: 100%;
}
a {
	color: blue;
	outline: none;
	text-decoration: underline;
}
p {
	margin: 0 0 18px
}
img {
	border: none;
}
#wrapper {
	min-width: 1000px;
	max-width: 1960px;
	margin: 0 auto;
	min-height: 100%;
	height: auto !important;
	height: 100%;
}


/* Header
—————————————————————————--*/
#header {
	width:100%;
	height: 230px;
	background: #fff;
}
#logo {
	background: url(images/logo.jpg) no-repeat;
	width: 50px;
	height:67px;
	margin-left:3%;
	position:relative;
	float:left;
}
#logotext {
	background: url(images/logotext.jpg) no-repeat;
	width: 197px;
	height:100px;
	float:left;
	margin-top:40px;
	padding-top:80px;
	margin-left:30px;
}
#logophone {
	color:#ee4428;
	font: 1.6em Tahoma, Verdana, sans-serif;
}
#phonecode {
	color:#ee4428;
	font: 1.2em Tahoma, Verdana, sans-serif;
	vertical-align:top;
}
#woman {
	width:257px;
	height:104px;
	background:url(images/woman.jpg) no-repeat;
	margin-left:10%;
	float:left;
}
#onlinebancking {
	width:12%;
	height:87px;
	float:left;
	border-bottom:2px solid #d8af32;
}
#onlinebancking span{
	display:block;
	font: 1.1em Tahoma, Verdana, sans-serif;
	color:#ee4428;
	padding-top:20px;
}
#onlinebancking a{
	font: 1.3em Tahoma, Verdana, sans-serif;
	color:#d8af32;
	text-decoration: none;
	border-bottom: 1px dashed #d8af32;
}
#upbuttons {
	width:15%;
	float:left;
	height:87px;
	border-bottom:2px dotted #d8af32;
}
#buttons {
	margin:0 auto;
	width:48px;
}
#languages {
	float:left;
	height:87px;
	border-bottom:2px solid #aeaeae;
}
#upline {
	width:145px;
	height:25px;
	background:url(images/topline.jpg) no-repeat;
	padding-left:25px;
}
#upline span a{
	font: 1.2em Tahoma, Verdana, sans-serif;
	color:#aeaeae;
	display:block;
	float:left;
	width:25px;
	height:20px;
	padding-left:10px;
	padding-right:10px;	
}
#upline span a:hover {
	background:#ee4428;
	color:#fff;
}
/* Middle
—————————————————————————--*/
#middle {
	width: 100%;
	padding: 0 0 250px;
	height: 1%;
	position: relative;
}
#middle:after {
	content: '.';
	display: block;
	clear: both;
	visibility: hidden;
	height: 0;
}
#container {
	width: 100%;
	float: left;
	overflow: hidden;
}
#content {
	padding: 0 0 0 270px;
}


/* Sidebar Left
—————————————————————————--*/
#sideLeft {
	float: left;
	width: 250px;
	margin-left: -100%;
	position: relative;
	background: #B5E3FF;
}


/* Footer
—————————————————————————--*/
#footer {
	margin: -250px auto 0;
	min-width: 1000px;
	max-width: 1960px;
	height: 250px;
	background: #BFF08E;
	position: relative;
}

param · July 1, 2012

Так что некто не помнит, как с тем макетом поступать?

Vin · July 1, 2012

Выложите вёрстку на хостинг. Бесплатные хостинги под такие дела обсуждались здесь, посмотрите.

Edited July 1, 2012 by Vin

param · July 4, 2012

Вот собственно: http://param.16mb.com/

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

Yazon_Nile · July 4, 2012

Задать ширину не в пикселях, а в процентаХ?

param · July 4, 2012

Так у меня и так вроде все блоки в процентах, кроме левой колонки, но она там не причём.

И ещё одна странность, когда смотрю на сайтв разрешении 1024х758 на сайте, есть горизонтальная полоса прокрутки. когда просматриваю на компьютере, при то же разрешении и в том же браузере, горизонтальная прокрутка появляется...

Edited July 4, 2012 by param

Yazon_Nile · July 4, 2012

min-width поставьте 999)

param · July 5, 2012

min-width поставьте 999)

Это вообще ничего не меняет т.к. полоса прокрутки гораздо шире.

Неужели некто не подскажет, как заставить определённые блоки самим сжиматься или наоборот, в зависимости от разрешения??

param · July 9, 2012

Блоки должны растягиваться по ширине в зависимости от разрешения.

Наверху такой блок называется #upbuttons.

Внизу такой блок называется #rightfooter.

Sign In

Резиновый макет как застваить сжиматься-разжиматься

Question

param

Link to comment

Share on other sites

8 answers to this question

Recommended Posts

param

Link to comment

Share on other sites

Vin

Link to comment

Share on other sites

param

Link to comment

Share on other sites

Yazon_Nile

Link to comment

Share on other sites

param

Link to comment

Share on other sites

Yazon_Nile

Link to comment

Share on other sites

param

Link to comment

Share on other sites

param

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information