artwalek

Необходимо сверстать 4 кнопки одинаковой высоты в столбик с помощью CSS3. Блок, в котором находятся кнопки ограничены по ширине. Проблема возникает, когда текст кнопки не вмещается в заданную ширину и переносит текст. Необходимо, чтобы надписи на кнопках были центрированы по вертикали (по горизонтали тоже) при заданной высоте, т. е. чтобы если текст кнопки переносится на другую строку, высота при этом не увеличивалась. Делаю так. В моём примере высота увеличивается. <ul> <li><a href="" class="button"><span>Текст</span></a></li> <li><a href="" class="button"><span>Текст</span></a></li> <li><a href="" class="button"><span>Длинный текст</span></a></li> <li><a href="" class="button"><span>Очень длинный текст</span></a></li> </ul> ul li { display: inline; } .button { text-decoration: none; font-size: 1.2em; display: inline-block; text-align: center; color: #424043; text-shadow: 0px 1px 0px #ebe8e3; box-shadow: 0 0 .3em rgba(0,0,0,0.4); -moz-box-shadow: 0 0 .3em rgba(0,0,0,0.4); -webkit-box-shadow: 0 0 .3em rgba(0,0,0,0.4); width: 100%; } .button span { display: block; padding: 17% 0 17% 0; vertical-align: middle; }

Хорошо. Это так скажем тестовый вариант, если вместо: — текст 1 будет Должность (Директор, к примеру) — текст 2 будет ФИО — вместо картинки фото директора и таких людей будет скажем 10, как сверстать правильно?

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

Прошу помочь с дивной версткой блока с семантической точки зрения корректной. Как на картинке. HTML: <div class="b-feedback"> <dl class="position">Текст 1 <dt class="line"> <i class="g-png"> <img alt="" src="pancil.jpg"; /> </i> </dt> <dd class="name">Текст 2</dd> </dl> </div> В CSS прописываю так: .b-feedback { clear: both; } .b-feedback .line { margin: 12px 0px 15px; position: relative; } .b-feedback .g-png { position: absolute; left: -30px; top: 0.2em; } .b-feedback .name { margin: 0px 0px 25px 30px } В моем CSS проблема в линии под Текст 1, если вставить border-bottom для .b-feedback .line линия съезжает намного вниз. Помогите пожалуйста. Спасибо!

Не совсем. Мне нужно чтобы дочерние элементы <a> при клике раскрашивались например в красный цвет. Почему не работает вот так: div#menu > a:active { font-size: 8pt; color: red; } PS: Прошу прощения, неправильно указал в теме, не a:visited, a:active

Имею CSS такого вида: #menu a { text-decoration: none; text-align: left; color: #01367C; display: block; padding: 0.7em 0.7em 0.7em 1.5em; border-bottom-color: #99CCFF; border-bottom-style: solid; border-bottom-width: 1px; margin-left: 5px; font-size: 8pt; } И html: <div id="menu"> <a href="/Info/Articles/Page.asp?ID=6530"></a> <a href="/Info/Articles/Page.asp?ID=6531"></a> <a href="/Info/Articles/Page.asp?ID=6532"></a> <a href="/Info/Articles/Page.asp?ID=6533"></a> </div> Поскольку в #menu a указан display: block, можно ли сделать #menu a:visited для каждой ссылки а не целиком сразу, т.е. если прописать #menu a:visited {color: red;} то в красный окрашутся сразу все ссылки. Можно ли указать #menu a:visited не прибегая к прописыванию стиля для каждой ссылки? Надеюсь выразился ясно.

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

Да, изначально должно быть свернуто. Не подскажите как прикрутить куку?

Доброго дня друзья. Есть небольшой код для отображения древовидного меню: <script Language="Javascript"> function menuClick(elemId) { if (document.getElementById(elemId).style.display == 'none') document.getElementById(elemId).style.display = 'block'; else document.getElementById(elemId).style.display = 'none'; } </script>- представление в HTML: <div style="text-decoration: none; color: white; cursor: pointer;" onClick="menuClick('1')">Меню</div> <div class="sub" id="1" style="display: none;"> <a href="#1">Ссылка 1</a> <a href="#2">Ссылка 2</a> <a href="#3">Ссылка 3</a> </div> Все прекрасно работает. Но, нехватает самого главного, чтобы при клике допустим на Ссылку1 при перезагрузке страницы меню не сворачивалось, т.е. сохранялась в раскрытом виде. Можете помочь? Нужно именно JavaScript'ом. Спасибо.