CODEWITHSUNDEEP
htmlcss
chrae
chrae

Reputation: 131

Navigation not lining up

I'm having some issues with the navigation bar. The image isn't sitting nicely in line with all the other elements, and I can't add margins to the list elements to push them up. It's fine on jsfiddle without the image, and there's no weird margin/dimension issues with the original image itself.

enter image description here

http://jsfiddle.net/kf1x3qut/

<body>

<div class="menu">
<ul>
<a href="index.html"><img src = "img/logo.png" id="logo"></a>
<li><a href="#pt1">about</a></li>
<li><a href="#pt2">software</a></li>
<li><a href="#pt3">contact</a></li>
<li><a href="#pt4">login/sign up</a></li>
</ul>
</div>

<div id="pt1">
<img src = "img/cover.png">
</div>

</body>


img{width: 100%;}

.menu{
    position: fixed;
    width: 100%;
    background-color: #454545}

a {
    color: white;
    text-decoration: none;}

li{
    display: inline;
    margin: 0 4%;}

ul{
    float: right;
    width: 100%;}


#logo{
    width: 14%;
    margin: 1% 31% 1% 1%;}

Upvotes: 0

Views: 46

Answers (2)

Md. Khalakuzzaman Khan
Md. Khalakuzzaman Khan

Reputation: 194

There are some issue I found with your code... check them in below -

#logo{
    width: 10%;
    margin: 1% 31% 1% 1%;
}

if your div 100% then 10% + 31% (right margin) + other li's width.

Is it actually possible? So, take care about them. Hope you can solve it.

Upvotes: 0

pourmesomecode
pourmesomecode

Reputation: 4368

http://jsfiddle.net/kf1x3qut/1/

Updated your fiddle (I used a random, placeholder image for the logo instead), I added vertical-align: middle; on your #logo ID to centre the li tags

W3C talk a little bit about what vertical-aligning elements does http://www.w3schools.com/cssref/pr_pos_vertical-align.asp

Upvotes: 1

Related Questions