SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    SitePoint Enthusiast
    Join Date
    Aug 2006
    Posts
    79
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Problem with positioning my contact form.

    Hi,

    I am trying to position my Contact form under the Map but to the left of
    the "Related Posts" box.

    This is how it looks now:




    And this is the live site: london-2-bedroom-flat

    This is the code :

    PHP Code:
    if ($map == "y") {
    echo 
    "<figure class=\"right_fig\">
                <div id=\"map_canvas\" style=\"width:100%;height:400px;\"></div>
                <div id=\"getdirections\">
                    <ul class=\"directions\">
                    <li class=\"smallfield\"><span class=\"name\">Start Location</span><input  type=\"text\" id=\"EZMBFromLocation\" name=\"EZMBFromLocation\"/></li>
                    </ul>
                    <ul class=\"directions\">
                    <li class=\"button\"><input name=\"GetDirections\" id=\"GetDirections\" onclick=\"getDirections()\" type=\"submit\" value=\"Get Directions\" /></li>
                    </ul>
                    </div>
                    <div  class=\"directions\" id=\"map_directions_panel\" ></div>
                    
                    </figure>"
    ;
            } 
    // end if

            
    if ($cont == "y") {
            echo 
    "
            <figure class=\"right_fig\" style=\"width:300px;\">
                <form style=\"margin:10px auto; text-align:center;\" name='regis' action=\"http://combld.com/au_contact.php\" method='POST'>
                <input type='hidden' name='t5a6lk' value='9y6es' >
                <input type='hidden' name='x_page_id' value=\"
    $page_id\" >
                <div class='art_title'>
                    <label><b>Contact Form<br><br></b></label>
                    <label>Subject:&nbsp;</label>
                    <input class='data1' type='text' name='x_mes_head' size='25' value = '' >
                    </div>
                <div class='art_title'>
                    <label>Name:&nbsp;&nbsp;&nbsp;</label>
                    <input class='data1' type='text' name='x_contact' size='25' value = '' >
                    </div>
                <div class='art_title'>
                    <label>Email:&nbsp;&nbsp;&nbsp;&nbsp;</label>
                    <input class='data1' type='text' name='x_email' size='25' value = '' >
                    </div>
                <div class='art_title'>
                    <label><b><br>Your Message</b></label>
                    <textarea id='sug_body' class='data1' rows='12' cols='30' name='x_mess'>
    $cont_mes</textarea>
                    </div>
                <div class='art_title'>
                    <label><b><br>Verification Image</b></label>
                    <span><img style = \"width:260px; height:150px; border:solid darkblue 1px;\" src=\"http://combld.com/sys_images/check1.jpg\"></span>
                    </div>
                    <div class='art_title'>
                    <label>How many heads ?:&nbsp;</label>
                    <input class='data1' type='text' name='x_check' size='25' value = '' >
                    </div>
                <div style='margin:20px auto;'>
                    <input type='submit' value='SEND MESSAGE NOW'>
                    </div>
              </form>
            </figure>"
    ;
            } 
    // end if 

    This is the CSS for the box:

    Code:
    figure.right_fig{
    	display:block;
    	float:right; 
    	width:420px;
    	margin:10px;
    	border: solid black 2px;
    	}
    Of course source code will show all CSS.

    Actually, I noticed that if I leave the width as 420px then the box goes into the
    position that I want, but really I would like the width to be 300px.

    Problem is - forcing it to slide down under the Map - but still to the left of the
    "Related Posts" box.

    PS - please view page with Chrome - doesn't work in IE yet

    Any help much appreciated

    Thanks.


    .

  2. #2
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,519
    Mentioned
    61 Post(s)
    Tagged
    2 Thread(s)
    Add the property in blue:

    <figure class="right_fig" style="width: 300px; clear: right;">



    FYI: your HTML contains 102 errors. It's hard to take a page with so may errors seriously.
    Highly recommended: http://validator.w3.org/

  3. #3
    SitePoint Enthusiast
    Join Date
    Aug 2006
    Posts
    79
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi,

    Thanks for your reply.

    How did you see those 102 errors ?

    When I try the validator ( validator.w3.org ) I just get a parse error and 3 errors listed .

    I really want to clean up the page,
    but can not seem to see what you are seeing - how come ?

    PS - YOU A ARE HERO !
    I JUST MADE THAT Clear right change, and it did the job
    Thanks.


    .

  4. #4
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,519
    Mentioned
    61 Post(s)
    Tagged
    2 Thread(s)
    If validated by URL, the validator does not recognize your file as an HTML5 doctype because this line
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    is too far from the beginning of the document.
    (The meta description is too long. Either put the tag with the charset above the tag with the description, or reduce the length of the description considerably.

    The page is also missing the opening <html> tag.

    The code for this page is extremely poorly written. <br> tags throughout instead of <p> tags for new paragraphs. The <big> tag is obsolete. There are numerous opening tags without corresponding closing tags. The code needs a major overhaul, IMO. The validator will help, but understanding how to write good code would be the greatest help of all. If you use a PC, and if you use the Firefox browser, you can install the Firebug plugin. The descriptions of the errors given by Firebug are clearer than those given by the W3C validator. Other browsers have similar tools, but I am not familiar with them.

    Good luck.

  5. #5
    SitePoint Enthusiast
    Join Date
    Aug 2006
    Posts
    79
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ok

    Thanks for pointing out the error.

    I will address those issues and try again

    BTW
    I did have the tag in before, but took it
    out following this advice:

    It's just just supposed to be:

    <!DOCTYPE html>

    with the html being lower case, and you don't need to put an <html> tag under it.
    ( From a rival forum !!! )


    Thanks again.


    .

  6. #6
    SitePoint Enthusiast
    Join Date
    Aug 2006
    Posts
    79
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    WOW !!!


    Done it - validated

    .

  7. #7
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,519
    Mentioned
    61 Post(s)
    Tagged
    2 Thread(s)
    Very nicely done

    If you are so inclined, I'd recommend studying up on text styling... using <p>aragraph tags instead of <br>eak tags. There are several reasons why <p> tags make more sense than <br> tags including accessibility and ease of styling.

    It's a bit of "work" at first as you begin to consider margins and padding, but the payoff in the long run will be vastly improved control over your styles.

    Best of luck to you.


Bookmarks

Posting Permissions

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