Menu
In the following there are 4 rows of over-sized buttons. At the moment, the buttons do not trigger events.
The 2nd row adds some extra space after the 1st button in the row. 😮
I assume the extra space t is because I am trying to create a multiple line text in the button, but I don’t know how to remove the space.
Any suggestions? ?
[code]
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″ />
<title> Button Menu </title>
<style type=”text/css”>
.menuBtn { width:150px; height:100px; font-size:1.1em; }
.menuBtnF { background-color:red; color:white; }
.menuBtnO { background-color:orange; color:black; }
.menuBtnU { background-color:green; color:white; }
.menuBtnB { background-color:blue; color:white; }
</style>
</head>
<body>
<button class=”menuBtn menuBtnF”> WebDeveloper </button>
<button class=”menuBtn menuBtnF”> CodingForums </button>
<button class=”menuBtn menuBtnF”> DreamInCode </button>
<button class=”menuBtn menuBtnF”> DynamicDrive </button>
<br>
<button class=”menuBtn menuBtnU”> Nova<br>Southeastern<br>University </button>
<button class=”menuBtn menuBtnU”> Optometry </button>
<button class=”menuBtn menuBtnU”> Library </button>
<button class=”menuBtn menuBtnU”> Homepage </button>
<br>
<button class=”menuBtn menuBtnO”> COP </button>
<button class=”menuBtn menuBtnO”> OTM-1 </button>
<button class=”menuBtn menuBtnO”> OTM-2 </button>
<button class=”menuBtn menuBtnO”> OTM-3 </button>
<button class=”menuBtn menuBtnO”> OTM-4 </button>
<br>
<button class=”menuBtn menuBtnB”> Optics </button>
<button class=”menuBtn menuBtnB”> Theoritical </button>
<button class=”menuBtn menuBtnB”> Physical </button>
<button class=”menuBtn menuBtnB”> Clinical </button>
</body>
</html>
Note: During further testing, adding some <div> tags around the rows does not change the display either.