Закругление меню

[DrStrangeLove]

http://inmyhood213.narod.ru/newfolder/corners.html

Не пойму почему не закругляются углы..

Может чего не замечаю??

[psywalker]

http://inmyhood213.narod.ru/newfolder/corners.html

Не пойму почему не закругляются углы..

Может чего не замечаю??

Всё он загругляет. Косяк в том, что у тебя углы пнг и первый слой своим repeat-x всё закрывает углам. Сделай отступы у всех, какие нада.

[DrStrangeLove]

http://inmyhood213.narod.ru/newfolder/corners.html

Не пойму почему не закругляются углы..

Может чего не замечаю??

Всё он загругляет. Косяк в том, что у тебя углы пнг и первый слой своим repeat-x всё закрывает углам. Сделай отступы у всех, какие нада.

В смысле, padding'и или margin'и ??

Задать всем трём слоям??

[DrStrangeLove]

вот не могу понять:

два примера:

http://inmyhood213.narod.ru/newfolder/new.html

http://inmyhood213.narod.ru/newfolder/corners2.html

Код, вроде, один и тоже, но второй пример не закругляется... (

В чём дело??

[flagreit]

вот не могу понять:

два примера:

http://inmyhood213.narod.ru/newfolder/new.html

http://inmyhood213.narod.ru/newfolder/corners2.html

Код, вроде, один и тоже, но второй пример не закругляется... (

В чём дело??

Потому, что в первом примере бакграунды с закруглениями используются без прозрачности (gif без прозрачности), поэтому уголки не закрашиваются, места закруглений они всегда будут белого цвета, если даже поменять фон.

Во втором же примере используются изображения с прозрачностью (png с прозрачностью), поэтому места прозрачности замещаются нижележащим фоном, бэкграундом родителя.

Edited May 27, 2011 by flagreit

[DrStrangeLove]

вот не могу понять:

два примера:

http://inmyhood213.narod.ru/newfolder/new.html

http://inmyhood213.narod.ru/newfolder/corners2.html

Код, вроде, один и тоже, но второй пример не закругляется... (

В чём дело??

Потому, что в первом примере бакграунды с закруглениями используются без прозрачности (gif без прозрачности), поэтому уголки не закрашиваются, места закруглений они всегда будут белого цвета, если даже поменять фон.

Во втором же примере используются изображения с прозрачностью (png с прозрачностью), поэтому места прозрачности замещаются нижележащим фоном, бэкграундом родителя.

Я вроде сохранял png8 без прозрачности... или они все с прозрачностью??

[flagreit]

вот не могу понять:

два примера:

http://inmyhood213.narod.ru/newfolder/new.html

http://inmyhood213.narod.ru/newfolder/corners2.html

Код, вроде, один и тоже, но второй пример не закругляется... (

В чём дело??

Потому, что в первом примере бакграунды с закруглениями используются без прозрачности (gif без прозрачности), поэтому уголки не закрашиваются, места закруглений они всегда будут белого цвета, если даже поменять фон.

Во втором же примере используются изображения с прозрачностью (png с прозрачностью), поэтому места прозрачности замещаются нижележащим фоном, бэкграундом родителя.

Я вроде сохранял png8 без прозрачности... или они все с прозрачностью??

С прозрачностью.

[DrStrangeLove]

вот не могу понять:

два примера:

http://inmyhood213.narod.ru/newfolder/new.html

http://inmyhood213.narod.ru/newfolder/corners2.html

Код, вроде, один и тоже, но второй пример не закругляется... (

В чём дело??

Потому, что в первом примере бакграунды с закруглениями используются без прозрачности (gif без прозрачности), поэтому уголки не закрашиваются, места закруглений они всегда будут белого цвета, если даже поменять фон.

Во втором же примере используются изображения с прозрачностью (png с прозрачностью), поэтому места прозрачности замещаются нижележащим фоном, бэкграундом родителя.

Я вроде сохранял png8 без прозрачности... или они все с прозрачностью??

С прозрачностью.

Понятно.. Спасибо..

Может, поможешь, ещё найти различия??

Вот пример я брал за основу верхнее нав. меню этого сайта (не спрашивай как меня туда занесло... ) Код вроде схож (там тоже png)Но закруглений у меня не получается... (

[flagreit]

Дак у тебя png то с прозрачностью, а там нет, поэтому и не получается) Если решил идти именно таким путём, каким сделано там, то сохранять картинку без прозрачности нужно. В фотошопе есть такая галочка, если конечно им пользуешься.

[DrStrangeLove]

Дак у тебя png то с прозрачностью, а там нет, поэтому и не получается) Если решил идти именно таким путём, каким сделано там, то сохранять картинку без прозрачности нужно. В фотошопе есть такая галочка, если конечно им пользуешься.

А готовую можно как-то поменять, т.е. отключить прозрачность??

P.S.: Я в Ps.

[DrStrangeLove]

Дак у тебя png то с прозрачностью, а там нет, поэтому и не получается) Если решил идти именно таким путём, каким сделано там, то сохранять картинку без прозрачности нужно. В фотошопе есть такая галочка, если конечно им пользуешься.

Закруглил...

не сразу понял. я действительно изначально сохранил png как непрозрачный... но очевидно, ты имел ввиду острые уголки, которые не должны быть видны при закруглении... они действительно были прозрачные т.к. был задан прозрачный фон. Сейчас я задал белый фон. Только вот вопрос: выходит закругления всегда нужно делать, делая фон такой же как в том месте где будет отображаться?? Или можно сделать фон.прозрачность, которая у меня была в начале?? Возможно для этого нужен другой код?? Какой?? Позиционирование??

[flagreit]

От требований к верстке зависит: если нужно делать под любой фон, т.е. гибкую верстку, то следует использовать прозрачность. В негибкой же верстке придётся при смене фона перерезать изображения.

Если опять смотреть рассматриваемый пример, то, чтобы места с прозрачностью не перекрывались, нужно, как раннее сказал Psywalker, или задать главному блоку padding (в данном случае "top-nav"), или margin его дочернему блоку.

Тут всё от требований зависит, от контента, от желания заказчика, от личных принципов, разными способами можно сделать закругления.

Edited May 27, 2011 by flagreit

[DrStrangeLove]

От требований к верстке зависит: если нужно делать под любой фон, т.е. гибкую верстку, то следует использовать прозрачность. В негибкой же верстке придётся при смене фона перерезать изображения.

Если опять смотреть рассматриваемый пример, то, чтобы места с прозрачностью не перекрывались, нужно, как раннее сказал Psywalker, или задать главному блоку padding (в данном случае "top-nav"), или margin его дочернему блоку.

Тут всё от требований зависит, от контента, от желания заказчика, от личных принципов, разными способами можно сделать закругления.

пробовал паддинги и маргины как ты сказал, не помогло:

К первой:

1)

<style type="text/css">
div.top-nav {
height:51px;
background:#323232 url("ctr.png") left top repeat-x;
padding: 0 17px 0 16px;
}

div.top-nav-l {
height:51px;
background: url("cnl.png") left top no-repeat;

}

div.top-nav-r {
height:51px;
background: url("cnr.png") right top no-repeat;
}

</style>	

2)

<style type="text/css">
div.top-nav {
height:51px;
background:#323232 url("ctr.png") left top repeat-x;

}

div.top-nav-l {
height:51px;
background: url("cnl.png") left top no-repeat;
margin: 0 17px 0 16px;
}

div.top-nav-r {
height:51px;
margin: 0 17px 0 16px;
background: url("cnr.png") right top no-repeat;
}

</style>	

по ссылке второй код...

З.Ы.: поставить такой маргин только для прямого наследника top-nav'а тоже не помогает...

Edited May 27, 2011 by DrStrangeLove

[flagreit]

От требований к верстке зависит: если нужно делать под любой фон, т.е. гибкую верстку, то следует использовать прозрачность. В негибкой же верстке придётся при смене фона перерезать изображения.

Если опять смотреть рассматриваемый пример, то, чтобы места с прозрачностью не перекрывались, нужно, как раннее сказал Psywalker, или задать главному блоку padding (в данном случае "top-nav"), или margin его дочернему блоку.

Тут всё от требований зависит, от контента, от желания заказчика, от личных принципов, разными способами можно сделать закругления.

пробовал паддинги и маргины как ты сказал, не помогло:

К первой:

1)

<style type="text/css">
div.top-nav {
height:51px;
background:#323232 url("ctr.png") left top repeat-x;
padding: 0 17px 0 16px;
}

div.top-nav-l {
height:51px;
background: url("cnl.png") left top no-repeat;

}

div.top-nav-r {
height:51px;
background: url("cnr.png") right top no-repeat;
}

</style>	

2)

<style type="text/css">
div.top-nav {
height:51px;
background:#323232 url("ctr.png") left top repeat-x;

}

div.top-nav-l {
height:51px;
background: url("cnl.png") left top no-repeat;
margin: 0 17px 0 16px;
}

div.top-nav-r {
height:51px;
margin: 0 17px 0 16px;
background: url("cnr.png") right top no-repeat;
}

</style>	

по ссылке второй код...

Блин, извиняюсь, сказал даже не подумав(

Если оставить блоки, как есть, то для "top-nav" нужно задать margin, а для его дочернего - отрицательный margin.

[DrStrangeLove]

От требований к верстке зависит: если нужно делать под любой фон, т.е. гибкую верстку, то следует использовать прозрачность. В негибкой же верстке придётся при смене фона перерезать изображения.

Если опять смотреть рассматриваемый пример, то, чтобы места с прозрачностью не перекрывались, нужно, как раннее сказал Psywalker, или задать главному блоку padding (в данном случае "top-nav"), или margin его дочернему блоку.

Тут всё от требований зависит, от контента, от желания заказчика, от личных принципов, разными способами можно сделать закругления.

пробовал паддинги и маргины как ты сказал, не помогло:

К первой:

1)

<style type="text/css">
div.top-nav {
height:51px;
background:#323232 url("ctr.png") left top repeat-x;
padding: 0 17px 0 16px;
}

div.top-nav-l {
height:51px;
background: url("cnl.png") left top no-repeat;

}

div.top-nav-r {
height:51px;
background: url("cnr.png") right top no-repeat;
}

</style>	

2)

<style type="text/css">
div.top-nav {
height:51px;
background:#323232 url("ctr.png") left top repeat-x;

}

div.top-nav-l {
height:51px;
background: url("cnl.png") left top no-repeat;
margin: 0 17px 0 16px;
}

div.top-nav-r {
height:51px;
margin: 0 17px 0 16px;
background: url("cnr.png") right top no-repeat;
}

</style>	

по ссылке второй код...

Блин, извиняюсь, сказал даже не подумав(

Если оставить блоки, как есть, то для "top-nav" нужно задать margin, а для его дочернего - отрицательный margin.

Bingo! Большое Спасибо!! )