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



 

Здравствуйте, гость ( Вход | Регистрация )

Открыть тему
Тема закрыта
> Помогите с версткой
Wolfak
Wolfak
Topic Starter сообщение 13.11.2010, 12:40; Ответить: Wolfak
Сообщение #1


JS, PHP, C#, Java
*****

Группа: Active User
Сообщений: 882
Регистрация: 5.6.2009
Из: Barcelona
Поблагодарили: 172 раза
Репутация:   80  


Я чуть более чем полгода дизайном не занимался по этому подзабыл, подскажешь как сверстать такое меню:
http://s015.radikal.ru/i331/1011/95/0d3a060a99db.jpg
А именно полоски вмежду ссылками, меню сверстал а вот полоски вставить могу только одним способом какой мне не нравится.
<div id="menu">
<li><div id="borderbgmenu"></div></li>
<li><a href="/index.php">Главная</a></li>
<li><div id="borderbgmenu"></div></li>
<li><a href="/index.php">Главная</a></li>  
<li><div id="borderbgmenu"></div></li>
<li><a href="/index.php">Главная</a></li>
<li><div id="borderbgmenu"></div></li>
<li><a href="/index.php">Главная</a></li>
<li><div id="borderbgmenu"></div></li>
</div>


#menu {
    background-image:url(../images/menubg.png);
    background-repeat:repeat-x;
    width:100%;
    height:27px;
    overflow:hidden;
}
#menu li {
font-weight:bold;
float: left;
width:auto;
font-size:11px;
list-style-type: none;
list-style-position: outside;
margin: 0 0 0 0;
height:27px;
}
#bgmenuleft {
    background-image:url(../images/menubgleft.png);
    background-repeat:no-repeat;
    width:10px;
    height:27px;
}
#menu a:link {
text-decoration: none;
color: #ffffff;
display: block;
text-align: center;
padding: 10px 15px 1px 15px;
height:27px;
}
#menu a:visited {
text-decoration: none;
color: #ffffff;
display: block;
text-align: center;
padding: 10px 15px 1px 15px;
height:27px;
}
#menu a:hover {
text-decoration: none;
color: #ffffff;
display: block;
text-align: center;
padding: 10px 15px 1px 15px;
background-image:url(../images/menubg_h.png);
height:27px;
}

В моем варианте мне не нравится что необходимо вставлять код:
<li><div id="borderbgmenu"></div></li>

Между ссылками, хотелось бы вставить полоску через CSS.
1
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Scratches
Scratches
сообщение 13.11.2010, 16:22; Ответить: Scratches
Сообщение #2


Участник
***

Группа: User
Сообщений: 100
Регистрация: 1.4.2008
Поблагодарили: 15 раз
Репутация:   11  


Добавь в #menu li
#menu li {
background-image: url(адрес полоски) no-repeat top right;
padding:какой нужен (+1 пиксель справа для полоски);
}


Смысл в том, что будет добавляться полоска справа внутри li как фон.


--------------------
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Wolfak
Wolfak
Topic Starter сообщение 13.11.2010, 21:29; Ответить: Wolfak
Сообщение #3


JS, PHP, C#, Java
*****

Группа: Active User
Сообщений: 882
Регистрация: 5.6.2009
Из: Barcelona
Поблагодарили: 172 раза
Репутация:   80  


Пробовал, не работает.
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
dan1
dan1
сообщение 15.11.2010, 18:30; Ответить: dan1
Сообщение #4


Участник
***

Группа: User
Сообщений: 195
Регистрация: 12.8.2010
Из: Тагила
Поблагодарили: 74 раза
Репутация:   25  


(Wolfak @ 13.11.2010, 20:29) *
Пробовал, не работает.

Должно работать... ради эксперимента сверстал ваше меню — полоска есть. Если что, пишите в ЛС, скину исходники менюшки.
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Wolfak
Wolfak
Topic Starter сообщение 16.11.2010, 21:27; Ответить: Wolfak
Сообщение #5


JS, PHP, C#, Java
*****

Группа: Active User
Сообщений: 882
Регистрация: 5.6.2009
Из: Barcelona
Поблагодарили: 172 раза
Репутация:   80  


dan1, написал в ЛС.
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
dan1
dan1
сообщение 16.11.2010, 21:50; Ответить: dan1
Сообщение #6


Участник
***

Группа: User
Сообщений: 195
Регистрация: 12.8.2010
Из: Тагила
Поблагодарили: 74 раза
Репутация:   25  


Отписал, надеюсь это то, что надо.


Поблагодарили: (1)
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Wolfak
Wolfak
Topic Starter сообщение 17.11.2010, 11:09; Ответить: Wolfak
Сообщение #7


JS, PHP, C#, Java
*****

Группа: Active User
Сообщений: 882
Регистрация: 5.6.2009
Из: Barcelona
Поблагодарили: 172 раза
Репутация:   80  


Отписал, надеюсь это то, что надо.

Благодарю, помогло, хоть я так и пробовал, заметил что вы вставляете полоску кодом :
background:url(poloska.png) no-repeat top right;

А у меня было так:
background-image:url(poloska.png) no-repeat top right;

В этом и была проблема.


Поблагодарили: (1)
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Открыть тему
Тема закрыта
1 чел. читают эту тему (гостей: 1, скрытых пользователей: 0)
Пользователей: 0


Свернуть

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

  Тема Ответов Автор Просмотров Последний ответ
Открытая тема (нет новых ответов) Помогите выбрать программу
Помогите выбрать программу
11 impak 1296 Сегодня, 13:11
автор: Mikki
Открытая тема (нет новых ответов) Помогите найти плагин на WP
Отзывы с профилей соц сетей
1 SEOMR 429 30.11.2017, 7:18
автор: Nell
Открытая тема (нет новых ответов) Помогите найти проблему
Долгий ответ сервера
6 maxim1249 658 29.11.2017, 17:27
автор: genjnat
Открытая тема (нет новых ответов) Помогите оценить новотник. Плиз
1 Alex-777 494 29.11.2017, 7:18
автор: grumdas
Открытая тема (нет новых ответов) Помогите с неймингом для сборника советов
советы по разработки и жизни
11 coremission 1862 15.11.2017, 22:23
автор: rogefer


 



RSS Текстовая версия Сейчас: 11.12.2017, 13:56
Дизайн