categories above select multiple list

http://ilmc.brinkster.net/comersus/crm/menu_example.htm
you see those categories forms above the whit plain area...how can i build this?:)
on that white area,i plan to use <SELECT NAME="toppings" MULTIPLE ...
sasha85Asked:
Who is Participating?

Improve company productivity with a Business Account.Sign Up

x
 
guston76Connect With a Mentor Commented:
This code is best for site navigation, but maybe it will meet your need :

<html>
 
<head>
	<title></title>
 
<style type="text/css" media="screen">
		
.menu {
	margin-left: 0px;
	padding-left: 0px;
	list-style-type: none;
	background: navy;
	float: left;
}
		
.menu li {
	display: inline;
}
 
.menu li a {
	display: block;
	float: left;
	padding: 4px 10px;
	border-right: 1px solid white;
	
	text-decoration: none;
	font: bold 12px sans-serif;
	color: white;
}
 
.menu li a:hover {
	color: yellow;
}
 
</style>
 
</head>
 
<body>
	<ul class="menu">
		<li><a href="#">Menu 1</a></li>
		<li><a href="#">Menu 2</a></li>
		<li><a href="#">Menu 3</a></li>
		<li><a href="#">Menu 4</a></li>
		<li><a href="#">Menu 5</a></li>
	</ul>
</body>
 
</html>

Open in new window

0
 
sasha85Author Commented:
http://ilmc.brinkster.net/comersus/crm/menu_examplejcd.htm
i tried this but it so bad...i used ul and li...and those gave me a gup between them+i got no clue how to combine the select box and those categories that in a way they given in the link
0
 
guston76Commented:
Maybe you need a data grid component ?

Try this link as a start :  http://www.hotscripts.com/JavaScript/index.html
0
What Kind of Coding Program is Right for You?

There are many ways to learn to code these days. From coding bootcamps like Flatiron School to online courses to totally free beginner resources. The best way to learn to code depends on many factors, but the most important one is you. See what course is best for you.

 
samic400Commented:
in head tag:
<script>
 function goToCategory(aSel){
   window.open(aSel.options[aSel.selectedIndex].value,'popwdw');
</script>                  
}


<select name="selectCategory" onChange="goToCategory(this)">
<option value="null">select category<option>
<option value="http://www.abc.com">category 1</option>
<option value="http://www.def.com">category 2</option>
  </select>
0
 
sasha85Author Commented:
people what are you talking about?

have you seen this link?
http://ilmc.brinkster.net/comersus/crm/menu_examplejcd.htm

the head part is what i did and looks bad...
the image is what i am tring to do:)
0
 
samic400Connect With a Mentor Commented:
I guess I don't understand the question then.

You mean a type of menu where the menu option changes when it is being moused over or hovered over like so?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style type="text/css">
* {
padding:0px;
margin:0px;
font-size:11px;
font-family:arial;
}

.listmenu ul {
list-style-type:none;
position:relative;
padding-left:1px;
padding-top:5px;
padding-bottom:5px;
float:left;

}

.listmenu li {
text-indent:3px;
width:90px;
background-color:#cccccc;

}

.listmenu li:hover {
background-color:#CCCCCC;
color:#FF0000;

}


</style>
</head>
<body style='margin:10px 10px 10px 10px'>
<table border=0 cellspacing=0 cellpadding=0>
<tr style='background-color:#CCCCCC'>
<td>
<div class="listmenu">
    <ul>
    <li>Table name</li>

    </ul>
    <ul>
    <li>Engine</li>
    </ul>
    <ul>
    <li>Rows</li>
    </ul>
    <ul>
    <li>Data Length</li>

    </ul>
    <ul>
    <li>Index Length</li>
    </ul>
    <ul>
    <li>Update Time</li>
    </ul>
    </div>
</td>
</tr>

<tr>
<td style='padding-top:5px'>

<SELECT NAME="possible" STYLE="width:175px">
<OPTION VALUE="1">Option 1: House
<OPTION VALUE="2">Option 2: Chamber
<OPTION VALUE="3">Option 3: Kitchen
<OPTION VALUE="4">Option 4: Garden
</SELECT>

</td>
</tr>
</table>

</body>
</html>


0
 
sasha85Author Commented:
no no:)
i just need it to look alike...no effectes those titels don't need to be even a links...
it's kind of design question...
http://ilmc.brinkster.net/comersus/crm/menu_examplejcd.htm
i just don't know how to build the titles like that...look at the image and see what i tried to do (above the image)

thanku:)
0
 
guston76Commented:
Try to set the margin and padding to zero

<..... style="margin:0px; padding:0px" >

It would be much easier for us to help you if you give the code you've written, not just the captured image.
0
 
sasha85Author Commented:
i don;t have the code...that's all the point of this question...
in the linkyou can see what i did and the img of what i want to do.
i can post here the code if you want but you can view it as well inside the source:)

0
 
guston76Connect With a Mentor Commented:
This code is more suitable for tables :

<html>
 
<head>
	<title></title>
 
<style type="text/css" media="screen">
 
.menu {
	border-collapse: collapse;
	
	font: 12px sans-serif;
	color: black;
}
 
.menu td {
	border: 1px solid gray;
}
 
.menu-item {
	background-color: navy;
	padding: 2px 10px;
}		
 
.menu-item a {
	text-decoration: none;
	font-weight: bold;
	color: white;
}		
 
.menu-item a:hover {
	color: yellow;
}		
 
</style>
 
</head>
 
<body>
 
<table class="menu">
	<tr>
		<td class="menu-item"><a href="#">Menu 1</a></td>
		<td class="menu-item"><a href="#">Menu 2</a></td>
		<td class="menu-item"><a href="#">Menu 3</a></td>
		<td class="menu-item"><a href="#">Menu 4</a></td>
		<td class="menu-item"><a href="#">Menu 5</a></td>
	</tr>
	<tr>
		<td>Content</td>
		<td>Content</td>
		<td>Content</td>
		<td>Content</td>
		<td>Content</td>
	</tr>
	<tr>
		<td>Content</td>
		<td>Content</td>
		<td>Content</td>
		<td>Content</td>
		<td>Content</td>
	</tr>
</table>
 
</body>
 
</html>

Open in new window

0
 
sasha85Author Commented:
well for ul and li it not work...when i pasted it and tried it just not did nothing to this
http://ilmc.brinkster.net/comersus/crm/menu_example.htm
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.