Я работаю над шаблоном для нового веб-сайта. У меня возникли проблемы с попыткой получить некоторые контейнеры, чтобы выровнять, как мне хотелось бы. Я пытаюсь создать панель навигации из нескольких div, а затем под этим блоком есть тело, содержащее несколько контейнеров.DIV позиционирование и выравнивание вопрос

Я застрял в 1), делая навигационную панель автоматически выровненной в середине и 2) запустил тело под навигационной панелью.

<div id="navBar"> 
<div class = "buttons" id="home">Home</div> 
<div class = "buttons" id="calendar">Calendar</div> 
<div class = "buttons" id="gallery">Gallery</div> 
<div class = "buttons" id="current">Dragon Rydas</div> 
<div class = "buttons" id="prospective">Future Rydas</div> 
<div class = "buttons" id="fallen">Fallen Rydas</div> 
<div class = "buttons" id="contact">Contact</div> 
<div class = "buttons" id="affiliates" align="center">Affiliates</div> 
</div> 


<div id="body"> 
<div class="content" id="Home">A</div> 
<div class="content" id="CRydas">B</div> 
<div class="content" id="Contact">C</div> 
</div>

и соответствующий CSS У меня есть для этого есть:

#navBar { 
    float:left; 
    width:auto; 
    margin-left:auto; 
    margin-right:auto; 
    color: #09F; 
    size: 18px; 
    font-size: 18px; 
    font-family: "Trebuchet MS", Arial, Helvetica, sans-serif; 
    right: auto; 
    left: auto; 
} 

.buttons { 
    float: left; 
    padding: 5px; 
    width:115px; 
    margin-left:auto; 
    margin-right:auto; 
    text-align:center; 
    font-size:18px; 
    color: #0CF; 
    font-family: "Trebuchet MS", Arial, Helvetica, sans-serif; 
}

Спасибо за любую помощь.

источник

2010-10-08 khop

Не используйте DIV для меню, используйте списки. Это дает простой семантический HTML без необходимости дополнительных идентификаторов и классов.

<div class='root'> 
    <div class='menu'> 
     <ul> 
      <li><a href="...">Item</a></li> 
     </ul> 
    </div> 
    ... your content ... 
</div>

Тогда всплывают ваши Lis

.menu li { 
    float:left 
}

и стиль якоря:

.menu a { 
    display:block; 
    ... your styles ... 
}

Тогда центрировать все это с помощью обертки, "корень" в этом случае:

.root { 
    width:960px; 
    margin-left:auto; 
    margin-right:auto; 
}

источник

2010-10-08 20:23:55

Согласен, но я думаю, вам нужно установить 'width: 115px ; 'или' display: inline; 'для элементов списка. В противном случае они будут по умолчанию равняться ширине 100%. – ClarkeyBoy

Нет, якоря приобретают стиль, а не LI. Поэтому установите ширину A на 115px. –

Хорошо, я стою исправлен ... На днях я столкнулся с проблемой, когда мой лис был установлен на 100% ширину ... они, должно быть, наследовали класс, который, как я понял, не влиял на них. Я все равно решил проблему. – ClarkeyBoy

Вы должны применить это к .buttons и #navbar {

#navBar { 
    float:left; 
    width:auto; 
     padding:0; 
margin:0 auto; 
    color: #09F; 
    size: 18px; 
    font-size: 18px; 
    font-family: "Trebuchet MS", Arial, Helvetica, sans-serif; 
    right: auto; 
    left: auto; 
} 

.buttons { 
    float: left; 
    padding: 5px; 
    width:115px; 
    padding:0; 
margin:0 auto; 
    text-align:center; 
    font-size:18px; 
    color: #0CF; 
    font-family: "Trebuchet MS", Arial, Helvetica, sans-serif; 
}

но вы действительно должны использовать неупорядоченные списки <ul> для навигации.

источник

2010-10-08 20:19:48

Я обычно использую глобальное правило центрировать все по ширине страницы ..

Пример:

глобальная {

margin-left: auto; 
margin-right: auto; 
width: "Enter your total width"; /* mandatory to be centered */ 
padding: 0px; 
    }

затем Jus использовать это по всему HTML .. это в центре навигационной панели, и все под ней будет в указанной вами ширине.

источник

2010-10-08 20:22:23

Я не уверен, если я следую, но попробуйте удалить float: left; из #navBar и добавить 'clear: both;' на #body {}.

источник

2010-10-08 20:22:31 orolo

DIV позиционирование и выравнивание вопрос

ответ

глобальная {

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