Want to protect your cyber security and still get fast solutions? Ask a secure question today.Go Premium

x
?
Solved

Create CSS dropdown text box

Posted on 2009-02-16
14
Medium Priority
?
878 Views
Last Modified: 2012-05-06
Hi Experts.  I was trying this on my own but can't seem to get the proper commands in the right order.  Any help would be appreciated.  I am trying to create a drop-down text box that contains one sentence and then several bulllets under it.  I am including the script that works but I can't figure out how to change the font family or size.

Thanks.
<a href="#" onclick="document.getElementById('moreInfoDiv').style.display=document.getElementById('moreInfoDiv').style.display=='block'?'none':'block';
return false">Click For A Detailed Dropdown</a>
<div id="moreInfoDiv" style="display: none; background-color:#fff; border:groove 2px #000";>
*Computer & Network Security<br />
*Server Installation & Support<br />
*Anti-virus & Spyware Protection/Removal<br />
*Technicial Consulting<br />
*Data Backup & Recovery<br />
*On-site or Remote Trouble-shooting & Repair<br />
*Network Management<br />
*Website Design & Hosting<br />
*On-site or Remote Data Backup<br />
</div>

Open in new window

0
Comment
Question by:samiam41
  • 10
  • 4
14 Comments
 
LVL 15

Expert Comment

by:aibusinesssolutions
ID: 23652470
Do you have a CSS file for this?  You can set the properties you want in the CSS for the moreInfoDiv.

If not you can do this:
<div id="moreInfoDiv" style="display: none; background-color:#fff; border:groove 2px #000; font-family: Arial; font-size: 12px;">
0
 
LVL 9

Author Comment

by:samiam41
ID: 23652493
Thanks for the quick reply.  That was the problem.  I was trying to create my own CSS file after working with you and a couple of other experts.  I just couldn't get it started.  

So I would change the div id line in my script to the one you mentioned?
0
 
LVL 9

Author Comment

by:samiam41
ID: 23652514
Would I use <li> for the bullets?
0
Independent Software Vendors: 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!

 
LVL 15

Accepted Solution

by:
aibusinesssolutions earned 2000 total points
ID: 23652537
Yes.

<div id="moreInfoDiv">
<li>Bullet 1</li>
<li>Bullet 2</li>
</div>

Then in your CSS file, use # since moreinfoDiv is the target ID.

#moreInfoDiv
{
  display: none;
  background-color:#fff;
  border:groove 2px #000;
  font-family:Arial;
  font-size:12px;
}
0
 
LVL 9

Author Comment

by:samiam41
ID: 23652595
Hmm...  You may have lost me on the CSS file part.  I am only using one file, I don't have a seperate CSS file.  Here is what I have, let me know where I am making it more difficult please.
<html>
<head>
<style type="text/css">
#moreinfodiv
{
display: none; 
  background-color:#fff; 
  border:groove 2px #000;
  font-family:Arial;
  font-size:12px;
}
</style>
</head>
<body>
 
<a href="#" onclick="document.getElementById('moreInfoDiv').style.display=document.getElementById('moreInfoDiv').style.display=='block'?'none':'block';
return false">Click For A Detailed Dropdown</a>
<div id="moreInfoDiv>
<li>Computer & Network Security<br />
<li>Server Installation & Support<br />
<li>Anti-virus & Spyware Protection/Removal<br />
<li>Technicial Consulting<br />
<li>Data Backup & Recovery<br />
<li>On-site or Remote Trouble-shooting & Repair<br />
<li>Network Management<br />
<li>Website Design & Hosting<br />
<li>On-site or Remote Data Backup<br />
</div>

Open in new window

0
 
LVL 9

Author Comment

by:samiam41
ID: 23652598
Thanks for your patience....  
0
 
LVL 9

Author Comment

by:samiam41
ID: 23652614
WAHOOO!!!!  I found my error.  SOB!

Here ---->  <div id="moreInfoDiv">  

I had it set as "moreinfo> without the second ".  Ugh!
0
 
LVL 9

Author Comment

by:samiam41
ID: 23652667
I plan to wrap this up and award you points, but if I can ask one last question to completely understand why you did what you did....

When you mentioned ->  "...use # since moreinfoDiv is the target ID", the moreinfodiv is referring to the text being listed.  How would you go about changing to the font settings to something else for the link "Click for a more...."?
0
 
LVL 15

Expert Comment

by:aibusinesssolutions
ID: 23652781
Set the class of your a tag to something, and then set it up in the CSS file.

<a href="#" class="alink" onclick......

.alink
{
   font-size: 14px;
}
0
 
LVL 9

Author Comment

by:samiam41
ID: 23652973
Oh............  Wow.  Man that makes much better sense.  I can't thank you enough for explaning it.
0
 
LVL 9

Author Closing Comment

by:samiam41
ID: 31547443
Great work.  I appreciate your patience and offering up some knowledge on how CSS works.  I'm really starting to understand it better, thanks to experts like you.

Regards,
Aaron Shaw
0
 
LVL 15

Expert Comment

by:aibusinesssolutions
ID: 23653021
No problem.

Just for future reference, you can create a seperate file named something like styles.css and put everything between your <style></style> tags in there.  Then on your page you would do this.

<link href="styles.css" rel="stylesheet" type="text/css" />
0
 
LVL 9

Author Comment

by:samiam41
ID: 23653320
So that would keep the style info clean and organized in a seperate file.....  Genius!

That is a good tip and one that I will have to begin incorporating into my websites as I progress.
0
 
LVL 9

Author Comment

by:samiam41
ID: 24306833
0

Featured Post

VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

Question has a verified solution.

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

Use these top 10 tips to master the art of email signature design. Create an email signature design that will easily wow recipients, promote your brand and highlight your professionalism.
Not sure what the best email signature size is? Are you worried about email signature image size? Follow this best practice guide.
In this tutorial viewers will learn how to code links for mobile sites that, once clicked, send a call or text to a specified number. For a telephone link (once clicked, calls a number), begin with a normal "<a href=" link tag. For the href, specify…
Learn how to create flexible layouts using relative units in CSS.  New relative units added in CSS3 include vw(viewports width), vh(viewports height), vmin(minimum of viewports height and width), and vmax (maximum of viewports height and width).
Suggested Courses

578 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