...

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



jeddi
10-24-2009, 05: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, 09: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, 11:53 AM
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, 01: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..



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum