2 replies [Last post]
camaleon
camaleon's picture
Offline
newbie
Last seen: 10 years 1 week ago
Timezone: GMT-4
Joined: 2012-08-09
Posts: 1
Points: 2

Hi guys!

I'm working on css menu.

I noticed when I minimize the window (smaller) the menu block buttons go down, top of each other.
how can I fix it?

Which is the CSS property that I can use for if I minimize the window the buttons dont move???

#nav {
	margin: 0;
	padding: 7px 6px 0;
	line-height: 100%;
	-webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, .4);
	-moz-box-shadow: 0 1px 3px rgba(0, 0, 0, .4);
	background-image: url(imagenes/barra-nav-bg.png);
	background-repeat: repeat-x;
	border-top-width: 1px;
	border-bottom-width: 1px;
	border-top-style: solid;
	border-bottom-style: solid;
	border-top-color: #21aed8;
	border-bottom-color: #000057;
}
 
#nav li {
	margin: 0 5px;
	padding: 0 0 8px;
	float: left;
	position: relative;
	list-style: none;
}
/* main level link */
#nav a {
	font-weight: bold;
	color: #FFFFFF;
	text-decoration: none;
	display: block;
	padding:  8px 20px;
	margin: 0;
	text-shadow: 0 1px 1px rgba(0, 0, 0, .3);
}

Thanks for your help!

Tony
Tony's picture
Offline
Moderator
Brisbane
Last seen: 19 hours 51 min ago
Brisbane
Timezone: GMT+10
Joined: 2003-03-12
Posts: 5344
Points: 2965

If you specifically set the

If you specifically set the width of #nav the items should stay beside each other.

mihirc
mihirc's picture
Offline
Leader
Pune, Maharashtra, India
Last seen: 8 years 2 weeks ago
Pune, Maharashtra, India
Timezone: GMT+5.5
Joined: 2007-05-09
Posts: 728
Points: 204

camaleon wrote: Hi guys! I'm

camaleon wrote:

Hi guys!

I'm working on css menu.

I noticed when I minimize the window (smaller) the menu block buttons go down, top of each other.
how can I fix it?

Which is the CSS property that I can use for if I minimize the window the buttons dont move???

#nav {
	margin: 0;
	padding: 7px 6px 0;
	line-height: 100%;
	-webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, .4);
	-moz-box-shadow: 0 1px 3px rgba(0, 0, 0, .4);
	background-image: url(imagenes/barra-nav-bg.png);
	background-repeat: repeat-x;
	border-top-width: 1px;
	border-bottom-width: 1px;
	border-top-style: solid;
	border-bottom-style: solid;
	border-top-color: #21aed8;
	border-bottom-color: #000057;
}
 
#nav li {
	margin: 0 5px;
	padding: 0 0 8px;
	float: left;
	position: relative;
	list-style: none;
}
/* main level link */
#nav a {
	font-weight: bold;
	color: #FFFFFF;
	text-decoration: none;
	display: block;
	padding:  8px 20px;
	margin: 0;
	text-shadow: 0 1px 1px rgba(0, 0, 0, .3);
}

Thanks for your help!

Hello,
1. One thing that i noticed was that you have give float:left to ul li, but not given it to #nav a {}; which you should really do.
2. #nav should have a overflow:hidden. Try using the firebug to see the block (it wont be seen, as it doesnt have the height property. The overflow, will expand the block as per the height of the ul / ul li / a)
3. as tony mentions try giving a width to the block. If you want to reduce the size of the links when you resize the window, you should mention all the widths in percentages. For example "#nav a" would have a width of 12%.
4. This giving of percentages is called as "fluid layout" and there are quite a few tutorials related to this topic. Read around a bit.

Regards,
Mihir.

Proprietor - Thoughtfulviewfinder Services
Web Development | Design | Merchandise | Photography
My personal blog: MihirChhatre.com