Выравнивание навигации и заголовок

Мой раздел заголовка немного испорчен. Мое навигационное меню помещается ниже фактического названия. Я попытался изменить отображение на встроенный, но когда я делаю это с #navmenu, он очищает цвет и полностью остается тем же.Выравнивание навигации и заголовок

Я знаю, что есть, вероятно, простой ответ, как для почти каждого вопроса, который я задал, но может ли кто-то помочь мне?

HTML:

<!DOCTYPE html> 

<html> 

    <head> 
     <meta name="Description" content="This is your test website!"/> 
     <meta name="author" content="Me!"/> 
     <title>ReallyGoodPie | Home</title> 
     <link type="text/css" rel="stylesheet" href="css/style.css"/> 
    </head> 

    <body> 

     <div id="wrapper"> 
      <nav id="navmenu"> 
      <div id="title"> 
       <h1>Title</h1> 
      </div> 

       <ul> 
        <li>Home</li> 
        <li>About</li> 
        <li>Tutorials</li> 
        <li>Services</li> 
        <li>Contact Us</li> 
       </ul> 
      </nav> 

      <aside id="sidenews"> 

      </aside> 

      <div id="center"> 

       <section id="mainsection"> 
        <article> 
         <header> 
          <hgroup> 
           <h1>This is a test</h1> 
           <h2>I like tests!</h2> 
          </hgroup> 
         </header> 
         <section> 
          <p>This is the main section of my section (sectception)</p> 
         </section> 
         <footer> 
          <p>Time and date</p> 
         </footer> 
        </article> 
       </section> 

      </div> 

      <footer id="cright"> 
       <p>This is the copyright section. All rights reserved.</p> 
      </footer> 
    </body> 

</html>

CSS:

*{ 
margin: 0; 
padding: 0; 
} 

header, section, footer, aside, nav, article, hgroup{ 
    display: block; 
} 

a{ 
    text-decoration: none; 
    color: #FFF; 
} 

a:hover{ 
    color: #333399; 
} 


#wrapper{ 
    width: 100%; 
    margin: 20px auto; 
    margin-top: 0px; 
    text-align: left; 
    background-color: #FFF; 
} 

#navmenu{ 
    background: #3366CC; 
    color: #eee; 
    text-align: right; 
    height: 100px; 
    padding: 0; 
    margin:0; 
    float: top; 
    width: 100%; 
} 

#navmenu li{ 
    display: inline-block; 
    list-style: none; 
    padding: 20px; 

} 

#navmenu ul{ 
    padding-right: 10px; 
} 

#navmenu li:hover{ 
    color: #FFF; 
    background: #3399FF; 
    border-radius: 5px; 
    -moz-border-radius: 5px; 
    padding-top: 10px; 
    padding-bottom: 10px; 
} 




#mainsection{ 
    float:left; 
    width: 630px; 
    margin:30px; 
    margin-top: 2 
    background-color:#FFF; 
    color: #222; 
    text-align: left; 

} 

#cright{ 
    text-align:center; 
    background-color: #AAA; 
    clear: both; 
} 

#center{ 
    width: 1000px; 
    height: 1000px; 
    background-color:#FFF; 
} 

#sidenews{ 
    float:right; 
    width: 250px; 
    height: 940px; 
    margin: 0px 0px; 
    padding: 30px; 
    background-color:#FFF; 
} 

#title{ 
    text-align: left; 
    padding: 0; 
    padding-top: 10px; 
    padding-left: 10px; 
    width: 200px; 
} 

h1{ 
    width: 100px; 
}

источник

2013-02-09 ReallyGoodPie

, где вы хотите, чтобы название точно –

Если я правильно понял ваш "вопрос" Вы хотите, чтобы название будет слева от навигации? В этом случае вам нужно использовать:

#title 
{ 
    float: left; 
}

http://jsfiddle.net/z3F4x/

источник

2013-02-09 10:30:32 reinder

у меня есть еще целая куча пустого пространства в меню навигационного: C – ReallyGoodPie

Установите свойство «высоту» на #navmenu – reinder

Спасибо, Просить, выделяют вопросы в последнее время, и когда кто-то отвечает им, я чувствую себя полным идиотом, но хорошо. – ReallyGoodPie

Установите свойство поплавка на navmenu ul и title к left

#title{ 
    text-align: left; 
    padding: 0; 
    padding-top: 10px; 
    padding-left: 10px; 
    width: 100px; 
    float: left; 
} 

#navmenu ul{ 
    padding-right: 10px; 
    float:left; 
}

рабочего примера: http://jsfiddle.net/J5Zvn/

источник

2013-02-09 10:31:09

Переместите название наружу navmenu, если вы хотите его сверху или снизу, если вы хотите под ним

  <div id="wrapper"> 
      <div id="title"> 
        <h1>Title</h1> 
       </div> 
      <nav id="navmenu"> 

       <ul> 
        <li>Home</a> 
        <li>About</li> 
        <li>Tutorials</li> 
        <li>Services</li> 
        <li>Contact Us</li> 
       </ul>

источник

2013-02-09 10:33:18

Выравнивание навигации и заголовок

ответ

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