Jump to content
  • 0

Как такое сверстать дивами?

mff

Asked by mff,

 Share

Question

mff Explorer

mff

Posted
Posted

Как такое сверстать дивами, учитывая что панель имеет динамичную высоту?

5b31698600a3.png

Вот что я наваял:

<div style="width:16px; height:15px; float:left; background: url(menu_header_l.png) right no-repeat;">1</div>
<div style="width:240px; height:15px; float:left; background: url(menu_header_c.png) center repeat-x;">2</div>
<div style="width:16px; height:15px; float:left; background: url(menu_header_r.png) left no-repeat;">3</div>
<div style="clear:both;"></div>

<div style="width:16px; float:left; background: url(menu_l.png) right repeat-y;">
	<div style="width:12px; height:15px; background:#cae4fd; margin-left:4px;">4</div>
</div>
<div style="width:240px; float:left; background:#ffffff;">
	<div style="width:240px; height:15px; background:#cae4fd;"> </div>
	<br /><br /><br /><br /><br />текст
</div>
<div style="width:16px; float:left; background: url(menu_r.png) left repeat-y;">
	<div style="width:12px; height:15px; background:#cae4fd; margin-right:4px;">6</div>
</div>
<div style="clear:both;"></div>

<div style="width:16px; height:15px; float:left; background: url(menu_footer_l.png) right no-repeat;">7</div>
<div style="width:240px; height:15px; float:left; background: url(menu_footer_c.png) center repeat-x;">8</div>
<div style="width:16px; height:15px; float:left; background: url(menu_footer_r.png) left no-repeat;">9</div>
<div style="clear:both;"></div>

но, слои по бокам не опускаются по длине:

c560cb6897ca.png

;)

Link to comment
Share on other sites

15 answers to this question

Recommended Posts

  • 0
mff Explorer

mff

Posted
  • Author
Posted
А вот за это спасибо!!! Очень интересно!!!
Там не то что нужно! У них панель состоит из 2 рисунков, по этому нельзя буде сделать верх блока другим цветом. Да и вообще кривовато как то выглядит.
Там же написано:
- блок не может быть резиновым по высоте;
А это мне зачем? Я юзал, но по моему запросу ни чего не найдено.
От пустых клиринговых дивов избафься, вместо этого родителям ставь overflow: hidden и zoom: 1 (чтоб ие 6 не глючил)
Спасибо попробую.
Link to comment
Share on other sites
  • 0
mff Explorer

mff

Posted
  • Author
Posted

Не, не катит не один вариант.

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

<style type="text/css">
.rc {
	background: #ffffff;
	padding: 0;
	position: relative;
	overflow: hidden;
	height: 100%;
	width: 240px;
}

.rc-bot,
.rc-bot div {
	height: 15px;
	line-height: 0;
	background: url(menu_pannel.png) no-repeat left top;
}
.rc-top,
.rc-top div {
	height: 26px;
	line-height: 0;
	background: url(menu_pannel.png) no-repeat left top;
}


.rc-bot {background-position: left -26px;}
.rc-top div {background-position: right -41px;}
.rc-bot div {background-position: right -67px;}

.rc-top,
.rc-bot {
	position: relative;
	z-index: 2;
}

.rc-content {
	position: relative;
	margin: -27px 0;
	z-index: 1;
}
</style>

872c65df363d.png

Link to comment
Share on other sites
  • 0
Justnewone Explorer

Justnewone

Posted
Posted
А ваш форум для чего тогда нужен, в гугл людей посылать?

Ну уж точно не для того чтобы давать готовый код.

Тем более, что по первому же запросу в любом поисковике вылазит куча страниц "20, 30, 50 способов скругленных углов".

Link to comment
Share on other sites
  • 0
mff Explorer

mff

Posted
  • Author
Posted

Я задал конкретный вопрос, привел пример кода. Мне дали ссылки не по теме.

Мне не нужно скругление углов. На рисунке же всё видно, что нужно. Я всего лишь прошу помощи, задача опустить дивы по бокам по высоте....

Link to comment
Share on other sites
  • 0
Justnewone Explorer

Justnewone

Posted
Posted
Я задал конкретный вопрос, привел пример кода. Мне дали ссылки не по теме.

Мне не нужно скругление углов. На рисунке же всё видно, что нужно. Я всего лишь прошу помощи, задача опустить дивы по бокам по высоте....

Ладно, но ваш велосипед с квадратными колесами, если Вы еще не поняли этого. Ответ один - считать JS-ом высоту основного блока и назначать ее боковинам, и все, иначе никак.

Link to comment
Share on other sites
  • 0
Great Rash Explorer

Great Rash

Posted
Posted

mff

http://forum.htmlbook.ru/index.php?showtopic=19211 - в этом топике есть ссылка (во втором посте кажись) на 38 способов закругления углов. Хоть с тенью, хоть без тени, хоть каких.

Вы же настолько ленитесь, что даже дочитать топик до второго поста для вас трудно. В таком случае это уже клиника и медицина тут бессильна.

Успехов в труде.

Link to comment
Share on other sites
  • 0
mff Explorer

mff

Posted
  • Author
Posted

Спасибо ребят! Полезу дальше искать. Вот сверстал табличкой, так всё просто и без гемора, но надо див блин:

<table width="240" border="0" cellspacing="0" cellpadding="0">
  <tr>
	<td style="width:16px; height:26px; background: url(menu_header_l.png) right no-repeat;"> </td>
	<td style="height:26px; background: url(menu_header_c.png) center repeat-x;">заголовок</td>
	<td style="width:16px; height:26px; background: url(menu_header_r.png) left no-repeat;"> </td>
  </tr>
  <tr>
	<td style="width:16px; background: url(menu_l.png) right repeat-y;"> </td>
	<td>текст<br />текст<br />текст<br />текст<br />текст<br />текст<br /></td>
	<td style="width:16px; background: url(menu_r.png) left repeat-y;"> </td>
  </tr>
  <tr>
	<td style="width:16px; height:15px; background: url(menu_footer_l.png) right no-repeat; line-height: 0;"> </td>
	<td style="width:240px; height:15px; background: url(menu_footer_c.png) center repeat-x; line-height: 0;"> </td>
	<td style="width:16px; height:15px; background: url(menu_footer_r.png) left no-repeat; line-height: 0;"> </td>
  </tr>
</table>

Вопрос пока не решен ;)

38 способов закругления углов. Хоть с тенью, хоть без тени, хоть каких.
Ой, а тут я небыл :)
Успехов в труде.
Спасибо большое! Будьте всегда удачливы!
Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
 Share
Go to question listing
×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. See more about our Guidelines and Privacy Policy

  I accept