Сайты - по стандартам, но не стандартные сайты!
Страниц: 1
Всем добрый день. Помогите чайнику.
Идея: сделать блок растягивающийся по ширине и высоте в зависимости от контента и обрамленного фоновым рисунком (в моем случае тенями).
Реализация: создается 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)
Нет на форуме
Такое подойдёт?
http://debugger.ru/demo/other/roundedbox/
Нет на форуме
Ну, как вариант..
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;}
Не самый лучший и полный вариант, но идея должна быть ясна )
Нет на форуме
Ilya Lebedev написал:
Такое подойдёт?
http://debugger.ru/demo/other/roundedbox/
Спасибо за ссылку, но к сожалению это не совсем то. Данный принцип хорош и широко используется на разных сайтах, (в том числе и на этом, по моему), но задумка в том, что бы кардинально менять оформление только за счет изменения непосредственно изображений, не затрагивая код. А это можно сделать только за счет симметрично расположенных картинок. В данном же примере изображения ассиметричны.
Нет на форуме
Ну, используя этот сниппет я вполне успешно меняю оформление на многих сайтах 8*)
В чём проблема асиммертичных изображений -- не вижу.
В любом случае, при смене фоновых картинок придётся менять и CSS, если размеры рамок отличаются от базовых.
Нет на форуме
Кажется получилось.
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)
Нет на форуме
Написал более простой вариант.
С растягивающимися изображениями.
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)
Нет на форуме
Demon написал:
Написал более простой вариант.
Ну, может, и простой, но - в обоих вариантах, в опере и фф. В ие тоже косяки.
Нет на форуме
Страниц: 1