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

[b0s]

Здравствуйте!

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

HTML:

<div class="item">
    <div class="content">
        <a href="/">Основная длинная ссылка</a>
        <div class="sub">
            <hr>
            <div>
                <a href="/" style="float:left;">Подссылка1</a>
                <a href="/" style="float:right;">Подссылка2</a>
            </div>
        </div>
    </div>
</div>

<div class="item">
    <div class="content">
        <a href="/">Основная ссылка</a>
        <div class="sub">
            <hr>
            <div>
                <a href="/" style="float:left;">Подссылка1</a>
                <a href="/" style="float:right;">Подссылка2</a>
            </div>
        </div>
    </div>
</div>

CSS:

.item {    
    display:inline-block;
    overflow:hidden;
    float:left;
    position:relative;
    margin:5px;
    width:130px;
    height:100px;
    text-align:center;    
    background:green;
}

.item hr{
    width:70px;
    height:1px;
    border-width:0;
    color:gray;
    background-color:gray;
    margin-top:6px;
    margin-bottom:5px;
}

.item .content{
    display: table-cell;
    vertical-align:middle;
    position: relative;
    width:130px;
    height:100px;
}

.item .sub{
    position:absolute;
    width:128px;
}

.item .sub{
    text-align:center;
}

.item .sub div{
    padding-left:10px;
    padding-right:10px;
}

.item .sub a{
    font-size:8px;
    color:brown;
}

Я обращался на другой форум за помощью в решении этого вопроса, и мне в начале предложили решить вопрос с помощью JS, добавив к div.item или div.content onclick c location, но мне этот способ очень не нравится потому, что пользователь не видит, куда ведёт его ссылка. Посоветовали добавить title и в нём добавить описание куда ссылка ведёт, но каждый браузер по своему обрабатывает title. В любом случае, пускай JS фактически является неотъемлемой частью web, я думаю не самый разумный вариант, использовать JS для решения этой проблемы.

Также мне предложили использовать следующий вариант кода:

HTML:

<div class="div1">
    <a class="a1" href="/">text1</a>
    <a class="a2" href="/">text2</a>
    <a class="a3" href="/">text3</a>
</div>

.div1 {
width:150px;
height:40px;
background-color:#fc0;
}

.a1 {
display:block;
text-align:center;
height:100%;
}

.a2, .a3 {
width:35px;
height:15px;
position: relative;
bottom:20px;
margin-left:20px;
background-color:#fff;
}

Этот вариант мне не подходит, так как в центре кнопки, невозможно установить центрирование текста, который по задумке, даже занимая две строки должен равномерно распределятся по высоте кнопки. Вот такая вот сложная задача.

Провёл часов 5-7-10 в общем, для поиска решения этой проблемы. Сама кнопка со ссылками это не проблема, есть много вариантов как сделать такую. Основная проблема только в том как сделать эту кнопку ссылкой. Но так что бы были доступны остальные ссылки, без использования JS.

Догадки и вымыслы неопытного программиста вроде меня:

Один из вариантов.

Можно сделать ссылку блочной и растянуть её на всю высоту и ширину кнопки. Но тогда нельзя реализовать центрирование, потому что слой центрирующий текст внутри, сам должен быть по середине. Но невозможно центрировать только слой с текстом. Он должен быть высотой с кнопку и будет закрывать собой блочную ссылку под ним.

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

Edited May 16, 2011 by b0s

[b0s]

Чувствую, что это не разрешимый вопрос.

[iillyyaa2]

а чем не устраивает вариант написать на яве, а ссылки сделать типа:

<a href="index.html" onclick="code(); return false;">Ссылка</a>

и ссылки будут, и клик по ним не сделает переход..

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

[b0s]

а чем не устраивает вариант написать на яве, а ссылки сделать типа:

<a href="index.html" onclick="code(); return false;">Ссылка</a>

и ссылки будут, и клик по ним не сделает переход..

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

Спасибо за ваш ответ. Простите, я не очень понял ваше предложение. Ещё раз поясню. Мне надо сделать кнопку-ссылку, но внутри неё должны быть две другие ссылки. Также, внутри кнопки, в центре, должно быть позиционирование текста ровно по середине, вне зависимости от того во сколько строк уменьшается текст.

Поясните, что вы предлагайте, если ещё видите в этом смысл.

Edited May 19, 2011 by b0s

[PanSoul]

Вот если честно, то не совсем ясно в чём именно Вам нужна помощь?!

Вроде бы, в том примере, который Вы выложили - у Вас всё, как Вы и хотите, за исключением пляшущих ссылок подразделов (но может быть так и задумано), которое легко исправить многими способами, да даже хотя бы позиционированием...

Покажите лучше на картинке, как должно быть (с 1 строчкой и с несколькими), фиксирована ли высота этой ОСНОВНОЙ ССЫЛКИ?

[b0s]

Вот если честно, то не совсем ясно в чём именно Вам нужна помощь?!

Вроде бы, в том примере, который Вы выложили - у Вас всё, как Вы и хотите, за исключением пляшущих ссылок подразделов (но может быть так и задумано), которое легко исправить многими способами, да даже хотя бы позиционированием...

Покажите лучше на картинке, как должно быть (с 1 строчкой и с несколькими), фиксирована ли высота этой ОСНОВНОЙ ССЫЛКИ?

Спасибо за ваш ответ!

Ой, точно! Простите, я совсем забыл про пример, с одной и двумя строками.

Фото

HTML код:

<div class="menu">
	<div class="item">
		<div class="content">
			<a href=" ">Короткая ссылка</a>
			<div class="sub">
				<hr/>
				<div>
					<a href=" " style="float:left;">Опция1</a>
					<a href=" " style="float:right;">Опция2</a>
				</div>
			</div>
		</div>
	</div>

	<div class="item">
		<div class="content">
			<a href=" ">Очень длиное название</a>
		</div>
	</div>

	<div class="item">
		<div class="content">
			<a href=" ">Очень длиное название</a>
			<div class="sub">
				<hr>
				<div>
					<a href=" ">Опция1</a>
				</div>
			</div>
		</div>
	</div>
</div>

Вы не совсем правы. Большая часть того, что есть в кнопке реализовано именно так как я хочу, за исключением того, что сама кнопка ссылкой не является. А мне надо чтобы ещё в добавок и сама вся свободная площадь кнопки была ссылкой. Как это реализовать я к сожалению не знаю, и как не старался не получается разобраться. Я пытался поместить весь контейнер (div.item или div.content) с кнопкой в ссылку, но это против правил работы HTML, так как внутри этой большой "кнопки-ссылки" не может быть блочных элементов. Даже не смотря на это правило, кнопка успешно "обнималась" ссылкой если я не добавлял другие ссылки внутрь. Если же хоть одна ссыка появлялась в контейнере, то главная ссылка-кнопка не работала. Firebug (расширение для Firefox), всегда закрывал контейнер ссылки сразу же после открытия, если внутри контейнера присутствует другая ссылка. Пытался сделать ссылку блочной и растянуть её, не вмещая в неё остальные ссылки, но это не вариант, потому что слой текста в центре, располагается по всей высоте кнопки, и ссылка оказывается под слоем. Если же ссылку поместить поверх слоя, то естественно ссылка закрывает собой слой с остальным содержимым кнопки.

[Синдром]

display:inline-block; на ссылку, плюс корректировка ширина высота по необходимости Сорри невнимательно читал предыдущие посты

Edited May 19, 2011 by Синдром

[psywalker]

display: table; тебе в помощь.

[b0s]

display:inline-block; на ссылку, плюс корректировка ширина высота по необходимости Сорри невнимательно читал предыдущие посты

Спасибо за попытку помочь Синдром!

display: table; тебе в помощь.

psywalker, не очень вас понял. Table чему именно назначить?

Edited May 19, 2011 by b0s

[psywalker]

display:inline-block; на ссылку, плюс корректировка ширина высота по необходимости Сорри невнимательно читал предыдущие посты

Спасибо за попытку помочь Синдром!

display: table; тебе в помощь.

psywalker, не очень вас понял. Table чему именно назначить?

Контейнеру, а ребёнку display: table-cell; vertical-align: middle;

[b0s]

display:inline-block; на ссылку, плюс корректировка ширина высота по необходимости Сорри невнимательно читал предыдущие посты

Спасибо за попытку помочь Синдром!

display: table; тебе в помощь.

psywalker, не очень вас понял. Table чему именно назначить?

Контейнеру, а ребёнку display: table-cell; vertical-align: middle;

psywalker, пожалуйста, не сочтите меня за человека строящего из себя идиота, и специально задающего вопросы. Я действительно не могу понять, какой именно контейнер вы имеете в виду. Не могли бы вы привести пример? Был бы очень вам благодарен!

Edited May 19, 2011 by b0s

[PanSoul]

Ну вот, могу предложить вот такое извращение

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>ref</title>
<style>
	.F{
		width:130px;
		height:100px;
		float:left;
		margin:10px;
		position:relative;
	}

	.wrapper{
		display:table-cell;
		width:130px;
		height:100px;
		vertical-align:middle;
	}

	.fi4a{
		display:block;
		width:130px;
		height:100px;
		background:#e3e4c9;
		position:absolute;
		top:0;
		left:0;
	}

	.item {    
		display:block;
		width:130px;
		height:auto;
		text-align:center;    
		background:#e3e4c9;
		vertical-align:middle;
		color:black;
		font-family:Arial;
		overflow:visible;
		position:relative;
	}

	.r1{
		position:absolute;
		top:100%;
		width:100%;
	}

	.r{
		float:left;
		width:50%;
		background:gray;
		color:#fff;


	}
	.r:hover{
		background:black;
	}


</style>	
</head>
<body>
<div class="F">
<a  href="index.html" class="fi4a"></a>

	<div class="wrapper">
		<div class="item">
			<a  href="index.html">название</a>			
			<div class="r1">
				<a  href="#" class="r">опция-1</a>
				<a  href="#" class="r">опция-2</a>
			</div>
		</div>				
	</div>
</div>	


<div class="F">
<a  href="index.html" class="fi4a"></a>

	<div class="wrapper">
		<div class="item">
			<a  href="index.html">очень длинное название</a>			
		</div>				
	</div>
</div>	


<div class="F">
<a  href="index.html" class="fi4a"></a>

	<div class="wrapper">
		<div class="item">
			<a  href="index.html">очень длинное название</a>			
			<div class="r1">
				<a  href="#" class="r">опция-1</a>
				<a  href="#" class="r">опция-2</a>
			</div>
		</div>				
	</div>
</div>
</body>
</html>

P.S. Я не стал комментировать - думаю, Вы поймёте. Но если что, то спрашивайте.

Edited May 19, 2011 by PanSoul

[psywalker]

PanSoul

А где display: table?

[PanSoul]

PanSoul

А где display: table?

А оно обязательно что ли?

[b0s]

PanSoul

А где display: table?

А оно обязательно что ли?

PanSoul, спасибо за ответ! Сейчас проверю.

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

[PanSoul]

Да на здоровье

P.S. Да, внезапность - мой конёк

Edited May 19, 2011 by PanSoul

[b0s]

PanSoul, спасибо вам большое! Решение работает! Проверил на последних версиях Opera, Safari и Firefox. Я пока правда не разобрался как именно, что на что влияет. Спал всего три часа. Надеюсь быстро разберусь. Жалко, в IE не работает. Да и не удивительно... Значение table-cell параметра display, даже в 7-й версии по моему не поддерживается. Здесь похоже придётся искать другой вариант, какой-то более примитивный.

Edited May 19, 2011 by b0s

[psywalker]

PanSoul

А где display: table?

А оно обязательно что ли?

display:table-cell; - это ячейка, ячейка должна находится в таблице. Ты же эмулируешь таблицу!

[PanSoul]

PanSoul

А где display: table?

А оно обязательно что ли?

display:table-cell; - это ячейка, ячейка должна находится в таблице. Ты же эмулируешь таблицу!

Нет, Я её не эмулирую. Я лишь эмулирую свойство ячейки!

[b0s]

PanSoul

А где display: table?

А оно обязательно что ли?

display:table-cell; - это ячейка, ячейка должна находится в таблице. Ты же эмулируешь таблицу!

Я замечал такую ситуацию, что без помещения контейнера с display:table-cell в контейнер с display: table, vertical-align:middle не работал. Правда в каком браузере не помню. Так что psywalker, понимаю о чём вы пишите. Если конечно от желания спать невнимательность мне не помешала осознать то что вы написали. Ну я и пишу...

PanSoul, я не могу понять, а как так получается что ссылка доступна? Я честное слово говорю, что пытался сделать так же как вы предложили. Ссылка либо была сверху и закрывала остальные ссылки и кнопку, либо была закрыта фреймом со ссылками и не была доступна...

[psywalker]

PanSoul

А где display: table?

А оно обязательно что ли?

display:table-cell; - это ячейка, ячейка должна находится в таблице. Ты же эмулируешь таблицу!

Нет, Я её не эмулирую. Я лишь эмулирую свойство ячейки!

И тем самым рискуешь нарваться на косяки в разных браузерах.

[b0s]

PanSoul

А где display: table?

А оно обязательно что ли?

display:table-cell; - это ячейка, ячейка должна находится в таблице. Ты же эмулируешь таблицу!

Я замечал такую ситуацию, что без помещения контейнера с display:table-cell в контейнер с display: table, vertical-align:middle не работал. Правда в каком браузере не помню. Так что psywalker, понимаю о чём вы пишите. Если конечно от желания спать невнимательность мне не помешала осознать то что вы написали. Ну я и пишу...

PanSoul, я не могу понять, а как так получается что ссылка доступна? Я честное слово говорю, что пытался сделать так же как вы предложили. Ссылка либо была сверху и закрывала остальные ссылки и кнопку, либо была закрыта фреймом со ссылками и не была доступна...

[psywalker]

Нет, Я её не эмулирую. Я лишь эмулирую свойство ячейки!

Ты эмулируешь поведение ячейки, а ячейки должны находится в таблице!

[PanSoul]

PanSoul

А где display: table?

А оно обязательно что ли?

display:table-cell; - это ячейка, ячейка должна находится в таблице. Ты же эмулируешь таблицу!

Нет, Я её не эмулирую. Я лишь эмулирую свойство ячейки!

И тем самым рискуешь нарваться на косяки в разных браузерах.

Наврятли, единственное, где могут быть проблемы- так это в Safari 3.1! Во всех остальных браузерах всё должно быть отлично. Ах, да, а ещё на моей стороне validator

[psywalker]

PanSoul

А где display: table?

А оно обязательно что ли?

display:table-cell; - это ячейка, ячейка должна находится в таблице. Ты же эмулируешь таблицу!

Нет, Я её не эмулирую. Я лишь эмулирую свойство ячейки!

И тем самым рискуешь нарваться на косяки в разных браузерах.

Наврятли, единственное, где могут быть проблемы- так это в Safari 3.1! Во всех остальных браузерах всё должно быть отлично. Ах, да, а ещё на моей стороне validator

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

[b0s]

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

Боюсь уже поздно, но я не подумал что следовало скинуть ссылку на сообщение, что бы не заставлять вас искать. Извините.

Edited May 19, 2011 by b0s