2 replies [Last post]
12many
12many's picture
Offline
newbie
Last seen: 9 years 47 weeks ago
Joined: 2013-03-15
Posts: 2
Points: 3

Hi there

I have a form that i am putting together in HTML. The for has two labels, two text boxes, two images and a button.

What i would like to be able to do is display the text boxes side by side (horizontally) but with the labels above the text box and the Image to the right of the text box and the button to the right of all of it
but effectively all the inputs should line up in one big line.

<form class="tripcontrols">
	<p class="trips">
		<label class="tripdate" for="from">Enter Date to start from</label> <input class="tripdate" disabled="disabled" class="short" type="text" name="from" id="from"/>
		<img width="25" height="25" src="javascripts/dtp/images2/cal.gif" onclick="NewCssCal('from','dddmmyyyy')" style="cursor:pointer"/>
		<label class="tripdate" for="to">Enter Date to End</label><input class="tripdate" disabled="disabled" class="short" type="text" name="to" id="to"/>
		<img width="25" height="25" src="javascripts/dtp/images2/cal.gif" onclick="NewCssCal('to','dddmmyyyy')" style="cursor:pointer"/>
		<input id="gettrips" name="gettrips" type="button" onclick="gettrips()" value="Get Trips">
	</p>
	</form>

this is the code for my form. Im afraid that all my css attempts at achieving this have failed.
Im pretty sure that i want to be changing the the display and float but every thing that i have tried have put the labels on the left of the text box and not the right.

Ian

12many
12many's picture
Offline
newbie
Last seen: 9 years 47 weeks ago
Joined: 2013-03-15
Posts: 2
Points: 3

#tripcontrols

#tripcontrols input
{
	display: block;
	width: 10em;
}
#tripcontrols fieldset
{
	display: block;
	margin: 0 0 3em 0;
	padding: 0 1em 1em 1em;
}
#tripcontrols label
{
	float: left;
	margin: 1em 1em 0 0;
}
#tripcontrols img.image
{
	display: block;
	clear: both;
	float: right;
}

With this CSS Code i have managed to get the labels and the textboxes as i want them. But now the image is positioned underneath the text box to the right not to the right of the text box

Ian

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 1 year 48 weeks ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

Oops!

None of the css will be applied; there is no id=tripcontrols.

Here is my take on the issue:

<!DOCTYPE html>
<html>
  <head>
    <meta content="text/html; charset=utf-8"
          http-equiv="Content-Type" />
 
    <title>test doc</title>
 
    <!-- hack for bug in Web Developer addon for Firefox.  Used for
	 development and debugging only-->
    <link rel="stylesheet"
	  type="text/css" href="x" />
 
    <style type="text/css">
 
      #tripcontrols p {
        float: left;
        margin: 1em;
        padding-top: 1px;
        }
 
      #tripcontrols input {
	width: 10em;
        }
 
      #tripcontrols input[type=button] {
        margin-top: 1.5em;
        }
 
      #tripcontrols fieldset {}
 
      #tripcontrols label {}
 
      #tripcontrols img {
        cursor: pointer;
        }
 
    </style>
  </head>
 
  <body>
    <form id="tripcontrols">
      <fieldset class="trips">
	<p>
	  <label class="tripdate" 
		 for="from">Enter Date to start from <br />
	    <input class="tripdate" 
		   disabled="disabled" <!-- Huh? --> 
		   class="short" 
		   type="text" 
		   name="from" 
		   id="from"/>
	  </label>
 
	  <img width="25" 
	       height="25" 
	       src="javascripts/dtp/images2/cal.gif" 
	       onclick="NewCssCal('from','dddmmyyyy')" 
	       alt="✔" />
	</p>
 
	<p>
	  <label class="tripdate" 
		 for="to">Enter Date to End <br />
	    <input class="tripdate" 
		   disabled="disabled" <!-- What is the point if you
					    cannot give it focus? -->
		   class="short" 
		   type="text" 
		   name="to" 
		   id="to"/>
	  </label>
 
	  <img width="25" 
	       height="25" 
	       src="javascripts/dtp/images2/cal.gif" 
	       onclick="NewCssCal('to','dddmmyyyy')" 
	       alt="✔" />
	</p>
 
	<p>
	  <input id="gettrips" 
		 name="gettrips" 
		 type="button" 
		 onclick="gettrips()" 
		 value="Get Trips">
	</p>
      </fieldset>
    </form>
  </body>
</html>

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.