Помогите с версткой

P

6

pato

26 марта 2011, 17:09

732

Добрый вечер.

Вопрос в том, каким образом сверстать вот этот фон под блоками??

http://i037.radikal.ru/1103/13/b9cf5a54f3d5.jpg

[Удален]

26 марта 2011, 17:23

#1

что значит как?

2-х колончатый макет.

3 блока с float:left; clear: left;

хедер и все такое. Что в этом примере экстаординарного?

P

6

pato

26 марта 2011, 17:28

#2

я про то что как сделать тот фон с округленными краями?

[Удален]

26 марта 2011, 17:30

#3

Забанили везде?

95

A-Psina

29 марта 2011, 19:24

#4

3 дива, вырезаеете верхнюю часть по всей длине, 1 пиксельную полоску по всей длине. и нижнюю часть фона по все длине!

получиться:

</div>

стили:

.bg{

background: url('images/bg.jpg') repeat-y center;

}

.bgtop{

background: url('images/bgtop.jpg') no-repeat top;

}

.bgbottom{

background: url('images/bgbottom.jpg') no-repeat bottom;

}

Разработка и поддержка web-решений

Оптимизация плавающих фреймов для Long-tail запросы насколько они Упрощенный способ настройки фиксации

70

herbst

29 марта 2011, 20:54

#5

A-Psina, а что если ширина блока не фиксирована?

Тогда лучше вырезать четыре угла (левый-верхний, левый-нижний, правый-верхний и правый нижний).

HTML:

<div class='l-t'><div class='l-b'><div class='r-t'><div class='r-b'>

Контент блока

</div></div></div></div>

CSS:

.l-t { /* Левый верхний угол*/
background: url('левый-верхний.jpg') repeat-y left top;
width: ширина блока;
height: высота блока;
}

.l-b { /* Левый нижний угол*/
background: url('левый-нижний.jpg') repeat-y left bottom;
}

.r-t { /* Правый верхний угол*/
background: url('правый-верхний.jpg') repeat-y right top;
}

.r-b { /* Правый нижний угол*/
background: url('правый-нижний.jpg') repeat-y right bottom;
padding: 10px; /* отступ контента от границ блока нужно установить тут */
}

Как-то так примерно )

Правда этот способ не подразумевает возможность рамки у блока.

ТС, в целом, просто погуглите - вариантов закругленных углов гора. Где-то даже видел статью 100 вариантов закругленных углов на css )))

Также можете воспользоваться jquery плагином corner, и если ориентируетесь исключительно на последние версии браузеров то посмотрите в сторону css свойства border-radius (http://www.the-art-of-web.com/css/border-radius/)

10 советов по использованию Google готовит редизайн браузера Упрощенный способ настройки фиксации

95

A-Psina

5 апреля 2011, 10:06

#6

herbst, если это резина то нужно создавать не 4, а 8 дивов:) не только с углами а и с границами с каждой стороны

чтоб была полноценная тянущяяся куда угодно рамка

</div>

css:

.contentleft{

background: url('images/header2.jpg') repeat-y left top;

}

.contentright{

background: url('images/header2.jpg') repeat-y right top;

}

.contenttop{

background: url('images/contenttop.jpg') repeat-x left top;

}

.contentbottom{

background: url('images/contentbottom.jpg') repeat-x left bottom;

}

.contentlefttop{

background: url('images/contentlefttop.jpg') no-repeat left top;

}

.contentrighttop{

background: url('images/contentrighttop.jpg') no-repeat right top;

}

.contentleftbottom{

background: url('images/contentleftbottom.jpg') no-repeat left bottom;

}

.contentrightbottom{

background: url('images/contentrightbottom.jpg') no-repeat right bottom;

}

Оптимизация плавающих фреймов для Яндекс позволил управлять дизайном Как можно наказать за

[Удален]

5 апреля 2011, 11:17

#7

Хм. А css3 для чего?🍿

95

A-Psina

5 апреля 2011, 13:25

#8

U_profi_belive:
Хм. А css3 для чего?🍿

а крособраузерность нам уже ненужна?:)

[Удален]

5 апреля 2011, 13:37

#9

А это для чего придумали?:)

95

A-Psina

5 апреля 2011, 15:40

#10

U_profi_belive:
А это для чего придумали?:)

кому как проще, мне проще обойтись без хаков, а цсс3 хорошая вещь тогда когда все браузеры под него подшаманят!

В 2023 году Google заблокировал более 170 млн фальшивых отзывов на Картах

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