PDA

View Full Version : How do I align these form elements?



jeddi
10-24-2009, 06:49 AM
Hi,

I have an input form for a new clickbank tool
and I want the top 4 input headings and selection boxes to virtıcally align together.

The widest one is Category, and I would like to make the other
headings the same width as that so that they all look nicer.

I tried to put in a width statement on the Recurr heading ,
but it did not effect it.

Here is the lin so that you can see what I mean.

Clickbank Super Analyzer (http://www.expert-world.com/sys/cb_search.php)

Here is the code for this part of the form.


<div class="input_fm">
<form name="main_fm" action ='cb_search.php' method = 'POST'>
<span><input type='hidden' name = 'search' value = 'yes' ></span>

<span class="form_top1" >First sort option:
<select name="x_sort1">
<?php
foreach($sort1 as $field => $value){
if ($N_sort1 == $field){
echo "<option value = {$field} selected= \"selected\" >$value&nbsp;&nbsp;</option>";
}// endif
else {
echo "<option value = {$field}>$value&nbsp;&nbsp;</option>";
}// end else
}// end for loop
?>
</select>
</span>
<br><br>

<span class="form_top1">Second sort option:
<select name="x_sort2">
<?php
foreach($sort1 as $field => $value){
if ($N_sort2 == $field){
echo "<option value = {$field} selected= \"selected\" >$value&nbsp;&nbsp;</option>";
}// endif
else {
echo "<option value = {$field}>$value&nbsp;&nbsp;</option>";
}// end else
}// end for loop
?>
</select>
</span>
<br><br>

<span class="form_top1" >Category:
<select name="x_cat">
<?php
foreach($cat as $field => $value){
if ($N_cat == $field){
echo "<option value = {$field} selected= \"selected\" >$value&nbsp;&nbsp;</option>";
}// endif
else {
echo "<option value = {$field}>$value&nbsp;&nbsp;</option>";
}// end else
}// end for loop
?>
</select>
</span>
<br><br>

<span class="form_top1"> <span style="width:200px;">Recurr:</span>
<select name="x_recurr">
<?php
foreach($recurr as $field => $value){
if ($N_recurr == $field){
echo "<option value = {$field} selected= \"selected\" >$value&nbsp;&nbsp;</option>";
}// endif
else {
echo "<option value = {$field}>$value&nbsp;&nbsp;</option>";
}// end else
}// end for loop
?>
</select>
</span>
<br><br>


How can I get the form to line up better ?

SB65
10-24-2009, 10:27 AM
First I'd wrap your categories (First Sort Option, Second Sort Option) in <label> tags, then make your relevant css something like:


.form_top1 label{
float:left;
width:250px;
}

.form_top1 select{
font-size:18px;
width:200px
}

Oh, and take out that inline styling on the Recurr category.

jeddi
10-24-2009, 12:53 PM
Thanks,
it looks better now.

May be I need to make the submit button stand out more
it looka bit small.

I have a large button on this page
called website-traffic (http://www.expert-world.com/website-traffic.htm) but perhaps that big box button is too big?

how can I make the button I have just a bit more eye-catching?

met
10-24-2009, 02:58 PM
input .submit-button {
/*remove .submit-button if you want to apply this to EVERY input (txt box, buttons .. */
border:1px solid #282828;
background:#f7f7f7;
font-size:10px;
font-family:Arial, Helvetica, sans-serif;
font-weight:bold;

}
/* remove class="submit-button" if you want the style for every button */
<input class="submit-button" type="submit" name="Submit" value="Submit" />



use that if you just want to style the submit button, otherwise hte css is applied to text boxes etc (type input).

play around with the settings..