Jump to content
  • 0

Как тянуть по ширине и длине?


BRK
 Share

Question

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

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

861b4a55ace2t.jpg

Link to comment
Share on other sites

4 answers to this question

Recommended Posts

  • 0

Это не проблема верстки, это в раздел "для начинающих"...

Есть несколько вариантов, но суть одна. Нарезаете отдельно уголки, части границ, которые должны тянутся и эту пимпочку внизу. Вкладываете друг в друга несколько дивов и в каждом в качестве фона размещаете нарезанные элементы, те что не тянутся - позиционируете как надо и отменяете повтор, а тянущиеся элементы располагаете фоном и, соответственно, вертикальные с повтором по вертикали, а горизонтальные - по горизонтали. А пимпочку эту можно абсолютно разместить за границей последнего вложенного дива.

Link to comment
Share on other sites

  • 0
Это не проблема верстки, это в раздел "для начинающих"...

Да дело в том, что я уже не начинающий)

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

Link to comment
Share on other sites

  • 0
Да дело в том, что я уже не начинающий)

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

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

Link to comment
Share on other sites

  • 0

Я бы разрезал вот так

Делаем маленькое верхнее правое скругление + кусочек правого бордюра. Позиционируем фон в правом верхнем углу. Делаем паддинг сверху на высоту фона.

Потом делаем еще одну картинку - правое боковое меню + бордюр, высотой пикселей в 600 (хватит с головой) Причем снизу оставляем прозрачного фона ровно на высоту пипки и фона. Выравниваем фон по нижнему правому краю, делаем паддинг справа в 3-4 пикселя, на ширину фона.

Дальше делаем нижний блок, в нем берем фон пипки, тень и бордюр, и делаем картинку шириной пикселей в 1000. Правый край будет обрезан ровно. Делаем паддинг снизу на ширину фона.

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

И все.

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

×
×
  • 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