Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    Senior Coder
    Join Date
    May 2006
    Posts
    1,673
    Thanks
    28
    Thanked 4 Times in 4 Posts

    How do I align these form elements?

    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

    Here is the code for this part of the form.

    PHP Code:
    <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 ?

  • #2
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,955
    Thanks
    9
    Thanked 726 Times in 720 Posts
    First I'd wrap your categories (First Sort Option, Second Sort Option) in <label> tags, then make your relevant css something like:

    Code:
    .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.

  • #3
    Senior Coder
    Join Date
    May 2006
    Posts
    1,673
    Thanks
    28
    Thanked 4 Times in 4 Posts
    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 but perhaps that big box button is too big?

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

  • #4
    met
    met is offline
    Regular Coder
    Join Date
    Oct 2009
    Location
    United Kingdom
    Posts
    728
    Thanks
    4
    Thanked 119 Times in 119 Posts
    Code:
    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..
    Last edited by met; 10-24-2009 at 02:08 PM.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •