s-play Posted June 7, 2015 Share Posted June 7, 2015 Hello dear Htmlers. I hope everyone of you is doing just great. I have a question concerning my navigation menu bar, which doesn't seem to adopt with the size of the browser. When the latter is at its standard size, the menu bar sounds to fit exactly the navigator, but when the navigator/browser is made smaller, or resized, my navigation menu bar is rearranged, in that some buttons go under others. PS: See pictures. Link to comment Share on other sites More sharing options...
dsonesuk Posted June 7, 2015 Share Posted June 7, 2015 If you use fixed width or even margins/padding using px instead of percentage the navigation or menu links will not be responsive and just begin to stack above each over as the screen width becomes too small to accommodate them. 1 Link to comment Share on other sites More sharing options...
s-play Posted June 7, 2015 Author Share Posted June 7, 2015 Still the problem exists even after changing values into percentage.... And there's no fixed width :/ Link to comment Share on other sites More sharing options...
dsonesuk Posted June 7, 2015 Share Posted June 7, 2015 Then give us something to work with, html, css or link, a picture is absolutely usless, and not going to help in any way to discover the problem and offer a solution. 1 Link to comment Share on other sites More sharing options...
tejasamrute Posted June 8, 2015 Share Posted June 8, 2015 li { width:20%; text-align:center } this will make it responsive until your font-size overpowers width of the li 1 Link to comment Share on other sites More sharing options...
s-play Posted June 9, 2015 Author Share Posted June 9, 2015 <!doctype html><html><head><meta charset="utf-8"><title>Untitled Document</title></head><body><div id="navigation"><a href="#">Home</a><a href="#">Button1</a><a href="#">Button2</a><a href="#">Button3</a><a href="#">Contact Us</a></div><style type="text/css">body { margin-left: 0px; margin-top: 0px; height: auto; top: auto;}#navigation li { font: 15px Arial; display: inline; list-style-type: none; top: auto; height: auto;}#navigation a { color: #fff; background-color: #999; text-decoration: none; top: auto; height: auto; padding-bottom: 2%; padding-left: 9%; padding-right: 6%; padding-top: 2%;}#navigation a:hover { background-color: #36C; color: #666; top: 14%; height: 12%; }</style></body></html> This is the code that I am using mates for this navigation bar; and it is the one that is giving the problem. Plz what's the solution? Link to comment Share on other sites More sharing options...
dsonesuk Posted June 9, 2015 Share Posted June 9, 2015 Move style coding between <head>...</head>.Top: property has no effect unless position: is used.Height: has no effect on inline element such as anchor element.Selector for li tag has no effect because there is no li tags.Checkout http://www.w3schools.com/css/css_navbar.asp 1 Link to comment Share on other sites More sharing options...
tejasamrute Posted June 9, 2015 Share Posted June 9, 2015 <head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>Untitled Document</title><style type="text/css"> * { margin:0; padding:0; } nav ul { margin:0; padding:0; height:30px; background-color:#333; } nav li { list-style-type:none; float:left; color:#fff; width:20%; text-align:center; line-height:30px; }</style></head><body><nav><ul> <li>Home</li> <li>Button</li> <li>Button</li> <li>Button</li> <li>Contact Us</li></ul></nav></body></html> Try this out 1 Link to comment Share on other sites More sharing options...
dsonesuk Posted June 9, 2015 Share Posted June 9, 2015 nav ul { /*margin:0; padding:0; not required as is taken care of by universal selector styling*/ height:30px; background-color:#333; /*added by dsonesuk*/ list-style-type:none; text-indent: 0; } 1 Link to comment Share on other sites More sharing options...
s-play Posted June 9, 2015 Author Share Posted June 9, 2015 Tezzo: Your code seems to work after making some small alterations; adding hyperlinks, a hover code and text decoration. Have a look at the code now guys: <!doctype html><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>Untitled Document</title><style type="text/css"> * { margin:0; padding:0; text-decoration:none; } nav ul { margin:0; padding:0; height:30px; background-color:#FF9; list-style-type:none; text-indent:0; } nav li { list-style-type:none; float:left; color:#fff; width:20%; text-align:center; line-height:30px; } nav a:hover{ padding-left:20px; padding-right:20px; padding-bottom:7px; padding-top:12px; color:#fff; background-color:#609; }</style></head><body><nav><ul> <li><a href="#">Home</a></li> <li><a href="#">Button</a></li> <li><a href="#">Button</a></li> <li><a href="#">Button</a></li> <li><a href="#">Contact Us</a></li></ul></nav></body></html> Still the problem is that the hover shadow doesn't appear unless I hover over the text Button with the cursor. I want the button's hyperlink to be a bit larger, so when I hover over the area of a certain button, it makes effect and gives the ability to click, even if I am not exactly on the text. Thank you for your efforts guys in helping me out with this and for showing your interest. I appreciate it a lot. Link to comment Share on other sites More sharing options...
dsonesuk Posted June 9, 2015 Share Posted June 9, 2015 Because the padding only appears on hover, what you should do is have default state for before hover nav a { padding-left:20px; padding-right:20px; padding-bottom:7px; padding-top:12px;} and only have the styling that changes within :hover state nav a:hover{ color:#fff; background-color:#609; } Link to comment Share on other sites More sharing options...
dsonesuk Posted June 9, 2015 Share Posted June 9, 2015 Better option nav a { display: inline-block; white-space: nowrap; width: 100%; } Link to comment Share on other sites More sharing options...
s-play Posted June 9, 2015 Author Share Posted June 9, 2015 Because the padding only appears on hover, what you should do is have default state for before hover nav a { padding-left:20px; padding-right:20px; padding-bottom:7px; padding-top:12px;} and only have the styling that changes within :hover state nav a:hover{ color:#fff; background-color:#609; } After adding the nav a the problem of the arrangement came back! when I put the navigator at a smaller size the Us comes under home as shown in the picture :/ Link to comment Share on other sites More sharing options...
dsonesuk Posted June 9, 2015 Share Posted June 9, 2015 I don't get that? yes it breaks but 'us' goes under 'contact' only, checked in all major good browsers, and then IE. You can prevent it wrapping by using white-space: nowrap; Link to comment Share on other sites More sharing options...
s-play Posted June 10, 2015 Author Share Posted June 10, 2015 Dsonesuk, You have saved my life dude! Thank you so much everyone for being helpful and giving a hand! I don't know how to thank you mates! I am sure that I will still come across other sorts of problems, as I am a beginner. But thanks for this one! I hope you'll still be generous with me in providing me with the necessary help. Cheers! 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