Horizontal menu shifts to next line when zoomed

Question

tokianuki 0 Newbie Poster

13 Years Ago

Hey,

I have this very irritating issue which i was unable to solve for a couple of weeks. I am an amateur designer trying to design a site for my company. The problem I face here is this:

1. I create a menu within a container, with the same width of the container.
2. When Zoom in/out (CTRL+scroll) The last element (Contact Us) Shifts to the next line or the whole menu bar is compressed.

I have attached the HTML code and the CSS. Please do help me out here.

HTML:

<div id="menu">
<ul>
			<li><a rel="#00CCFF" href="Index.html">Home</a></li>
            <li><a href="AboutUs.html">About</a></li>
            <li><a href="Expertise.html">Expertise</a></li>
            <li><a href="Products.html">Products</a></li>
            <li><a href="Services.html">Services</a></li>
            <li><a href="Solutions.html">Solutions</a></li>
            <li><a href="Team.html">Team</a></li>
            <li><a href="Careers.html">Careers</a></li>
            <li><a href="Downloads.html">Downloads</a></li>
            <li><a href="ContactUs.html">Connect</a></li>
            </ul>
         	
</div>

CSS

#menu {
	position:absolute;
	height:40px;
	width:100%;
	margin:0;
	padding:0;
	
	display:inline;
	
		}
	
#menu li
{
	display:inline-block;
	line-height: 40px;
float: left;
margin: 0 0.02em;
}

	
	#menu li a {
	line-height: 40px;
	list-style-type: none;
	display:block;
	width: 6.4em;
	float:left;
	background-color: #eee;
	border: 0.6mm solid #999;
	font-weight:bold;
	font-size:15px;
	text-decoration: none;
	text-align:center;
}

Would be grateful if you could help me out here. Cheers!

web-design

3 Contributors
2 Replies
147 Views
2 Days Discussion Span
Latest Post 13 Years Ago Latest Post by MagicMedia

RoyalElite96 6 Light Poster

13 Years Ago

Try to add min-width and/or max-width to you css.

Hope that helps you!

Edited 13 Years Ago by RoyalElite96 because: n/a

Reply to this topic

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.

MagicMedia 10 Junior Poster · Answer 1 · 2011-03-31T23:57:33+00:00

Hey,
I have this very irritating issue which i was unable to solve for a couple of weeks. I am an amateur designer trying to design a site for my company. The problem I face here is this:
1. I create a menu within a container, with the same width of the container.
2. When Zoom in/out (CTRL+scroll) The last element (Contact Us) Shifts to the next line or the whole menu bar is compressed.
I have attached the HTML code and the CSS. Please do help me out here.
HTML:
<div id="menu">
<ul>
			<li><a rel="#00CCFF" href="Index.html">Home</a></li>
            <li><a href="AboutUs.html">About</a></li>
            <li><a href="Expertise.html">Expertise</a></li>
            <li><a href="Products.html">Products</a></li>
            <li><a href="Services.html">Services</a></li>
            <li><a href="Solutions.html">Solutions</a></li>
            <li><a href="Team.html">Team</a></li>
            <li><a href="Careers.html">Careers</a></li>
            <li><a href="Downloads.html">Downloads</a></li>
            <li><a href="ContactUs.html">Connect</a></li>
            </ul>
         	
</div>
CSS
#menu {
	position:absolute;
	height:40px;
	width:100%;
	margin:0;
	padding:0;
	
	display:inline;
	
		}
	
#menu li
{
	display:inline-block;
	line-height: 40px;
float: left;
margin: 0 0.02em;
}

	
	#menu li a {
	line-height: 40px;
	list-style-type: none;
	display:block;
	width: 6.4em;
	float:left;
	background-color: #eee;
	border: 0.6mm solid #999;
	font-weight:bold;
	font-size:15px;
	text-decoration: none;
	text-align:center;
}
Would be grateful if you could help me out here. Cheers!

In your menu li a: width: 6.4em;
em is zoomable. If you don't want it to be zoomable use px.