Резиновое меню

Тема в разделе "Веб-дизайн", создана пользователем V_R, 11 окт 2010.

Модераторы: zek24
  1. V_R

    V_R

    Регистр.:
    16 май 2008
    Сообщения:
    227
    Симпатии:
    61
    Стоит следующая задача: создать меню, которое бы тянулось по всей ширине есть код:
    HTML:
    
    <div class="main-menu">
        <a href="#">HTML</a>
        <a href="#">CSS</a>
        <a href="#">Javascript</a>
        <a href="#">Вебмастеринг</a>
        <img src="blank.gif" width="100%" height="1" alt="" />
    </div>
    .main-menu {
      text-align: justify !important;
      }
    
    Все хорошо но если пункты меню состоят не из одного слова, то все слова растягиваются равномерно.Есть ли решение подсскажите?
     
  2. Kub

    Kub

    Регистр.:
    5 июн 2009
    Сообщения:
    607
    Симпатии:
    474
    Вот что то похожее на то что вам нужно
    Код:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Nav</title>
    <style type="text/css">
    * {
    	margin: 0px;
    	padding: 0px;
    }
    body {
    	font: 12px/1.8 Arial, Helvetica, sans-serif;
    	background-color: #fff;
    	min-width: 980px;
    }
    ul {
    	margin: 0;
    	padding: 0;
    	float: left;
    	width: 100%;
        list-style: none;
    }
    
    ul li {
    	float: left;
    	width: 12%;
    }
    ul a {
    	line-height: 2.1em;
    	text-decoration: none;
    	color: #000;
    	float: left;
    	display: block;
    	text-align: center;
    	border-left: 1px solid #000;
    	width: 100%;
    }
    ul a:hover {
    	color: #FF0;
    	background: #F00;
    }
    ul .first a {
    	border: none;
    }
    .container {
    	background: #0F0;
    	padding-left: 20%;
    	overflow: hidden;
    }
    </style>
    </head>
    <body>
    <div class="container">
      <ul>
        <li class="first"><a href="#">HTML</a></li>
        <li><a href="#">CSS</a></li>
        <li><a href="#">Javascript</a></li>
        <li><a href="#">Вебмастеринг</a></li>
        <li><a href="#">News&nbsp;CSS</a></li>
      </ul>
    </div>
    </body>
    </html>
    
    
     
  3. V_R

    V_R

    Регистр.:
    16 май 2008
    Сообщения:
    227
    Симпатии:
    61
    Kub спасибо конечно да твое решение работает но:
    <li><a href="#">News&nbsp;CSS</a></li>
    &nbsp; - не есть хорошо для поисковиков
     
  4. Kub

    Kub

    Регистр.:
    5 июн 2009
    Сообщения:
    607
    Симпатии:
    474
    Тогда убираем &nbsp; и дописываем к ul a правило white-space: nowrap;
    Код:
    ul a {
    	white-space: nowrap;
    }
     
  5. _axl

    _axl Постоялец

    Регистр.:
    24 сен 2008
    Сообщения:
    50
    Симпатии:
    8
    Сверстайте таблицей и не парьтесь :)
     
  6. bork75

    bork75 Д☼брая собака )

    Регистр.:
    21 июн 2008
    Сообщения:
    1.449
    Симпатии:
    716
    Это резиновое меню обсуждается в этом блоге
    http://dimonblog.ru/css/rezinovoe-menyu/
    Сам автор блога, предлагает решение в виде добавления, &nbsp; между словами, в комментариях пишут о багах в фаерфоксе, если картинка отсутствует.

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

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

    darkangelmsk Писатель

    Регистр.:
    12 окт 2010
    Сообщения:
    9
    Симпатии:
    1
    Конечно, в данном случае было бы разумнее использовать резиновую <table>
     
  8. V_R

    V_R

    Регистр.:
    16 май 2008
    Сообщения:
    227
    Симпатии:
    61
    Спасибо всем решение ныйдено
     
  9. KyaH

    KyaH Создатель

    Регистр.:
    13 сен 2010
    Сообщения:
    15
    Симпатии:
    1
    Так рассказал бы о решении)
     
  10. V_R

    V_R

    Регистр.:
    16 май 2008
    Сообщения:
    227
    Симпатии:
    61
    HTML
    <div id="nav">
    <ul>
    <li><a href="#">Главная</a></li>
    <li><a href="#">Регистрация</a></li>
    <li><a href="#">Хостинг</a></li>
    <li><a href="#">Домены</a></li>
    <li><a href="#">Помощь</a></li>
    <li><a href="#">Анализ</a></li>
    </ul>
    </div>

    CSS

    #nav ul {
    text-align: justify;
    overflow: hidden;
    height: 20px;
    cursor: default;
    background: #ffffff;
    padding: 5px;
    }
    #nav li {
    display: inline;
    }
    #nav li a {
    display: inline-block;
    color: #0000CC;
    }
    #nav a:hover {
    color: #ff0000;
    }
    #nav ul:after {
    content: "1";
    margin-left: 100%;
    height: 1px;
    overflow: hidden;
    display: inline-block;
    }

    Более подробно почитать http://www.xiper.net/collect/html-and-css-tricks/navigation/rubber-menu.html