стиль css - разделите навигацию на левую и правую - PullRequest
Новая
       5

стиль css - разделите навигацию на левую и правую

0 голосов
/ 26 июня 2010

Мои цели:

  1. Я хочу, чтобы #nav был разделен на меню слева и меню справа, и каждый из них имеет максимальную ширину

  2. Я хочу убедиться, что #nav, menu-left и right не являются статически фиксированными. Так что он расширяется и сжимается в соответствии с настройками пользователей.

  3. Вывод должен быть похож на то, что мы видим на картинке.

Я делаю это в WordPress. Я хочу создать навигацию или просто горизонтальное меню в самом верху.

Я хочу разделить исходное меню на две части, как показано на следующем рисунке.

http://i50.tinypic.com/zyaakl.jpg (Картинка довольно большая, поэтому я бы оставил ее как ссылку)

Демонстрация здесь http://www.i3physics.com/blog/?page_id=2

Это мой код CSS 

#nav {
 background-color: #444444;
 line-height: 35px;
 margin: 0 auto;
 overflow: hidden;
}

#nav ul {
 float: right;
 list-style: none;
 margin: 0 0 0 0;
}
#nav ul#menu-left {
 float: left;
 max-width: 700px;
}

#nav ul#menu-right {
 float: right;
 max-width: 500px;

}
#nav ul li {
 float: left;
 text-align: center;
 margin: 0;
 padding: 0 12px 0;
}
#nav ul li a, #nav ul li a:visited { 
 float: left;
 color: #ffffff;
 font-size: 11px;
 font-family: Verdana,sans-serif;
 line-height: 35px;
 font-weight: normal;
 font-style: normal;
 font-variant: normal;
 text-transform: none;
 text-decoration: none;
 text-align: start;
 text-indent: 0px;

}
#nav ul li a:hover {
 color: #ffffff;
 text-decoration: underline;
}

Это мой пример кода в header.php 

<body>
<div id="nav">
  <ul id="menu-left"><?php wp_list_pages('depth=1&title_li=0&sort_column=menu_order'); ?></ul>
  <ul id="menu-right"><?php wp_list_pages('depth=1&title_li=0&sort_column=menu_order'); ?></ul>
</div>

Я хочу разделить оригинальное меню на две части, как показано на следующем рисунке.

http://i50.tinypic.com/zyaakl.jpg (Картинка довольно большая, поэтому я бы оставил ее как ссылку)

Так что я подумал о максимизации левого и правого. Затем сделайте поля слева и поля справа. Но это безобразно. Я хочу качество. Это может испортить дисплей с другим разрешением и на другом мониторе.

Я даже пробовал это: 

#nav ul#menu-left {
 float: right;
 max-width: 700px;
}

#nav ul#menu-right {
 float: left;
 max-width: 500px;

Я буду признателен за любую помощь здесь. Большое спасибо.

Ответы [ 2 ]

3 голосов
/ 26 июня 2010

Я не уверен, что именно вы просите, но если мое предположение верно, вы хотите что-то вроде этого: 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<style type="text/css">
html, body {
 width:100%;
 margin:0;
 padding:0;
}
#wrapper {
 background-color:#444;
 width:100%;
}
ul.nav {
 overflow:hidden;
 list-style:none;
 padding:0;
 position:relative;
 width:600px; /* FOR a static width like Posh CSS */
 margin:0 auto;
}
li {
 margin:0 10px; /* Gap between LI elements 20px */
}
li.left {
 float:left;
}
li.right {
 float:right;
}
li a {
 color:#fff;
}
</style>
</head>
<body>
<div id="wrapper">
<ul class="nav">
 <li class="left"><a href="#">left</a></li>
 <li class="left"><a href="#">left</a></li>
 <li class="left"><a href="#">left</a></li>
 <li class="left"><a href="#">left</a></li>
 <li class="left"><a href="#">left</a></li>
 <li class="right"><a href="#">right</a></li>
 <li class="right"><a href="#">right</a></li>
 <li class="right"><a href="#">right</a></li>
</ul>
</div>
</body>
</html>

дайте мне знать, если это правильно.

0 голосов
/ 26 июня 2010

просто добавьте width:1200px; к #nav в вашем CSS-файле

Работая здесь http://grab.by/58ZH

Если вы хотите, чтобы темная строка заполняла 100% ширины страницы:

HTML 

<div id="nav">
  <div id="nav_wrapper">
    <ul id="menu-left">...</ul>
    <ul id="menu-right">...</ul>
  </div>
</div>

CSS 

#nav ul #menu-left {
  float:left;
  max-width:700px;
}

#nav u l#menu-right {
  float:right;
  max-width:500px;
}
#nav_wrapper {
   margin: 0 auto;
   width: 1600px;
}

Вы также хотите добавить дополнительную строку ниже?

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

Нет похожих вопросов

...