1 reply [Last post]
ccordner
ccordner's picture
Offline
newbie
England
Last seen: 3 years 37 weeks ago
England
Joined: 2011-03-07
Posts: 9
Points: 16

Hi

I'm trying to do a very basic menu, consisting of five buttons. I've managed to adapt some CSS from somewhere, which I've reproduced below. But there are two problems, both related to line height. Any ideas?

* When there are too many buttons (i.e. the window is too narrow) it wraps onto the next line and disappears. I can counter this by increasing the line height it means there is a load of empty space between rows when they do fit on one line.

*If there is more than one line of text, it wraps to the next line, but even though the text is physically smaller than the button, it wraps onto a whole new (250px high) line and therefore disappears.

Any help appreciated.

Thanks
Chris

#navbar ul {
	margin-left: 0px;
	margin-right: 0px;
	padding-left: 0px;
	padding-right: 0px;
	height: 250px;
    	list-style-type: none;
	text-align: center;
	font-weight: bold;
	font-size: 13px;
	border: 0px	
        } 
 
#navbar ul li {  
	display: inline;
	padding-right: 20px;
	padding-bottom: 20px;
	height: 20px;
	width: 250px;
	text-align: center;
	border: 0px
        } 
 
#navbar ul li a { 
	float: left;
	width: 250px;
	margin-left: 5px;
	margin-right: 5px;
	text-decoration: none;
    	display: inline;   
    	line-height: 250px;
    	color: #FFFFFF; 
	border: 0px;
	background: url("bigbutton.png") no-repeat 0 0
        } 
 
 
 
#navbar ul li a:hover {
	background-position: 0 -250px;
	color: #FFFFFF;
        }  

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 6 hours 9 min ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9743
Points: 3822

#navbar ul { margin-left:

#navbar ul {
	margin-left: 0px;
	margin-right: 0px;
	padding-left: 0px;
	padding-right: 0px;
	height: 250px;     /*Danger, Will Robinson*/
    	list-style-type: none;
	text-align: center;
	font-weight: bold;
	font-size: 13px;
	border: 0px	
        } 

It is usually a bad idea to set a fixed height on elements. Let the content determine height.

Set the list items to {display: inline-block;}, as inline elements do not have the properties width and height (though some browsers ignore the specs on that.

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.