k_mckraken Posted September 5, 2015 Share Posted September 5, 2015 (edited) So... I'm stuck on something I think should be pretty easy. I'm building myself a template to use later on and am having trouble figuring out how to have a <div> with an image background next to a nav-bar made with an unordered list. Here's what I have so far. Also, do a mistake on my end, the <li> classes are inverted. <!DOCTYPE html><html lang="en-US"> <head> <meta charset="utf-8" /> <title>GENERIC WEBPAGE | Welcome!</title> <link href="site.css" rel="stylesheet"> </head> <body> <div class="page-container"> <div class="header-container"> <div class="logo-tag-nav"> </div> <div class="nav-container"> <ul class="nav-main"> <li class="list-right"><a href="#">GENERIC WEBPAGE</a></li> <li class="list-left"><a href="#" class="nav-large">Login / Sign-up</a></li> <li class="list-left"><a href="#" class="nav-space"></a></li> <li class="list-left"><a href="#" class="nav-med">CONTACT</a></li> <li class="list-left"><a href="#" class="nav-med">GALLERY</a></li> <li class="list-left"><a href="#" class="nav-med">ABOUT</a></li> <li class="list-left"><a href="#" class="nav-med">HOME</a></li> </ul> </div> </div> <div class="content-container"> <div class="splash-lrg"> <div class="splash-info"> </div> </div> </div> <div class="footer-container"> </div> </div> </body></html> I basically need to replace the: <li class="list-right"><a href="#">GENERIC WEBPAGE</a></li> with a logo. I'm probably the biggest noob alive for this. Edited September 5, 2015 by k_mckraken Link to comment Share on other sites More sharing options...
k_mckraken Posted September 5, 2015 Author Share Posted September 5, 2015 Well, I solved it on my own, so I no longer need assistance, thank you! Link to comment Share on other sites More sharing options...
dsonesuk Posted September 5, 2015 Share Posted September 5, 2015 li must have fixed width and height, floated left, or use display: inline-block;, anchor must use display: block; to apply height and width, then use height 100%, and add background image to this element. Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now