Go Premium for a chance to win a PS4. Enter to Win

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 223
  • Last Modified:

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 ...
0
sasha85
Asked:
sasha85
  • 5
  • 4
  • 2
3 Solutions
 
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
 
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
Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
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
 
samic400Commented:
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
 
guston76Commented:
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
 
guston76Commented:
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

Featured Post

Free Tool: Port Scanner

Check which ports are open to the outside world. Helps make sure that your firewall rules are working as intended.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

  • 5
  • 4
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now