Jump to content
  • 0

Углы и не только!

Alexsays

Asked by Alexsays,

 Share

Question

Alexsays Explorer

Alexsays

Posted
Posted

432113.jpg

Подскажите пожалуйста! Нужно получить такую таблицу(блок) как на рисунке. Изображения использовать не получиться так как в дальнейшем необходимо изменять цвет границ блока и цвет самого блока. И он должен быть резиновым. Помогите пожалуста!

Link to comment
Share on other sites

21 answers to this question

Recommended Posts

  • 0
psywalker Explorer

psywalker

Posted
Posted
А без картинок резиновое и кроссбраузерное - тут мне кажется либо флэш - либо SVG, VML

Да нее, зачем. Один контейнер, в него 8 дивов. три вверху, два по бокам, и три внизу. углы не тянутся,а бока тянуться, вот и всё.

Как бы для новичка может и не простое решение, но реализация возможна 100%. Я такие клепал раньше. Пусть учится :angry:

Воо,чё откапал http://psywalker.ru/Forum/box2/block/main.html :)

Link to comment
Share on other sites
  • 0
Justnewone Explorer

Justnewone

Posted
Posted
Но в этом примере же используются изображения! А если я захочу поменять цвет?

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

Старые браузеры без бордер-радиуса - уже выше намеки озвучены. С бордер радиусом - 2 блока, вставленные один в другой.

Link to comment
Share on other sites
  • 0
Int Explorer

Int

Posted
Posted (edited)

Я поофтоплю

углы не тянутся,а бока тянуться
Чем здесь продиктовано использование тся и ться в одном и том же слове? Я вот всё никак не могу понять людей, которые не могут написать правильно. Ты ведь понимаешь, что в слове "тянуться" ударение ставится на у?

А сам бы сделал бордер-радиусами. Мне плевать на старые браузеры :angry: Если человек сознательно отказывается от круглых краёв, зачем я буду ему их навязывать?

Edited by Int
Link to comment
Share on other sites
  • 0
rus Explorer

rus

Posted
Posted

Скажу так: ТС не выложил свой код, то есть то, что он пробовал сделать, но по каким-то причинам у него не получилось...

Вывод: зачем мне ему помогать, если он при этом может тупо пользоваться моими услугами просто так, на халяву?

Link to comment
Share on other sites
  • 0
psywalker Explorer

psywalker

Posted
Posted
Я поофтоплю

Чем здесь продиктовано использование тся и ться в одном и том же слове? Я вот всё никак не могу понять людей, которые не могут написать правильно. Ты ведь понимаешь, что в слове "тянуться" ударение ставится на у?

Потому-что я не всегда пишу медленно, а в спешке могу не уследить за текстом, а просто доношу смысл, вот и всё. А потом форум не орфографический, а совсем другой тематики, и если тебе не нравится, то можешь не читать.

Главное, что я помог человеку, донёс до него смысл и ещё привёл ему вариант решения. Я думаю он за этим сюда приходил, а не ошибки в словах выискивать...

Link to comment
Share on other sites
  • 0
Int Explorer

Int

Posted
Posted
форум не орфографический, а совсем другой тематики
А одежду ты одеваешь только когда идёшь в магазин одежды? Грамотность должна быть у человека независимо от места его пребывания.

Я обычно перечитываю свои посты, чтобы удостовериться, что написал понятно. Заодно ошибки нахожу.

Link to comment
Share on other sites
  • 0
аrt Explorer

аrt

Posted
Posted
А одежду ты одеваешь только когда идёшь в магазин одежды? Грамотность должна быть у человека независимо от места его пребывания.

Я обычно перечитываю свои посты, чтобы удостовериться, что написал понятно. Заодно ошибки нахожу.

жжошь.

Link to comment
Share on other sites
  • 0
psywalker Explorer

psywalker

Posted
Posted
А одежду ты одеваешь только когда идёшь в магазин одежды? Грамотность должна быть у человека независимо от места его пребывания.

Я обычно перечитываю свои посты, чтобы удостовериться, что написал понятно. Заодно ошибки нахожу.

Когда у тебя всего пять минут, а помощь нужна 10-и людям, то тут уж не до перечитывания, прости.

Link to comment
Share on other sites
  • 0
hf3 Explorer

hf3

Posted
Posted
А если не сознательно?

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

Практический пользы от них - 0. Юзабилити не повышает. Разве что эстетически приятней - да и то вопрос спорный - как пример на этом форуме нет ни одного закругленного уголка - м врядли кому либо от этого хуже.

Link to comment
Share on other sites
  • 0
Alexsays Explorer

Alexsays

Posted
  • Author
Posted (edited)
Скажу так: ТС не выложил свой код, то есть то, что он пробовал сделать, но по каким-то причинам у него не получилось...

Вывод: зачем мне ему помогать, если он при этом может тупо пользоваться моими услугами просто так, на халяву?

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

Наверно только бордер радиус.

Edited by Alexsays
Link to comment
Share on other sites
  • 0
psywalker Explorer

psywalker

Posted
Posted
Я же не прошу выкладывать готовый код, меня просто нужно натолкнуть на мысль, я перепробовал кучу способов но не один не подходит так как повторюсь необходимо в дальнейшем менять цвет блока.

Наверно только бордер радиус.

Мой вариант для этих целей отлично подходит, в будущем одним нажатием мышки ты меняешь спрайт, вот и всё.

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

Great Rash

Posted
Posted
Я же не прошу выкладывать готовый код, меня просто нужно натолкнуть на мысль, я перепробовал кучу способов но не один не подходит так как повторюсь необходимо в дальнейшем менять цвет блока.

Можно использовать стописят мильёнов дивов и сделать все это без картинок вообще. Оно вам надо?

Link to comment
Share on other sites
  • 0
rus Explorer

rus

Posted
Posted
Я же не прошу выкладывать готовый код, меня просто нужно натолкнуть на мысль, я перепробовал кучу способов но не один не подходит так как повторюсь необходимо в дальнейшем менять цвет блока.

Наверно только бордер радиус.

А вот сюда не пробовали заходить? Что-то сами делали? Что-то получилось?

Link to comment
Share on other sites
  • 0
Int Explorer

Int

Posted
Posted (edited)
А если не сознательно?
Знаю такого, вчера на работе он меня заставил сменить 10-ю оперу на 9-ю, но "закладки", которыми он считал выпадающий список последних посещённых сайтов, так и не вернулись. Ну таким людям эти закругления ни к чему, так что можно считать, что никого не забыли. В конце концов, можно проверить версию браузера и вывести настойчивую просьбу не сидеть под решетом, а поставить что посвежее. Файрфокс же вот не зря за две недели два раза экстренно обновлялся. Edited by Int
Link to comment
Share on other sites
  • 0
hf3 Explorer

hf3

Posted
Posted
будь проклят от день когда скомпилили первый ие6!!!

C таким же успехом можно проклинать день когда появилась Опера 6.xx, firefox, safari, chrome тогда даже в виде проектов не было

А бедный нетскейп бился в предсмертной агонии.

Разве бедный ослик виноват что много лет у него просто не было конкурентов?

будь проклят от день когда скомпилили первый ие6!!!

C таким же успехом можно проклинать день когда появилась Опера 6.xx, firefox, safari, chrome тогда даже в виде проектов не было

А бедный нетскейп бился в предсмертной агонии.

Разве бедный ослик виноват что много лет у него просто не было конкурентов?

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