3 replies [Last post]
lanacaralee
lanacaralee's picture
Offline
newbie
Last seen: 7 years 36 weeks ago
Timezone: GMT-8
Joined: 2013-02-10
Posts: 2
Points: 3

Hi everyone, just started learning HTML/CSS. (My background is database dev.)

I made a horizontal menu but the last item which contains a button and image will move to the next line when re-sizing the window. I can't seem to troubleshoot it myself after 2 days. I will be forever grateful to the person who can resolve this for me! Laughing out loud

Cheers,
Lana

My HTML code:

<div id="body">
 
	<div id="page">
 
		<!-- ==== START GLOBAL HEADER ==== -->
 
		<div id="globalheader">
			<ul id="globalnav">
				<li><a href="index.html"><img src="images/mtlogo-54x22.png"></a></li>
				<li><a href="bio.htm">Bio</a></li>
				<li><a href="news.html">News</a></li>
				<li><a href="resume.html">Resume</a></li>
				<li><a href="photos.html">Photos</a></li>
				<li><a href="videos.html">Videos</a></li>
				<li><a href="contact.html">Contact</a></li>
				<li><a href="links.html">Links</a></li>
				<li><button id="soundbutton" title="play" onclick="togglePlayPause()"><img id="playpause" src="images/speakerwhite-on-28x26.png"></button></li>  
			</ul>
		</div>

And here's the CSS code:

#globalheader { 
	background-color: transparent;
	width: 990px;
	height: 35px;
	margin-left:auto;
	margin-right:auto;
	border-style: solid;
	padding: 0 0 0 0;
	margin-bottom: 20px;
 
	-moz-border-radius:5px;
	-webkit-border-radius:5px;
	border-radius:5px;
 
    	-moz-box-shadow: 0px 3px 3px #cecece;
	-webkit-box-shadow: 0px 3px 3px #cecece;
	box-shadow: 0 3px 3px #8b8b8b;
}
 
 
 
#globalnav {
	width: 990px;
	height: 35px;
	margin: 0 0 0 0; /* DO NOT REMOVE! This rids the default margins. */
	padding: 0 0 0 0; /* DO NOT REMOVE! This rids the default padding. */
	list-style: none;
	font-family: "Lucida Sans Unicode", "Lucida Grande", Verdana, Arial, Helvetica, sans-serif; 
	font-size: 13px;
	text-shadow: 0 -1px 0px #202020;
	overflow: hidden; /* optional */
}
 
 
#globalnav li { 
	float: left;
	height: 35px;	
	width: 11%;
	border-right: 1px solid #57627C;
 
	/* gradient generator used: <a href="http://www.colorzilla.com/gradient-editor" rel="nofollow">http://www.colorzilla.com/gradient-editor</a> */
 
	background: rgb(83,112,181);
	background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzUzNzBiNSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjAlIiBzdG9wLWNvbG9yPSIjOTU5ZWM0IiBzdG9wLW9wYWNpdHk9IjEiLz4KICAgIDxzdG9wIG9mZnNldD0iNDYlIiBzdG9wLWNvbG9yPSIjNDY1NzdmIiBzdG9wLW9wYWNpdHk9IjEiLz4KICAgIDxzdG9wIG9mZnNldD0iNTMlIiBzdG9wLWNvbG9yPSIjMjYzOTUxIiBzdG9wLW9wYWNpdHk9IjEiLz4KICAgIDxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzA2MWMyZCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgPC9saW5lYXJHcmFkaWVudD4KICA8cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMSIgaGVpZ2h0PSIxIiBmaWxsPSJ1cmwoI2dyYWQtdWNnZy1nZW5lcmF0ZWQpIiAvPgo8L3N2Zz4=);
	background: -moz-linear-gradient(top, rgba(83,112,181,1) 0%, rgba(149,158,196,1) 0%, rgba(70,87,127,1) 46%, rgba(38,57,81,1) 53%, rgba(6,28,45,1) 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(83,112,181,1)), color-stop(0%,rgba(149,158,196,1)), color-stop(46%,rgba(70,87,127,1)), color-stop(53%,rgba(38,57,81,1)), color-stop(100%,rgba(6,28,45,1)));
	background: -webkit-linear-gradient(top, rgba(83,112,181,1) 0%,rgba(149,158,196,1) 0%,rgba(70,87,127,1) 46%,rgba(38,57,81,1) 53%,rgba(6,28,45,1) 100%);
	background: -o-linear-gradient(top, rgba(83,112,181,1) 0%,rgba(149,158,196,1) 0%,rgba(70,87,127,1) 46%,rgba(38,57,81,1) 53%,rgba(6,28,45,1) 100%);
	background: -ms-linear-gradient(top, rgba(83,112,181,1) 0%,rgba(149,158,196,1) 0%,rgba(70,87,127,1) 46%,rgba(38,57,81,1) 53%,rgba(6,28,45,1) 100%);
	background: linear-gradient(to bottom, rgba(83,112,181,1) 0%,rgba(149,158,196,1) 0%,rgba(70,87,127,1) 46%,rgba(38,57,81,1) 53%,rgba(6,28,45,1) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#5370b5', endColorstr='#061c2d',GradientType=0 );
}
 
 
#globalnav li:not(:last-child):hover {
 
	/* We use inset to create inner glow when hovering */
 
	background: rgb(83,112,181);
	background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzUzNzBiNSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjAlIiBzdG9wLWNvbG9yPSIjMzQzYTc3IiBzdG9wLW9wYWNpdHk9IjEiLz4KICAgIDxzdG9wIG9mZnNldD0iNDYlIiBzdG9wLWNvbG9yPSIjMjAzYzdjIiBzdG9wLW9wYWNpdHk9IjEiLz4KICAgIDxzdG9wIG9mZnNldD0iNTMlIiBzdG9wLWNvbG9yPSIjMGIyOTRmIiBzdG9wLW9wYWNpdHk9IjEiLz4KICAgIDxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzAwMTgyYiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgPC9saW5lYXJHcmFkaWVudD4KICA8cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMSIgaGVpZ2h0PSIxIiBmaWxsPSJ1cmwoI2dyYWQtdWNnZy1nZW5lcmF0ZWQpIiAvPgo8L3N2Zz4=);
	background: -moz-linear-gradient(top, rgba(83,112,181,1) 0%, rgba(52,58,119,1) 0%, rgba(32,60,124,1) 46%, rgba(11,41,79,1) 53%, rgba(0,24,43,1) 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(83,112,181,1)), color-stop(0%,rgba(52,58,119,1)), color-stop(46%,rgba(32,60,124,1)), color-stop(53%,rgba(11,41,79,1)), color-stop(100%,rgba(0,24,43,1)));
	background: -webkit-linear-gradient(top, rgba(83,112,181,1) 0%,rgba(52,58,119,1) 0%,rgba(32,60,124,1) 46%,rgba(11,41,79,1) 53%,rgba(0,24,43,1) 100%);
	background: -o-linear-gradient(top, rgba(83,112,181,1) 0%,rgba(52,58,119,1) 0%,rgba(32,60,124,1) 46%,rgba(11,41,79,1) 53%,rgba(0,24,43,1) 100%);
	background: -ms-linear-gradient(top, rgba(83,112,181,1) 0%,rgba(52,58,119,1) 0%,rgba(32,60,124,1) 46%,rgba(11,41,79,1) 53%,rgba(0,24,43,1) 100%);
	background: linear-gradient(to bottom, rgba(83,112,181,1) 0%,rgba(52,58,119,1) 0%,rgba(32,60,124,1) 46%,rgba(11,41,79,1) 53%,rgba(0,24,43,1) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#5370b5', endColorstr='#00182b',GradientType=0 );
}
 
 
#globalnav li:not(:last-child):active {
 
	/* When the user clicks the button, we simply change the box inset (compared to the "hover") */
 
	background: rgb(83,112,181);
	background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzUzNzBiNSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjAlIiBzdG9wLWNvbG9yPSIjMzQzYTc3IiBzdG9wLW9wYWNpdHk9IjEiLz4KICAgIDxzdG9wIG9mZnNldD0iNDYlIiBzdG9wLWNvbG9yPSIjMjAzYzdjIiBzdG9wLW9wYWNpdHk9IjEiLz4KICAgIDxzdG9wIG9mZnNldD0iNTMlIiBzdG9wLWNvbG9yPSIjMGIyOTRmIiBzdG9wLW9wYWNpdHk9IjEiLz4KICAgIDxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzAwMTgyYiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgPC9saW5lYXJHcmFkaWVudD4KICA8cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMSIgaGVpZ2h0PSIxIiBmaWxsPSJ1cmwoI2dyYWQtdWNnZy1nZW5lcmF0ZWQpIiAvPgo8L3N2Zz4=);
	background: -moz-linear-gradient(top, rgba(83,112,181,1) 0%, rgba(52,58,119,1) 0%, rgba(32,60,124,1) 46%, rgba(11,41,79,1) 53%, rgba(0,24,43,1) 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(83,112,181,1)), color-stop(0%,rgba(52,58,119,1)), color-stop(46%,rgba(32,60,124,1)), color-stop(53%,rgba(11,41,79,1)), color-stop(100%,rgba(0,24,43,1)));
	background: -webkit-linear-gradient(top, rgba(83,112,181,1) 0%,rgba(52,58,119,1) 0%,rgba(32,60,124,1) 46%,rgba(11,41,79,1) 53%,rgba(0,24,43,1) 100%);
	background: -o-linear-gradient(top, rgba(83,112,181,1) 0%,rgba(52,58,119,1) 0%,rgba(32,60,124,1) 46%,rgba(11,41,79,1) 53%,rgba(0,24,43,1) 100%);
	background: -ms-linear-gradient(top, rgba(83,112,181,1) 0%,rgba(52,58,119,1) 0%,rgba(32,60,124,1) 46%,rgba(11,41,79,1) 53%,rgba(0,24,43,1) 100%);
	background: linear-gradient(to bottom, rgba(83,112,181,1) 0%,rgba(52,58,119,1) 0%,rgba(32,60,124,1) 46%,rgba(11,41,79,1) 53%,rgba(0,24,43,1) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#5370b5', endColorstr='#00182b',GradientType=0 );
}
 
#globalnav li a {	
	float: center;
	color: white; 
	text-decoration: none; 
	text-align: center; 
	display: block; 
	line-height: 35px;
	padding: 0 0 0 0;
	margin: 0 0 0 0;
	outline: none; 
}
 
 
#globalnav li:first-child {	
 
	/* Rounded corner for the first item. Shorthand: Top left, Top right, Bottom right, Bottom left. We also remove the borders, since they don't need them. */
 
	width: 12%;
	-moz-border-radius: 5px 0 0 5px;
	-webkit-border-radius: 5px 0 0 5px;
	border-radius: 5px 0 0 5px;
}
 
 
#globalnav li:last-child {
 
	/* Rounded corner for the last item. Shorthand: Top left, Top right, Bottom right, Bottom left. We also remove the borders, since they don't need them. */
 
	width: 10%;
	-moz-border-radius:0 5px 5px 0;
	-webkit-border-radius:0 5px 5px 0;
	border-radius:0 5px 5px 0;
	border-right: none;
}
 
 
#globalnav li:first-child a img {
 
	/* The first child image - the logo - has to be centered. Because of the image dimensions, we manually need to shift it a bit. */
 
	vertical-align: middle; 
	border: none;
}
 
#soundbutton {	
 
	background-color: transparent; 
	border: none;
	margin: 3px 0 0 20px;
}

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 22 hours 4 min ago
Dallas
Timezone: GMT-5
Joined: 2004-06-25
Posts: 9772
Points: 3854

Link?

Since the ul has an explicit, fixed width, resizing the browser shouldn't affect the menu's formatting.

The width on ul is redundant since it will take all available width by default. There is no such animal as {float: center;}. The heights on the ul and its parent are redundant since the height of the element is controlled by the height of the content.

There's no obvious reason for the list to over-run its container, but it does. Let's inspect the page for not-so-obvious causes; post a link or a minimal test case.

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

lanacaralee
lanacaralee's picture
Offline
newbie
Last seen: 7 years 36 weeks ago
Timezone: GMT-8
Joined: 2013-02-10
Posts: 2
Points: 3

Hi Gary, Thanks for the

Hi Gary,

Thanks for the expeditious response.

I got rid of the redundant coding - your input is awesome.

I've tested this behaviour across all the browsers and it's the same. When you start zooming out, the last menu item (containing the button image) moves underneath the first menu item.

Hopefully an answer to this mystery will become evident.

Cheers,
Lana

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 22 hours 4 min ago
Dallas
Timezone: GMT-5
Joined: 2004-06-25
Posts: 9772
Points: 3854

Aha!

There's a difference between zooming and resizing the window. There are also two methods of zooming, with concomitant differences in effects.

Zooming nearly always has some effect on layout at some point. I am usually happy if zooming in two levels doesn't break the layout. A little bending, I don't worry about. If the user is going to override the presentation, s/he probably expects to have issues.

Changing the window's size within sane limits should not break the layout at all. If it does, it's a design/implementation flaw.

So, where does that leave us on this topic?

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.