Menu design: Text over flowing

79 Posts

amazon3d Reply #1, 14 years, 10 months ago

I have an issue with my menu going beyond where I want it to, I've tried playing with the padding but it doesn't seem to snap the text to the next line, any ideas?

/****** Start Menu Area ***********/

#leftcolumn { 
 color: #333;
 border: 1px solid white;
 margin: 0px 0px 0px 0px;
 padding: 10px;
 min-height: 350px;
 height: auto;
 width: 200px;
 float: left;
 background: black;
}

#menu {
	font: bold 10pt Arial;
	width: 150px;
	padding-right: 35px;
	margin-left: 1px;
	margin-right: 1px;}

/****This is the individual Link****/
#menu a {
	height: 65px;
	width: 150px;
	float: left;
	color: black;
	font-size: 18px;
	padding: 15px 15px 0px 10px;
	text-decoration: none;
	border-left: 1px solid white;}

#menu a:hover{
	color: white;
	background-image: url('link to photo');
	background-repeat: no-repeat;
}

#menu .selected {
	color: black;
	background-image: url('link to photo');
	background-repeat: no-repeat;
}
	
#menu ul {
}

#menu li {
	float: left;
	width: 150px;
	height: 65px;
	background-image: url('Link to photo');
	display: block;}

/***** End Menu Area ***********/

387 Posts

whistlemaker Reply #2, 14 years, 10 months ago

Hard to figure out without the html.
Would be easiest with a link to a real page
Given that nothing jumps out at me - try making the link width less - so maybe:

#menu a {width: 100px;}

and see if that causes the text to wrap

79 Posts

amazon3d Reply #3, 14 years, 10 months ago

http://www.barnyardbullys.com

387 Posts

whistlemaker Reply #4, 14 years, 9 months ago

If you are talking about the text width then it is your

#menu a {width: 150px;}

that will control the maximum width the text can take before wrapping.
Then you can adjust the top and left padding to get the text in the correct place.

#menu a {padding: 15px 0 0 22px}

Using the values I gave above made the 'Puppies for Sale' wrap and put the text in a reasonable place - at least on my browser, Safari 5 on OS X 10.7