вставка кнопок

  • Решено sashmotor

    (@sashmotor)


    15 лет, 5 месяцев назад

    Хочу вставить на блог дополнительные кнопки в header 2-3 шт. каждая чтоб имела свою картинку
    пытался делать так:
    файл header:

    <div class="map">
<a href="http://localhost/........." title="карта сайта">Карта сайта</a>
</div>

    файл сss:

    .map a{
	display: block;
	background: url(images/map.png) no-repeat;
	width: 32px;
	height: 32px;

	}
.map a:hover{
	display: block;
	background: url(images/map_on.png) no-repeat;
	width: 32px;
	height: 32px;
	}

    Кнопочка появляется и даже работает НО!!!….

    Проблема:
    Пытаюсь вставить вторую кнопку
    код выглядит так:

    <div class="map">
<a href="http://localhost/........." title="карта сайта">Карта сайта</a>
</div>
<div class="go">
<a href="http://localhost/........." title="перейти">Go</a>
</div>

    файл сss:

    .map a{
	display: block;
	background: url(images/map.png) no-repeat;
	width: 32px;
	height: 32px;
	}
.map a:hover{
	display: block;
	background: url(images/map_on.png) no-repeat;
	width: 32px;
	height: 32px;
	}

.go a{
	display: block;
	background: url(images/go.png) no-repeat;
	width: 32px;
	height: 32px;
	}
.go a:hover{
	display: block;
	background: url(images/go_on.png) no-repeat;
	width: 32px;
	height: 32px;
	}

    А она ставится не в строку а в столбик…:(
    Помогите, как это исправить…
    Буду очень благодарен….
    ПыСы:
    Разбераюсь сам, все методом тыка, логики и аналогий, блин замучалcя я уже с этими кнопками…

Просмотр 3 ответов — с 1 по 3 (всего 3)
  • inwpresser

    (@inwpresser)

    15 лет, 5 месяцев назад

    по всей видимости, кнопки у вас это не картинки, а дивы.
    Дивы по умолчанию занимают всю ширину страницы, значит два дива подряд подразумевают вертикальный столбик.

    зачем вам дивы, если вы делаете ссылки, назначая им display:block?
    вы не понимаете как это работает, или я не понимаю, что вы имеете в виду.

    Сделайте ссылки без дивов, просто две ссылки.
    в css уберите .map везде,

    ссылкам в том же файле вместо block назначьте display: inline-block

    полагаю, что так.

    inwpresser

    (@inwpresser)

    15 лет, 5 месяцев назад

    CSS выглядит так:

    #map{
     display: inline-block;
     background: url(images/map.png) no-repeat;
     width: 32px;
     height: 32px;
     }
#map:hover{
     display: inline-block;
     background: url(images/map_on.png) no-repeat;
     width: 32px;
     height: 32px;
     }

#go{
     display: inline-block;
     background: url(images/go.png) no-repeat;
     width: 32px;
     height: 32px;
     }
#go:hover{
     display: inline-block;
     background: url(images/go_on.png) no-repeat;
     width: 32px;
     height: 32px;
     }

    HTML Выглядит так:

    <a id="map" href="http://localhost/........." title="карта сайта">Карта сайта</a>
<a id="go" href="http://localhost/........." title="Go">Go</a>

    Или можно это сделать не через id= а через class= . Это уж как вам будет удобнее.
    Я пользуюсь по большей части айди, т.к класс нужен для назначения одного и того же стиля на несколько объектов.
    а айди уникален на странице. Так удобнее помнить, обращаться к элементу, да и это удобнее если вы будете обращаться к этим элементам в JavaScript’е

    Автор sashmotor

    (@sashmotor)

    15 лет, 5 месяцев назад

    Респектище!!! Все получилось! Весьма признателен!!!
    Очень помогли….

Просмотр 3 ответов — с 1 по 3 (всего 3)
  • Тема «вставка кнопок» закрыта для новых ответов.

Метки