css styling and alignment issue

Я бы хотел, чтобы мой <div id="container"> был в правой части моего навигационного меню, но у меня проблемы.css styling and alignment issue

Может кто-нибудь, пожалуйста, помогите мне с этим.

index.php

<!-- This is the page identifier. Change on each of your pages! --> 
<?php $page ='page_index'; ?> 
<!doctype html> 
<head> 
    <meta charset="UTF-8"> 
    <title>Index</title> 
    <meta name="description" content="Example of PHP include active navigation"> 
    <link rel="stylesheet" href="style.css"> 
    <!--[if lt IE 9]> 
    <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> 
    <![endif]--> 
</head> 
<body> 
    <div id="container"> 
     <header> 
      <h1>Index page</h1> 
     </header> 

     <!-- This is where we want to include the nav.php file! --> 
     <?php include("nav.php"); ?> 

     <div id="main" role="main"> 
      <p>This is the index page</p> 
     </div> 

     <footer> 
      <p>This is the footer</p> 
     </footer> 
    </div> 
</body> 
</html>

nav.php

<nav role="navigation" id="<?php echo $page ?>"> 
    <ul> 
     <li><a class="index" href="index.php">Home</a></li> 
     <li><a class="about" href="about.php">About</a></li> 
     <li><a class="contact" href="contact.php">Contact</a></li>   
    </ul> 
</nav>

style.css

nav ul { 
    list-style: none; 
    display:inline-block; 
     float:left; 
} 

ul a { 
    color:green; 

} 

nav#page_index ul li a.index, 
nav#page_about ul li a.about, 
nav#page_contact ul li a.contact { 
    color:red; 
}

Это то, что я добавил style.css

div.container 
{ 
    float:left; 
}

Пожалуйста, дайте мне знать, как я могу сделать меню навигации левой стороны с некоторым хорошим глядя форматирования.

заблаговременно ..!

источник

2013-06-19 user1586957

согласно вашему коду вы должны установить ширину 'ul' и' container' –

Оберните содержимое, которое вы хотите, рядом с левым меню навигации в новом элементе div. Затем добавьте float:left в этот контейнер и в меню навигации. Вкратце, вам нужно плавать с двумя братьями и сестрами, чтобы сделать их бок о бок. Поскольку нет явного брата, я предлагаю сделать это, обернув содержимое.

HTML

<div id="container"> 
     <header> 
      <h1>Index page</h1> 
     </header> 

     <nav role="navigation" id="nav"> 
     <ul> 
      <li><a class="index" href="index.php">Home</a></li> 
      <li><a class="about" href="about.php">About</a></li> 
      <li><a class="contact" href="contact.php">Contact</a></li>   
     </ul> 
     </nav> 
     <div id="content"> 
      <div id="main" role="main"> 
       <p>This is the index page</p> 
      </div> 

      <footer> 
       <p>This is the footer</p> 
      </footer> 
     </div> 
    </div>

CSS

#content,#nav{ 
    float:left; 
}

Рабочий примерhttp://jsfiddle.net/vmr95/

источник

2013-06-19 08:36:34

Ваш вопрос не так ясно. Внутри кода меню контейнера написано. Думаю, вы имеете в виду div с именем main. В этом случае вы можете добавить

#main{ float:left; }

и соответственно отрегулировать нижний колонтитул.

источник

2013-06-19 08:46:42 ejo

css styling and alignment issue

ответ

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