Jump to content

b0s

User
  • Posts

    77
  • Joined

  • Last visited

  • Days Won

    1

Everything posted by b0s

  1. Спасибо за ваш ответ. Простите, я не очень понял ваше предложение. Ещё раз поясню. Мне надо сделать кнопку-ссылку, но внутри неё должны быть две другие ссылки. Также, внутри кнопки, в центре, должно быть позиционирование текста ровно по середине, вне зависимости от того во сколько строк уменьшается текст. Поясните, что вы предлагайте, если ещё видите в этом смысл.
  2. Здравствуйте! Перед мной задача сделать кнопку, которая сама по себе является ссылкой, но внутри этой тоже должны быть размещены другие ссылки. Эти дополнительные ссылки, скажем так, опции или подразделы, основной ссылки. 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 и по русски и по английски, но к сожалению не нашел чего то полезного.
×
×
  • 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