Solved

categories above select multiple list

Posted on 2007-11-23
11
220 Views
Last Modified: 2010-04-09
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
Comment
Question by:sasha85
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 5
  • 4
  • 2
11 Comments
 

Author Comment

by:sasha85
ID: 20341972
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
 
LVL 2

Expert Comment

by:guston76
ID: 20342173
Maybe you need a data grid component ?

Try this link as a start :  http://www.hotscripts.com/JavaScript/index.html
0
 
LVL 13

Expert Comment

by:samic400
ID: 20342449
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
Online Training Solution

Drastically shorten your training time with WalkMe's advanced online training solution that Guides your trainees to action. Forget about retraining and skyrocket knowledge retention rates.

 

Author Comment

by:sasha85
ID: 20342607
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
 
LVL 13

Assisted Solution

by:samic400
samic400 earned 100 total points
ID: 20342876
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
 

Author Comment

by:sasha85
ID: 20343144
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
 
LVL 2

Expert Comment

by:guston76
ID: 20349502
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
 

Author Comment

by:sasha85
ID: 20350828
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
 
LVL 2

Accepted Solution

by:
guston76 earned 400 total points
ID: 20364390
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
 
LVL 2

Assisted Solution

by:guston76
guston76 earned 400 total points
ID: 20364419
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
 

Author Comment

by:sasha85
ID: 20364588
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: ZipGrep

ZipGrep is a utility that can list and search zip (.war, .ear, .jar, etc) archives for text patterns, without the need to extract the archive's contents.

One of a set of tools we're offering as a way to say thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
Finding original email is quite difficult due to their duplicates. From this article, you will come to know why multiple duplicates of same emails appear and how to delete duplicate emails from Outlook securely and instantly while vital emails remaiā€¦
The goal of the tutorial is to teach the user how to use import presets downloaded from the internet into Adobe Lightroom. Once you downloaded the presets go into the preset folder and press import then import your preset and your set it to go.
Video by: Mark
This lesson goes over how to construct ordered and unordered lists and how to create hyperlinks.

729 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question