1 reply [Last post]
chevywes
chevywes's picture
Offline
Regular
west coast canada
Last seen: 12 years 11 weeks ago
west coast canada
Timezone: GMT-11
Joined: 2008-07-17
Posts: 32
Points: 0

I had two animated icons at the top of my form, using absolute positioning. I had everything looking good until I used absolute positioning for my label "Title" and my select box(I think this might be the problem). Now my flags are at the bottom of the page and I can't move them up no matter what I try.

In the css file the .t moves the title label and the .ts moves my select box.

The flags are .placeA for the American Flag and .placeC for my Canadian Flag. I can change the "top" position to any number and nothing happens, they stay at the bottom with the other two flags.

Sorry this post is so long, trying to give you as much info as I know how.

Any help would be greatly appreciated.
chevywes

/* CSS for Uniquely Yours Pet Attire Site */
 
/* for paws to go across the page without having the header or the    paragraph 
 
blocking the paw tracks, I took out the background-color from     the body and 
 
the p */
 
 
body { font-family: verdana, helvetica, arial, sans-serif;
       line-height: 125%;
       padding: 15px;
       background: #d6a7f9 url(pawprintsT3.gif) no-repeat bottom right; 
       border: 4px double navy;
       margin: 0; } 
 
h1, h2, h3 { font-family: "Trebucht MS", ariel, helvetica, sans-serif; }
 
h1 { font-size: x-large;
     color: navy;
     padding-top: 2em;
     padding-bottom; .2em;
     padding-left: .4em;
     margin: 0;}
 
/*  this puts the paw print in front of all the ul lists */
/* navigation links area is 135px by 56px */ 
 
ul { list-style-image: url(onepawprint.gif);
     margin: 1em 0 .5em 40px; } 
 
li {font-size: medium; 
    color: navy; }
 
h2, h3 { color: navy;
         font-size: 130%;
         font-weight: normal;
         padding-top: 15px; }
 
p { font-size: medium;
    color: navy; }
 
#tagline p{ font-style: italic;
            font-family: georgia, times, serif;
            background-color: #d6a7f9;
            border-top: 3px solid #800080;
            border-bottom: 3px solid #800080;
            padding-top: .2em;
            padding-bottom; .2em;
            padding-left: .8em;
            margin: 0; }
 
/* the .right below moves the sizes to the right and up into place */
.right { font-weight: bold;
         float: right;
         padding-right: 4em;
         margin: -22px; }
 
a { font-weight: bold;
    }
 
a:link { color: black; }
 
a:visited {color: darkblue; }
 
a:hover { text-decoration: none;
          color: white;
          background-color: navy; }
 
a:active { color: aqua;
           background-color: navy; }
 
form.order fieldset { border: 2px solid navy;
                        padding: 5px; }
 
form.order legend { font-weight: bold;
                      font-size: medium;
                      color: navy;
                      padding: 5px: } 
 
form.order { padding: 0;
             margin: 0;
             margin-top: -15px;
             line-height: 150% }
 
/*form.order label.fixedwidth { display: block;
                              width: 150px;
                              float: left; }*/
 
form.order label { font-wieght: bold;
                   font-size: medium;
                   color: navy;
                   float: left;
                   width: 150px;
                   text-align: left; }
 
form.order input { font-weight: bold;
                   font-size: medium; 
                   color: navy; }
 
form.order .buttonarea input { background-color: navy;
                               color: white;
                               font-size: 14px;
                               font-weight: bold;
                               padding: 5px; }
 
form.order .buttonarea { text-align: center;
                         padding: 1px; }
 
.t { position: absolute;    <!-- moves the "Title" were you want it to be -->
     top:348px;
     left: 125px; }
 
.ts {position: absolute;    <!-- moves the Selection box -->
     top: 353px;
     left: 180px; }
 
.placeA { position: absolute;   <!-- moves the top American flag -->
          top: 345px;
          left: 270px; }
 
.placeC { position: absolute;    <!--  moves the top Canadian flag -->
          top: 345px;
          left: 570px; }
 
.place2A { position: absolute;   <!--  moves the bottom American flag -->
           top: 660px;
           left: 426px; }
 
.place2C { position: absolute;   <!--  moves the bottom Canadian flag  -->
           top: 660px;
           left: 708px; }
 
/* This section deals with the position of items on the screen.
It uses absolute postioning - fixed x and y coordinates measured
from the top-left corner of the browser's content display. */
 
/*#navigation, body, bodycontent {position: absolute; }
 
#navigation { top: 6.09em; }
 
#bodycontent { top: 13.09em; }
 
 */

html code

<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3c.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
 
<script language="javascript" type="text/javascript">
function CheckTheForm() { var result = true;
                          var msg="";
 
    if (document.orderform.fname.value=="") {
        msg+="Please enter First Name! \n";
        result = false; }
 
    if (document.orderform.lname.value=="") {
        msg+="Please enter Last Name! \n";
        result = false; }
 
    if (document.orderform.phone.value=="") {
        msg+="Please enter Phone Number with Area Code! \n";
        result = false; }
 
    if (document.orderform.email.value=="") {
        msg+="Email is Required! \n";
        result = false; }
 
    if (document.orderform.address2.value=="") {
        msg+="Please enter Street Number and/or Name! \n";
        result = false; }
 
    if (document.orderform.address3.value=="") {
        msg+="Please enter City! \n";
        result = false; }
 
    if (document.orderform.state.value=="") {
        msg+="Please enter State! \n";
        result = false; }
 
    if (document.orderform.country.value=="") {
        msg+="Please enter Country! \n";
        result = false; }
 
    if (document.orderform.zip.value=="") {
        msg+="Please enter Zip or Postal Code! \n";
        result = false; }
 
    if(msg==""){
    return result;
    }{ alert(msg)
    return result;
    }
}
</script>
 
 
<head>
 <title> Uniquely Yours Pet Attire </title>
   <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
   <link href="style1.css" rel="stylesheet" type="text/css" /> 
</head>
 
<body>
 <div id="header">
   <div id="sitebranding">
     <h1> Uniquely Yours Pet Attire.Com </h1>
   </div>
   <div id="tagline">
     <p> Personalized pet attire - let's make your pet unique! <span class="right"> XS,  SM,  Med. </span> </p>
   </div>
 </div> <!-- end of header div -->
 
 <div id="navigation">
   <ul>
     <li><a href="index.html"> Home </a> </li>
     <li><a href="about.html"> About Us </a> </li>
     <li><a href="order.html"> Order Form </a> </li>
     <li><a href="contact.html"> Contact Us </a> </li>
   </ul>
 </div> <!--  end of navigation div -->
 
 <div id="bodycontent" 
    <h2 align="center"><strong><em> Order Form </em></strong></h2>
 
<form name="orderform" action="formpay.html" method="post" class="order">
   <fieldset>
       <legend> Uniquely Yours Pet Attire Order Form </legend>
          <div>
            <p align="center"><strong><em> Get Your UNIQUE Pet Attire Here!                      </em></strong></p>
         </div>
          <div>
             <label for="title" class="t"> Title </label>
             <select name="title" class="ts" id="title">
                <option> Select </option>
                <option> Mrs. </option>
                <option> Ms. </option>
                <option> Miss </option>
                <option> Mr. </option>
             </select>
          </div>
           <br />
          <div>
            <label for="fname"> First Name </label>
            <input type="text" name="fname" id="fname" /> 
          </div>
          <div> 
            <label for="minitial"> Middle Initial </label>
            <input type="text" name="minitial" id="minitial" size="1" />
          </div>
          <div>
            <label for="lname" class="fixedwidth"> Last Nane </label>
            <input type="text" name="lname" id="lname" />
          </div>
          <div>
            <label for="phone" class="fixedwidth"> Phone Number</label>
            <input type="text" name="phone" id="phone" />
          </div>
          <div>
            <label for="email" class="fixedwidth"> Email Address </label>
            <input type="text" name="email" id="email" size="40"/>
          </div>
          <div>
            <label for="address1" class="fixedwidth"> Apartment </label>
            <input type="text" name="address1" id="address1"/>
          </div>
          <div>
            <label for="address2" class="fixedwidth"> Street </label>
            <input type="text" name="address2" id="address2"/>
          </div>
          <div>
            <label for="address3" class="fixedwidth"> City </label>
            <input type="text" name="address3" id="address3"/>
          </div>
          <div>
            <label for="state" class="fixedwidth"> State/Prov.</label>
            <input type="text" name="state" id="state" size="2"/>
          </div>
          <div>
            <label for="country" class="fixedwidth"> Country </label>
            <input type="text" name="country" id="country"/>
          </div>
          <div>
            <label for="zip" class="fixedwidth"> Zip/Postal Code </label>
            <input type="text" name="zip" id="zip" size="6"/>
          </div> 
          <p><img src="images/Americanflag.gif" class="placeA" width="40"                        height="25" alt="American flag flying" /><img                                     src="images/canadianflag.gif" class="placeC" width="40"                           height="25" alt="Canadian flag flying" /></p>
          <div class="buttonarea">
             <input type="submit" name="Submit" value="Submit Order"                                        onclick="return CheckTheForm();" />
             <input type="reset" name="Reset" value="Reset" />
          </div>
          <p><img src="images/Americanflag.gif" class="place2A" width="40"                          height="25" alt="American flag flying" />
             <img src="images/canadianflag.gif" class="place2C" width="40"                          height="25" alt="Canadian flag flying" /></p>
 
          <a href="http://www.patrioticon.org">PatriotIcon.org</a>
          <a href="http://www.3dflags.com">3D Animated Flags--By 3DFlags.com</a>            
   </fieldset>
</form>
 
</div> <!-- end of bodycontent div -->
</body>
</html>

chevywes
chevywes's picture
Offline
Regular
west coast canada
Last seen: 12 years 11 weeks ago
west coast canada
Timezone: GMT-11
Joined: 2008-07-17
Posts: 32
Points: 0

positioning my images

Sorry to bother any one.

Got it all working.

Had HTML comments instead of css comments.

The sun is shining again.
chevywes