Помогите с горизонтальным css menu

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

Статус темы:
Закрыта.
Модераторы: zek24
  1. Baracuda

    Baracuda Постоялец

    Регистр.:
    31 дек 2007
    Сообщения:
    86
    Симпатии:
    4
    Файл приложен.
    Просьба: можете помочь, как мне сделать так, что бы меню в блоке с идентификатором "where-menu" было резиновым, и позиционировалось по центру серого блока.. Не могу еще разобраться, как правильно задавать длину каждому <li>
    Пожалуйста помогите, целый день бьюсь, ищу и не могу сделать.
     

    Вложения:

    • html.rar
      Размер файла:
      486,1 КБ
      Просмотров:
      4
  2. ercalote

    ercalote Постоялец

    Регистр.:
    27 мар 2008
    Сообщения:
    86
    Симпатии:
    21
    Правил только файл style.css, его и прикрепляю. Насчет того, что именно изменил посмотрите сами, сравнив два файла. Скажу только, что не нужно использовать float:left для позиционированию пунктов меню в строку, для этого есть display:inline. Почему он лучше? Да потому что float:left не тянется. Да и вообще, старайтесь использовать поменьше блоков, которые выпадают из стакана.
     

    Вложения:

    • style.rar
      Размер файла:
      892 байт
      Просмотров:
      2
    Baracuda нравится это.
  3. Baracuda

    Baracuda Постоялец

    Регистр.:
    31 дек 2007
    Сообщения:
    86
    Симпатии:
    4
    Видоизмеил код, но получилась абра кадабра)

    Более полную версию перевложил в первом посте
     
  4. ercalote

    ercalote Постоялец

    Регистр.:
    27 мар 2008
    Сообщения:
    86
    Симпатии:
    21
    Измените в style.css стиль #where-menu li на
    Код:
    #where-menu li {
    	float:left;
    	padding-right:20px;
    	display:block;
    	width:120px;
    	height:110px;
    	text-align:center;
    }
    
    Когда есть подобные меню (картинка+текст, типа маленькая табличка, рекомендуется делать float:left, но указывать четкие размеры блока). Не забудьте про clear:both после подобных меню.
     
    Baracuda нравится это.
  5. Baracuda

    Baracuda Постоялец

    Регистр.:
    31 дек 2007
    Сообщения:
    86
    Симпатии:
    4
    Этот момент понял ))..

    А вот, что посоветуете насчет блока там где контент. Мне надо чтоб блок с идетификатором id="pog-wrap" позиционировался по центру своего родителя. Пробовал margin:0 auto; не понимает.

    А также:
    1) Скажите правильно я делаю бордер ? (который dashed)
    2) Как мне сделать так, что б когда блок с идентификатором "center" растягивался по высоте, автоматически бы растягивался блок лефт и райт, т.к? А то бордер не вытягивается..
     
  6. ercalote

    ercalote Постоялец

    Регистр.:
    27 мар 2008
    Сообщения:
    86
    Симпатии:
    21
    Для горизонтального выравнивания блока по центру родителя, он должен иметь фиксированную ширину. Пропишите у блока с погодой width:180px; и наряду с margin:0 auto; он будет правильно работать.

    1. А что вы подразумеваете под правильностью бордера?
    2. Используйте что-то наподобие:
    CSS
    Код:
    #content {
    	width:100%;
    	overflow: hidden;
    	padding:0 0 0 0;
    	margin:0 0 0 0;
    }
    
    #left_column {
    	width:250px;
    	float:left;
    	margin:0 0 -9999px 0;
    	padding:0 0 9999px 0;
    }
    
    #right_column {
    	width:250px;
    	float:right;
    	margin:0 0 -9999px 0;
    	padding:0 0 9999px 0;
    }
    
    #center_column {
    	margin:0 250px -9999px 250px;
    	padding:0 0 9999px 0;
    }
    
    HTML
    Код:
    <div id="content">
         <div id="left_column"></div>
         <div id="right_column"></div>
         <div id="center_column"></div>
    </div>
    
    Это поможет сделать все три колонки одинаковой высоты. Для ИЕ ниже 7 версии возможно понадобится затычка expression.
     
    Baracuda нравится это.
  7. Baracuda

    Baracuda Постоялец

    Регистр.:
    31 дек 2007
    Сообщения:
    86
    Симпатии:
    4
    Правильность бордера, в ие6, при скролле, когда ухожу вверх, а потом обратно вниз, бордер исчезает или частично отображается, обновив страницу - всё норм/

    З.Ы. Метод не заработал (вытинул FF и ИЕ6 на 9999 пикселей, хотя везде проверил, отрицатильный margin есть..
     
Статус темы:
Закрыта.