VPF::Как правильно реализовать - Форум программистов

madkaban

Дата 25.6.2007, 12:25 (ссылка)

(нет голосов)

Загрузка ...

Новичок

Профиль
Группа: Участник
Сообщений: 27
Регистрация: 31.3.2007

Репутация: нет
Всего: нет

День добрый, уважаемые форумчане.

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

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

Если кто-то реализует всё то, что в прикрепленной картинке, при помощи стилей css (без background'ов и т.д.), и покажет это мне это с объяснениями, то денежное вознагражение гарантируется.

Заранее, всем большое спасибо за ответ.

p.s. естественно все это должно работать в браузерах ie >5.0, ff >2, opera >9.

Это сообщение отредактировал(а) madkaban - 25.6.2007, 12:31

Присоединённый файл ( Кол-во скачиваний: 48 )

krug.jpg 40,15 Kb

WebDisaster

Дата 25.6.2007, 15:07 (ссылка)

(голосов:1)

Загрузка ...

Опытный

Профиль
Группа: Участник
Сообщений: 406
Регистрация: 22.6.2007

Репутация: 17
Всего: 19

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

Тогда делается это так:

Картинка режется на три части

1. Верх со скруглёнными углами
2. Средина, которая будет repeat-y
3. Низ со скруглёнными краями

Ширина у всех картинок должна быть одинаковой, вертикальные линии при складывании одна-поверх-другой должны совпадать.

Предположим, что наши "модули" со скруглёнными краями выводятся внутри левой колонки (#left)

Код

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Делаем модуль со скруглёнными углами</title>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />

<style type="text/css">

#left div.module {
width: 150px; /* ширина картинки, подкладываемой бэкграундом */
background: transparent url(middle.jpg) left repeat-y; /* картинка "средины", которая "тянется" по высоте */
margin-bottom: 10px;
}

#left div.module div {
width: 150px;
background: transparent url(top.jpg) top left no-repeat; /* картинка "верхушки" */
}

#left div.module div div {
width: 150px;
background: transparent url(bottom.jpg) bottom left no-repeat; /* картина "низа" */
}

#left div.module div div div {
width: 135px; /* полезная ширина, отводимая внутри модуля под его содержимое */
padding: 10px 10px 10px 5px;
background: transparent;
}
</style>


</head>

<body>
<div id="left">
    <div class="module">
        <div>
            <div>
                <div>
                    <p>Полезное содержимое внутри модуля</p>
                </div>
            </div>
        </div>
    </div>
</div>
</body>
</html>

ЗЫ. Вроде бы не накосячил smile

Это сообщение отредактировал(а) WebDisaster - 25.6.2007, 22:37

z-END

Дата 25.6.2007, 15:18 (ссылка)

(нет голосов)

Загрузка ...

прафесар™

Профиль
Группа: Комодератор
Сообщений: 3014
Регистрация: 13.3.2003
Где: Венья, Пиетари

Репутация: 4
Всего: 102

http://hunter.vingrad.ru/ так?

--------------------

Каждый чилавек пасвоему праф...а памоему НЕТ!

Uratsakidogi

Дата 26.6.2007, 12:22 (ссылка)

(нет голосов)

Загрузка ...

Шустрый

Профиль
Группа: Участник
Сообщений: 118
Регистрация: 17.10.2006

Репутация: 11
Всего: 11

http://cssplay.co.uk/boxes/snazzy.html

--------------------

ЖЖ | ВерстаюНЕПОЗВОЛЯЙТЕ ЯЩЕРИКАМ, ОТРИЦАТЕЛЬНЫМ ИНОПЛАНЕТЯНИНАМ ОВЛАДЕВАТЬ ВАС, НЕ СТАНОВИТЕСЬ ИХ МАРИОНЕТКАМИ!

webster

Дата 26.6.2007, 20:32 (ссылка)

(нет голосов)

Загрузка ...

Опытный

Профиль
Группа: Участник
Сообщений: 361
Регистрация: 1.1.2007

Репутация: 34
Всего: 34

На CSS я думаю можно "нарисовать" практически все, что есть на прикрепленной вами картинке... за исключением фотографии дерева... очень долго придется Дивами выставлять каждый цветной пиксель. smile

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

liliana2

Дата 27.5.2008, 09:49 (ссылка)

(нет голосов)

Загрузка ...

Бывалый

Профиль
Группа: Участник
Сообщений: 178
Регистрация: 19.11.2007

Репутация: нет
Всего: нет

в общем проблема следующая есть таблица

Код


<div id="content">
<div id="right">
<div id="right_center"><table>
<tr class="dark_left"><th colspan="2">Âûëåò</th>
<th colspan="2">Ïðèëåò</th><th>Ñàìîëåò</th><th class="dark_right">Êëàññ</th></tr>
<tr class="dl_left"><td class="bold">25.02.04</td><td>Øåðåìåòüåâî</td><td class="bold">25.02.04</td><td>Øåðåìåòüåâî</td><td>ÒÓ5</td><td class="dl_right">Ýêîíîì<div></div></td></tr>
<tr  class="light_left"><td class="bold">25.02.04</td><td>Øåðåìåòüåâî</td><td class="bold">25.02.04</td><td>Øåðåìåòüåâî</td><td>ÒÓ5</td><td  class="light_right">Ýêîíîì</td></tr>
<tr class="dl_left"><td class="bold">25.02.04</td><td>Øåðåìåòüåâî</td><td class="bold">25.02.04</td><td>Øåðåìåòüåâî</td><td>ÒÓ5</td><td class="dl_right">Ýêîíîì</td></tr>
<tr class="dark_left"><td colspan="5" style="background: #fff;"></td><th class="dark_right">17345 ÐÓÁ.</th></tr>
</table></div>
</div>
<div class="clear"></div>
</div>

Код


#content {
    margin: 10px 0 111px 0;
}
#right {
    margin: 0 ; 
    padding: 0px;
    width: 65%; 
    float: left; 
}
#right_left{
    margin: 0; 
    padding: 0 5px;
    width: 60%; 
    float: left; 
}
#right_right{
    margin: 0; 
    padding: 0px;
    width: 30%;
    float: right; 
    font-weight: normal;
}
#right_center{
    margin: 0px 0;
    padding: 0px;
    width: 99%; 
    clear: both; 
}
#right_center table {
    padding: 20px 0 0 0;
    width: 100%;
    background: #fff;
    font-size: 11px;
    text-align: center;
}
#right_center table tr.light_left {
    background: #d8cedb url('../i/table/light_left_top.gif') no-repeat 0 0;
    height: 37px;
    position: relative;
}
#right_center table td.light_right {
    background: #d8cedb url('../i/table/light_right_top.gif') no-repeat 100% 0;
    height: 37px;
}
#right_center table tr.dark_left {
    background: #3b0c49 url('../i/table/dark_left_top.gif') no-repeat 0 0;
    height: 24px;
}
#right_center table th.dark_right {
    background: #3b0c49 url('../i/table/dark_right_top.gif') no-repeat 100% 0;
    height: 24px;
}
#right_center table tr.dl_left {
    background: #9d85a4 url('../i/table/dl_left_top.gif') no-repeat 0 0;
}
#right_center table td.dl_right {
    background: #9d85a4 url('../i/table/dl_right_top.gif') no-repeat 100% 0;
    position: relative;
}
#right_center table td {
    position: relative;
}
#right_center table td div {
    width: 10px;
    height: 9px;
    position: absolute;
    background: url('../i/table/dl_right_bottom.gif') no-repeat;
    right: 0.8%;
    bottom: -34.6%;
}

#right_center table th {
    color: #fff
}
.bold {
 font-weight: bold;
}

Собсно с верхними уголками все отлично, а нижни пытаюсь сделать позиционирование, но что-то все как-то не выходит подскажите плиз, и если можно, то ОЧЕНЬ бы хотелось: smile

liliana2

Дата 27.5.2008, 15:52 (ссылка)

(нет голосов)

Загрузка ...

Бывалый

Профиль
Группа: Участник
Сообщений: 178
Регистрация: 19.11.2007

Репутация: нет
Всего: нет

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

Код


<table>
<tr class="dark"><th class="dark_left"><div class="dark_left_bottom"></div>Âûëåò</th><th>Ïðèëåò</th><th>Ñàìîëåò</th><th class="dark_right">Êëàññ<div class="dark_right_bottom"></div></th></tr>

<tr class="dl"><td class="dl_left"><div class="dl_left_bottom"></div><span class="table_content_date">25.05.08</br>10:20</span><span style="float: left; padding:10px 0 0 10px;">Øåðåìåòüåâî1</br>Ìîñêâà</span></td><td><span class="table_content_date">25.05.08</br>10:20</span><span style="float: left; padding:10px 0 0 10px;">Øåðåìåòüåâî1</br>Ìîñêâà</span</td><td>ÒÓ5</td><td class="dl_right"><div class="dl_right_bottom"></div>Ýêîíîì</td></tr>

<tr class="light"><td class="light_left"><div class="light_left_bottom"></div><span class="table_content_date">25.05.08</br>10:20</span><span style="float: left; padding:10px 0 0 10px;">Øåðåìåòüåâî1</br>Ìîñêâà</span></td><td><span class="table_content_date">25.05.08</br>10:20</span><span style="float: left; padding:10px 0 0 10px;">Øåðåìåòüåâî1</br>Ìîñêâà</span</td><td>ÒÓ5</td><td class="light_right"><div class="light_right_bottom"></div>Ýêîíîì</td></tr>

<tr class="dl"><td class="dl_left"><div class="dl_left_bottom"></div><span class="table_content_date">25.05.08</br>10:20</span><span style="float: left; padding:10px 0 0 10px;">Øåðåìåòüåâî1</br>Ìîñêâà</span></td><td><span class="table_content_date">25.05.08</br>10:20</span><span style="float: left; padding:10px 0 0 10px;">Øåðåìåòüåâî1</br>Ìîñêâà</span</td><td>ÒÓ5</td><td class="dl_right"><div class="dl_right_bottom"></div>Ýêîíîì</td></tr>

<tr><th colspan="3"  style="background: #fff;"></th><th class="dark_right"><div class="dark_left_"></div><div class="dark_left_bottom"></div>17345 ÐÓÁ.<div class="dark_right_bottom"></div></th></tr>
</table>

Код


#right_center table {
    width: 100%;
    background: #fff;
    font-size: 11px;
    text-align: center;
}
*html #right_center table tr {
    height: 24px;
}
#right_center table th {
    color: #fff
}
#right_center table tr.dark {
    background: #3b0c49;
}
#right_center table th.dark_left {
    background: #3b0c49 url('../i/table/dark_left_top.gif') no-repeat 0 0;
    height: 9px;
    position: relative;
}
.dark_left_top {
    background: url('../i/table/dark_left_top.gif') no-repeat;
    width: 10px;
    height: 9px;
    position: absolute;
    top: 0;
    left: 0;
}
.dark_left_bottom {
    background: url('../i/table/dark_left_bottom.gif') no-repeat;
    width: 10px;
    height: 9px;
    position: absolute;
    bottom: -4px;
    left: 0;
}
.dark_right_bottom {
    background: url('../i/table/dark_right_bottom.gif') no-repeat;
    width: 10px;
    height: 9px;
    position: absolute;
    bottom: -4px;
    right: -1px;
}
#right_center table th.dark_right {
    background: #3b0c49 url('../i/table/dark_right_top.gif') no-repeat 100% 0;
    height: 9px;
    position: relative;
}


#right_center table tr.light {
    background: #d8cedb;
}
#right_center table td.light_left {
    background: #d8cedb url('../i/table/light_left_top.gif') no-repeat 0 0;
    height: 9px;
    position: relative;
}
.light_left_bottom {
    background: #d8cedb url('../i/table/light_left_bottom.gif') no-repeat 0 100%;
    width: 10px;
    height: 9px;
    position: absolute;
    bottom: 0px;
    left: 0px;
    dispaly: block;
}
.light_right_bottom {
    background: #d8cedb url('../i/table/light_right_bottom.gif') no-repeat 100% 100%;
    width: 10px;
    height: 9px;
    position: absolute;
    bottom: 0px;
    right: -1px;
}
#right_center table td.light_right {
    background: #d8cedb url('../i/table/light_right_top.gif') no-repeat 100% 0;
    height: 9px;
    position: relative;
}

#right_center table tr.dl {
    background: #9d85a4;
}
#right_center table td.dl_left {
    background: #9d85a4 url('../i/table/dl_left_top.gif') no-repeat 0 0;
    height: 9px;
    position: relative;
}
.dl_left_bottom {
    background: #9d85a4 url('../i/table/dl_left_bottom.gif') no-repeat 0 100%;
    width: 10px;
    height: 9px;
    position: absolute;
    bottom: 0px;
    left: 0px;
}
.dl_right_bottom {
    background: #9d85a4 url('../i/table/dl_right_bottom.gif') no-repeat 100% 100%;
    width: 10px;
    height: 9px;
    position: absolute;
    bottom: 0px;
    right: -1px;
}
#right_center table td.dl_right {
    background: #9d85a4 url('../i/table/dl_right_top.gif') no-repeat 100% 0;
    height: 9px;
    position: relative;
}

ПОДСКАЖИТЕ пожалуста, очень надо

lukas

Дата 27.5.2008, 16:12 (ссылка)

(нет голосов)

Загрузка ...

Опытный

Профиль
Группа: Участник
Сообщений: 771
Регистрация: 23.2.2007

Репутация: 3
Всего: 15

Я такое делаю 4мя вложеными друг в друга дивами... Просто можно верезать каждый угол... и в каждом диве прописать бэкграунд к нужной картинке углу. А вообще вроде через filter можно переворачивать картинки, и в итоге выйдет еще меньше дивов и изображений.

Код


.block 
 {
  background: //левый угол...
 }

.block div
 {
  background: // правый угол
 }

.block div div
 {
   background: // нижний угол...
 }
..
..
..

используем так

<div class="block"><div><div>
 <div>
 </div>
</div></div></div>

Можно сразу задать еще фиксированную ширину, длину и т.к.

Это сообщение отредактировал(а) lukas - 27.5.2008, 16:15

--------------------

http://code.google.com/p/orionphp/ - opensource скриптовой язык Orion (аналог PHP) для freepascal/delphi.

Demonis

Дата 27.5.2008, 16:37 (ссылка)

(нет голосов)

Загрузка ...

Новичок

Профиль
Группа: Участник
Сообщений: 32
Регистрация: 12.2.2008
Где: Санкт-Петербург

Репутация: 1
Всего: 1

Код


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=windows-1251">
<title>Untitled</title>
<style type="text/css">
<!--
#main {
overflow: hidden;
background-color: silver;
width: 300px;
}
#main div {
font-weight: bold;
font-family: "Tahoma";
font-size: 11px;
clear: both;
padding-top: 10px;
padding-bottom: 10px;
text-align: center;
}
img {
height: 10px;
width: 10px;
background-color: green;
}
-->
</style>

</head>
<body>
<div id="main">
  <img src="#" alt="" align="left" hspace="0" vspace="0"><img src="#" alt="" align="right" hspace="0" vspace="0">
    <div>Какой-то текст..</div>
  <img src="#" alt="" align="left" hspace="0" vspace="0"><img src="#" alt="" align="right" hspace="0" vspace="0">
</div>
</body>
</html>

1 Пользователей читают эту тему (1 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема \| Вёрстка веб-сайтов \| Следующая тема »