CODEWITHSUNDEEP
htmlcssnavigationpositioning
Lindsay
Lindsay

Reputation: 3

Centering Navigation bar div

I studied a little bit of html and css through high school but I'm having a little bit of trouble creating my website for my small business. I have created my nav bar design but I can't center it in my wrapper. My current code is below.

body {
  background-color: #3393FF;
  font-family: 'Palatino Linotype', 'Book Antiqua', Palatino, serif;
}
#wrapper {
  width: 1300px;
  margin-left: auto;
  margin-right: auto;
  background-color: white;
}
#navigation: {
  margin-left: auto;
  margin-right: auto;
}
#navigation li {
  display: inline-block;
  line-height: 40px;
  height: 40px;
}
#navigation a {
  text-decoration: none;
  text-align: center;
  color: #fff;
  display: block;
  width: 204px;
  font-size: 15px;
  background-color: #3393ff;
}
#navigation a:hover {
  -moz-box-shadow: 3px 3px 4px #000;
  -webkit-box-shadow: 3px 3px 3px #000;
  color: #fff;
}
<html>

<head>
  <meta charset="utf-8">
  <link rel="stylesheet" href="main.css">
  <title>Xcite Technologies</title>
</head>

<body>
  <div id="wrapper">
    <br>
    <div id="navigation">
      <ul>
        <li><a href="index.html">Home</a>
        </li>
        <li><a href="aboutus.html">About Us</a>
        </li>
        <li><a href="services.html">Services</a>
        </li>
        <li><a href="pricing.html">Pricing</a>
        </li>
        <li><a href="contact.html">Contact Us</a>
        </li>
      </ul>
    </div>
    <br>
    <br>
  </div>
</body>

</html>

I have tried a couple different things that were posted on here but nothing seems to work. I'm sure it will be an easy fix and feel like im getting tunnel vision. Thank you for you help in advance!

Upvotes: 0

Views: 47

Answers (2)

Esmeraldi Bejolli
Esmeraldi Bejolli

Reputation: 111

First remove BR from ur html code this is bad idea to create vertical space use padding or margin. 

body {
  background-color: #3393FF;
  font-family: 'Palatino Linotype', 'Book Antiqua', Palatino, serif;
}
#wrapper {
  width: 1300px;
  padding: 20px 0 40px;
  background-color: white;
}
#navigation {
  text-align: center;
}

#navigation ul {
 display: inline-block;
 padding: 0;
   }

#navigation li {
  display: inline-block;
  line-height: 40px;
  height: 40px;
}
#navigation a {
  text-decoration: none;
  text-align: center;
  color: #fff;
  display: block;
  width: 204px;
  font-size: 15px;
  background-color: #3393ff;
}
#navigation a:hover {
  -moz-box-shadow: 3px 3px 4px #000;
  -webkit-box-shadow: 3px 3px 3px #000;
  color: #fff;
}
<html>

<head>
  <meta charset="utf-8">
  <link rel="stylesheet" href="main.css">
  <title>Xcite Technologies</title>
</head>

<body>
  <div id="wrapper">
    <div id="navigation">
      <ul>
        <li><a href="index.html">Home</a>
        </li>
        <li><a href="aboutus.html">About Us</a>
        </li>
        <li><a href="services.html">Services</a>
        </li>
        <li><a href="pricing.html">Pricing</a>
        </li>
        <li><a href="contact.html">Contact Us</a>
        </li>
      </ul>
    </div>
  </div>
</body>

</html>

hope this help :D

Upvotes: 1

Nanyo
Nanyo

Reputation: 87

Hi there you can use HTML to do that:

use the <center> tag, your code would become something like that:

<body>
    <div id="wrapper">
        <br>
        <div id="navigation">
            <ul> 
                <center>
                   <li><a href="index.html">Home</a></li> 
                   <li><a href="aboutus.html">About Us</a></li>
                   <li><a href="services.html">Services</a></li>
                   <li><a href="pricing.html">Pricing</a></li> 
                   <li><a href="contact.html">Contact Us</a></li> 
                </center>
            </ul>   
        </div> 
        <br>
        <br> 
    </div>
</body>

Please test it and let me now if it works :)

Upvotes: 0

Related Questions