| View previous topic :: View next topic |
| Author |
Message |
ws
Write and Show support
Joined: 27 May 2007
Posts: 140
|
 Posted: Sun Sep 02, 2007 11:04 am Post subject: How to create a dropdown box for showing special text |
|
Creating a dropdown box to display special text
A dropdown box is an excellent way to present information on a page without taking up a lot of unnecessary space. You can use it for a list of items or you can describe a paragraph of text. It has the added advantage of presenting text that is not readily copied into a reader's clipboard.
Here is the code in it's simplest form:
| Quote: | <div>
<select>
<option >Cars I like</option>
<option >Volvo</option>
<option>Saab</option>
<option>Fiat</option>
<option>Audi</option>
</select></div> |
On the page it looks like this:
The title: Notice that the first "option:" entry is what shows on the screen.
Clicking the down arrow (not functional here.. it's just a picture) reveals the list:
Screen shot here
Using the Dropdown box in several creative ways:
1. Showing whole paragraphs of text in special format.
Of course, you don't need to include all of the options (like colored background and font type or even a special font-family, but they are here to illustrate the possibilities).
| Quote: | <div><select style="height:30px; width:320px; font-family:comic sans ms; size:12px; color:white; background-color:black;">
<option>Definition of a good attorney</option>
<option>A good lawyer acts like a parent to his client</option>
<option>a parent who can only believe in their offspring </option>
<option>completely (and can see only the good in them).</option>
<option>The key phrase, however, is "acts like." In the </option>
<option>lawyer's mind, he becomes the eloquent surrogate</option>
<option>voice of defense for his client and he assumes</option>
<option> that personna. He becomes the purest form of</option>
<option>how an accused person would defend himself, if</option>
<option>they only knew how to state their case in a way</option>
<option>that would protect their own freedom completely.</option>
</select></div> |
Here is how it looks on the screen:
Clicking the down arrow shows this:
2. Here is another example of text in a box
| Quote: |
<div><select style="font-family: century gothic; background-color:peachpuff; border:gray; ">
<option>Psalm of Life</option>
<option>Tell me not in mournful numbers</option>
<option>life is but an empty dream,</option>
<option>For the soul is dead that slumbers</option>
<option>and things are not what the seem.</option>
<option>Life is real! Life is earnest!</option>
<option>and the grave is not its goal.</option>
<option>Dust thou art to dust returneth</option>
<option>was not spoken of the soul.</option>
<option>----------</option>
<option>by Henry Wadsworth Longfellow.</option>
</select></div> |
Here is how it looks on the screen:
Clicking the down arrow shows this:
 |
|
| Back to top |
|
 |
ws
Write and Show support
Joined: 27 May 2007
Posts: 140
|
| Posted: Mon Sep 03, 2007 2:29 pm Post subject: How to easily create a dropdown box |
|
How to create a dropdown box easily
1. Write what you want to show in the box in your Windows Notepad (or equivalent simple text-oriented program).
2. Shorten the lines (use the carriage return) to a proper display length for the width of the box you will be creating.
3. Copy this and paste this above the copy you wrote.
| Quote: | <option></option>
<option></option>
<option></option>
<option></option>
<option></option> |
Repeat that, depending on the number of lines you are going to have.
4. Copy each line (from your text) and paste between the codes. Like this.
| Quote: | | <option>Stuff I copied and pasted</option> |
5. Copy and paste your beginning and ending code... so that your drop down box code
looks like this: | Quote: | <div><select style="width:320px; font-family:comic sans ms; size:12px; color:brown; background-color:beige;">
<option>Stuff you need to know</option>
<option>I like to use dropdown boxes</option>
<option>to tell my readers very</option>
<option>special information that I prefer </option>
<option>not have cluttering the page.</option>
</select></div> |
6. Change your font-family, size, color, background-color to suit your tastes. Change the width to look right on the page, matching your line lengths (can be very slim if you like).
7. If you want the dropdown box centered on your page change that first div to look like this: | Quote: | | <div class="centered"> |
|
|
| Back to top |
|
|
|
|
|
Search