Навигационное меню исчезает

Обновление: все еще вопрос для начинающих - теперь появилась навигация, но не встроенная. У меня есть jsFiddle at http://jsfiddle.net/4zzkV/Навигационное меню исчезает

Начальный вопрос. Меню #navigation, которое не появляется. Если я прокомментирую #navigation в CSS, он появится, но не встроен.

Html:

 <div id="page"> 
     <div id="content"> 
       <div id="header"> 
        <div id="menu" > 
        <h1>Title</h1 
        </div> 
        <ul id="navigation"> 
         <li id="contact_us"><a href="contact-us.html">Contact Us</a></li> 
         <li id="about_us"><a href="about-us.html">About Us</a></li> 
         <li id="index"><a href="index.html">Home</a></li> 
        </ul> 
       </div> 
       <div id="middle"> 

        <div id="main_image"> 
         <img src="images/eiffel_900_500.png" alt="Paris and Brooklyn"> 
        </div> 

       </div> 
       <div id="footer"> 
       </div> 
     </div> 
    </div>

CSS:

#content{ 
    width: 900px; 
    height: 200px; 
    margin-left:auto; 
    margin-right:auto; 
} 

#header{ 

    margin: 0; 
    background-image: url(../images/header2.png); 
    background: rgba(255,255,255,0.5); 
    float:left; 
} 

#menu {} 

#navigation {float:right; display:inline;}

источник

2013-06-12 Dave

Не могли бы вы оставить [jsfiddle] (http://jsfiddle.net/)? Кстати, вы пропустили '>' для закрытия своего тега h1. – pzin

Спасибо, ты прав, я пропустил закрытие> для h1. Теперь у меня другая проблема. Сейчас я работаю над Фиддлом. – Dave

jsFiddle находится по адресу http://jsfiddle.net/4zzkV/. Проблемы в том, что навигация теперь не встроена. – Dave

Не уверен, что именно то, что вы пытаетесь сделать, но если вы хотите, чтобы ссылки, чтобы отобразить на одной линии с правой стороны и под заголовком, вы будете необходимо добавить следующее в CSS

#navigation li { display: inline;}

в качестве альтернативы можно добавить следующее:

#navigation li {float: right; margin-left: 10px}

Вы хотите рассказать каждой из ссылок о поплавке или отображении встроенного, а не основного div.

источник

2013-06-12 01:50:22 Matto

Спасибо, это похоже почти, но они, похоже, не отображаются на той же строке, что и заголовок. – Dave

Вы пытаетесь использовать каждую ссылку сразу после названия или просто перемещаться вправо, но на той же строке, что и заголовок? Если вы хотите, чтобы он плавал вправо, но на той же строке, что и название, добавьте позицию: absolute; к h1 CSS – Matto

Я пробовал положение: абсолютный на h1, но получил некоторые странные результаты. JsFiddle опустил название под другими элементами. – Dave

навигации пункты не встраивать, потому что вы не установили их в линию. Попробуйте установить

#navigation li { 
    list-style-type: none; 
    display: inline; 
}

см: http://jsfiddle.net/4zzkV/8/embedded/result/

источник

2013-06-12 01:45:27 imjared

Спасибо, как я отметил Матто, теперь они, похоже, не на той же линии, что и название, или я просто не вижу это правильно? – Dave

Вам нужно явно задать ширину этих элементов. #header 1 {ширина: 45%; плыть налево; } #navigation {float: right; ширина: 50%; } (отрегулируйте по своему вкусу) – imjared

Я не знаю, если ваша проблема решена или нет, но я думаю, вот что вам нужно
Fiddle

Я добавил метод line-height, если это нормально с вами.

UPDATE: Если вы видите скрипку, есть еще один метод, который работает без явного задания высоты заголовка

источник

2013-06-12 04:53:59 lazyprogrammer

Спасибо за помощь – Dave

Навигационное меню исчезает

ответ

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