Jump to content
  • 0

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


b0s
 Share

Question

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

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

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 by b0s
Link to comment
Share on other sites

Recommended Posts

  • 0

Хорошо, что решили.

А еще один вариант вот здесь лежит.

Сделано картинкой и тегом <map>. Минуса два вижу. Не реагирует на hover и то, что ссылка не будет индексироваться. Зато кода в разы меньше и всеми браузерами адекватно распознается. Ну это мне просто интересно стало, как можно еще реализовать. :facepalmxd:

Link to comment
Share on other sites

  • 0

psywalker, вы очень зря так пишите. Я не настырный и здесь дело не в том, что я считаю вас слишком умным или очень опытным, и из-за чувства всезнайства считаю вас неправым. Я как раз согласен с вами, я же написал об согласии с вами. Но я не считаю правильным использование лишних возможностей которые могут не работать в той или иной ситуации. Тем не менее я включил в код то что вы предложили и очень вам благодарен.

Погоди, а с чего ты взял, что вот твою задачу можно 100% кроссбраузерно решить чисто на CSS?

p.s. И кстати называя меня "Всезнайкой", ты меня этим самым даже обидел. Я наоборот пытаюсь донести до тебя, что ты слишком перебираешь с упёртостью там, где она совершенно не нужна.

Link to comment
Share on other sites

  • 0

psywalker, вы очень зря так пишите. Я не настырный и здесь дело не в том, что я считаю вас слишком умным или очень опытным, и из-за чувства всезнайства считаю вас неправым. Я как раз согласен с вами, я же написал об согласии с вами. Но я не считаю правильным использование лишних возможностей которые могут не работать в той или иной ситуации. Тем не менее я включил в код то что вы предложили и очень вам благодарен.

Погоди, а с чего ты взял, что вот твою задачу можно 100% кроссбраузерно решить чисто на CSS?

p.s. И кстати называя меня "Всезнайкой", ты меня этим самым даже обидел. Я наоборот пытаюсь донести до тебя, что ты слишком перебираешь с упёртостью там, где она совершенно не нужна.

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

Есть по моему анекдот про программистов, еслиб которые строили дома они получались бы странными, не поддающимися законам физики, вот я подобную фразу построил))) настоящий программюга))))))

Простите меня, я совсем не хотел вас обидеть...

Хорошо, что решили.

А еще один вариант вот здесь лежит.

Сделано картинкой и тегом <map>. Минуса два вижу. Не реагирует на hover и то, что ссылка не будет индексироваться. Зато кода в разы меньше и всеми браузерами адекватно распознается. Ну это мне просто интересно стало, как можно еще реализовать. :facepalmxd:

Спасибо, я вам нашептал в личку об AREA, ещё до вашего поста.

Edited by b0s
Link to comment
Share on other sites

  • 0

Сделай это с експрешном, иначе никак ( ну кроме таблицы, конечно, или если у кнопки высота фиксированна и заранее известна ).

Если у юзера будет включена поддержка скриптов - он увидит все красиво, если нет - то он увидет ту же кнопку, с тем же содержимым, но только без выравнивания. Функционал и доступность кнопки при этом останется, поэтому никто ничего не теряет. Вот если без джс теряется ф-циональность, то это плохо. Людям которым поневоле приходится сидеть на старом браузере, на самом деле не так важны всякие рюшечки, главное содержание.

Пнг картинки тоже не будут красиво отображатся без активного содержимого в ие6, ради этого вы забьете на универсальность и откажитесь от пнг? Если да, то отказывайтесь и от такого выравнивания.

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

Link to comment
Share on other sites

  • 0

Сделай это с експрешном, иначе никак ( ну кроме таблицы, конечно, или если у кнопки высота фиксированна и заранее известна ).

Если у юзера будет включена поддержка скриптов - он увидит все красиво, если нет - то он увидет ту же кнопку, с тем же содержимым, но только без выравнивания. Функционал и доступность кнопки при этом останется, поэтому никто ничего не теряет. Вот если без джс теряется ф-циональность, то это плохо. Людям которым поневоле приходится сидеть на старом браузере, на самом деле не так важны всякие рюшечки, главное содержание.

Согласен Медведь. Только вот хорошо бы он тебя услышал :facepalmxd:

Link to comment
Share on other sites

  • 0

Сделай это с експрешном, иначе никак ( ну кроме таблицы, конечно, или если у кнопки высота фиксированна и заранее известна ).

Если у юзера будет включена поддержка скриптов - он увидит все красиво, если нет - то он увидет ту же кнопку, с тем же содержимым, но только без выравнивания. Функционал и доступность кнопки при этом останется, поэтому никто ничего не теряет. Вот если без джс теряется ф-циональность, то это плохо. Людям которым поневоле приходится сидеть на старом браузере, на самом деле не так важны всякие рюшечки, главное содержание.

Пнг картинки тоже не будут красиво отображатся без активного содержимого в ие6, ради этого вы забьете на универсальность и откажитесь от пнг? Если да, то отказывайтесь и от такого выравнивания.

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

Согласен! Сделал. Фраза "Сделай это с експрешном" звучит словно "Сделай это с кайфом" )))))))

Сделай это с експрешном, иначе никак ( ну кроме таблицы, конечно, или если у кнопки высота фиксированна и заранее известна ).

Если у юзера будет включена поддержка скриптов - он увидит все красиво, если нет - то он увидет ту же кнопку, с тем же содержимым, но только без выравнивания. Функционал и доступность кнопки при этом останется, поэтому никто ничего не теряет. Вот если без джс теряется ф-циональность, то это плохо. Людям которым поневоле приходится сидеть на старом браузере, на самом деле не так важны всякие рюшечки, главное содержание.

Согласен Медведь. Только вот хорошо бы он тебя услышал :facepalmxd:

psywalker, я услышал, и вас и mishka2. Спасибо!

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

 Share


×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. See more about our Guidelines and Privacy Policy