CODEWITHSUNDEEP
cssnavbar
user3029844
user3029844

Reputation: 11

Working with an image (logo) in navigational bar

I've added a logo to the left side of my horizontal navigational bar and I'm having a few different problems. And first of all here is a screenshot: https://i.sstatic.net/oc6qP.png

Problems:

-I want to line up all of the text with the BOTTOM of the logo. Right now all of the text is automatically lining up with to the top.

-On hover of the links, I want the background color change to white to extend to the full height of the bar, but it's only doing a portion of it. Here is a screenshot: https://i.sstatic.net/dCSeT.png

-As you can see in the first screenshot, the bar does not extend to the ends of the page (sides and top). There is a small amount of space in between. I want there to be no white space; just the pink extending to the edges.

HTML for the bar:

<ul id="nav">
<li><img  id="logo" src="images/logo2.png">
<li><a href="../work.htm">Work</a></li>
<li><a href="../about.htm">About</a></li>
<li><a href="../thoughts.htm">Thoughts</a></li>
<li><a href="../contact.htm">Contact</a></li>
</ul>

CSS:

#nav {
width:100%;
float:left;
margin: 0 0 3em 0;
padding: 0;
list-style: none;
background-color: #D0489A;
border-bottom: 3px solid #D0489A;
}

#nav ul {
position: absolute;
right:0px;
bottom: 2px;
}

#nav li {
float: left; 
font-family: whitney light, sans-serif;
}

#nav li a {
list-style: none;
display:inline;
display: block;
padding: 8px 15px;
text-decoration: none;
font-weight: bold;
color: white;
border-right: 1px solid #D0489A;
}

#nav li a:hover {
color: black;
background-color: white;
}

#logo {
width:200px;
}

Upvotes: 0

Views: 84

Answers (1)

DevlshOne
DevlshOne

Reputation: 8457

#nav li a {
    list-style: none;
    display: inline-block;
    padding: 8px 15px;
    margin-top:174px; // you may need to adjust to get lined up perfectly
    text-decoration: none;
    font-weight: bold;
    color: white;
    border-right: 1px solid #D0489A;
}

Upvotes: 1

Related Questions