stormsearchers Posted October 10, 2016 Share Posted October 10, 2016 ul { list-style-type: none; max-width:100%; margin: 0; padding: 0; overflow: hidden; } li { float: left; } li a { display: block; padding: 8px; background-color: #282828; } li a:hover { background-color: #555; color:#FF9900 } Hello I wish to have the nav-memubar center however how do I get rid of the line under the text but have the hover txt light up also how do I add the bar right across the page and have the navbar center I have the code here Link to comment Share on other sites More sharing options...
dsonesuk Posted October 10, 2016 Share Posted October 10, 2016 Before display: inline-block; you had to use position: relative; on parent and child floated elements, with left: 50%; on parent, and counteract that with left: -50%. But now you can use inline-block similar to <!DOCTYPE html> <html> <head> <style> nav {text-align: center;} nav > ul {display: inline-block;} ul { list-style-type: none; max-width:100%; margin: 0; padding: 0; overflow: hidden; background-color: red;} li { float: left; } li a { display: block; padding: 8px; background-color: #282828; text-decoration: none;/* removes underline*/} li a:hover{ background-color: #555; color:#FF9900 } </style> </head> <body> <h4>An Unordered List:</h4> <nav> <ul> <li><a href="#">Coffee</a></li> <li><a href="#">Tea</a></li> <li><a href="#">Milk</a></li> </ul> </nav> </body> </html> Link to comment Share on other sites More sharing options...
dsonesuk Posted October 10, 2016 Share Posted October 10, 2016 Using position relative option <!DOCTYPE html> <html> <head> <style> nav {overflow: hidden; background-color: lime;} nav > ul { float: left; position: relative; left: 50%;} ul { list-style-type: none; max-width:100%; margin: 0; padding: 0;} li { float: left;left:-50%; position: relative;} li a { display: block; padding: 8px; background-color: #282828; text-decoration: none;/* removes underline*/} li a:hover{ background-color: #555; color:#FF9900 } </style> </head> <body> <h4>An Unordered List:</h4> <nav> <ul> <li><a href="#">Coffee</a></li> <li><a href="#">Tea</a></li> <li><a href="#">Milk</a></li> </ul> </nav> </body> </html> Link to comment Share on other sites More sharing options...
stormsearchers Posted October 11, 2016 Author Share Posted October 11, 2016 thanks for the information it worked cause I am using html5 when you got <nav></nav can you go like somethink (<div id"nav"></div>) Link to comment Share on other sites More sharing options...
stormsearchers Posted October 11, 2016 Author Share Posted October 11, 2016 (edited) #footer{ max-width:100%; max-height:100px; background:url(images/middlefooter.html); background: #282828; color: #FFFFFF; height: 80px; width: 50%; text-align: center; } #footer li a:hover{ background-color: #555; color:#FF9900; }#content #footer p { font-family: Verdana, Geneva, sans-serif; } you have been very helpful how ever I have done some coding for my footer but dose not want to linkup can you help me out please you can see what I am trying to here http://www.stormsearchers.site88.net Edited October 11, 2016 by stormsearchers Link to comment Share on other sites More sharing options...
dsonesuk Posted October 11, 2016 Share Posted October 11, 2016 Why are you referencing html page instead of image? I don't understand what you want? 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