X   Сообщение сайта
(Сообщение закроется через 3 секунды)



 

Здравствуйте, гость (

| Вход | Регистрация )

2 страниц V   1 2 >
Открыть тему
Тема закрыта
> Разворачивающееся меню с закругленными углами
frauzelda
frauzelda
Topic Starter сообщение 3.3.2011, 23:12; Ответить: frauzelda
Сообщение #1


[attachment=37553:1.png]Здравствуйте! Подскажите пожалуйста как мне сверстать вот это меню. Бизнес с Аvon разворачивается. Я разрезала его на три части: макушка, конец и середина. Как и поставить не знаю - пробовала таблицей в виде бэкграунда ячеек, но отображается не все, только там где есть надпись и вообще все скукоженное получается. Помогите пожалуйста.
0
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Apay
Apay
сообщение 4.3.2011, 0:04; Ответить: Apay
Сообщение #2


приведите ваш код, посмотрим
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
frauzelda
frauzelda
Topic Starter сообщение 4.3.2011, 0:28; Ответить: frauzelda
Сообщение #3


<div id="sidebar">
<table>
<tr>
<td style="background:url(images/topmenu.png)">МЕНЮ</td>
</tr>
<tr>
<td style="background:url(images/m1menu.png)">
<ul>
<li>Главная</li>
<li>Бизнес с AVON</li>
<li>Посмотреть каталог</li>
</ul>
</td>
</tr>
<tr>
<td style="background:url(images/m2.png)">
<ul>
<li>Заказать продукцию</li>
<li>Статьи</li>
<li>Контакты
</ul>
</td>
</tr>
<tr>
<td><img src="images/botmenu.png"/></td>
</tr>
</table>
</div>




Здесь правда я на 4 части разделила...не помню уже зачем.
[attachment=37554:2.png]
Если ставить между <td> то получится конечно красиво, но тогда я не знаю как в таблицу запихнуть список с меню и чтобы меню растягивалось при развороте пункта. Может есть способ сделать не в виде таблицы, а в виде блоков.или еще как-нибудь
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
alexdrob
alexdrob
сообщение 4.3.2011, 0:44; Ответить: alexdrob
Сообщение #4


Вам нужно чтобы оно тянулось? или прям такого размера задний фон чтобы и был?
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
frauzelda
frauzelda
Topic Starter сообщение 4.3.2011, 0:47; Ответить: frauzelda
Сообщение #5


чтобы вытягивалось тогда, когда жмешь на ссылку с подменю.
может я слишком многого хочу..?:rolleyes:
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
alexdrob
alexdrob
сообщение 4.3.2011, 0:48; Ответить: alexdrob
Сообщение #6


Делайте две картинки menu.png полностью фон с шапкой длинный по высоте, вторую нижнюю полосу, пикселей 20-30 menu_bottom.png
<style>
#menu{
background-image: url(menu.png);
width: 251px;
padding-top: 50px;
}
#menu ul{
list-style: none;
padding:0 0 30px 100px;
background-image: url(menu_bottom.png);
background-position: bottom;
background-repeat: no-repeat;
}
#menu ul a{
color: white;
text-decoration: none;
font-size: 16px;
font-family: arial;
}
</style>

<div id="menu">
<ul>
<li><a href="#">Главная</a></li>
<li><a href="#">Главная</a></li>
<li><a href="#">Главная</a></li>
<li><a href="#">Главная</a></li>
<li><a href="#">Главная</a></li>
</ul>
</div>

шрифты и отступы под себя делайте
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
frauzelda
frauzelda
Topic Starter сообщение 4.3.2011, 1:09; Ответить: frauzelda
Сообщение #7


что то не получилось так.
вот что вышло[attachment=37555:3.png]
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
alexdrob
alexdrob
сообщение 4.3.2011, 1:14; Ответить: alexdrob
Сообщение #8


ну так размеры задайте.
[CSS]#menu{
background-image: url(menu.png);
width: 251px; <- ширина картинки в пикселях
padding-top: 50px; <- отступ сверху до первой строки
}[/CSS]
нижнюю я писал вам 20-30 пикселей у вас все под 100 пикселей она высотой. Ну можно и такую оставить, но тогда
[CSS]#menu ul{
list-style: none;
padding:0 0 100px 100px; <- вместо 30 поставьте 100 напрмиер, подгоняйте как вам нужно.
background-image: url(menu_bottom.png);
background-position: bottom;
background-repeat: no-repeat;
}[/CSS]

И обе картинки одной ширины должны быть.
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
frauzelda
frauzelda
Topic Starter сообщение 4.3.2011, 1:27; Ответить: frauzelda
Сообщение #9


Спасибо, что помогаете)
Теперь все хорошо, но бэграунд ul не ставится
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
alexdrob
alexdrob
сообщение 4.3.2011, 1:35; Ответить: alexdrob
Сообщение #10


(frauzelda @ 4.3.2011, 03:27) *
Теперь все хорошо, но бэграунд ul не ставится

Что значит бэкграунд ул не ставится, у него бэкграунд нижняя картинка с закруглюнными углами. А верхняя у вас должна быть высотой например в 500+ пикселей. Ну можно использовать ещё один див и порезать на три картинки.
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
2 страниц V   1 2 >
Открыть тему
Тема закрыта
1 чел. читают эту тему (гостей: 1, скрытых пользователей: 0)
Пользователей: 0


Свернуть

> Похожие темы

  Тема Ответов Автор Просмотров Последний ответ
Открытая тема (нет новых ответов) Тема имеет прикрепленные файлыПеренести меню
1 Викторио_mw 1468 28.8.2018, 0:10
автор: TimurR
Открытая тема (нет новых ответов) Необходимо разрезать и установить Меню для группы ВКонтакте
2 boltuk 3414 4.12.2017, 14:44
автор: tezoro
Открытая тема (нет новых ответов) Помогите с меню - переделать в выпадающее
1 lepota 1130 4.12.2017, 13:29
автор: yury_mw
Открытая тема (нет новых ответов) Слайдер под меню
0 Olya_Poy 4645 29.11.2017, 11:09
автор: -garmoni-
Открытая тема (нет новых ответов) На разных разрешениях меню выглядит по разному
0 SPiar 4817 28.9.2017, 17:45
автор: -korotkov-


 



RSS Текстовая версия Сейчас: 23.4.2024, 15:28
Дизайн