Reputation: 290

Navigation bar positioning

I would like to know how can I correct this issue, where the navigation bar is wrong positioned (it should be inside the margin lines and at the bottom of the header, as shown in this image).

The code:

<!DOCTYPE html>
<html>
<head>
<title>Homepage</title>
<style type="text/css">
html, body { margin: 0; padding: 0; }

#container
{
	margin: 0 auto;
	background: #FFF;
	width: 100%;
}

header
{
	height: 180px;
	padding: 1% 1%;
	background-color: #22272A;
	margin: 0 auto;
}

title
{
	color: #FFF;
	margin: 0 auto;
	position: absolute;
	left: 20%;
	top: 2%;
	font-size: 48px;
	font-family: Verdana, Geneva, sans-serif;
}

nav { position: relative; }			
nav ul { display: inline-block; }		
nav ul li
{
	list-style: none;
	position: relative;
	display: inline-block;
	float: left;
	padding: 10px;
	text-align: center;
}

nav ul li .active
{
	color: #3479FA;
	background: #FFF; 
	border: 1px solid white;
	border-radius: 5px;
	padding: 10px;
}

nav ul li a
{
	text-decoration: none;
	color: #FFF;
	line-height: 30px;
	width: 40px;	
}
</style>
</head>

<body>
    <div id="container">
    	<header>
	    	<title>Sample Text</title>
            <nav>
            	<ul>
                	<li class="active"><a href="bla.html" class="active">bla</a></li>
                    <li><a href="bla.html">bla</a></li>
                </ul>
            </nav>
        </header>
    </div>
</body>
</html>

PD: The text is not being shown using this "compiler", but it works on my browser when I run it locally.

Thanks in advance.

Upvotes: 1

Answers (3)

spooky

Reputation: 1648

You are pushing the Sample Text thus, you need to push nav too... Run this code.

<!DOCTYPE html>
<html>

<head>
  <title>Homepage</title>
  <style type="text/css">
    html,
    body {
      margin: 0;
      padding: 0;
    }
    #container {
      margin: 0 auto;
      background: #FFF;
      width: 100%;
    }
    header {
      height: 180px;
      padding: 1% 1%;
      background-color: #22272A;
      margin: 0px auto;
    }
    span {
      color: #FFF;
      margin: 0 auto;
      position: absolute;
      left: 20%;
      top: 2%;
      font-size: 48px;
      font-family: Verdana, Geneva, sans-serif;
    }
    nav {
      position: relative;
      top:60%;
      left:12%
    }
    nav ul {
      display: inline-block;
    }
    nav ul li {
      list-style: none;
      display: inline-block;
      padding: 10px;
      text-align: center;
    }
    nav ul li .active {
      color: #3479FA;
      background: #FFF;
      border: 1px solid white;
      border-radius: 5px;
      padding: 10px;
    }
    nav ul li a {
      text-decoration: none;
      color: #FFF;
      line-height: 30px;
      width: 40px;
    }
  </style>
</head>

<body>
  <div id="container">
    <header>
      <span>Sample Text</span>
      <nav>
        <ul>
          <li class="active"><a href="bla.html" class="active">bla</a>
          </li>
          <li><a href="bla.html">bla</a>
          </li>
        </ul>
      </nav>
    </header>
  </div>
</body>

</html>

<!DOCTYPE html>
<html>
<head>
<title>Homepage</title>
<style type="text/css">
html, body { margin: 0; padding: 0; }

#container
{
	margin: 0 auto;
	background: #FFF;
	width: 100%;
}

header
{
	height: 180px;
	padding: 1% 1%;
	background-color: #22272A;
	margin: 0 auto;
}

title
{
	color: #FFF;
	margin: 0 auto;
	position: absolute;
	left: 20%;
	top: 2%;
	font-size: 48px;
	font-family: Verdana, Geneva, sans-serif;
}

nav { position: relative; }			
nav ul { display: inline-block; }		
nav ul li
{
	list-style: none;
	position: relative;
	display: inline-block;
	float: left;
	padding: 10px;
	text-align: center;
}

nav ul li .active
{
	color: #3479FA;
	background: #FFF; 
	border: 1px solid white;
	border-radius: 5px;
	padding: 10px;
}

nav ul li a
{
	text-decoration: none;
	color: #FFF;
	line-height: 30px;
	width: 40px;	
}
</style>
</head>

<body>
    <div id="container">
    	<header>
	    	<title>Sample Text</title>
            <nav>
            	<ul>
                	<li class="active"><a href="bla.html" class="active">bla</a></li>
                    <li><a href="bla.html">bla</a></li>
                </ul>
            </nav>
        </header>
    </div>
</body>
</html>

Upvotes: 1

Gildas.Tambo

Reputation: 22663

<!DOCTYPE html>
<html>
<head>
<title>Homepage</title>
<style type="text/css">
html, body { margin: 0; padding: 0; }

#container
{
	margin: 0 auto;
	background: #FFF;
	width: 100%;
}

header
{
	height: 180px;
	padding: 1% 1%;
	background-color: #22272A;
	margin: 0 auto;
    position: relative;/*set this to relative because nav will be absolute*/
}

title
{
	color: #FFF;
	margin: 0 auto;
	position: absolute;
	left: 20%;
	top: 2%;
	font-size: 48px;
	font-family: Verdana, Geneva, sans-serif;
}
/*because we want it to start from the bottom*/
nav { position: absolute; bottom: 0; left: 0; width: 100%}	
/*set max width of you nav, margin 0 auto to center it */		
nav ul {position: relative;width: 100%; max-width: 480px; margin: 0 auto}		
nav ul li
{
	list-style: none;
	position: relative;
	display: inline-block;
	float: left;
	padding: 10px;
	text-align: center;
}

nav ul li .active
{
	color: #3479FA;
	background: #FFF; 
	border: 1px solid white;
	border-radius: 5px;
	padding: 10px;
}

nav ul li a
{
	text-decoration: none;
	color: #FFF;
	line-height: 30px;
	width: 40px;	
}
</style>
</head>

<body>
    <div id="container">
    	<header>
	    	<title>Sample Text</title>
            <nav>
            	<ul>
                	<li class="active"><a href="bla.html" class="active">bla</a></li>
                    <li><a href="bla.html">bla</a></li>
                </ul>
            </nav>
        </header>
    </div>
</body>
</html>

Upvotes: 1

Joshua Whitley

Reputation: 1186

The following will align the ul to the bottom of the nav:

header {
    position: relative;
}

nav {
    position: absolute;
    bottom: 0;
}

Upvotes: 1

Navigation bar positioning

Answers (3)

Related Questions