Мне нужно расположить свою навигационную панель внутри div

Question

Мне нужно расположить свою навигационную панель внутри div

0

Я пробовал все: от выравнивания текста до заданных полей. Я хочу, чтобы навигационная панель была расположена по горизонтали и внизу по вертикали.

html: http://www.joekellywebdesign.com/businesssample/index.html

<div id="navbar">
          <ul id="MenuBar1" class="MenuBarHorizontal">
              <li><a class="MenuBarItemSubmenu" href="projects.html">Projects</a>
                <ul>
                  <li><a href="restaurant.html">Restaurant</a></li>
                  <li><a href="house.html">House</a></li>
                  <li><a href="mall.html">Mall</a></li>
              </ul>
            </li>
              <li><a href="about.html">About</a></li>
              <li><a class="MenuBarItemSubmenu" href="services.html">Services</a>
                <ul>
                  <li><a class="MenuBarItemSubmenu" href="residential.html">Residential</a>
                    <ul>
                      <li><a href="housing.html">Housing</a></li>
                      <li><a href="storage.html">Storage</a></li>
                  </ul>
                </li>
                  <li><a href="business.html">Business</a></li>
                  <li><a href="government.html">Government</a></li>
              </ul>
            </li>
            <li><a href="contact.html">Contact</a></li>

          </ul>
        </div>

css: http://www.joekellywebdesign.com/businesssample/css/styles.css

  /* CSS Document */


* {
    margin:0px; 
    padding:0px;
  }

body {
     background-color:#FF0;
     }

#wrapper {
    width:900px; 
    margin:10px auto;
    background-color:#FFF;
  }

#logo {
    float:left; 
    width:200px; 
    background-color:#FFF;
   }

#navbar {
    float:right; 
    text-align:center;  
    width:700px;
    margin: auto; 
    background-color:#FFF;
   }

Joe Elmore 04 окт. 2013, в 18:01

Источник

0

"в нижней части div". Какой div?
j08691 04 окт. 2013, в 15:52
0

Navbar Div.
Joe Elmore 04 окт. 2013, в 15:52
0

Вы уверены, что не имеете в виду #top div?
j08691 04 окт. 2013, в 15:53
0

Нет, у меня есть 2 div в верхнем div. Я хочу, чтобы навигационная панель была в центре внутри навигационной панели и внизу.
Joe Elmore 04 окт. 2013, в 15:56
1

Вы предоставили неправильный CSS. Вы используете SpryMenu, а ваши #logo и #navbar не находятся внутри #top ..
vishalkin 04 окт. 2013, в 16:04

Показать ещё 3 комментария

Теги:

html

css

4 ответа

Ещё вопросы

Вы уверены, что не имеете в виду #top div?
Нет, у меня есть 2 div в верхнем div. Я хочу, чтобы навигационная панель была в центре внутри навигационной панели и внизу.
Вы предоставили неправильный CSS. Вы используете SpryMenu, а ваши #logo и #navbar не находятся внутри #top ..

James Johnson · Answer 1 · 2013-10-04T14-51-00.000Z

Вы могли бы сделать что-то вроде этого:

<style type="text/css">
    div#container {
        position:relative;
        width: 500px;
        height: 300px;
        border: 1px solid black;    
    }    
    div#menu-container {
        position: absolute;
        bottom: 0;
        width: 100%;
    }    
    div#menu {
        position: relative;
        text-align: center;    
    }
</style>
<div id="container">
    <div id="menu-container">
        <div id="menu">
            Hello World!   
        </div>
    </div>
</div>

Посмотрите этот jsFiddle для демонстрации.

vishalkin · Answer 2 · 2013-10-04T13-38-00.000Z

Вы можете попробовать это.

ul.MenuBarHorizontal {
margin-top: 8%;
float: right;
}

BetaBlaze · Answer 3 · 2013-10-04T13-19-00.000Z

Использование абсолютного положения легко достало бы его снизу:

Вы применили бы это к #navbar: position: absolute; bottom: 0px; position: absolute; bottom: 0px;
Затем вы примените это к родительскому: position: relative;

Однако теперь, когда вы применили абсолютную позицию, вы должны использовать подобный метод, чтобы центрировать его по горизонтали. Поскольку ваш navbar равен 700px, мы можем использовать некоторую математику, чтобы сосредоточить ее, используя ту же абсолютную позицию.

Вы применили бы это к #navbar: left: 50%; margin-left: -350px; left: 50%; margin-left: -350px;
Рабочий пример: http://jsfiddle.net/ky9av/

Ashis Kumar · Answer 4 · 2013-10-04T13-10-00.000Z

0

Вы можете попробовать это,

ul.MenuBarHorizontal {
    cursor: default;
    font-size: 100%;
    list-style-type: none;
    margin: auto;
    padding: 0;
    width: 512px;
}

Во-вторых, согласно вашему дизайну, navbar заканчивается именно там, где вы заканчиваете,

так что вы можете попробовать это

#navbar {
    background-color: #FFFFFF;
    float: right;
    margin: auto;
    margin-top: 49px;
    text-align: center;
    width: 700px;
}

Ashis Kumar 04 окт. 2013, в 13:10

0

Это не заставляет это придерживаться основания родителя.
BetaBlaze 04 окт. 2013, в 15:53
0

Это не сработало
Joe Elmore 04 окт. 2013, в 15:54
0

попробуйте обновленный ответ
Ashis Kumar 04 окт. 2013, в 16:01
0

Вы использовали абсолютную позицию, но не устанавливали верхний, левый, нижний или правый параметры. Это не правильный код. Вам не нужна абсолютная позиция для использования margin-top, и он никогда не говорил ему применять относительную позицию к родительскому контейнеру.
BetaBlaze 04 окт. 2013, в 16:03
0

Это доходит до дна, но теперь оно сидит поверх моего логотипа. Я обновил свои файлы на своем веб-сайте, чтобы вы могли увидеть, что он делает сейчас, и увидеть обновленный код. Спасибо за работу со мной.
Joe Elmore 04 окт. 2013, в 16:18
0

Извините, я ошибочно покинул position: absolute; с моим кодом. Можешь попробовать сейчас.
Ashis Kumar 04 окт. 2013, в 16:25
0

хм, это все еще не по центру по горизонтали. выравнивание текста: центр не работает.
Joe Elmore 04 окт. 2013, в 16:34
0

Я искал в Google и нашел сайт, показывающий, как центрировать его в режиме конструктора в Dreamweaver. Это включало установку ширины панели навигации, а затем установку полей слева и справа на auto. Должен ли я пометить один из этих ответов как принятый или оставить его без ответа?
Joe Elmore 04 окт. 2013, в 17:04
0

Так поступает мой ответ. Вы можете заметить, что я сделал некоторую фиксированную ширину и сделал поле: auto. Который будет включать в себя как левый и правый как авто.
Ashis Kumar 04 окт. 2013, в 17:17
0

Во-вторых, если вы хотите, чтобы текст был выровнен по центру в строке меню. Вы можете добавить text-align: center к селектору ul.MenuBarHorizontal a . Пожалуйста, дайте мне знать, что вы думаете
Ashis Kumar 04 окт. 2013, в 17:21

Показать ещё 8 комментариев