Растягивающие кнопки в меню.

optimist32 · June 4, 2011

Как правильно сделать такую менюшку?

Кнопки не растягиваются, задаю размер фиксированно. Должны растягиватся.


<ul type="none" style="margin-top: -5px;" dir="rtl">
       <li>
          <div style="width: 146px;" class="button_active">
               <div id="content" >
                HOMEPAGE
               </div>
          </div>
       </li>
       <li>
          <div style="width: 114px;" class="button_in_active">
               <div id="content" >
                LINE-UPP
               </div>
          </div>
       </li>
</ul>

Softlink · June 5, 2011

например вот так:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ru-ru" lang="ru-ru"> 
<head> 
<meta http-equiv="content-type" content="text/html; charset=Windows-1251" />
<title>Пример</title>
<style type="text/css">

.menu{
width:400px;
height:300px;
}

ul{
list-style-type:none;
margin:0px;
padding:0px;
background:#ccc;
height:100%;
}


span{
background:yellow;
float:right;
padding:5px;
margin:5px;
clear:both;
}       
</style>
</head>

<body>
	<div class="menu">
	<ul>
		<li><span>первая</span></li>
		<li><span>вторая</span></li>
		<li><span>третья</span></li>
		<li><span>четвертая</span></li>
		<li><span>пятая</span></li>
	</ul>
	</div>
</body>
</html>

хотя может есть решение и поэлегантнее

psywalker · June 5, 2011

Нет, такие кнопки нужно делать во-первых с тремя обёртками(причём именно в span), спрайтом, и inline-block-ами.

Softlink · June 5, 2011

еще тут список нафик не нужен)) От него толку нет абсолютно.

psywalker · June 5, 2011

еще тут список нафик не нужен)) От него толку нет абсолютно.

Почему это нет? Это же навигация! Его как раз и нужно оставить.

Softlink · June 5, 2011

еще тут список нафик не нужен)) От него толку нет абсолютно.
Почему это нет? Это же навигация! Его как раз и нужно оставить.

не, я про свой пример говорю Там флоатом весь список схлопывается.

psywalker · June 5, 2011

еще тут список нафик не нужен)) От него толку нет абсолютно.
Почему это нет? Это же навигация! Его как раз и нужно оставить.
не, я про свой пример говорю Там флоатом весь список схлопывается.

А, понял)

optimist32 · June 5, 2011

например вот так:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ru-ru" lang="ru-ru"> 
<head> 
<meta http-equiv="content-type" content="text/html; charset=Windows-1251" />
<title>Пример</title>
<style type="text/css">

.menu{
width:400px;
height:300px;
}

ul{
list-style-type:none;
margin:0px;
padding:0px;
background:#ccc;
height:100%;
}


span{
background:yellow;
float:right;
padding:5px;
margin:5px;
clear:both;
}       
</style>
</head>

<body>
	<div class="menu">
	<ul>
		<li><span>первая</span></li>
		<li><span>вторая</span></li>
		<li><span>третья</span></li>
		<li><span>четвертая</span></li>
		<li><span>пятая</span></li>
	</ul>
	</div>
</body>
</html>

хотя может есть решение и поэлегантнее

Это детский сад, что ты написал. Читай внимательно первый пост.

Вопрос актуален.

PS: Углы у кнопок не стыкуются. Я заливаю бэкграунд под желтым цветом повторяющимся шаблоном изображения.

Тут есть нормальные верстальщики у которых можно посоветоваться?

Проблема в том, что я хочу сделать РЕЗИНОВЫе кнопки. Сейчас они резиновые только по высоте.

Edited June 5, 2011 by optimist32

psywalker · June 5, 2011

optimist32

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

Я тебе выше написал, от чего нужно отталкиваться, а ты уже думай сам - "нормальный верстальщик"

Softlink · June 5, 2011

optimist32
Ты так будешь разговаривать в другом месте, договорились? Тебе человек помочь хотел, потратил своё время и написал код, что за неуважение такое?
Я тебе выше написал, от чего нужно отталкиваться, а ты уже думай сам - "нормальный верстальщик"

не, нормально все Как вариант использовать можно, но с фоном надо думать. Или использовать вариант psywalker.

Хотя если покопаться. Можно и в моем коде прикрутить такие рисунки.

upd. Короче получится, то, что ты, Макс, предложил

Edited June 5, 2011 by Softlink

optimist32 · June 5, 2011

optimist32
Ты так будешь разговаривать в другом месте, договорились? Тебе человек помочь хотел, потратил своё время и написал код, что за неуважение такое?
Я тебе выше написал, от чего нужно отталкиваться, а ты уже думай сам - "нормальный верстальщик"

Он мне никак не помог, только потратил моё время.

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

Если помочь не получается то давайте будем флудить в ветке флуда. Но если тут у Вас принято флудить в тематическом вопросе, то так и скажите.

Что мне думать то?? Я делал и так и так и сяк. Никак не получается. ВОт поэтому и решил спросить тут.

psywalker · June 5, 2011

optimist32
Ты так будешь разговаривать в другом месте, договорились? Тебе человек помочь хотел, потратил своё время и написал код, что за неуважение такое?
Я тебе выше написал, от чего нужно отталкиваться, а ты уже думай сам - "нормальный верстальщик"
не, нормально все

Для меня это ненормально. И я не хочу, чтобы на нашем форуме присутствовало неуважение к собеседнику, а тем более к тому, который пытается тебе помочь.

Softlink · June 5, 2011

optimist32
Ты так будешь разговаривать в другом месте, договорились? Тебе человек помочь хотел, потратил своё время и написал код, что за неуважение такое?
Я тебе выше написал, от чего нужно отталкиваться, а ты уже думай сам - "нормальный верстальщик"
Он мне никак не помог, только потратил моё время.
С тремя спанами не работаю падинги - это когда отступы должны быть у внутреннего текста кнопки.
Если помочь не получается то давайте будем флудить в ветке флуда. Но если тут у Вас принято флудить в тематическом вопросе, то так и скажите.
Что мне думать то?? Я делал и так и так и сяк. Никак не получается. ВОт поэтому и решил спросить тут.

залейте картинку для пункта куда-нибудь, пожалуйста.

вы же не предложили готового материала для реализации. Соответственно слепил из того, что было. Фон тянется от размера пункта.

Edited June 5, 2011 by Softlink

psywalker · June 5, 2011

optimist32
Ты так будешь разговаривать в другом месте, договорились? Тебе человек помочь хотел, потратил своё время и написал код, что за неуважение такое?
Я тебе выше написал, от чего нужно отталкиваться, а ты уже думай сам - "нормальный верстальщик"
Он мне никак не помог, только потратил моё время.
С тремя спанами не работаю падинги - это когда отступы должны быть у внутреннего текста кнопки.
Если помочь не получается то давайте будем флудить в ветке флуда. Но если тут у Вас принято флудить в тематическом вопросе, то так и скажите.
Что мне думать то?? Я делал и так и так и сяк. Никак не получается. ВОт поэтому и решил спросить тут.

Если ты совершенно ничего не читаешь из-за своей лени, а хочешь чтобы за тебя решили, то тогда извини, помогать тебе никто не собирается. Если бы ты хоть разок прочитал, что такое inline-block;, то вопросы бы у тебя отпали сами по себе.

optimist32
Ты так будешь разговаривать в другом месте, договорились? Тебе человек помочь хотел, потратил своё время и написал код, что за неуважение такое?
Я тебе выше написал, от чего нужно отталкиваться, а ты уже думай сам - "нормальный верстальщик"
Он мне никак не помог, только потратил моё время.
С тремя спанами не работаю падинги - это когда отступы должны быть у внутреннего текста кнопки.
Если помочь не получается то давайте будем флудить в ветке флуда. Но если тут у Вас принято флудить в тематическом вопросе, то так и скажите.
Что мне думать то?? Я делал и так и так и сяк. Никак не получается. ВОт поэтому и решил спросить тут.
залейте картинку для пункта куда-нибудь, пожалуйста.

Да не надо ничего заливать, вопрос детский, и его решение я уже давно описал.

alb · June 5, 2011

нормальные верстальщики есть, по крайней мере один - Вы )

а по сабжу, гуглите CSS sliding doors/css clipped sliding doors (во втором по-сути используются прозрачные .png и маргины для списков)

Edited June 5, 2011 by alb

optimist32 · June 5, 2011

нормальные верстальщики есть, по крайней мере один - Вы )
а по сабжу, гуглите CSS sliding doors/css clipped sliding doors (во втором по-сути используются прозрачные .png и маргины для списков)

Нет, я новичок. Решил что тут мне помогут.

Но мне администратор сказал, что я тупой и ничего не читаю. Мне три спана нужно и инлайн блок.

А еще тут мне нельзя разговаривать. Что за помощь такая?

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

optimist32
Ты так будешь разговаривать в другом месте, договорились? Тебе человек помочь хотел, потратил своё время и написал код, что за неуважение такое?
Я тебе выше написал, от чего нужно отталкиваться, а ты уже думай сам - "нормальный верстальщик"
Он мне никак не помог, только потратил моё время.
С тремя спанами не работаю падинги - это когда отступы должны быть у внутреннего текста кнопки.
Если помочь не получается то давайте будем флудить в ветке флуда. Но если тут у Вас принято флудить в тематическом вопросе, то так и скажите.
Что мне думать то?? Я делал и так и так и сяк. Никак не получается. ВОт поэтому и решил спросить тут.
залейте картинку для пункта куда-нибудь, пожалуйста.
вы же не предложили готового материала для реализации. Соответственно слепил из того, что было. Фон тянется от размера пункта.

Вы имеете ввиду бэкграунд повторяющего фона?

psywalker · June 5, 2011

нормальные верстальщики есть, по крайней мере один - Вы )
а по сабжу, гуглите CSS sliding doors/css clipped sliding doors (во втором по-сути используются прозрачные .png и маргины для списков)
Нет, я новичок. Решил что тут мне помогут.
Но мне администратор сказал, что я тупой и ничего не читаю. Мне три спана нужно и инлайн блок.
А еще тут мне нельзя разговаривать. Что за помощь такая?
Не работают Ваши советы. Оскорблять и затыкать рот - это не лучшая идея, чтоб помогать ближним своим.

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

optimist32 · June 5, 2011

нормальные верстальщики есть, по крайней мере один - Вы )
а по сабжу, гуглите CSS sliding doors/css clipped sliding doors (во втором по-сути используются прозрачные .png и маргины для списков)
Нет, я новичок. Решил что тут мне помогут.
Но мне администратор сказал, что я тупой и ничего не читаю. Мне три спана нужно и инлайн блок.
А еще тут мне нельзя разговаривать. Что за помощь такая?
Не работают Ваши советы. Оскорблять и затыкать рот - это не лучшая идея, чтоб помогать ближним своим.
Рот никто затыкать вам не планировал. Раздел, в котором вы создали пост - явно не предназначен для новичков. Это раз и два - это вам дали пищу для размышления, а код за вас никто писать не будет, если только за деньги и в соответствующем разделе.

За меня ничего писать не нужно.

"Проблемы верстки"

Я не там тему создал? У меня проблемы верстки.

PS:

Вот что получается с тремя спанами. Если мне нужны отступы у текста, то

падинги не растягивают кнопку.

Но если отступы у текста не нужны, то три спана работают нормально.

Я делаю вот так сейчас по варианту номер 2.


.button_active{
background-image:url(img/page1/pattern_button.jpg);
padding:3px 3px 4px 6px;
}
.button_active #content{
	background-color: rgb(255,242,36);
	padding: 13px 13px 13px 18px;
}
.button_active #content2{
	text-align:center;
	color:rgb(60,87,58);
	font-weight:700;
}




<ul>
       <li>
          <span class="button_active" href="#">
              <span id="content">
                <span id="content2">
                 HOMEPAGE
                </span>
               </span>
          </span>
       </li>
</ul>

Edited June 5, 2011 by optimist32

psywalker · June 5, 2011

нормальные верстальщики есть, по крайней мере один - Вы )
а по сабжу, гуглите CSS sliding doors/css clipped sliding doors (во втором по-сути используются прозрачные .png и маргины для списков)
Нет, я новичок. Решил что тут мне помогут.
Но мне администратор сказал, что я тупой и ничего не читаю. Мне три спана нужно и инлайн блок.
А еще тут мне нельзя разговаривать. Что за помощь такая?
Не работают Ваши советы. Оскорблять и затыкать рот - это не лучшая идея, чтоб помогать ближним своим.
Рот никто затыкать вам не планировал. Раздел, в котором вы создали пост - явно не предназначен для новичков. Это раз и два - это вам дали пищу для размышления, а код за вас никто писать не будет, если только за деньги и в соответствующем разделе.
За меня ничего писать не нужно.
"Проблемы верстки"
Я не там тему создал? У меня проблемы верстки.
PS:
Вот что получается с тремя спанами. Если мне нужны отступы у текста, то
падинги не растягивают кнопку.
Но если отступы у текста не нужны, то три спана работают нормально.

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

Softlink · June 5, 2011

вот вам пример подобной кнопки. Больше времени ушло на рисование.

Код весь на страничке. Паддинги отрабатывают полностью.

psywalker предложил inline-block, мне привычней флотами все делать. Но суть дела не меняет.

buddah · June 5, 2011

Софт, в тебе умер художник

optimist32 · June 5, 2011

вот вам пример подобной кнопки. Больше времени ушло на рисование.
Код весь на страничке. Паддинги отрабатывают полностью.
psywalker предложил inline-block, мне привычней флотами все делать. Но суть дела не меняет.

Спасибо, конечно, за старания, но вы не поняли сути вопроса.

Нужно чтоб углы стыковались пиксель к пикселю. С таким фоном как у меня будет в Вашем примере будет видна граница

на стыковке углов. Во-вторых кнопка не будет растягиваться вниз.

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

Получается красивая растягивающая кнопка, со сложными углами и каймой, где идеально стыкуются все углы.

Нужно было просто подобрать падинг стиля

.button_active

Edited June 5, 2011 by optimist32

Softlink · June 5, 2011

Софт, в тебе умер художник

дык рисовал в пэйнте))))

вот вам пример подобной кнопки. Больше времени ушло на рисование.
Код весь на страничке. Паддинги отрабатывают полностью.
psywalker предложил inline-block, мне привычней флотами все делать. Но суть дела не меняет.
Спасибо, конечно, за старания, но вы не поняли сути вопроса.
Нужно чтоб углы стыковались пиксель к пикселю. С таким фоном как у меня будет видна граница
на стыковке уголков.
PS: Впрочем вопрос можно закрыть, я уже все сделал сам. Нужно было просуммировать вручную падинги.
Получается красивая растягивающая кнопка, со сложными углами и каймой, где идеально стыкуются все углы.

не за что. Как была поставлена задача, так она и сделана

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

upd. Можно где-то посмотреть вашу верстку этой кнопки?

Edited June 5, 2011 by Softlink

optimist32 · June 5, 2011

Софт, в тебе умер художник
дык рисовал в пэйнте))))
вот вам пример подобной кнопки. Больше времени ушло на рисование.
Код весь на страничке. Паддинги отрабатывают полностью.
psywalker предложил inline-block, мне привычней флотами все делать. Но суть дела не меняет.
Спасибо, конечно, за старания, но вы не поняли сути вопроса.
Нужно чтоб углы стыковались пиксель к пикселю. С таким фоном как у меня будет видна граница
на стыковке уголков.
PS: Впрочем вопрос можно закрыть, я уже все сделал сам. Нужно было просуммировать вручную падинги.
Получается красивая растягивающая кнопка, со сложными углами и каймой, где идеально стыкуются все углы.
не за что. Как была поставлена задача, так она и сделана
Стыковать уголки - это уже совсем мелочная работа, которую можно сделать и без нашей помощи. Сам алгоритм решения задачи был подсказан и он полностью рабочий
upd. Можно где-то посмотреть вашу верстку этой кнопки?

ОНИ НЕ СТЫКУЮТСЯ В ОБЩЕМ СЛУЧАЕ - ВЫЛЕЗЬТЕ ИЗ ТАНКА НАКОНЕЦ ТО.

Алгоритм Ваш не рабочий в этом случае.

3 страницы форума ни о чем

Edited June 5, 2011 by optimist32

Softlink · June 5, 2011

не нервничайте

Дайте посмотреть лучше вашу верстку)))

psywalker · June 5, 2011

psywalker предложил inline-block, мне привычней флотами все делать. Но суть дела не меняет.

Как нет разницы? Это огромная разница, разные вещи совсем и с float будут траблы, в отличии от inline-block. Уж делать кнопки с помощью float - это далеко не лучший вариант.

Sign In

Растягивающие кнопки в меню.

Question

Link to comment

Share on other sites

Top Posters For This Question

Popular Days

Top Posters For This Question

Popular Days

Popular Posts

optimist32

optimist32

optimist32

60 answers to this question

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation

Обсуждения

Important Information