<!DOCTYPE html>

<html>
<head>
<title>Annotator Tool</title>

<style type="text/css">
.dropbtn {
    background-color: white;
    color: #4CAF50;
    color: whitr
    padding: 8px;
    font-size: 16px;
    border: none;
    cursor: pointer;
}

.dropdown_0{
    position: absolute;
    top: 10px;
    right: 160px;
    display: inline-block;
}

.dropdown_1{
    position: absolute;
    top: 35px;
    right: 160px;
    display: inline-block;
}

.dropdown_2{
    position: absolute;
    top: 60px;
    right: 160px;
    display: inline-block;
}
.dropdown_3{
    position: absolute;
    top: 85px;
    right: 160px;
    display: inline-block;
}

.dropdown_4{
    position: absolute;
    top: 110px;
    right: 160px;
    display: inline-block;
}

.dropdown-content {
    display: none;
    position: absolute;
    background-color: white;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
}

.dropdown-content a {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
}

.dropdown-content a:hover {background-color: white}

.dropdown_0:hover .dropdown-content {
    display: block;
}
.dropdown_0:hover .dropbtn {
    background-color: white;
}

.dropdown_1:hover .dropdown-content {
    display: block;
}
.dropdown_1:hover .dropbtn {
    background-color: white;
}

.dropdown_2:hover .dropdown-content {
    display: block;
}
.dropdown_2:hover .dropbtn {
    background-color: white;
}

.dropdown_3:hover .dropdown-content {
    display: block;
}
.dropdown_3:hover .dropbtn {
    background-color: white;
}

.dropdown_4:hover .dropdown-content {
    display: block;
}
.dropdown_4:hover .dropbtn {
    background-color: white;
}

#bottom {
    position: fixed;
    bottom:  0;
    left: 0;
    width: 100%;
    text-align: center;
    padding:  5px;
    border-top: 3px solid blue;
    background-color: #cccccc;
    padding-bottom: 2em;
    }
    
    
.tb5 {
    position: absolute;
    color: #4CAF50;
    top: 410px;
    font-size: 14pt;
    right: 80px;
    display: inline-block;
    height: 197px
    border-color: 3px #4CAF50;
    }    

.percent {
    position: absolute;
    color: #4CAF50;
    top: 140px;
    font-size: 14pt;
    right: 80px;
    display: inline-block;
    height: 197px
    border-color: 3px #4CAF50;
    }
    
input[type=submit] {
     position: absolute;
    top: 700px;
    right: 20px;
    border: 1px solid #f44c0e;
    color: #fff;
    background: tomato;
    padding: 10px 20px;
    border-radius: 3px;
}
input[type=submit]:hover {
    background: #f44c0e;
}


</style>
</head>

<body>

<IMG SRC="/net/home2/ceb/bmcclint/data/brendan.jpg" WIDTH=850 HEIGHT=1
+000>

<!-- 
<div style="position:     absolute;
            top:        13;
            right:         10px;
            width:        20px;
            height:        600px;
            border:1px solid #000;"
</div>
-->

<div class="dropdown_0">
    <button class="dropbtn" type="button">Assignment</button>
    <div class="dropdown-content">
    <FORM ACTION = "a.pl" METHOD = "get">
    <select name="assignment" >
            <option value="Cruise_1">cruise_1</option>
    <option value="Cruise_2">cruise_2</option>
    <option value="Cruise_3">cruise_3</option>

        <option selected="selected" value="cruise">Cruise 1</option>
    </select>
</div>
</div>

<div class="dropdown_1">
  <button class="dropbtn" type="button">Biotic</button>
  <div class="dropdown-content">
<select name="Biotic" >
    <!-- constructed options -->
    <br><br><label><input type="checkbox" name="biotic" value="Anemone
+_colonial">Anemone_colonial</label>
<br><label><input type="checkbox" name="biotic" value="Anemone_solitar
+y">Anemone_solitary</label>
<br><label><input type="checkbox" name="biotic" value="BlackSeaBass">B
+lackSeaBass</label>
<br><label><input type="checkbox" name="biotic" value="BlueCrab">BlueC
+rab</label>
<br><label><input type="checkbox" name="biotic" value="BrittleStar">Br
+ittleStar</label>
<br><label><input type="checkbox" name="biotic" value="Bryozoa">Bryozo
+a</label>
<br><label><input type="checkbox" name="biotic" value="Bryozoan">Bryoz
+oan</label>
<br><label><input type="checkbox" name="biotic" value="Clams">Clams</l
+abel>
<br><label><input type="checkbox" name="biotic" value="Crab_unident">C
+rab_unident</label>
<br><label><input type="checkbox" name="biotic" value="Ctenophores">Ct
+enophores</label>
<br><label><input type="checkbox" name="biotic" value="Dogfish">Dogfis
+h</label>
<br><label><input type="checkbox" name="biotic" value="Echinoderm">Ech
+inoderm</label>
<br><label><input type="checkbox" name="biotic" value="Eel">Eel</label
+>
<br><label><input type="checkbox" name="biotic" value="Fish_unident">F
+ish_unident</label>
<br><label><input type="checkbox" name="biotic" value="Flounder">Floun
+der</label>
<br><label><input type="checkbox" name="biotic" value="HermitCrab">Her
+mitCrab</label>
<br><label><input type="checkbox" name="biotic" value="Jellyfish">Jell
+yfish</label>
<br><label><input type="checkbox" name="biotic" value="JonahCrab">Jona
+hCrab</label>
<br><label><input type="checkbox" name="biotic" value="Lobster">Lobste
+r</label>
<br><label><input type="checkbox" name="biotic" value="Mussels">Mussel
+s</label>
<br><label><input type="checkbox" name="biotic" value="OceanPout">Ocea
+nPout</label>
<br><label><input type="checkbox" name="biotic" value="RockCrab">RockC
+rab</label>
<br><label><input type="checkbox" name="biotic" value="SandDollar">San
+dDollar</label>
<br><label><input type="checkbox" name="biotic" value="SeaRobin">SeaRo
+bin</label>
<br><label><input type="checkbox" name="biotic" value="SeaStar">SeaSta
+r</label>
<br><label><input type="checkbox" name="biotic" value="Skate">Skate</l
+abel>
<br><label><input type="checkbox" name="biotic" value="SkateEggCase">S
+kateEggCase</label>
<br><label><input type="checkbox" name="biotic" value="Sponge">Sponge<
+/label>
<br><label><input type="checkbox" name="biotic" value="Urchin_green">U
+rchin_green</label>
<br><label><input type="checkbox" name="biotic" value="Urchin_purple">
+Urchin_purple</label>
<br><label><input type="checkbox" name="biotic" value="WormHoles">Worm
+Holes</label>

    <option selected="selected" value="None"></option>
</select>
</div>
</div>

<div class="dropdown_2">
  <button class="dropbtn" type="button">Bottom Type</button>
  <div class="dropdown-content">
<select name="bottom_type" >
    <!-- constructed options -->
    <br><br><label><input type="checkbox" name="bottom_type" value="Bo
+ulder">Boulder</label>
<br><label><input type="checkbox" name="bottom_type" value="Cobble">Co
+bble</label>
<br><label><input type="checkbox" name="bottom_type" value="Gravel">Gr
+avel</label>
<br><label><input type="checkbox" name="bottom_type" value="Mudstone">
+Mudstone</label>
<br><label><input type="checkbox" name="bottom_type" value="Sand">Sand
+</label>
<br><label><input type="checkbox" name="bottom_type" value="ShellHash"
+>ShellHash</label>
<br><label><input type="checkbox" name="bottom_type" value="ShellHashC
+ourse">ShellHashCourse</label>
<br><label><input type="checkbox" name="bottom_type" value="ShellHashF
+ine">ShellHashFine</label>
<br><label><input type="checkbox" name="bottom_type" value="ShellHashM
+edium">ShellHashMedium</label>
<br><label><input type="checkbox" name="bottom_type" value="Silt">Silt
+</label>
<br><label><input type="checkbox" name="bottom_type" value="SiltySand"
+>SiltySand</label>

    <option selected="selected" value="Sand"></option>
</select>
</div>
</div>

<div class="dropdown_3">
  <button class="dropbtn" type="button">Sediment</button>
  <div class="dropdown-content">
<select name="sediment" >
    <!-- constructed options -->
    <br><br><label><input type="checkbox" name="sediment" value="coars
+e">coarse</label>
<br><label><input type="checkbox" name="sediment" value="fine">fine</l
+abel>
<br><label><input type="checkbox" name="sediment" value="medium">mediu
+m</label>
<br><label><input type="checkbox" name="sediment" value="none">none</l
+abel>

    <option selected="selected" value="None">None</option>
</select>
</div>
</div>

<div class="tb5">
    Notes:
    <input type="text" name="image_notes" value="."/>
</div>

<!--
<div class="percent 
 <label for="percent">Cobble Percent:&nbsp</label><input id="percent" 
+type="number" name="cobble_percent" min="5" max="100" step="10" value
+ ="5"/>
 <br>
 <label for="percent">Sand Percent&nbsp&nbsp&nbsp:&nbsp</label><input 
+id="percent" type="number" name="sand_percent" min="5" max="100" step
+="10" value ="5"/>
 <br>
 <label for="percent">Coarse Shells&nbsp&nbsp:&nbsp</label><input id="
+percent" type="number" name="coarse_shells_percent" min="5" max="100"
+ step="10" value ="5"/>
 </div>
-->
 
<input type="submit" value="Submit"/>

</form>


<div id="bottom">
<strong>--/net/home2/ceb/bmcclint/data/brendan.jpg-- Brendan at Sussex
+</strong>
</div>

</body>
</html>

[download]

In reply to Re^4: photo does not display on HTML page in Linux by Anonymous Monk
in thread photo does not display on HTML page in Linux by Anonymous Monk

Title:
Use:  <p> text here (a paragraph) </p>
and:  <code> code here </code>
to format your post, it's "PerlMonks-approved HTML":


  • Posts are HTML formatted. Put <p> </p> tags around your paragraphs. Put <code> </code> tags around your code and data!
  • Titles consisting of a single word are discouraged, and in most cases are disallowed outright.
  • Read Where should I post X? if you're not absolutely sure you're posting in the right place.
  • Please read these before you post! —
  • Posts may use any of the Perl Monks Approved HTML tags:
    a, abbr, b, big, blockquote, br, caption, center, col, colgroup, dd, del, details, div, dl, dt, em, font, h1, h2, h3, h4, h5, h6, hr, i, ins, li, ol, p, pre, readmore, small, span, spoiler, strike, strong, sub, summary, sup, table, tbody, td, tfoot, th, thead, tr, tt, u, ul, wbr
  • You may need to use entities for some characters, as follows. (Exception: Within code tags, you can put the characters literally.)
            For:     Use:
    & &amp;
    < &lt;
    > &gt;
    [ &#91;
    ] &#93;
  • Link using PerlMonks shortcuts! What shortcuts can I use for linking?
  • See Writeup Formatting Tips and other pages linked from there for more info.