Кнопки опрокидывания в div

Хорошо, я довольно новичок в CSS и следую за этим кодом кнопок опрокидывания (http://www.elated.com/articles/css-rollover-buttons/). Дело в том, что я хочу 9 кнопок (3х3). Если я повторю код и переименую идентификатор, все они повторяются в строке вниз по странице. Я думаю, что хочу сделать div, но не уверен, куда идти дальше.Кнопки опрокидывания в div

HTML:

<a id="emailUs" href="#" title="Email Us"><span>Email Us</span></a>

CSS:

#emailUs 
{ 
    display: block; 
    width: 107px; 
    height: 23px; 
    background: url("emailUs.gif") no-repeat 0 0; 
} 

#emailUs:hover 
{ 
    background-position: 0 -23px; 
} 

#emailUs span 
{ 
    position: absolute; 
    top: -999em; 
}

Как бы я теперь повторить этот код так, что у меня есть 9 кнопок в 3х3?

источник

2014-03-01 agent73

'дисплей: блоком;' является что заставляет их составлять список вместо сетки. –

Спасибо. Еще так много вещей, чтобы учиться. Большинство этих комментариев действительно помогают лучше понять код. – agent73

Существует много способов сделать это, самым простым, вероятно, было бы сделать три divs каждый из которых состоял из трех ссылок. Вы можете видеть это here on codepen

источник

2014-03-01 08:10:11 thesublimeobject

Спасибо. Это работает для меня. Я всего пару месяцев занимаюсь кодированием, поэтому задавать вопросы, копировать, вставлять и возиться с кодом - это то, что мне нужно. Еще раз спасибо. – agent73

Нет проблем! Я попытался сделать это как можно проще. Если бы вы могли заметить, что это было бы замечательно. :) – thesublimeobject

Вы можете поместить все 9 тегов примерно так <div id="wrapper"> 9*<a href="..."> </div>. Beacause, если ваши метки имеют фиксированную ширину (107 пикселей), вы можете заставить свою обертку иметь фиксированную ширину 240 пикселей, но вам все равно придется удалять отображение : block;

Постарайтесь хакерством этой скрипки: http://jsfiddle.net/bk44c/

Другим решения для сетки: добавить float: left; margin: 5px в тег а и увеличить ширину вашей обертки width: 400px;

С уважением

источник

2014-03-01 08:25:18 radubogdan

Кнопки опрокидывания в div

ответ

Смежные вопросы