[Horizontal Menu] Images on the left and right

[JustRob]

Hello,On my website I have a horizontal menu, very simple, a styled ul with a background and single buttons next to each other.However, now I want to have an image on the left end of the menu and the right end of the menu, because I want my menu to have rounded edges and that's impossible with one repeating image.How would I go about this?I can't really post a link since my website isn't online yet, but I will post the parts of my CSS relevant to this issue. I'll just post the entire menu style here.

.menu1 {	margin-left: auto;	margin-right: auto;	list-style: none; 	height: 50px;	width: 700px;	margin-top: 10px;	margin-bottom: 10px;	background:	#FFFFFF url(buttons/button.png);}.menu1 li {	padding-left: 0px;	padding-right: auto;}.menu1 li a {	text-transform: uppercase;	margin-left: -20px;	display: block;	float: left;	height: 50px; 	line-height: 35px; 	color: #FFFFFF; 	text-decoration: none; 	font-size: 20px; 	font-family: arial, verdana, sans-serif; 	font-weight: bold; 	text-align: center;	cursor: pointer;}.menu1 li a b {	float: left; 	display: block; 	padding-top: 7px;	padding-right: 30px;	padding-left: 30px;}.menu1 li.current a {	color: #FFFFFF; 	background: url(buttons/button2.png);}.menu1 li.current a b {	background: url(buttons/button3.gif) no-repeat right top;}.menu1 li a:hover {	color: #FFFFFF;	background: #000 url(buttons/button2.png);}.menu1 li a:hover b {	background: url(buttons/button2.png) no-repeat right top;}.menu1 li.current a:hover {	color: #FFFFFF; 	background: #000000 url(buttons/button2.png); 	cursor: pointer;}.menu1 li.current a:hover b {	background: url(buttons/button2.png) no-repeat right top;}

[thescientist]

you could make the image display:block on each side of the menu and float them left, all wrapped up in a contianer, something like

<div id="container">  <img class="menu_image">  <ul class="menu1">  ...  </ul>    <img class="menu_image"></div>//CSS#container{  overflow: auto;  height: 50px;}img.menu_image{  display: block;  height: 50px;  width: XXpx //as wide as you need  float: left;}

[JustRob]

Hmmm well I tried it, but... The leftside image is all the way to the far left of the menu, and the rightside image isn't visible at all. Also, I've got this weird tiny little scrollbar to the far right of my menu.Edit: The leftside image is to the far left, and to the far right is a tiny scrollbar. If I scroll down then it shows the rightside image underneath the leftside image.

[thescientist]

it will probably take some trial and error, getting the width's to match up. you would want to make the container the width of all the menu items plus the width you need for images.

[JustRob]

Well after setting the width the menu is in the right place again and I can tell it's got the right width now, but there's still this tiny scrollbar. It's in the place where the right side of the menu should be, but the right side of the menu is beneath the left side image which I can scroll to with the tiny scrollbar.

[thescientist]

so what does your code look like now? (including the HTML)

[JustRob]

Here's the HTML for my menu:

<div class="menucontainer"><img class="menuleftside" /><ul class="menu1"><li class="current"><a href="index.html"><b>Home</b></a></li><li><a href="About me/about.html"><b>About me</b></a></li><li><a href="portfolio/portfolio.html"><b>Portfolio</b></a></li><li><a href="links/links.html"><b>Links</b></a></li><li><a href="contact/contact.html"><b>Contact</b></a></li></ul><img class="menurightside" /></div>

And here's the CSS:

.menucontainer{	overflow: auto;	height: 50px;	width: 800px;	margin-left: auto;	margin-right: auto;}img.menuleftside{	display: block;	height: 50px;	width: 30px;	float: left;	background: url(buttons/leftmenuside.png);}img.menurightside{	display: block;	height: 50px;	width: 30px;	float: left;	background: url(buttons/rightmenuside.png);}.menu1 {	margin-left: auto;	margin-right: auto;	list-style: none; 	height: 50px;	width: 700px;	margin-top: 10px;	margin-bottom: 10px;	background:	#FFFFFF url(buttons/button.png);}.menu1 li {	padding-left: 0px;	padding-right: auto;}.menu1 li a {	text-transform: uppercase;	margin-left: -20px;	display: block;	float: left;	height: 50px; 	line-height: 35px; 	color: #FFFFFF; 	text-decoration: none; 	font-size: 20px; 	font-family: arial, verdana, sans-serif; 	font-weight: bold; 	text-align: center;	cursor: pointer;}.menu1 li a b {	float: left; 	display: block; 	padding-top: 7px;	padding-right: 30px;	padding-left: 30px;}.menu1 li.current a {	color: #FFFFFF; 	background: url(buttons/button2.png);}.menu1 li.current a b {	background: url(buttons/button3.gif) no-repeat right top;}.menu1 li a:hover {	color: #FFFFFF;	background: #000 url(buttons/button2.png);}.menu1 li a:hover b {	background: url(buttons/button2.png) no-repeat right top;}.menu1 li.current a:hover {	color: #FFFFFF; 	background: #000000 url(buttons/button2.png); 	cursor: pointer;}.menu1 li.current a:hover b {	background: url(buttons/button2.png) no-repeat right top;}

Also, here's a screenshot of what I was talking about:

[ShadowMage]

The problem is that the menu is not "flowing" around your right image.Rearrange your HTML to look like this:<img class="menuleftside" /><img class="menurightside" /><ul class="menu1"><li class="current"><a href="index.html"><b>Home</b></a></li><li><a href="About me/about.html"><b>About me</b></a></li><li><a href="portfolio/portfolio.html"><b>Portfolio</b></a></li><li><a href="links/links.html"><b>Links</b></a></li><li><a href="contact/contact.html"><b>Contact</b></a></li></ul>and float the right image right instead of left. You'll also have to add your 10px top/bottom margin to the images and increase the container's height to 70.EDIT: Or instead of having margins on your images and menu and increasing the container height, you could instead remove the margins from your images and menu, set your container back to 50px height and give the 10px top/bottom margin to the container. A little bit cleaner that way.

[JustRob]

I followed your advice, right now the left image is on left and right is on right as it should be, but yet again, there's the little scrollbar. The left / right images and the menu itself are not on the same height, and it seems like they're kind of floating above the menu.HTML:

<div class="menucontainer"><img class="menuleftside" /><img class="menurightside" /><ul class="menu1"><li class="current"><a href="index.html"><b>Home</b></a></li><li><a href="About me/about.html"><b>About me</b></a></li><li><a href="portfolio/portfolio.html"><b>Portfolio</b></a></li><li><a href="links/links.html"><b>Links</b></a></li><li><a href="contact/contact.html"><b>Contact</b></a></li></ul></div>

CSS:

.menucontainer{	overflow: auto;	height: 50px;	width: 800px;	margin-left: auto;	margin-right: auto;	margin-top: 10px;	margin-bottom: 10px;}img.menuleftside{	display: block;	height: 50px;	width: 30px;	float: left;	background: url(buttons/leftmenuside.png);}img.menurightside{	display: block;	height: 50px;	width: 30px;	float: right;	background: url(buttons/rightmenuside.png);}.menu1 {	margin-left: auto;	margin-right: auto;	list-style: none; 	height: 50px;	width: 700px;	background:	#FFFFFF url(buttons/button.png);}.menu1 li {	padding-left: 0px;	padding-right: auto;}.menu1 li a {	text-transform: uppercase;	margin-left: -20px;	display: block;	float: left;	height: 50px; 	line-height: 35px; 	color: #FFFFFF; 	text-decoration: none; 	font-size: 20px; 	font-family: arial, verdana, sans-serif; 	font-weight: bold; 	text-align: center;	cursor: pointer;}.menu1 li a b {	float: left; 	display: block; 	padding-top: 7px;	padding-right: 30px;	padding-left: 30px;}.menu1 li.current a {	color: #FFFFFF; 	background: url(buttons/button2.png);}.menu1 li.current a b {	background: url(buttons/button3.gif) no-repeat right top;}.menu1 li a:hover {	color: #FFFFFF;	background: #000 url(buttons/button2.png);}.menu1 li a:hover b {	background: url(buttons/button2.png) no-repeat right top;}.menu1 li.current a:hover {	color: #FFFFFF; 	background: #000000 url(buttons/button2.png); 	cursor: pointer;}.menu1 li.current a:hover b {	background: url(buttons/button2.png) no-repeat right top;}

[ShadowMage]

Sorry, you need to explicitly set the top/bottom margins of the menu to 0. Browsers automatically give ul's (and a lot of other elements) default margins if they aren't specified.

[dsonesuk]

Why not just use li of the menu to show the rounded end images instead, more cleaner, alignment more acurrate with menu button images

<div class="menucontainer"><ul class="menu1"><li class="menuleftside"></li><li class="current"><a href="index.html"><b>Home</b></a></li><li><a href="About me/about.html"><b>About me</b></a></li><li><a href="portfolio/portfolio.html"><b>Portfolio</b></a></li><li><a href="links/links.html"><b>Links</b></a></li><li><a href="contact/contact.html"><b>Contact</b></a></li><li class="menurightside"></li></ul></div>

li.menuleftside, li.menurighttside {height: 50px;width: 30px;}li.menuleftside{background: url(buttons/lefttmenuside.png);}li.menurightside{background: url(buttons/rightmenuside.png);}

[JustRob]

Sorry, you need to explicitly set the top/bottom margins of the menu to 0. Browsers automatically give ul's (and a lot of other elements) default margins if they aren't specified.

Ah, I see. Looks like you're right, it finally works flawlessly now.Thank you all for the good advice, it means a lot.

[JustRob]

Why not just use li of the menu to show the rounded end images instead, more cleaner, alignment more acurrate with menu button images

<div class="menucontainer"><ul class="menu1"><li class="menuleftside"></li><li class="current"><a href="index.html"><b>Home</b></a></li><li><a href="About me/about.html"><b>About me</b></a></li><li><a href="portfolio/portfolio.html"><b>Portfolio</b></a></li><li><a href="links/links.html"><b>Links</b></a></li><li><a href="contact/contact.html"><b>Contact</b></a></li><li class="menurightside"></li></ul></div>

li.menuleftside, li.menurighttside {height: 50px;width: 30px;}li.menuleftside{background: url(buttons/lefttmenuside.png);}li.menurightside{background: url(buttons/rightmenuside.png);}

That sounds reasonable, I'll try it out tomorrow to see what I like better. Thanks

[JustRob]

Sorry to bump this once again, but some new problems have come up.I decided to test my website live and found some problems. Website: http://robbertbruggeman.webs.com/index.html (Only Home and About pages are currently online)Anyway, the first problem:When on a page, there's a black square around the button of the page you're on. This does not happen when I preview my website in Dreamweaver, which leaves me very confused. Anyone know what's going on?Second problem:When you're on a page the menu looks fine, but the instant you click one of the buttons (no matter which one), for a very short time some scrollbars appear and they go away again when you're on the page. If you click drag the button then the scrollbars will be there permanently. What is wrong here?I hope someone can yet again help me with this

[cousineaug]

Anyway, the first problem:When on a page, there's a black square around the button of the page you're on. This does not happen when I preview my website in Dreamweaver, which leaves me very confused. Anyone know what's going on?Second problem:When you're on a page the menu looks fine, but the instant you click one of the buttons (no matter which one), for a very short time some scrollbars appear and they go away again when you're on the page. If you click drag the button then the scrollbars will be there permanently. What is wrong here?I hope someone can yet again help me with this

Scrollbars appear all the time when viewed in Chrome. That is because CONTACT has wrapped to line two.Check your arithmetic. The container DIV is not wide enough.as for the black square, , your class"current" uses two background images. Are you sure the images have been uploaded? I noticed one is a buttonx.gif and the others are PNG...is that a typo?Guy

[dsonesuk]

the black behind menu text is caused by a "image not found" image for button3.gif.menu1 li.current a b {background:transparent url(buttons/button3.gif) no-repeat scroll right top;}The scrollbars are caused by overflow:auto; and because as already mentioned the width of the menu ul is to long so it forced below left and right rounded image ends, making the height greater than 50px, which in turn causes the scrollbars to appear, this is what using overflow auto does.Alternative would be to use overflow:hidden;As i mention previously in a post, it would be better not to use images, as images require to validate W3C validation, src, alt, but instead use end li tags, and maybe block span elements for image dividers instead.ALSO the preview in dreamweaver has never given a true representation of what a page will truly look like when rendered, so always preview in browser preferably FF.

[dsonesuk]

this will be a lot easy to manage, and more tidy and pass validationcss

@charset "utf-8";/* CSS Document */html { 	height: 100%;}body	 {	min-height: 101%;	text-align: center;	color: #FFFFFF;	font-family: Arial, Helvetica, sans-serif;	font-weight: bold;	background: url(bg3.png);}a.chapter{	text-decoration: none;}a:hover.chapter{	color: #FFFFFF;}h1 {	margin: auto;	text-align: left;	padding-bottom: 10px;	background: no-repeat;	height: 17px;	width: 595px;	font-weight: bold;	font-family: "Myriad Pro", Verdana;	font-size: 20px;	color: #FF0;	text-transform: uppercase;	text-shadow: 2px 2px 3px #000000;}h2{	margin-top: 0px;	text-align: left;	font-weight: bold;	font-size: 15px;}a{	font-family: Arial, Helvetica, sans-serif;	font-size: 15px;	color: #EEEEEE;	text-decoration: underline;}a:hover{	font-family: Arial, Helvetica, sans-serif;	font-size: 15px;	color: #CCFF00;}a.snelkoppelingen{	color: #FFFFFF;	font-size: 15px;	font-weight: normal;}a.snelkoppelingen:hover{	color: #FFFF00;	font-size: 15px;	font-weight: normal;}.header {	margin-right: auto;	margin-left: auto;	background-image: url(banner/banner.png);	height: 200px;	width: 800px;}.background{	margin-right: auto;	margin-left: auto;	padding-bottom: 20px;	padding-top: 10px;	width: 820px;	height: 100%;	background: #111;}.background2{	margin-right: auto;	margin-left: auto;	padding-bottom: 30px;	padding-top: 30px;	height: auto;	width: 800px;	background: url(contentbg.png);	border: solid 1px #000;}hr{	border: none;	border-top: 1px solid #FFFFFF;}.menucontainer{	overflow: hidden	height: 50px;	width: 800px;	margin-left: auto;	margin-right: auto;	margin-top: 10px;	margin-bottom: 10px;}li.menuleftside{	display: block;	height: 50px;	width: 30px;	float: left;	background: url(buttons/leftmenuside.png) no-repeat #000;}li.menurightside{	display: block;	height: 50px;	width: 30px;	float: right;	background: url(buttons/rightmenuside.png) no-repeat #000;}span.firstdivider{	margin-left: 13px;	display: block;	height: 50px;	width: 6px;	float: left;	background: url(buttons/divider.png);}span.divider{	display: block;	height: 50px;	width: 6px;	float: left;	background: url(buttons/divider.png);}.menu1 {	margin-left: auto;	margin-right: auto;	margin-top: 0px;	margin-bottom: 0px;	list-style: none; 	height: 50px;padding:0;	background:	#FFFFFF url(buttons/button.png);}.menu1 li {	padding-left: 0px;}.menu1 li a {	text-transform: uppercase;	display: block;	float: left;	height: 50px; 	line-height: 35px; 	color: #FFFFFF; 	text-decoration: none; 	text-align: left;	text-shadow: 1px 1px 1px #333;	font-size: 28px; 	font-family: "Myriad Pro", Arial, Verdana, Sans-Serif; 	font-weight: lighter;	cursor: pointer;	padding-left: 10px;	padding-right: 10px;}.menu1 li a b {	float: left; 	display: block; 	padding-top: 7px;}.menu1 li.current a {	color: #FFFFFF; 	background: url(buttons/button2.png);}.menu1 li.current a b {}.menu1 li a:hover {	color: #FFFFFF;	background: #000 url(buttons/button2.png);}.menu1 li a:hover b {	background: url(buttons/button2.png) no-repeat right top;}.menu1 li.current a:hover {	color: #FFFFFF; 	background: #000000 url(buttons/button2.png); 	cursor: pointer;}.menu1 li.current a:hover b {	background: url(buttons/button2.png) no-repeat right top;}.content {	margin: 0 auto;	padding-top: 5px;	padding-bottom: 50px;	text-align: left;}.content_area {	margin: 0 auto;	width: 555px;	text-align: left;	background: url(content_area_bg.png) repeat-y;	padding-left: 20px;	padding-right: 20px;	padding-top: 20px;	padding-bottom: 20px;	font-family: Arial, Helvetica, sans-serif;	font-size: 15px;	font-weight: lighter;	color: #FFFFFF;	/* border: solid 1px #111; */}a img {		border: 1px solid #EEEEEE; }img.noborder { 	border: none; }img.aleft {	float: left;	padding-bottom:50px;	margin-right: 10px;	border:}.layout_copyright {	margin-left: auto;	margin-right: auto;	font: bold 11px/0px Verdana, Arial, Helvetica, sans-serif;	color: #FFF;	text-transform: uppercase;	padding-top: 20px;	text-align: center;	font-size: 10px;}ul li.koppelingen{	list-style-type: none;	padding-left: 20px;	background-image: url(../bullet.gif);	background-repeat: no-repeat;	background-position: left center;}

html

<div class="menucontainer"><ul class="menu1"><li class="menuleftside"></li><li><span class="firstdivider"></span><a href="../index.html"><b>Home</b></a></li><li class="current"><span class="divider"></span><a href="about.html"><b>About me</b></a></li><li><span class="divider"></span><a href="../portfolio/portfolio.html"><b>Portfolio</b></a></li><li><span class="divider"></span><a href="../links/links.html"><b>Links</b></a></li><li><span class="divider"></span><a href="../contact/contact.html"><b>Contact</b></a><span class="divider"></span></li><li class="menurightside"></li></ul></div>

[JustRob]

Well the new code you posted seems to work flawlessly. You're definitely right it's more easy to manage this way, I was already planning to do it your way but didn't get around to it yet.The black background was a dead image link I forgot to update, dumb mistake.