Help with div+css

SkaZzzz · August 5, 2011

Я новичок в DIV вёрстке и всё никак не могу понять как мне сверстать такой блок:

^{(на скрине он сделан в виде таблицы (table), с помощью неё я легко делаю)}

А вот с DIV+CSS у меня пока что проблемы. Если кому-нибудь не лень, напишите стили и div-конструкцию для такого блока (ширина блока 380px, а высота по мере увеличения текста, в середине bg:#fff). Вот все изображения:

^{Углы [верх-лево, низ-лево , верх-право, низ-право - (6x6px)]}

^{Верх и низ [верх, низ - (1x6px)]}

^{Лево и право [лево, право - (6x1px)]}

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

SkaZzzz · August 5, 2011

Softlink, сам в шоке. В общем, Вы сможете мне составить аналог вот такой таблицы, только дивной конструкции:

<table cellpadding="0" cellspacing="0" style="width:320px">
<tr>
<td style="width:6px;height:6px;background:url(frame/left_head.png)"> </td>
<td style="background:url(frame/head.png)"> </td>
<td style="width:6px;height:6px;background:url(frame/right_head.png)"> </td>
</tr>
<tr>
<td style="background:url(frame/left.png)"> </td>
<td style="background:#fff;overflow:hidden;clear:both;padding:3px"> 
 <!-- <body> -->

 <center>Тестируем текст</center>

 <!-- </body> --> 
</td>
<td style="background:url(frame/right.png)"> </td>
</tr>
<tr>
<td style="width:6px;height:6px;background:url(frame/left_footer.png)"> </td>
<td style="background:url(frame/footer.png)"></td>
<td style="width:6px;height:6px;background:url(frame/right_footer.png)"> </td>
</tr>
</table>

Edited August 5, 2011 by SkaZzzz

sigma77 · August 5, 2011

sigma77, а без разницы - radius и для таблицы работает вполне себе нормально.

В опере не работает.

Softlink · August 5, 2011

это скруглить углы чтобы? Я уже приводил свой пример. Он очень дивный

sigma77, а без разницы - radius и для таблицы работает вполне себе нормально.
В опере не работает.

А в какой? У меня 11.50 - все нормально работает.

SkaZzzz · August 5, 2011

Собственно хрен с ним с этим радиусом лучше мне помогите таблицу приведённую в посте №27 превратить в DIV-ную конструкцию. А то я уже всю голову сломал себе.

Edited August 5, 2011 by SkaZzzz

sigma77 · August 5, 2011

А в какой? У меня 11.50 - все нормально работает.

Аналогичная

Версия: 11.50
Сборка: 1074
Платформа: Win32
Система: Windows XP

Но я, кажется поняла почему не работало.

Сравни http://jsfiddle.net/CpQ87/1/ и http://jsfiddle.net/CpQ87/2/

Найдешь причину?

Softlink · August 5, 2011

Собственно хрен с ним с этим радиусом лучше мне помогите таблицу приведённую в посте №27 превратить в DIV-ную конструкцию. А то я уже всю голову сломал себе.

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

SkaZzzz · August 5, 2011

Softlink, да ну? А в 1 посте я что выкладывал там 3 картинки.

^{Углы [верх-лево, низ-лево , верх-право, низ-право - (6x6px)]}

^{Верх и низ [верх, низ - (1x6px)]}

^{Лево и право [лево, право - (6x1px)]}

А вот это должно получится:

P.S.:

Найдешь причину?

Normalized CSS

Edited August 5, 2011 by SkaZzzz

Softlink · August 5, 2011

А в какой? У меня 11.50 - все нормально работает.
Аналогичная
Версия: 11.50
Сборка: 1074
Платформа: Win32
Система: Windows XP
Но я, кажется поняла почему не работало.
Сравни http://jsfiddle.net/CpQ87/1/ и http://jsfiddle.net/CpQ87/2/
Найдешь причину?

Разобрал там все по полочкам.

А зачем там в нормализаторе сочетали несочитаемое?

table {
	border-collapse:collapse;
	border-spacing:0;
}

Если убрать border-collapse, то все нормально заработает.

А сам ресет роли не играет здесь.

Softlink, да ну? А в 1 посте я что выкладывал там 3 картинки.

Я свой вариант предложил. Иначе бы я не делал и не делаю.

Edited August 5, 2011 by Softlink

sigma77 · August 5, 2011

Если убрать border-collapse, то все нормально заработает.

Ага

Почему-то это свойство так клинит Оперу.

psywalker · August 5, 2011

Если убрать border-collapse, то все нормально заработает.
Ага
Почему-то это свойство так клинит Оперу.

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

SkaZzzz · August 5, 2011

Ясно чо, 4 форум и время потраченное зря '

Softlink · August 5, 2011

Ясно чо, 4 форум и время потраченное зря '

Да это вы сами себе придумываете какие-то трудности. Радиус работает.

А вариант с картинками здесь не идет. ИМХО. В календаре лучше вставлять одну картинку для каждой даты, ибо 2-3 дива для дверей *31 день - это извращение чистой воды.

В вашем случае не нужен и border-collapse(сделайте border-spacing больше), из-за которого глючит опера, а в форме и подавно его нет.

Так что везде, за исключением ИЕ, все будет работать нормально.

SkaZzzz · August 5, 2011

Так что везде, за исключением ИЕ, все будет работать нормально.

Да всё уже, выбрал твой вариант, а там будь что будет, если что вернут старый дизайн в табличках TABLE

А вариант с картинками здесь не идет. ИМХО. В календаре лучше вставлять одну картинку для каждой даты, ибо 2-3 дива для дверей *31 день - это извращение чистой воды.

Я извращался как мог... Edited August 5, 2011 by SkaZzzz

Sign In

Help with div+css

Question

Link to comment

Share on other sites

38 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

Join the conversation

Обсуждения

Important Information