Резина

Petro21 · January 31, 2012

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

Я сделал так что б картинка была на весь экран, но при добавлении большого количества текста в "центр", текст выходит за пределы картинки, как сделать что б центр растягивался в зависимости от текста. тоесть изначально картинка подгоняется под размер экрана, а потом если текста много то центр растягивался.

Куда копать?

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
   <title>резина</title>
   <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
   <link rel="stylesheet" type="text/css" href="rezina.css" media="all" /> 
</head>
<body>
<div class="kartina_up">
	 шапка
	<div class="kartina_center">
	 <p>центер</p>
        </div>
	<div class="kartina_down">
         подвал
	</div>
</div>
</body>
</html>


body {
	background: #e6f1f9;
	}
.kartina_up {
	position: absolute;
	width: 100%;
	height: 100%;
	left: 0%;
	top: 80px;
	right: 0%;
	bottom: auto;
	display: inline-block;
	background-image: url(image/kartina_up.png);
	background-repeat: no-repeat;
	background-position: 50% 0%;
	border: 0px solid;
	text-align: center;
	z-index: 0;
	}
.kartina_center {
	position: absolute;
	width: 100%;
	left: 0%;
	top: 30px;
	right: 0%;
	bottom: 0px;
	display: inline-block;
	background-image: url(image/kartina_center.png);
	background-repeat: repeat-y;
	background-position: 50% 100%;
	border: 0px solid;
	text-align: center;
	z-index: 0;
	}
p {
	margin: auto;
	width: 400px;
} 	
.kartina_down {
	position: absolute;
	width: 100%;
	height: 30px;
	left: 0%;
	top: 100%;
	right: 0%;
	bottom: 0px;
	display: inline-block;
	background-image: url(image/kartina_down.png);
	background-repeat: no-repeat;
	background-position: 50% 100%;
	border: 0px solid;
	text-align: center;
	z-index: 0;
	}

Edited January 31, 2012 by Petro21

Sign In

Резина

Question

Petro21

Link to comment

Share on other sites

0 answers to this question

Recommended Posts

Join the conversation

Обсуждения

Forums

Important Information