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
  Great Rash said:
А вот за это спасибо!!! Очень интересно!!!
  Great Rash said:
Там не то что нужно! У них панель состоит из 2 рисунков, по этому нельзя буде сделать верх блока другим цветом. Да и вообще кривовато как то выглядит.
  Great Rash said:
Там же написано:
  Quote
- блок не может быть резиновым по высоте;
  Great Rash said:
А это мне зачем? Я юзал, но по моему запросу ни чего не найдено.
  TonKhaO said:
От пустых клиринговых дивов избафься, вместо этого родителям ставь 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
  mff said:
А ваш форум для чего тогда нужен, в гугл людей посылать?

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

Тем более, что по первому же запросу в любом поисковике вылазит куча страниц "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
  mff said:
Я задал конкретный вопрос, привел пример кода. Мне дали ссылки не по теме.

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

Ладно, но ваш велосипед с квадратными колесами, если Вы еще не поняли этого. Ответ один - считать 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>

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

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

Justnewone

Posted
Posted
  mff said:
Ой, а тут я небыл :)

Как интересно, что же за ключевые слова надо вводить в поисковик при решении проблемы скругленных углов, чтобы на эту страницу не попасть?

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

  • Обсуждения

    • Nikker
      Дизайн сайтов, landing page, логотипов, баннеров, шапок | Высокое качество, по хорошей цене

      By Nikker · Posted

      Актуальные контакты: Telegram: @Nikker_web E-Mail:   tarasevich.email@gmail.com Портфолио https://www.behance.net/d4d4186e Разрабатываю дизайн групп в соц сетях, сайтов, приложений, другой дизайн под заказ    
    • Nikker
      Брендовый дизайн в социальных сетях

      By Nikker · Posted

      Актуальные контакты: Telegram: @Nikker_web E-Mail:   tarasevich.email@gmail.com   Разрабатываю дизайн групп в соц сетях, сайтов, приложений, другой дизайн под заказ   Портфолио https://www.behance.net/d4d4186e
    • Mondeus
      Вёрстка футера на движке Xenforo

      By Mondeus · Posted

      Доброго всем времени суток. Прошу помощи. Научите принципу изменения футера. Движок Xenforo. Версия 2.2.10. Стиль дефолтный. Что именно нужно в итоге на фото примере. Мой шаблон app.footer less имеет следующее значение.  .p-footer { .xf-publicFooter(); a { .xf-publicFooterLink(); } } .p-footer-inner { .m-pageWidth(); .m-pageInset(); padding-top: @xf-paddingMedium; padding-bottom: @xf-paddingLarge; } .p-footer-row { .m-clearFix(); margin-bottom: -@xf-paddingLarge; } .p-footer-row-main { float: left; margin-bottom: @xf-paddingLarge; } .p-footer-row-opposite { float: right; margin-bottom: @xf-paddingLarge; } .p-footer-linkList { .m-listPlain(); .m-clearFix(); > li { float: left; margin-right: .5em; &:last-child { margin-right: 0; } a { padding: 2px 4px; border-radius: @xf-borderRadiusSmall; &:hover { text-decoration: none; background-color: fade(@xf-publicFooterLink--color, 10%); } } } } .p-footer-rssLink { > span { position: relative; top: -1px; display: inline-block; width: 1.44em; height: 1.44em; line-height: 1.44em; text-align: center; font-size: .8em; background-color: #4682B4; border-radius: 2px; } .fa-rss { color: white; } } .p-footer-copyright { margin-top: @xf-elementSpacer; text-align: center; font-size: @xf-fontSizeSmallest; } .p-footer-debug { margin-top: @xf-paddingLarge; text-align: right; font-size: @xf-fontSizeSmallest; .pairs > dt { color: inherit; } } @media (max-width: @xf-responsiveMedium) { .p-footer-row-main, .p-footer-row-opposite { float: none; } .p-footer-copyright { text-align: left; padding: 0 4px; // aligns with other links } }  
    • torsar
      Примеры верстки

      By torsar · Posted

      Нужны сайты с примерами верстки, типа https://css-tricks.com/. Типовые приемы и нестандартные на все случаи жизни. Накидайте ссылок.
    • Katerina23
      Какой тег использовать, чтобы увеличивать число кнопками вверх-вниз?

      By Katerina23 · Posted

      Да, подходит. Спасибо.
×
×
  • 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