какой способ целесообразней использовать. div или таблицы.

[Rasel]

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

- Пример макета.

Лично я всегда использую таблицы.

Я разбиваю изображение на 3 части.

Далее создаю таблицу из 3 строк и 1 столбца.

В верхнюю строку сую фоном top (высоту и ширину фиксирую).

В среднею фоном center (сюда в дальнейшем помещаю контент ).

И в последнею самую нижнею bottom (высоту и ширину фиксирую).

Подскажите яв-ся ли мой способ правильным ?

Хотелось бы услышать как это реализовать с помощью дивов.

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

[Vlad]

border-radius + box-shadow + IE6-8 фтопку — вот самое правильное решение.

Здесь похожий пример рассмотрен.

http://htmlbook.ru/blog/izyashchnaya-degradatsiya

[Selen]

Гуру верстки не являюсь, но на мой взгляд реализация чего либо через таблицы (кроме табличных данных), не есть гут !!!

[psywalker]

border-radius + box-shadow + IE6-8 фтопку — вот самое правильное решение.

Я считаю, что это пока громкое заявление. Слишком рано ещё.

Rasel

Делай в три дива вложенных в друг друга.

[swetlana]

Я считаю, что это пока громкое заявление. Слишком рано ещё.

ну а как иначе?

Делай в три дива вложенных в друг друга.

так?

А потом косяки из-за избыточности кода попрут.

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

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

[shass]

Закругленные углы вполне можно делать и так:

border-radius: 15px;
-moz-border-radius: 15px;
-webkit-border-radius: 15px;
-khtml-border-radius: 15px;
behavior: url('PIE.htc');

И сразу все броузеры все понимают. По поводу PIE.htc - гугл в помощь.

[psywalker]

ну а как иначе?

Пока никак. Не все вольны выбирать, как ты. А по факту пока рано.

А потом косяки из-за избыточности кода попрут.

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

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

Это значит кто то просто не знает технологии на том уровне, чтобы сверстать обычный блок с закругленными углами

Верстал вложенными блоками всю жизнь, разными способами и никогда не было проблем.

Мне даже интересно иногда становиться, как же ты раньше жила, когда не было например border-radius?

[Rasel]

Гуру верстки не являюсь, но на мой взгляд реализация чего либо через таблицы (кроме табличных данных), не есть гут !!!

Согласен ! Собственно именно из-за этого написал.

Я считаю, что это пока громкое заявление. Слишком рано ещё.

Rasel

Делай в три дива вложенных в друг друга.

Пробовал, или я что то не так делал, у меня при вставке тега <p> появлялись разрывы в фоне. Но скажу честно, не стал заморачиваться, решил сделать по старинке в таблицах, так как нужно было срочно доделать работу.

если можно то пожалуйста небольшой пример скиньте.

[psywalker]

Пробовал, или я что то не так делал, у меня при вставке тега <p> появлялись разрывы в фоне. Но скажу честно, не стал заморачиваться, решил сделать по старинке в таблицах, так как нужно было срочно доделать работу.

если можно то пожалуйста небольшой пример скиньте.

Да блин, да что ж такое то. Какие разрывы, у тебя ширина блока фиксированная?

[Rasel]

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

[psywalker]

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

У тебя блок фикс?

Тень, которая со всех сторон?

[Rasel]

Да блин, да что ж такое то. Какие разрывы, у тебя ширина блока фиксированная?

Ширина была фиксированная.

Высота резиновая.

Сейчас поищу пример и скину, 1 минуту.

[shass]

Все то же самое, что я писал выше + box-shadow в таких же записях (-moz-box-shadow и т.д.) PIE.htc и тут справится Попробуйте.

[psywalker]

Ширина была фиксированная.

Высота резиновая.

Сейчас поищу пример и скину, 1 минуту.

давай

[Rasel]

У тебя блок фикс?

Тень, которая со всех сторон?

Да которая со всех сторон.

[Great Rash]

PIE.htc надо использовать очень осторожно. А то можно столько глюнов наловить, что пипец! Плюс рендер тормозит ощутимо если на странице больше 10 подобных блоков.

[Rasel]

Все то же самое, что я писал выше + box-shadow в таких же записях (-moz-box-shadow и т.д.) PIE.htc и тут справится Попробуйте.

Немного почитал, очень заинтрегован, не слышал об этом PIE. кросбраузерность от ie6 (будь прокляты все IE)

[psywalker]

Да которая со всех сторон.

Понял. Жди.

PIE.htc надо использовать очень осторожно. А то можно столько глюнов наловить, что пипец! Плюс рендер тормозит ощутимо если на странице больше 10 подобных блоков.

Да ты что такое говоришь? Света же ведь советует, значит всё ок, она то знает. Ей вообще на ИЕ насрать ведь)

[shass]

PIE.htc надо использовать очень осторожно. А то можно столько глюнов наловить, что пипец! Плюс рендер тормозит ощутимо если на странице больше 10 подобных блоков.

Спорить не стану. В любом случае, можно сказать, что старым броузерам - простые формы, дабы они не захлебнулись от новшевств и рюшечек

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

Edited February 16, 2011 by shass

[Rasel]

Css код.

body {
background-color:#000000;
}


div.top {
background:url(images/top.jpg) no-repeat;
width:200px;
height:20px;
margin:0px;
padding:0px;
}

div.center {
background:url(images/center.jpg) repeat-y;
width:200px;
margin:0px;
padding:0px;
}

div.bottom {
background:url(images/bottom.jpg) no-repeat;
width:200px;
height:20px;
margin:0px;
padding:0px;
}

HTML код

<div class="top"></div>
<div class="center">

<p>Здесь находится контент !</p>
<p>Здесь находится контент !</p>
<p>Здесь находится контент !</p>
<p>Здесь находится контент !</p>

</div>
<div class="bottom"></div>

Вот про эти разрывы я говорил. Возможно я css делаю не правильно )

РЕЗУЛЬТАТ )

[psywalker]

Rasel Вот лови, простой и надёжный способ. Только картинки сделай качественные, я не стал замарачиваться.

http://psywalker.ru/IMG/forum/1.html

swetlana

Если будет возможность, сломай пожалуйста этот блок

PIE.htc надо использовать очень осторожно. А то можно столько глюнов наловить, что пипец! Плюс рендер тормозит ощутимо если на странице больше 10 подобных блоков.

Присоединяюсь, чушь эта полнейшая, PIE.htc этот ваш. Одни косяки от него только. Лучшие методы на данный день - это старые добрые вложенные элементы.

[Rasel]

Rasel Вот лови, простой и надёжный способ. Только картинки сделай качественные, я не стал замарачиваться.

http://psywalker.ru/IMG/forum/1.html

swetlana

Если будет возможность, сломай пожалуйста этот блок

Присоединяюсь, чушь эта полнейшая, PIE.htc этот ваш. Одни косяки от него только. Лучшие методы на данный день - это старые добрые вложенные элементы.

Благодарю, теперь у меня все вопросы отпали )

[psywalker]

Благодарю, теперь у меня все вопросы отпали )

Погоди, но ты же ведь хотел использовать последние, модные технологии? Что ж так сразу желание то пропало, а?

[shass]

Присоединяюсь, чушь эта полнейшая, PIE.htc этот ваш. Одни косяки от него только. Лучшие методы на данный день - это старые добрые вложенные элементы.

Возможно я осторожно его применяю, но так или иначе - побочных эффектов пока что не ловил ) PIE.htc применил уже на нескольких проектах )

[Rasel]

Погоди, но ты же ведь хотел использовать последние, модные технологии? Что ж так сразу желание то пропало, а?

Нет я не хотел использовать модные технологии. Я лишь хотел узнать как использовать блоки <div> и как делают опытные верстальщики.

Способ который вы показали на мой взгляд яв-ся самый удобным и лучшим.

PIE.htc суда по вашим комментам яв-ся ненадежным.

Edited February 16, 2011 by Rasel

[psywalker]

Нет я не хотел использовать модные технологии. Я лишь хотел узнать как использовать блоки <div> и как делают опытные верстальщики.

Способ который вы показали на мой взгляд яв-ся самый удобный и лучший.

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