Способы сделать резиновую верстку сложных блоков

AlexKon · October 22, 2009

под сложными блоками понимается, что у блока должно быть закругление углов и допустим внутренний глоу,

понятно что нужно использовать 9 ячеек что бы расставить все в нужном порядке, а может есть еще какой способ что бы сделать это.

вот моя попытка сделать такой блок

<div style="width:100%; position:relative; background:#b5e6f4;">
   	  <div style="background:url(middleleft.gif) repeat-y left;">
       	<div style="background:url(middleright.gif) repeat-y right;">
          <div style="background:url(middletop.gif) repeat-x top;">
            <div style="background:url(middlebottom.gif) repeat-x bottom;">
                        <div style="width:20px; height:20px; background:url(topleft.gif); position:absolute; top:0px; left:0px; z-index:1;"></div>
                        <div style="width:20px; height:20px; background:url(topright.gif); position:absolute; top:0px; right:0px; z-index:1;"></div>
                        <div style="width:20px; height:20px; background:url(bottomleft.gif); position:absolute; bottom:0px; left:0px; z-index:1;"></div>
                        <div style="width:20px; height:20px; background:url(bottomright.gif); position:absolute; bottom:0px; right:0px; z-index:1;"></div>
              <div style="padding:20px; position:relative; z-index:2;">
                            Lorem ipsum dolor sit amet, consectetur adipiscing elit. In in ante enim, ut interdum neque. Cras aliquet nisl non nibh ultrices cursus. Aliquam sed lacus et ligula gravida iaculis. Pellentesque interdum urna eu orci venenatis lacinia. Vivamus lacinia vestibulum elit a gravida. Proin in arcu eu mauris pulvinar lobortis. Vestibulum ut nulla eget sapien convallis consectetur. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Suspendisse odio purus, pellentesque vitae posuere nec, porttitor ut lectus. Quisque vestibulum hendrerit tortor eget gravida. Duis id urna sapien, dapibus rhoncus libero. Maecenas sit amet varius lacus. Aenean ullamcorper pretium lectus eget congue. Praesent diam risus, tincidunt non luctus non, adipiscing vitae ante. Integer nec dui eu ligula fringilla facilisis. Aliquam tincidunt, eros sed venenatis consequat, risus lacus faucibus lorem, sit amet ultrices nibh sapien et felis. Curabitur sed est sapien, sed ornare ligula.
              </div>
                    </div>
                </div>
        	</div>
        </div>
    </div>

можно немного упростить

    <div style="width:100%; position:relative; background-color:#b5e6f4;background:url(middleleft.gif) repeat-y left;">
       	<div style="background:url(middleright.gif) repeat-y right;">
          <div style="background:url(middletop.gif) repeat-x top;">
            <div style="background:url(middlebottom.gif) repeat-x bottom;">
                        <div style="width:20px; height:20px; background:url(topleft.gif); position:absolute; top:0px; left:0px; z-index:1;"></div>
                        <div style="width:20px; height:20px; background:url(topright.gif); position:absolute; top:0px; right:0px; z-index:1;"></div>
                        <div style="width:20px; height:20px; background:url(bottomleft.gif); position:absolute; bottom:0px; left:0px; z-index:1;"></div>
                        <div style="width:20px; height:20px; background:url(bottomright.gif); position:absolute; bottom:0px; right:0px; z-index:1;"></div>
              <div style="padding:20px; position:relative; z-index:2;">
                            Lorem ipsum dolor sit amet, consectetur adipiscing elit. In in ante enim, ut interdum neque. Cras aliquet nisl non nibh ultrices cursus. Aliquam sed lacus et ligula gravida iaculis. Pellentesque interdum urna eu orci venenatis lacinia. Vivamus lacinia vestibulum elit a gravida. Proin in arcu eu mauris pulvinar lobortis. Vestibulum ut nulla eget sapien convallis consectetur. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Suspendisse odio purus, pellentesque vitae posuere nec, porttitor ut lectus. Quisque vestibulum hendrerit tortor eget gravida. Duis id urna sapien, dapibus rhoncus libero. Maecenas sit amet varius lacus. Aenean ullamcorper pretium lectus eget congue. Praesent diam risus, tincidunt non luctus non, adipiscing vitae ante. Integer nec dui eu ligula fringilla facilisis. Aliquam tincidunt, eros sed venenatis consequat, risus lacus faucibus lorem, sit amet ultrices nibh sapien et felis. Curabitur sed est sapien, sed ornare ligula.
              </div>
                    </div>
                </div>
        	</div>
    </div>

интересно способы кто, как делает, как правильно делать и что считается моветоном

Great Rash · October 22, 2009

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
	<title>template</title>
	<meta http-equiv="content-type" content="text/html;charset=utf-8" />
	<meta http-equiv="Content-Style-Type" content="text/css" />

	<style type="text/css">
		html, 
		body {
			height: 100%;
			margin: 0;
			padding: 0;
			border: 0;
		}

		.t,
		.b {
			background: red;
			height: 5px;
			margin: 0 10px;
		}

		.t2,
		.b2 {
			background: red;
			height: 5px;
			margin: 0 5px;
		}

		.text {
			padding: 0 10px;
			background: red;
		}
	</style>

</head>

<body>

	<div class="cont">
		<div class="t"></div>
		<div class="t2"></div>
		<div class="text">
			text
		</div>
		<div class="b2"></div>
		<div class="b"></div>
	</div>

</body>
</html>

AlexKon · October 22, 2009

интересное предложение, но такое решение не думаю что подойдет если нужно добиться подобного результата

psywalker · October 22, 2009

Пойдёт?

http://psywalker.ru/Forum/ugl/1/main.html

Great Rash · October 22, 2009

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
	<title>template</title>
	<meta http-equiv="content-type" content="text/html;charset=utf-8" />
	<meta http-equiv="Content-Style-Type" content="text/css" />

	<style type="text/css">
		html, 
		body {
			height: 100%;
			margin: 0;
			padding: 0;
			border: 0;
		}

		.head,
		.text {
			overflow: hidden;
		}

		.hl,
		.hr,
		.fl, 
		.fr {
			width: 10px;
			height: 10px;
			background: red;
		}

		.hl,
		.fl,
		.tl {
			float: left;
		}

		.hr,
		.fr,
		.tr {
			float: right;
		}

		.hc,
		.fc {
			height: 10px;
			margin: 0 10px;
			background: green;
		}

		.tl,
		.tr {
			width: 10px;
			padding-bottom: 32767px;
			margin-bottom: -32767px;
			background: green;
		}

		.tc {
			margin: 0 10px;
			padding-bottom: 32767px;
			margin-bottom: -32767px;
			background: yellow;
		}
	</style>

</head>

<body>

	<div class="cont">
		<div class="head">
			<div class="hl"></div>
			<div class="hr"></div>
			<div class="hc"></div>
		</div>
		<div class="text">
			<div class="tl"></div>
			<div class="tr"></div>
			<div class="tc">text</div>
		</div>
		<div class="foot">
			<div class="fl"></div>
			<div class="fr"></div>
			<div class="fc"></div>
		</div>
	</div>

</body>
</html>

AlexKon · October 22, 2009

интересно, понравилось что мало кода,

но опять решает не полностью эту задачу

есть скругления но нет с боков, сверху и

снизу бордеров с гловом

вопрос может делетанский, но для чего нужны эти манипуляции?

padding-bottom: 32767px;
margin-bottom: -32767px;

Great Rash · October 22, 2009

Чтобы у блоков справа и слева была одинаковая высота с центральным блоком. Задавая огромный паддинг мы задаем огромную высоту блоку, но при этом он уедет вверх, это дело мы поправляем отрицательным маргином. А вся эта огромная высота не видна, т.к. стоит overflow: hidden; у родительского контейнера.

AlexKon · October 22, 2009

ага прояснилось, спасибо

AlexKon · October 23, 2009

а вот появился еще один вопрос, что делать если нужно сделать так что бы текст заходил на области которые тянутся и на углы,

в примере предложенном Great Rash не имеется такой возможности, в примере предложенном мной есть такая возможность,

но если картинки будут png да еще и с альфа каналом то мой пример не подходит,

так как в углах происходит наложение сразу 3 картинок с альфа каналом, и получается каша

кто нибудь сталкивался с таким?

Sign In

Способы сделать резиновую верстку сложных блоков

Question

AlexKon

Link to comment

Share on other sites

8 answers to this question

Recommended Posts

Great Rash

Link to comment

Share on other sites

AlexKon

Link to comment

Share on other sites

psywalker

Link to comment

Share on other sites

Great Rash

Link to comment

Share on other sites

AlexKon

Link to comment

Share on other sites

Great Rash

Link to comment

Share on other sites

AlexKon

Link to comment

Share on other sites

AlexKon

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information