Заголовок
Форум hotibo.ru
Сайты - по стандартам, но не стандартные сайты!
Страниц: 1
- Главная
- » Вёрстка по стандартам (x)HTML + CSS
- » Создание блока обрамленного фоновыми картинками.
#1 07.03.2011 00:02
- Amestigon
- Новичок
- Зарегистрирован: 06.03.2011
- Сообщений: 3
Создание блока обрамленного фоновыми картинками.
Всем добрый день. Помогите чайнику.
Идея: сделать блок растягивающийся по ширине и высоте в зависимости от контента и обрамленного фоновым рисунком (в моем случае тенями).
Реализация: создается 8 фоновых картинок, 4 по углам фиксированных размеров, 2 боковых с высотой 1px и верхний с нижним с шириной тоже в 1px.
код HTML:
Код:
код css:
Код:
#nav {float:left; width:180px; margin-top:20px;}
.tl {background-image:url('img/tl.png'); background-repeat:no-repeat; float:left; width:9px; height:27px; margin-right:-3px;}
.tr {background-image:url('img/tr.png'); background-repeat:no-repeat; float:right; width:9px; height:27px; margin-left:-3px;}
.tc {background-image:url('img/tc.png'); background-repeat:repeat-x; height:27px;}
.cl {background-image:url('img/cl.png'); background-repeat:repeat-y; float:left; width:9px;}
.cr {background-image:url('img/cr.png'); background-repeat:repeat-y; float:right; width:9px;}
.cc {margin:0px 9px;}
.bl {background-image:url('img/bl.png'); background-repeat:no-repeat; float:left; width:9px; height:27px; margin-right:-3px;}
.br {background-image:url('img/br.png'); background-repeat:no-repeat; float:right; width:9px; height:27px; margin-left:-3px;}
.bc {background-image:url('img/bc.png'); background-repeat:repeat-x; height:27px;}Проблема: боковые картинки (cl.png и cr.png) не растягиваются по высоте. В IE картинка растягивается пикселей на 15, а в опере вообще отображается только 1px (т.е реальная высота картинки).
Искал по поиску, но ничего подходящего не нашел. С помощью таблиц данная конструкция создается без проблем, но хочется именно с помощью дивов. Всем зараннее спасибо.
Отредактированно Amestigon (07.03.2011 00:13)
Нет на форуме
#2 07.03.2011 12:48
- Ilya Lebedev
- Разбирающийся
- Зарегистрирован: 19.07.2010
- Сообщений: 52
- Вебсайт
Re: Создание блока обрамленного фоновыми картинками.
Такое подойдёт?
http://debugger.ru/demo/other/roundedbox/
Нет на форуме
#3 07.03.2011 14:19
- kizmarh
- Новичок
- Зарегистрирован: 07.03.2011
- Сообщений: 2
Re: Создание блока обрамленного фоновыми картинками.
Ну, как вариант..
HTML:
Код:
контент
и CSS:
Код:
.t,.tr,.tl {height:15px;}
.b,.br,.bl {height:19px;}
.tl,.bl,.tr,.br {width:21px;}
.r {background:url(r.gif) repeat-y right;}
.l {background:url(l.gif) repeat-y left;}
.t {background:url(t.gif) repeat-x top center;}
.b {background:url(b.gif) repeat-x bottom center;}
.tl {background:url(tl.gif) no-repeat top left;float:left;}
.tr {background:url(tr.gif) no-repeat top right;float:right;}
.bl {background:url(bl.gif) no-repeat bottom left;float:left;}
.br {background:url(br.gif) no-repeat bottom right;float:right;}
.entry {margin:0 20px;clear:both;}Не самый лучший и полный вариант, но идея должна быть ясна )
Нет на форуме
#4 07.03.2011 19:03
- Amestigon
- Новичок
- Зарегистрирован: 06.03.2011
- Сообщений: 3
Re: Создание блока обрамленного фоновыми картинками.
Ilya Lebedev написал:
Такое подойдёт?
http://debugger.ru/demo/other/roundedbox/
Спасибо за ссылку, но к сожалению это не совсем то. Данный принцип хорош и широко используется на разных сайтах, (в том числе и на этом, по моему), но задумка в том, что бы кардинально менять оформление только за счет изменения непосредственно изображений, не затрагивая код. А это можно сделать только за счет симметрично расположенных картинок. В данном же примере изображения ассиметричны.
Нет на форуме
#5 07.03.2011 19:23
- Ilya Lebedev
- Разбирающийся
- Зарегистрирован: 19.07.2010
- Сообщений: 52
- Вебсайт
Re: Создание блока обрамленного фоновыми картинками.
Ну, используя этот сниппет я вполне успешно меняю оформление на многих сайтах 8*)
В чём проблема асиммертичных изображений -- не вижу.
В любом случае, при смене фоновых картинок придётся менять и CSS, если размеры рамок отличаются от базовых.
Нет на форуме
#6 07.03.2011 23:26
- Amestigon
- Новичок
- Зарегистрирован: 06.03.2011
- Сообщений: 3
Re: Создание блока обрамленного фоновыми картинками.
Кажется получилось.
HTML
Код:
css
Код:
.top {text-align:center;} .top .left {background:url(img/tl.png) no-repeat; float:left; width:9px; height:27px; margin-right:-3px;} .top .right {background:url(img/tr.png) no-repeat; float:right; width:9px; height:27px; margin-left:-3px;} .top .center {background-image:url(img/tc.png); height:27px; line-height:27px;} .menu {;} .menu .left {background:url(img/cl.png) left repeat-y;} .menu .right {background:url(img/cr.png) right repeat-y;} .menu .center {padding:1px 0px 1px 0px;} .bottom {;} .bottom .left {background:url(img/bl.png) no-repeat; float:left; width:9px; height:27px; margin-right:-3px;} .bottom .right {background:url(img/br.png) no-repeat; float:right; width:9px; height:27px; margin-left:-3px;} .bottom .center {background-image:url(img/bc.png); height:27px;}А вдруг кому нибудь пригодится.
Отредактированно Amestigon (09.03.2011 16:00)
Нет на форуме
#7 09.03.2011 17:26
- Demon
- Новичок
- Зарегистрирован: 26.10.2010
- Сообщений: 27
Re: Создание блока обрамленного фоновыми картинками.
Написал более простой вариант.
С растягивающимися изображениями.
Код:
Untitled 
Text!!! Text!!! Text!!! Text!!! Text!!! Text!!! Text!!! Text!!! Text!!! Text!!! Text!!! Text!!!
На дивах.
Код:
Untitled Text!!! Text!!! Text!!! Text!!! Text!!! Text!!! Text!!! Text!!! Text!!! Text!!! Text!!! Text!!!
Отредактированно Demon (09.03.2011 17:56)
Нет на форуме
#8 14.03.2011 11:06
- kizmarh
- Новичок
- Зарегистрирован: 07.03.2011
- Сообщений: 2
Re: Создание блока обрамленного фоновыми картинками.
Demon написал:
Написал более простой вариант.
Ну, может, и простой, но - 
в обоих вариантах, в опере и фф. В ие тоже косяки.
Нет на форуме
Страниц: 1
- Главная
- » Вёрстка по стандартам (x)HTML + CSS
- » Создание блока обрамленного фоновыми картинками.