Hello, I need two option menus side by side, and will use JS to make the second menu toggle between hidden and visable. I have several of these, and would rather use Class than ID. Furthermore, they are initially hidden, so I thought I would use CSS to assign display as "none". Works fine except a line break is created between the two option menus. Any clean ways to remove the line break? Thanks
<html><head>
<script type="text/javascript" src=http://www.webdeveloper.com/forum/archive/index.php/"javascript.js"> </script>
<!--<link rel="stylesheet" type="text/css" href=http://www.webdeveloper.com/forum/archive/index.php/"stylesheet.css" /> -->
<style type="text/css">
<!--
.second_menu {display:none;}
-->
</style></head>
<body topmargin="0" leftmargin="0">
<SELECT name="menu_1">
<option value="1">Menu 1-1</option>
<option value="2">Menu 1-2</option>
<option value="3">Menu 1-3</option>
</SELECT>
<SELECT name="menu_2" class="second_menu" >
<option value="1">Menu 2-1</option>
<option value="2">Menu 2-2</option>
<option value="3">Menu 2-3</option>
</SELECT>
</body></html>select { margin:0 } and you should use an id rather than class because it is more directly addressable through getElementById().I changed to ID's per your recommendation. I also added the "select { margin:0 }" per your recommendation (was this what you had in mind?). I am trying for menu_1 and menu_2 side by side, but still get the same unintended line break. I am very new to CSS, and am sure it is a simple/stupid mistake I am doing. Thanks
<html><head>
<!--<link rel="stylesheet" type="text/css" href=http://www.webdeveloper.com/forum/archive/index.php/"stylesheet.css" /> -->
<style type="text/css">
<!--
#menu_2 { display:block }
select { margin:0 }
-->
</style></head>
<body topmargin="0" leftmargin="0">
<SELECT name="menu_1">
<option value="1">Menu 1-1</option>
<option value="2">Menu 1-2</option>
</SELECT>
<SELECT name="menu_2" id="menu_2">
<option value="1">Menu 2-1</option>
<option value="2">Menu 2-2</option>
</SELECT>
<br>
<input type="button" value="none" onclick="document.getElementById( 'menu_2' ).style.display = 'none'">
<input type="button" value="block" onclick="document.getElementById( 'menu_2' ).style.display = 'block'">
</body></html>Just realized it had nothing to do with being a menu. Evidently, display:block inserts a break before and after the associated content. Is there a way to override this feature. Thank you!
<html><head>
<!--<link rel="stylesheet" type="text/css" href=http://www.webdeveloper.com/forum/archive/index.php/"stylesheet.css" /> -->
<style type="text/css">
<!--
#menu_1 {display:block }
#menu_2 {display:block }
#menu_3 {background: yellow}
-->
</style></head>
<body topmargin="0" leftmargin="0">
Menu 1
<span id="menu_2">Menu 2</span>
<span id="menu_3">Menu 3</span>
<br>
<input type="button" value="none" onclick="document.getElementById( 'menu_2' ).style.display = 'none'">
<input type="button" value="block" onclick="document.getElementById( 'menu_2' ).style.display = 'block'">
</body></html>Change the two instances of display:block to display:inline.Thank you! Works great.Glad it worked for you.
<html><head>
<script type="text/javascript" src=http://www.webdeveloper.com/forum/archive/index.php/"javascript.js"> </script>
<!--<link rel="stylesheet" type="text/css" href=http://www.webdeveloper.com/forum/archive/index.php/"stylesheet.css" /> -->
<style type="text/css">
<!--
.second_menu {display:none;}
-->
</style></head>
<body topmargin="0" leftmargin="0">
<SELECT name="menu_1">
<option value="1">Menu 1-1</option>
<option value="2">Menu 1-2</option>
<option value="3">Menu 1-3</option>
</SELECT>
<SELECT name="menu_2" class="second_menu" >
<option value="1">Menu 2-1</option>
<option value="2">Menu 2-2</option>
<option value="3">Menu 2-3</option>
</SELECT>
</body></html>select { margin:0 } and you should use an id rather than class because it is more directly addressable through getElementById().I changed to ID's per your recommendation. I also added the "select { margin:0 }" per your recommendation (was this what you had in mind?). I am trying for menu_1 and menu_2 side by side, but still get the same unintended line break. I am very new to CSS, and am sure it is a simple/stupid mistake I am doing. Thanks
<html><head>
<!--<link rel="stylesheet" type="text/css" href=http://www.webdeveloper.com/forum/archive/index.php/"stylesheet.css" /> -->
<style type="text/css">
<!--
#menu_2 { display:block }
select { margin:0 }
-->
</style></head>
<body topmargin="0" leftmargin="0">
<SELECT name="menu_1">
<option value="1">Menu 1-1</option>
<option value="2">Menu 1-2</option>
</SELECT>
<SELECT name="menu_2" id="menu_2">
<option value="1">Menu 2-1</option>
<option value="2">Menu 2-2</option>
</SELECT>
<br>
<input type="button" value="none" onclick="document.getElementById( 'menu_2' ).style.display = 'none'">
<input type="button" value="block" onclick="document.getElementById( 'menu_2' ).style.display = 'block'">
</body></html>Just realized it had nothing to do with being a menu. Evidently, display:block inserts a break before and after the associated content. Is there a way to override this feature. Thank you!
<html><head>
<!--<link rel="stylesheet" type="text/css" href=http://www.webdeveloper.com/forum/archive/index.php/"stylesheet.css" /> -->
<style type="text/css">
<!--
#menu_1 {display:block }
#menu_2 {display:block }
#menu_3 {background: yellow}
-->
</style></head>
<body topmargin="0" leftmargin="0">
Menu 1
<span id="menu_2">Menu 2</span>
<span id="menu_3">Menu 3</span>
<br>
<input type="button" value="none" onclick="document.getElementById( 'menu_2' ).style.display = 'none'">
<input type="button" value="block" onclick="document.getElementById( 'menu_2' ).style.display = 'block'">
</body></html>Change the two instances of display:block to display:inline.Thank you! Works great.Glad it worked for you.