HTML/CSS: бары Nav в левой части страницы

Мне неловко создавать такие макеты, которые имеют хорошую семантику.HTML/CSS: бары Nav в левой части страницы

Левая сторона - это столбец шириной около 150 пикселей, который содержит элементы навигации.

Я хотел бы поместить HTML-код для этого раздела сайта в начале кода HTML, , а затем сделать простой способ заставить остальную страницу не посягать на эту территорию слева (150 пикселей).

Я подумал о некоторых вариантах.

Поместите остальную часть содержимого сайта внутри div, который явно имеет левый край 150px.
Установите элемент nav на ширину 150 пикселей и поплавок влево. Остальная часть страницы естественно обертывается.

Есть ли другие варианты, которые более подходят для этой задачи?

Вот минусы.

Изменение элемента nav до 200px теперь требует, чтобы я редактировал левый край другого div до 200px. Конечно, это не так уж плохо для одноразового изменения макета, но что, если бы у меня была ширина навигационного элемента, динамически меняющегося от скрипта? Мне понадобится сценарий, чтобы изменить поле div.
Если элемент nav установлен в положение: фиксированное (и сделанное для того, чтобы занять весь левый столбец страницы), остальная часть обертки страницы не вмещает его теперь неподвижное поведение и выглядит ужасно, когда прокручивается страница. Чтобы исправить это, мне нужно сделать элемент навигации бесконечной. Я не уверен, как это сделать правильно. height:9999999px;? Это делает мою страницу на 10 миллионов пикселей выше, а полоса прокрутки теперь бесполезна.

источник

2011-01-18 Steven Lu

Создание боковой панели:

<!-- html --> 
<nav role="main"> 
    <a href="link.com">link</a> 
</nav> 

//css 
nav{  
    width: 150px; 
    float: left; 
    display: inline; 
    margin: 0; 
    padding: 0; 
    margin-right: 10px; 
}

Затем создайте контейнер для основного контента

<!-- html --> 
<section id="main"> 
    main content in here 
</section> 

//css 
section#main{ 
    width: 500; 
    float: left; 
    margin: 0; 
    padding: 0; 
    display: inline;  
}

пока вы размещаете нав перед тем раздел в вашем исходном коде, все, что находится в , раздел будет держаться подальше от левой колонны и не будет обертываться под ним.

Просто необходимо, чтобы убедиться, что вы сбросить все ваши CSS, особенно отступы, поля и границы, если вы не знаете, что вы делаете

удачи

источник

2011-01-18 07:59:00 stephenmurdoch

Спасибо! Я не знал о элементе '

@Steven Lu - слово предупреждения, затем тег nav является тегом HTML 5 и не будет должным образом поддерживаться многими браузерами (IE6, IE7, IE8). Вместо этого следует заменить тег nav тегом div (возможно, с классом nav), а не использовать nav. –

основные браузеры обрабатывают html5 очень хорошо. поддерживается всеми основными браузерами, и вы можете использовать html5shiv для добавления тегов в dom в меньших браузерах - но да, пойдите с divs, если вы предпочитаете – stephenmurdoch

Я всегда использовал вариант 1, хотя, если есть другие идеи, я бы хотел услышать о них.

источник

2011-01-18 07:44:44 sevenseacat

Несколько советов для ваших «минусы»:

Если вы устали от изменения двух свойств с одинаковым значением все время, рассмотреть возможность использования средства генерации CSS как ЛВП, SASS.
Если я правильно помню, вместо установки height: 999999px на левой боковой панели, некоторые трюки, как этот сделать существует: http://www.ejeliot.com/blog/61

источник

2011-01-18 07:51:25 timdream

HTML/CSS: бары Nav в левой части страницы

ответ

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