Jump to content

Navigation menu bar problem


s-play
 Share

Recommended Posts

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.

 

image.png

 

 

 

 

 

image.png

Link to comment
Share on other sites

<!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

<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

  • Like 1
Link to comment
Share on other sites

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

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

 

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

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

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 account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...