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;

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

Замечание модератора:
Эта тема была закрыта автоматически ввиду отсутствия активности в ней на протяжении 100+ дней.
Если Вы считаете ее актуальной и хотите оставить сообщение, то воспользуйтесь кнопкой
или обратитесь к любому из модераторов.


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


Свернуть

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

  Тема Ответов Автор Просмотров Последний ответ
Горячая тема (нет новых ответов) Помогите, пожалуйста, моей дочери выжить!
благотворительный топик
30 vitvirtual 3746 19.5.2018, 8:30
автор: vitvirtual
Открытая тема (нет новых ответов) Продвигаю страницу по запросу "Как сделать игру". Помогите советом, пожалуйста
Я секу в теме! Но подать статью угодным поисковикам образом не смо
22 coremission 2147 8.5.2018, 12:33
автор: coremission
Открытая тема (нет новых ответов) Помогите с выбором ноута
20 rokot 874 23.4.2018, 12:09
автор: Room
Горячая тема (нет новых ответов) Тема имеет прикрепленные файлыПомогите с идеями для форума про успех
Спасибо за каждую идею
43 Zoya83 5066 12.4.2018, 11:42
автор: Zoya83
Открытая тема (нет новых ответов) Лендинг или сайт-визитка для ИП? Помогите определиться
6 Yas18 1122 31.3.2018, 20:57
автор: Yas18


 



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