Меню с закруглёнными углами

[Digidie]

Доброго времени суток! В общем проблема такая. Есть верхяя менюха. При наведении на пункт background-ом должно быть изображение. Оно с закругленными углами. И оно должно тянутся в зависимости от количества символов. Помогите люди добрые. Подскажите как такое сделать???

вот пример http://itmages.ru/image/view/309842/e7c5ce56

Edited October 22, 2011 by Digidie

[Softlink]

А у самого какие мысли по этому поводу?

[Digidie]

Доброго времени суток! В общем проблема такая. Есть верхяя менюха. При наведении на пункт background-ом должно быть изображение. Оно с закругленными углами. И оно должно тянутся в зависимости от количества символов. Помогите люди добрые. Подскажите как такое сделать???

вот пример http://itmages.ru/image/view/309842/e7c5ce56

мысли такие порезать изображение на три части левую центральную и правую. Для ul прописать класс и в него сделать центральную часть. А в li вставить div и в него прописать левую и праую части. Может есть способ проще подскажите.

[Softlink]

Доброго времени суток! В общем проблема такая. Есть верхяя менюха. При наведении на пункт background-ом должно быть изображение. Оно с закругленными углами. И оно должно тянутся в зависимости от количества символов. Помогите люди добрые. Подскажите как такое сделать???

вот пример http://itmages.ru/image/view/309842/e7c5ce56

мысли такие порезать изображение на три части левую центральную и правую. Для ul прописать класс и в него сделать центральную часть. А в li вставить div и в него прописать левую и праую части. Может есть способ проще подскажите.

Можно и вовсе без картинок сделать

[Digidie]

Доброго времени суток! В общем проблема такая. Есть верхяя менюха. При наведении на пункт background-ом должно быть изображение. Оно с закругленными углами. И оно должно тянутся в зависимости от количества символов. Помогите люди добрые. Подскажите как такое сделать???

вот пример http://itmages.ru/image/view/309842/e7c5ce56

мысли такие порезать изображение на три части левую центральную и правую. Для ul прописать класс и в него сделать центральную часть. А в li вставить div и в него прописать левую и праую части. Может есть способ проще подскажите.

Можно и вовсе без картинок сделать

А по поводу кроссбраузерности?

[Softlink]

Доброго времени суток! В общем проблема такая. Есть верхяя менюха. При наведении на пункт background-ом должно быть изображение. Оно с закругленными углами. И оно должно тянутся в зависимости от количества символов. Помогите люди добрые. Подскажите как такое сделать???

вот пример http://itmages.ru/image/view/309842/e7c5ce56

мысли такие порезать изображение на три части левую центральную и правую. Для ul прописать класс и в него сделать центральную часть. А в li вставить div и в него прописать левую и праую части. Может есть способ проще подскажите.

Можно и вовсе без картинок сделать

А по поводу кроссбраузерности?

Все, от 8 ИЕ(включительно) и ниже будет квадратное. Но ради 15% пользователей не стоит заставлять браузеры остальных 85-ти обрабатывать кучу ненужного кода.

В крайнем случае можно задействовать PIE, но штука крайне капризная и тяжеловатая.

[Digidie]

Доброго времени суток! В общем проблема такая. Есть верхяя менюха. При наведении на пункт background-ом должно быть изображение. Оно с закругленными углами. И оно должно тянутся в зависимости от количества символов. Помогите люди добрые. Подскажите как такое сделать???

вот пример http://itmages.ru/image/view/309842/e7c5ce56

мысли такие порезать изображение на три части левую центральную и правую. Для ul прописать класс и в него сделать центральную часть. А в li вставить div и в него прописать левую и праую части. Может есть способ проще подскажите.

Можно и вовсе без картинок сделать

А по поводу кроссбраузерности?

Все, от 8 ИЕ(включительно) и ниже будет квадратное. Но ради 15% пользователей не стоит заставлять браузеры остальных 85-ти обрабатывать кучу ненужного кода.

В крайнем случае можно задействовать PIE, но штука крайне капризная и тяжеловатая.

Я смотрю вы спец. Будет у меня ещё один вопросец. В общем есть сайт состоящий из шапки, двух колонок и футера. Всё бы ничего, но есть там такая нехорошая тень. Она от верха постепенно набирает насыщенность, по центру идёт полноценная, а книзу опять угасает. И надо сделать так чтобы эта тень растягивалась в зависимости от высоты контента. Сделать надо на дивах и сделать кроссбраузерно.Подскажите пожалуйста.

Вот макет: http://itmages.ru/image/view/309867/ef05ae05

[Softlink]

Совсем кроссбраузерно - это картинками, которые навешивать по краям основных блоков. Если не считаться с тем же ИЕ, то можно и так оформить все это дело http://jsfiddle.net/vLDsJ/

[Digidie]

Совсем кроссбраузерно - это картинками, которые навешивать по краям основных блоков. Если не считаться с тем же ИЕ, то можно и так оформить все это дело http://jsfiddle.net/vLDsJ/

Я не про это. Обратите внимание на тень которая находится справа от левой колонки. Она как бы отделяет контент.

[Softlink]

ну как вот у вас поделено на 3 блока, к ним слева цеплять бг с тенью. К центральному блоку подцепить тянущуюся тень. Либо в моем примере сдвинуть тень влево и будет такой же эффект.

[Digidie]

ну как вот у вас поделено на 3 блока, к ним слева цеплять бг с тенью. К центральному блоку подцепить тянущуюся тень. Либо в моем примере сдвинуть тень влево и будет такой же эффект.

Мне надо так чтобы в ie работала.Если вам не трудно можете пример привести.Буду очень признателен. Нужно так чтобы верхняя тень была "тухлая" полноценная тянулась в зависимости от высоты контента и нижняя тухлая была.

[Softlink]

ну как вот у вас поделено на 3 блока, к ним слева цеплять бг с тенью. К центральному блоку подцепить тянущуюся тень. Либо в моем примере сдвинуть тень влево и будет такой же эффект.

Мне надо так чтобы в ie работала.Если вам не трудно можете пример привести.Буду очень признателен. Нужно так чтобы верхняя тень была "тухлая" полноценная тянулась в зависимости от высоты контента и нижняя тухлая была.

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

Делим правую колонку на три части. К верхней цепляем "угасающую" тень без повторений. К центральному блоку цепляем уже повторяющуюся "нормальную" тень и вниз уже ставим опять эту угасающую тень без повторений. Верхнюю и нижнюю тень, если эти блоки сильно тянутся, делайте с запасом. Вот и все дела.

upd у вас же правый блок делится на три части? Насколько видно из макета, там есть разделительные линии.

[Digidie]

ну как вот у вас поделено на 3 блока, к ним слева цеплять бг с тенью. К центральному блоку подцепить тянущуюся тень. Либо в моем примере сдвинуть тень влево и будет такой же эффект.

Мне надо так чтобы в ie работала.Если вам не трудно можете пример привести.Буду очень признателен. Нужно так чтобы верхняя тень была "тухлая" полноценная тянулась в зависимости от высоты контента и нижняя тухлая была.

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

Делим правую колонку на три части. К верхней цепляем "угасающую" тень без повторений. К центральному блоку цепляем уже повторяющуюся "нормальную" тень и вниз уже ставим опять эту угасающую тень без повторений. Верхнюю и нижнюю тень, если эти блоки сильно тянутся, делайте с запасом. Вот и все дела.

upd у вас же правый блок делится на три части? Насколько видно из макета, там есть разделительные линии.

Так как вы говорите не получается. Поделил контент на 3 части. Разместил их друг под другом. И засунул эти 3 блока в один общий блок. Если в этом общем блоке что нибудь пишешь то вся конструкция из 3 блоков получается под текстом. А если начинаешь писать в одном из трёх блоков например в верхнем. То текст только помещается под размер высоты которую я задал для верхнего блока с тухлой тенью. И центральный блок который должен растягиваться никак не реагирует на всё это.Вот код:

html

<div id="wrapper">

<div id="left">left<br></div>

<div id="content">

<div id="cont_1"><br></div>

<div id="cont_2"><br></div>

</div>

</div>

CSS

#wrapper{

width:996px;

margin:0 auto;

background: url(../images/wrap_bg.gif) repeat-y top center;

}

#left{

width:252px;

float:left;

}

#content{

width:720px;

margin-left:252px;

}

#cont_1{

width:708px;

height:138px;

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

border:1px solid red;

padding-left:20px;

}

#cont_2{

width:708px;

background: url(../images/cont_2.jpg) repeat-y;

}

Если что не так подскажите пожалуйста!

upd третий (нижний) блок ещё не вставил.

Edited October 23, 2011 by Digidie

[mishka]

http://jsfiddle.net/XfYwe/5/

http://jsfiddle.net/XfYwe/9/ - добавил коментарии

[Softlink]

Порезал вашу картинку. Вот по такой схеме я предлагал сделать http://jsfiddle.net/vLDsJ/3/

Если нет возможности установить высоту верхним и нижним блокам, то сделать бг с запасом.

p.s. имхо, я все равно бы забил на ИЕ и сделал на бы CSS

[Digidie]

Я бы и рад забить на ie. Просто макет верстается под joomla. И макет не для себя а для заказчика. А если делать так как вы говорите то тогда какой блок определять как контент. Я думаю в контенте сделать background-ом полноценную тень. А сверху и снизу "тухлые" тени сделать картинками. Одной задать top а другой bottom. Это будет кроссбраузерно?

[mishka]

Я бы и рад забить на ie. Просто макет верстается под joomla. И макет не для себя а для заказчика. А если делать так как вы говорите то тогда какой блок определять как контент. Я думаю в контенте сделать background-ом полноценную тень. А сверху и снизу "тухлые" тени сделать картинками. Одной задать top а другой bottom. Это будет кроссбраузерно?

Я выше привел вариант для блока с пнг тенями с поддержкой ие6 включительно. Чем не подошел?

Но тут можно и без пнг обойтись.

Значит 3 вложенных блока, каждому кусок тени, центральная часть на самом верхнем, репитится по вертикали. Кусочки нижней и верхней тени на вложенных блоках.

Или так как ты предложил. Пробуй варианты, потом сам остановишься на том который тебе более всего понравится.

[Digidie]

Я бы и рад забить на ie. Просто макет верстается под joomla. И макет не для себя а для заказчика. А если делать так как вы говорите то тогда какой блок определять как контент. Я думаю в контенте сделать background-ом полноценную тень. А сверху и снизу "тухлые" тени сделать картинками. Одной задать top а другой bottom. Это будет кроссбраузерно?

Я выше привел вариант для блока с пнг тенями с поддержкой ие6 включительно. Чем не подошел?

Но тут можно и без пнг обойтись.

Значит 3 вложенных блока, каждому кусок тени, центральная часть на самом верхнем, репитится по вертикали. Кусочки нижней и верхней тени на вложенных блоках.

Или так как ты предложил. Пробуй варианты, потом сам остановишься на том который тебе более всего понравится.

C вложенными у меня не очень. Если не трудно можешь пример привести. А по поводу моего предположения получается так. В блоке контента вставил верхнюю тень в виде изображения. После вставил ещё один блок а в него вставил центральную тень которая тянется по вертикали. После блока вставил ещё одно изображение. Но результат примерно такой, если в блоке контента <br> прописываешь то все тени оказываются под текстом. А мне так ненадо. Код:

<div id="wrapper">

<div id="left">left<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br></div>

<div id="content">Content<br><br><br><br><br><br><br><br><br><br><br><br><br>

<img src="images/top_shadow.jpg" width="18px" height="175px" border="0" valign="top">

<div id="center">1</div>

<img src="images/bottom_shadow.jpg" width="18px" height="256px" border="0" valign="bottom">

</div>

</div>

CSS:

#wrapper{

width:996px;

margin:0 auto;

background: url(../images/wrap_bg.gif) repeat-y top center;

overflow:hidden;

}

#left{

width:252px;

float:left;

}

#content{

width:720px;

margin-left:252px;

overflow:hidden;

}

#center{

width:18px;

background: url(../images/center_shadow.jpg) repeat-y;

}

А по поводу вложенных если не трудно.

updРезультат: http://itmages.ru/image/view/310787/75362f39

Edited October 23, 2011 by Digidie

[mishka]

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

Или ты без него сделал?

http://jsfiddle.net/BUAuu/

Тут конечно, мягко говоря не пиксель перфект, но суть ясна. И по верхней тени видно что джипег тут не подойдет. Делай пнг, как в первом моем примере.

картинки хоть и в пнг формате, они без полупрозрачных областей

просто "резал" не в фотошопе, а с помощью проги для скринов, даже не резал, а просто сделал скрины. Можно было и подредактировать, но было лень.

http://lightshot.skillbrains.com/

[Digidie]

Всё сделал в точности как в примере. Результат всё равно не тот.Может ошибка где то в другом?

Код:

<body>

<div id="header"></div>

<div id="top_menu"></div>

<div id="wrapper">

<div id="left">left</div>

<div id="content">Content

<div class="top">

<div class="bottom">

</div>

</div>

</div>

</div>

</body>

CSS:

#header{

width:996px;

height:266px;

background: url(../images/header_bg.jpg) no-repeat center;

margin:0 auto;

}

#top_menu{

width:996px;

height:60px;

background: url(../images/top_menu.jpg) no-repeat;

margin:0 auto;

}

#wrapper{

width:996px;

margin:0 auto;

background: url(../images/wrap_bg.gif) repeat-y top center;

overflow:hidden;

}

#left{

width:252px;

float:left;

}

#content{

width:720px;

margin-left:252px;

border:1px solid magenta;

overflow:hidden;

background: url(../images/cont_bg.png) repeat-y;

}

.top{

width:18px;

height:148px;

background: url(../images/top_shadow.png) no-repeat;

}

.bottom{

background: url(../images/bottom_shadow.png) no-repeat 0 100%;

padding: 20px;

min-height: 300px;

[mishka]

здается мне что в твоем случае нужно заказать верстку.

А сам пока попрактикуйся на не коммерческих проектах.

[Digidie]

А так вообще вёрстка нормальная?