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



 

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

2 страниц V   1 2 >
Открыть тему
Тема закрыта
> Как сверстать только на html/css ?, Как сверстать меню шаблона используя только html/css
Dikucher
Dikucher
Topic Starter сообщение 10.4.2013, 15:30; Ответить: Dikucher
Сообщение #1


Частый гость
**

Группа: User
Сообщений: 61
Регистрация: 8.2.2013
Из: Киев
Поблагодарили: 5 раз
Репутация:   2  


Хола

Вот собственно меню шаблона




То, как я вижу реализацию этого на html/css меня немного пугает. У кого-то есть идеи по этому вопросу?
0
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
MeTaTRoN
MeTaTRoN
сообщение 10.4.2013, 15:36; Ответить: MeTaTRoN
Сообщение #2


Завсегдатай
*****

Группа: Active User
Сообщений: 511
Регистрация: 1.9.2008
Из: Таллинн Эстония
Поблагодарили: 63 раза
Репутация:   18  


.chat-bubble-arrow-border {border-color: #CCC transparent transparent;border-style: solid;border-width: 10px;height:0;width:0;position:absolute;bottom:-22px;left:30px;}
.chat-bubble-arrow {border-color: #f7f5f5 transparent transparent;border-style: solid;border-width: 10px;height:0;width:0;position:absolute;bottom:-19px;left:30px;}


<div class="chat-bubble-arrow-border"></div>
<div class="chat-bubble-arrow"></div>


Вот этот вот код позволяет сделать Вот такую стрелку (http://floomby.ru/s1/cacFXm)
Думаю, если сделать какой нибудь костыль, то из этого можно получить, то что вам нужно.

PS: Я копировал с сайта, поэтому часть CSS лишняя.
Если пригодится, буду рад.

Сообщение отредактировал MeTaTRoN - 10.4.2013, 15:36


--------------------
Программист: PHP, JavaScript, HTML5, HTML5 canvas, CSS, AJAX, jquery, SQL.
Реклама на аниме сайте
Услуги программиста, тема на форуме
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
tszyan
tszyan
сообщение 10.4.2013, 15:36; Ответить: tszyan
Сообщение #3


Участник
***

Группа: User
Сообщений: 207
Регистрация: 28.1.2013
Из: Москва
Поблагодарили: 110 раз
Репутация:   27  


Dikucher,
Что именно Вас пугает? Мы должны гадать, что Вы увидели в таком простом шаблоне?
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
MeTaTRoN
MeTaTRoN
сообщение 10.4.2013, 15:40; Ответить: MeTaTRoN
Сообщение #4


Завсегдатай
*****

Группа: Active User
Сообщений: 511
Регистрация: 1.9.2008
Из: Таллинн Эстония
Поблагодарили: 63 раза
Репутация:   18  


tszyan, скорее всего наклонные линии


--------------------
Программист: PHP, JavaScript, HTML5, HTML5 canvas, CSS, AJAX, jquery, SQL.
Реклама на аниме сайте
Услуги программиста, тема на форуме


Поблагодарили: (1)
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
medved112
medved112
сообщение 10.4.2013, 15:41; Ответить: medved112
Сообщение #5


В меру упитанная панда в полном расцвете сил
*******

Группа: Active User
Сообщений: 3182
Регистрация: 17.10.2008
Поблагодарили: 1374 раза
Репутация:   139  


Если вы про наклонную, то вырезать прямоугольник, сделать фоном прозрачность, переделать в png.Это самый простой имхо вариант. Что еще тут может пугать я даже не знаю.


--------------------
фыр фыр
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
tszyan
tszyan
сообщение 10.4.2013, 15:43; Ответить: tszyan
Сообщение #6


Участник
***

Группа: User
Сообщений: 207
Регистрация: 28.1.2013
Из: Москва
Поблагодарили: 110 раз
Репутация:   27  


Для новых браузеров наклон делается с помощью transform.
Если нужно кроссбраузерно, то как сказал medved112, делаем с помощью background-image. Надо только учесть что ширина у элементов разная.
Для этого разбиваем фон на 2 части. 1-я - начало с шириною картинки больше чем максимальная ширина пункта, 2-я - конец - завершающий элемент

Сообщение отредактировал tszyan - 10.4.2013, 15:45
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
andreykashops
andreykashops
сообщение 10.4.2013, 15:49; Ответить: andreykashops
Сообщение #7


WordPress is my Life..
******

Группа: Active User
Сообщений: 1427
Регистрация: 21.7.2012
Из: Украины
Поблагодарили: 633 раза
Репутация:   139  


Можно сделать так:
Вначале пункта span - первый срез
Вконце пункта span - конечный срез
Под фоном пускаем гардиент.


--------------------
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
tszyan
tszyan
сообщение 10.4.2013, 15:51; Ответить: tszyan
Сообщение #8


Участник
***

Группа: User
Сообщений: 207
Регистрация: 28.1.2013
Из: Москва
Поблагодарили: 110 раз
Репутация:   27  


andreykashops,
лучше привязаться к li и a (2 бэкграунда, про которые писал выше)
li + a + 2 span + градиент - чересчур


К тому же span не позволит начать текст меню раньше его правой границы (без заморочек с позиционированием) - зачем такие сложности?

Сообщение отредактировал tszyan - 10.4.2013, 15:54


Поблагодарили: (1)
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
andreykashops
andreykashops
сообщение 10.4.2013, 16:16; Ответить: andreykashops
Сообщение #9


WordPress is my Life..
******

Группа: Active User
Сообщений: 1427
Регистрация: 21.7.2012
Из: Украины
Поблагодарили: 633 раза
Репутация:   139  


tszyan, ну нужно смотреть по возможностям. Например в WP меню можно было бы сделать так, как сказал выше, а там пусть мастер смотрит. Я предожил один из вариантов.

Сейчас вот думал, можно пропробовать реализовать через
background-size: 100%;
Если выризать картинку гардиента, или может я ошибаюсь?


--------------------


Поблагодарили: (2)
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
MAKAVE
MAKAVE
сообщение 10.4.2013, 18:10; Ответить: MAKAVE
Сообщение #10


Бывалый
****


Группа: User
Сообщений: 250
Регистрация: 11.3.2012
Из: Keratsini, Athens
Поблагодарили: 49 раз
Репутация:   6  


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

Можно конечно градиентом, как то сыграть, но стоит подумать о кросбраузерности. Самый простой вариант добавить, вспомогательный тэг, к примеру b или span внутрь тэга <a>
<ul id="navigation">
<li><a href="#"><b>Стиль</b></a><li>
<li><a href="#"><b>Динамика</b></a><li>
<li><a href="#"><b>Комфорт</b></a><li>
<li><a href="#"><b>Безопастность</b></a><li>
<li><a href="#"><b>Цвета</b></a><li>
</ul>


Разрезать background (разумеется сохранить его в png формате, что бы сохранить прозрачность и качество), на две части: левую и правую

вырезал быстро для примера:
Прикрепленное изображение
и правая часть
Прикрепленное изображение

Ну а дальше манипулировать с каскадными стилями:

#navigation li a b {
background: url('images/left.png') left;
height: 115px;
margin-right: 26px;
padding-left: 20px;
cursor:pointer;
color: #fff;
display:block;
font-weight: normal;
}

#navigation li a {
background: url('images/right.png') no-repeat right;
height: 115px;
margin-right: 26px;
text-decoration: none;
display:block;
}

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

ps: можно с тремя частями вырезать градиент,
в 1px в background-repeat прописать repeat-x и задать бэкграунд тэгу <a>

вырезать правую, левую часть и что типа так:
<li><a href="#"><span class="left"><span class="right">Цвета</span></span></a><li>

но это уже мазохизм чистой воды popcorn1.gif

Сообщение отредактировал MAKAVE - 10.4.2013, 18:11


--------------------
Качественные сайты без доменов: подробнее


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


Свернуть

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

  Тема Ответов Автор Просмотров Последний ответ
Открытая тема (нет новых ответов) Как мошенники зарабатывают на прямых трансляциях в Instagram
Не ждите порно в инстаграм, его нет
10 PostBrigada 1124 Вчера, 22:40
автор: JOHNY
Открытая тема (нет новых ответов) Маленький кейс как сделать много почтовых ящиков в Gmail
Один аккаунт = много ящиков
1 PostBrigada 507 Вчера, 21:34
автор: Pingunio
Горячая тема (нет новых ответов) С 2018 года в соцсети и игры только по паспорту
40 MissContent 3014 Вчера, 21:33
автор: Pingunio
Открытая тема (нет новых ответов) Редирект только главной страницы
301 редирект
2 Gera 511 Вчера, 13:50
автор: Gera
Горячая тема (нет новых ответов) Черный список обменников и как безопасно обменять валюту
141 Kurses 29911 Вчера, 13:04
автор: BestExchangers


 



RSS Текстовая версия Сейчас: 16.12.2017, 6:03
Дизайн