CODEWITHSUNDEEP
htmlcssnavbar
Tim
Tim

Reputation: 71

Problems positioning logo in navigation bar

I'm in the process of making a website, but am having issues positioning the logo in the navigation bar.

I've created a test version of the website at http://www.fearless-music.net/test

The logo isn't appearing in the center of it's space. In smaller browser windows, it hides behind the "Home" area of the navigation bar.

Also, are there any suggestions on code improvements I could make to my navigation bar?

Thanks again!

Upvotes: 0

Views: 105

Answers (4)

Jon
Jon

Reputation: 23

try changing lines 31 to this - so you can see you logo, you could also add back in your margin to get in centred back in the li, but I would suggest taking the logo out of the ul so that you can have more control over it. 

 .nav img {
/* vertical-align: middle; */
padding: 2px 0px;
 }

Good luck I hope this helps :)

Upvotes: 0

user466764
user466764

Reputation: 1176

If you indent your code it is easier to see what's going on. Try adding the image in it's own div and enclosing it in p tags then you will be able to center it with the appropriate css rule. Tip when setting up divs using css add a colour border or background which you can later remove just to help with sizing and positioning. 

   <div class="header">
       <div class="logo">
          <p><img src="images/logo.png" alt="fearless music" /></p>
       </div>

            <ul class="nav">
                <li class"currentpage"><a href="index.html">Home</a></li>
                <li><a href="#">Link1</a></li>
                <li><a href="#">Link2</a></li>
                <li><a href="#">Link3</a></li>
                <li><a href="#">Link4</a></li>
                <li><a href="#">Special Link</a></li>
            </ul>

    </div>

Upvotes: 1

Ishank Gupta
Ishank Gupta

Reputation: 1593

You need to remove the right padding from the ul. You will see that we have a left padding of 40px.

header ul {
  padding-right: 0;
}

Upvotes: 0

Dirkos
Dirkos

Reputation: 676

It is centered in its space. Your list items align in the middle. All the widts of the <li> tags combined are not the same as the total width of the <ul>

Use your element inspector so you can see the outlines well

Upvotes: 0

Related Questions