Как сверстать такую красотульку

Andyk · February 23, 2011

В три дива с бордерами? Это нормально или можно более изящно?

swetlana · February 23, 2011

<!DOCTYPE html>
<img src="img.png">

такой код сойдёт за более изящный?

Andyk · February 23, 2011

Конечно сойдет. Вот только я ничего не понял. Ирония это или намек для опытного верстальщика. Для начинающего можете подсказать?

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

Edited February 23, 2011 by Andyk

swetlana · February 23, 2011

конечно же, слегка лукавлю.

Реально получился код такой:

<!DOCTYPE html>
<link rel="stylesheet" href="style.css">
<img src="img.png">

но это не единственный способ.

psywalker · February 23, 2011

В три дива с бордерами? Это нормально или можно более изящно?

Это вполне нормально.

swetlana · February 23, 2011

ребята, а где тут три дива?

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

Но смысл?

Dinow · February 23, 2011

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

картинку в один див, фон с рамкой во второй, фон страницы в третий.. наверно так имелось в виду..

swetlana · February 23, 2011

тогда что я делаю не так?

Почему у меня не нашлось, куда приткнуть хотя бы один див? (ну если только искусственно его не прилаживать)

rash · February 23, 2011

Извините за придирки, но title нужен обязательно. Это не опциональный элемент.

А как для демо — красиво, да

Dinow · February 23, 2011

тогда что я делаю не так?
Почему у меня не нашлось, куда приткнуть хотя бы один див? (ну если только искусственно его не прилаживать)

Почему сразу не так? по мне лично идеальный вариант.

Но если использовать дивы, то явно не просто так, а приписывая стили им, не трогая боди и хтмл.

swetlana · February 23, 2011

Извините за придирки, но title нужен обязательно. Это не опциональный элемент.
А как для демо — красиво, да

эхъ. ну всё.

В две строчки код не уложился.

Аж в целых четыре.

<!DOCTYPE html>
<title>Красотулька</title>
<link rel="stylesheet" href="style.css">
<img src="img.png">

Суровая правда жизни увеличивает объём кода в два раза — наглядный пример.

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

ок, оставим в стороне body и html.

получится так.

Но всё равно: куда тут какие-то дивы?

Edited February 23, 2011 by swetlana

Dinow · February 23, 2011

ок, оставим в стороне body и html.
получится так.

А что там изменилось?..

swetlana · February 23, 2011

стили.

Как и было запрошено, рамка убрана с body, сейчас она исключительно на img.

ShumNo · February 23, 2011

тогда что я делаю не так?
Почему у меня не нашлось, куда приткнуть хотя бы один див? (ну если только искусственно его не прилаживать)

Супер яб так не смог с первого раза

swetlana · February 23, 2011

ShumNo, я тоже не смогла. С первого раза некрасиво получилось.

Потом, под влиянием справедливой критики Dinow, слегка переделала. Теперь лучше.

SelenIT · February 23, 2011

А под какое разрешение красотулька заточена? А то 301×347 пикселей для какой-то RSS-иконки — не жирновато ли даже в эпоху FullHD-мониторов? Или, может, в этом блоке всё-таки и текст какой-то предполагался?

psywalker · February 23, 2011

Свет, всё это конечно интересно. Но я вообщет подозреваю, что этот блок возможно нужен для какого то содержимого.

Andyk · February 23, 2011

Текст, конечно же предполагался. Убрал все, что бы код был проще в понимании. А дивами написал потому, что сам квадратик это один из дивов на странице. Мне почему-то казался возможным только вариант с:

<div class="a1">
		  <div class="a2">
		  </div>
</div>

а стиль

.а1 {
border-top серый
border-left серый
border-right белый
border-bottom белый
}
.a2 {
border-top белый
border-left белый
border-right серый
border-bottom серый
}

На бред немного смахивает, почему и решил спросить

Да и второй ваш вариант swetlana не будет работать во всех браузерах

ок, оставим в стороне body и html.
получится так.
Но всё равно: куда тут какие-то дивы?

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

PS а еще если игнорировать IE можно outline прицепить

swetlana, если не сложно, сверстайте этот "квадратик" без рисунка. С условиями, что сам квадрат это обязательно div, не использовать абсолютное позиционирование и без новомодных свойств, чтобы старенькие браузеры тоже разобрались. Наиболее оптимально по вашему мнению.

psywalker · February 23, 2011

Ну и нормальный вариант. Оставь так и не парься.

swetlana · February 23, 2011

а вот не надо убирать то, что критически важно.

Но опять же: трёх дивов тут днём с огнём не сыскать. Один — уже теперь понимаю. В него будет текст завёрнут, о котором сначала речи не шло.

Да и второй ваш вариант swetlana не будет работать во всех браузерах

Тут два варианта.

Правильный: прикрыться модным веянием, с умным видом сказать graceful degradation и послать пользователей устаревших браузеров в далёкие дали.

Неправильный: пойти на msdn и почитать про фильтры. Кстати, настоятельно рекомендую читать не только whatwg или htmlbook, но и msdn. Там тоже очень много интересного, хотя и с большим трудом находится.

psywalker · February 23, 2011

swetlana, если не сложно, сверстайте этот "квадратик" без рисунка. С условиями, что сам квадрат это обязательно div, не использовать абсолютное позиционирование и без новомодных свойств, чтобы старенькие браузеры тоже разобрались. Наиболее оптимально по вашему мнению.

Да чё девчёнку мучать то? Ты же сделал всё отлично и так.

swetlana · February 23, 2011

swetlana, если не сложно, сверстайте этот "квадратик" без рисунка. С условиями, что сам квадрат это обязательно div, не использовать абсолютное позиционирование и без новомодных свойств, чтобы старенькие браузеры тоже разобрались. Наиболее оптимально по вашему мнению.

договорились.

Но не прямо сейчас. Чтобы такое сделать, мне надо сначала msdn почитать вдумчиво. А это время.

И «без новомодных свойств» — не принимается. Это высосанное из пальца правило. Я понимаю, возможно требование, чтобы в IE6 работало. Но требования к применяемым свойствам — это чушь. Это всё равно, что приехать в автосервис и ставить задачу механику: поменяйте мне свечи, но только ключ на 19 не используйте, а лишь ключ на 12.

Ну и нормальный вариант. Оставь так и не парься.

Макс, ну тут вопрос.

Если надо быстро и без претензий — да, ты однозначно прав. Годится любой известный способ, дающий ожидаемый результат.

Ну а если охота поизящнее — тут не грех и время потратить на то, чтоб подумать. Если не играть в головоломки, мозги атрофируются.

Andyk · February 23, 2011

а вот не надо убирать то, что критически важно.
Но опять же: трёх дивов тут днём с огнём не сыскать. Один — уже теперь понимаю. В него будет текст завёрнут, о котором сначала речи не шло.

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

Касательно дивов уже сам не могу понять откуда у меня третий взялся. В два у самого все трамбуется.

Тут два варианта.
Правильный: прикрыться модным веянием, с умным видом сказать graceful degradation и послать пользователей устаревших браузеров в далёкие дали.
Неправильный: пойти на msdn и почитать про фильтры. Кстати, настоятельно рекомендую читать не только whatwg или htmlbook, но и msdn. Там тоже очень много интересного, хотя и с большим трудом находится.

Я не гуру, но попробую поспорить. IE8, который входит в комплект семерки не назовешь старым. А moz-box-shadow он не понимает. Ну и до уровня чтобы читать msdn я еще не дорос так леплю темку для форума for fun.

В общем спасибо за советы, значит так и остановлюсь на своих дивах.

psywalker · February 23, 2011

договорились.
Но не прямо сейчас. Чтобы такое сделать, мне надо сначала msdn почитать вдумчиво. А это время.
И «без новомодных свойств» — не принимается. Это высосанное из пальца правило. Я понимаю, возможно требование, чтобы в IE6 работало. Но требования к применяемым свойствам — это чушь. Это всё равно, что приехать в автосервис и ставить задачу механику: поменяйте мне свечи, но только ключ на 19 не используйте, а лишь ключ на 12.

Свет, эта игра не стоит свеч, поверь, ты заигрываешься. Минимализм хорошо, но когда его в меру. Тут я вижу на лицо много минусов. Фильтры для ИЕ есть, да, можно использовать например теже тени, НО это влечёт за собой много проблем, а например...

- я сомневаюсь, что тень можно нарисовать внутри элемента, т.е. типа внутренние.

- при использовании фильтров, тех же теней, другие вещи могут перестать работать.

- ИЕ увеличивает блок из-за теней

- тень в ИЕ смотрится по другому, она другой формы.

Дальше перечислять?

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

Andyk · February 23, 2011

договорились.
Но не прямо сейчас. Чтобы такое сделать, мне надо сначала msdn почитать вдумчиво. А это время.
И «без новомодных свойств» — не принимается. Это высосанное из пальца правило. Я понимаю, возможно требование, чтобы в IE6 работало. Но требования к применяемым свойствам — это чушь. Это всё равно, что приехать в автосервис и ставить задачу механику: поменяйте мне свечи, но только ключ на 19 не используйте, а лишь ключ на 12.

Ваш пост не видел. При отправке формы не говорит, что есть новые ответы.

Жду.

psywalker · February 23, 2011

Ну а если охота поизящнее — тут не грех и время потратить на то, чтоб подумать.

Это не изящество, а извращение. Изящество - это там, где красота минимализма подкрепляется качеством, вот это изящно я считаю.

. Если не играть в головоломки, мозги атрофируются.

Играться надо, согласен, раньше сам очень любил это дело, пока не стал от этого страдать в плане практичности. Ты играйся, но в конце обязательно предупреди молодёж. Ведь она тебе доверяет, а значит думает, что то, что ты делаешь - это так и должно быть.

Sign In

Как сверстать такую красотульку

Question

Link to comment

Share on other sites

Top Posters For This Question

Popular Days

Top Posters For This Question

Popular Days

60 answers to this question

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation

Обсуждения

Important Information