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

Digidie · October 22, 2011

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

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

Edited October 22, 2011 by Digidie

Softlink · October 22, 2011

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

Digidie · October 22, 2011

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

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

Softlink · October 22, 2011

Доброго времени суток! В общем проблема такая. Есть верхяя менюха. При наведении на пункт background-ом должно быть изображение. Оно с закругленными углами. И оно должно тянутся в зависимости от количества символов. Помогите люди добрые. Подскажите как такое сделать???
вот пример http://itmages.ru/image/view/309842/e7c5ce56
мысли такие порезать изображение на три части левую центральную и правую. Для ul прописать класс и в него сделать центральную часть. А в li вставить div и в него прописать левую и праую части. Может есть способ проще подскажите.

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

Digidie · October 22, 2011

Доброго времени суток! В общем проблема такая. Есть верхяя менюха. При наведении на пункт background-ом должно быть изображение. Оно с закругленными углами. И оно должно тянутся в зависимости от количества символов. Помогите люди добрые. Подскажите как такое сделать???
вот пример http://itmages.ru/image/view/309842/e7c5ce56
мысли такие порезать изображение на три части левую центральную и правую. Для ul прописать класс и в него сделать центральную часть. А в li вставить div и в него прописать левую и праую части. Может есть способ проще подскажите.
Можно и вовсе без картинок сделать

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

Softlink · October 22, 2011

Доброго времени суток! В общем проблема такая. Есть верхяя менюха. При наведении на пункт background-ом должно быть изображение. Оно с закругленными углами. И оно должно тянутся в зависимости от количества символов. Помогите люди добрые. Подскажите как такое сделать???
вот пример http://itmages.ru/image/view/309842/e7c5ce56
мысли такие порезать изображение на три части левую центральную и правую. Для ul прописать класс и в него сделать центральную часть. А в li вставить div и в него прописать левую и праую части. Может есть способ проще подскажите.
Можно и вовсе без картинок сделать
А по поводу кроссбраузерности?

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

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

Digidie · October 22, 2011

Доброго времени суток! В общем проблема такая. Есть верхяя менюха. При наведении на пункт background-ом должно быть изображение. Оно с закругленными углами. И оно должно тянутся в зависимости от количества символов. Помогите люди добрые. Подскажите как такое сделать???
вот пример http://itmages.ru/image/view/309842/e7c5ce56
мысли такие порезать изображение на три части левую центральную и правую. Для ul прописать класс и в него сделать центральную часть. А в li вставить div и в него прописать левую и праую части. Может есть способ проще подскажите.
Можно и вовсе без картинок сделать
А по поводу кроссбраузерности?
Все, от 8 ИЕ(включительно) и ниже будет квадратное. Но ради 15% пользователей не стоит заставлять браузеры остальных 85-ти обрабатывать кучу ненужного кода.
В крайнем случае можно задействовать PIE, но штука крайне капризная и тяжеловатая.

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

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

Softlink · October 22, 2011

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

Digidie · October 22, 2011

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

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

Softlink · October 22, 2011

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

Digidie · October 22, 2011

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

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

Softlink · October 22, 2011

ну как вот у вас поделено на 3 блока, к ним слева цеплять бг с тенью. К центральному блоку подцепить тянущуюся тень. Либо в моем примере сдвинуть тень влево и будет такой же эффект.
Мне надо так чтобы в ie работала.Если вам не трудно можете пример привести.Буду очень признателен. Нужно так чтобы верхняя тень была "тухлая" полноценная тянулась в зависимости от высоты контента и нижняя тухлая была.

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

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

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

Digidie · October 23, 2011

ну как вот у вас поделено на 3 блока, к ним слева цеплять бг с тенью. К центральному блоку подцепить тянущуюся тень. Либо в моем примере сдвинуть тень влево и будет такой же эффект.
Мне надо так чтобы в ie работала.Если вам не трудно можете пример привести.Буду очень признателен. Нужно так чтобы верхняя тень была "тухлая" полноценная тянулась в зависимости от высоты контента и нижняя тухлая была.
У меня нет картинок, чтобы показать вам. Хотя логику я рассказал вроде бы.
Делим правую колонку на три части. К верхней цепляем "угасающую" тень без повторений. К центральному блоку цепляем уже повторяющуюся "нормальную" тень и вниз уже ставим опять эту угасающую тень без повторений. Верхнюю и нижнюю тень, если эти блоки сильно тянутся, делайте с запасом. Вот и все дела.
upd у вас же правый блок делится на три части? Насколько видно из макета, там есть разделительные линии.

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

html

</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 · October 23, 2011

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

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

Softlink · October 23, 2011

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

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

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

Digidie · October 23, 2011

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

mishka · October 23, 2011

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

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

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

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

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

Digidie · October 23, 2011

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

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

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

</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 · October 23, 2011

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

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

http://jsfiddle.net/BUAuu/

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

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

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

http://lightshot.skillbrains.com/

Digidie · October 23, 2011

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

Код:

<body>

<div id="content">Content

</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 · October 23, 2011

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

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

Digidie · October 23, 2011

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

Sign In

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

Question

Link to comment

Share on other sites

21 answers to this question

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation

Обсуждения

Important Information