Выравнивание элементов меню горизонтально

Тема в разделе "CSS, HTML, Web 2.0, верстка по web-стандартам", создана пользователем troublemaker, 15.08.2013.

  1. troublemaker
    Offline

    troublemaker Недавно здесь

    Регистрация:
    20.07.2013
    Сообщения:
    28
    Симпатии:
    0
    Пол:
    Мужской
    Доброго времени суток.
    Понимаю глупость моего вопроса и простоту его решения, но все же, не могу осуществить...
    Есть элементы будущего меню (иконки) и они должны быть расположены горизонтально.
    picture.php?albumid=100&pictureid=261
    Как вывести их горизонтально? Я понимаю что можно с помощью таблицы, но и так тоже не получается...:(
    Вот код
    Код (html):
    1. <!DOCTYPE html>
    2. <html>
    3.  <head>
    4.   <meta charset="utf-8">
    5.   <title>1</title>
    6.   <style>
    7.     a.rollover {
    8.     background: url(images/M.png);
    9. display: block;
    10.     width: 154px;
    11.     height: 156px;
    12.    }
    13.    a.rollover:hover {
    14.     background-position: 0 -157px;
    15.    }
    16.   </style>
    17.  </head>
    18.   <body>
    19.   <p><a href="ССЫЛКА" class="rollover"></a></p>
    20.  </body>
    21. </html>
    22.  
    23.  
    24.  
    25. <!DOCTYPE html>
    26. <html>
    27.  <head>
    28.   <meta charset="utf-8">
    29.   <title>2</title>
    30.   <style>
    31.    a.rollover1  {
    32.     background: url(images/P3.png);
    33.     display: block;
    34.     width: 154px;
    35.     height: 156px;
    36.    }
    37.    a.rollover1:hover  {
    38.     background-position: 0 -157px;
    39.    }
    40.   </style>
    41.  </head>
    42.   <body>
    43.   <p><a href="ССЫЛКА" class="rollover1"></a></p>
    44.  </body>
    45. </html>
    46.  
    47. <!DOCTYPE html>
    48. <html>
    49.  <head>
    50.   <meta charset="utf-8">
    51.   <title>3</title>
    52.   <style>
    53.    a.rollover2  {
    54.     background: url(images/E3.png);
    55.     display: block;
    56.     width: 155px;
    57.     height: 156px;
    58.    }
    59.    a.rollover2:hover  {
    60.     background-position: 0 -158px;
    61.    }
    62.   </style>
    63.  </head>
    64.   <body>
    65.   <p><a href="ССЫЛКА"rollover2"></a></p>
    66.  </body>
    67. </html>
    68.  
    69.  
    70. <!DOCTYPE html>
    71. <html>
    72.  <head>
    73.   <meta charset="utf-8">
    74.   <title>4</title>
    75.   <style>
    76.    a.rollover4  {
    77.     background: url(images/K3.png);
    78.     display: block;
    79.     width: 154px;
    80.     height: 156px;
    81.    }
    82.    a.rollover4:hover  {
    83.     background-position: 0 -159px;
    84.    }
    85.   </style>
    86.  </head>
    87.   <body>
    88.   <p><a href="ССЫЛКА" class="rollover4"></a></p>
    89.  </body>
    90. </html>


    Заранее спасибо!
     
    Последнее редактирование модератором: 26.11.2014
    troublemaker, 15.08.2013
    #1

  2. Наши спонсоры

     
  3. OlegK
    Offline

    OlegK Russian Joomla! Team Команда форума ⇒ Профи ⇐

    Регистрация:
    17.01.2011
    Сообщения:
    7 812
    Симпатии:
    771
    Пол:
    Мужской
    В Джумла 2.5 можно назначать картинку пункту меню. А модуль горизонтального меню можешь подобрать на JED
     
    OlegK, 15.08.2013
    #2
  4. troublemaker
    Offline

    troublemaker Недавно здесь

    Регистрация:
    20.07.2013
    Сообщения:
    28
    Симпатии:
    0
    Пол:
    Мужской
    Я наверное не совсем точно сформулировал вопрос.
    Дело в том, что это не совсем меню, это просто изображения с использованием эффекта "перекатывания". Мне нужно просто эти изображения разместить горизонтально
     
    troublemaker, 15.08.2013
    #3
  5. OlegM
    Offline

    OlegM Russian Joomla! Team Команда форума

    Регистрация:
    12.04.2007
    Сообщения:
    4 310
    Симпатии:
    375
    Пол:
    Мужской
    troublemaker, чем не нравится float: left?


    вообще не в тему! Выравнивание и расположение - разные вещи
     
    OlegM, 15.08.2013
    #4
< Не могу найти файл CSS отвечающий за банеры | Размер заголовков возвращается >

Поделиться этой страницей

Загрузка...