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

[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

[Softlink]

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

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

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

[psywalker]

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

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

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

[b0s]

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

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

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

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

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

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

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

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

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

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

Edited May 21, 2011 by b0s

[mishka]

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

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

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

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

[psywalker]

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

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

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

[b0s]

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

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

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

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

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

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

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

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

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