Gravity Support Forums Topic: adding html image to right side of form

Gravity Support Forums Topic: adding html image to right side of form https://legacy.forums.gravityhelp.com/topic/adding-html-image-to-right-side-of-form Gravity Support Forums Topic: adding html image to right side of form en-US Mon, 20 Apr 2026 04:53:52 +0000 http://bbpress.org/?v=1.0.1 <![CDATA[Search]]> q https://legacy.forums.gravityhelp.com/search.php Rob Harrell on "adding html image to right side of form" https://legacy.forums.gravityhelp.com/topic/adding-html-image-to-right-side-of-form#post-62150 Mon, 11 Jun 2012 15:01:54 +0000 Rob Harrell 62150@https://legacy.forums.gravityhelp.com/ <p>Awesome man, glad you got it working. </p> scott@adszoom.com on "adding html image to right side of form" https://legacy.forums.gravityhelp.com/topic/adding-html-image-to-right-side-of-form#post-62149 Mon, 11 Jun 2012 14:59:12 +0000 scott@adszoom.com 62149@https://legacy.forums.gravityhelp.com/ <p>Ok the issue is solved to much to explain but here is the solution if you want to put an image next to the form and have the form rap around the image this is the page structure and the css notice the bottom fields wrap around the form also this works in all browsers including iphone/pad also ie 6,7,8,9 <a href="http://nichedeliverysystem.com/post-new-ad/" rel="nofollow">http://nichedeliverysystem.com/post-new-ad/</a> if after site is done <a href="http://www.adszoom.com/post-new-ad/" rel="nofollow">http://www.adszoom.com/post-new-ad/</a></p> <pre><code><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <?php /* Template Name: post new ad */ ?> <?php get_header(); ?> <title>Post new classified ads</title> </head> <div class="searchpagebox"> <body> <div id="container"> <div id="content" role="main"> <div class="post-instructions1">  <img name="readbeforeyoupost2" src="/wp-content/themes/adszoom/images/readbeforeyoupost2.gif" width="400" height="800" border="0" usemap="#m_readbeforeyoupost2" alt="" /> <map name="m_readbeforeyoupost2"> <area shape="rect" coords="191,125,226,141" href="http://nichedeliverysystem.com/keywords-tool-help-page/" target="_blank" title="keywords tool help" alt="keywords tool help" /> </map>  </div> <?php while ( have_posts() ) : the_post(); ?> <?php get_template_part( 'content', 'page' ); ?> <?php endwhile; // end of the loop. ?> </div> </div> </body> <?php get_footer(); ?></code></pre> <p>css page </p> <pre><code>/* post-instructions */ .post-instructions1{ position:absolute; float:left; height:800px; margin-left:420px; padding-bottom:10px; padding-top:10px; } /* posts new ads page */ .gform_wrapper .ginput_complex .ginput_full input { font-family:Georgia, "Times New Roman", Times, serif; width: 98% !important; } forms....1.6.4.5 (line 554) .gform_wrapper .top_label input.medium { font-family:Georgia, "Times New Roman", Times, serif; padding-right: 2px; } forms....1.6.4.5 (line 304) .gform_wrapper .top_label input.medium, .gform_wrapper .top_label select.medium { font-family:Georgia, "Times New Roman", Times, serif; width: 47%; } forms....1.6.4.5 (line 300) .gform_wrapper .ginput_complex input, .gform_wrapper .ginput_complex select { font-family:Georgia, "Times New Roman", Times, serif; width: 95% !important; } forms....1.6.4.5 (line 233) body, input, textarea { color: #373737; font: 300 15px/1.625 Georgia,"Times New Roman", Times, serif; } .gform_wrapper form { width:475px; float: left; margin-left:-60px; } .gform_page { width:475px; float: left; } .gform_wrapper .top_label .gfield_label { font-family:Georgia, "Times New Roman", Times, serif; clear: both; display: inline-block; font-weight: bold; line-height: 1.3em; margin: 10px 0 4px; } .gform_wrapper .description, .gform_wrapper .gfield_description, .gform_wrapper .gsection_description, .gform_wrapper .instruction { clear: both; font-family:Georgia, "Times New Roman", Times, serif; font-size: 0.85em; letter-spacing: normal; line-height: 1.5em; } .gform_wrapper .gfield_description { font-family:Georgia, "Times New Roman", Times, serif; padding: 10px 0 0; width: 99.8%; } .singular.page .hentry { width:400px; padding: 3.5em 0 0; } .ginput_container{ font-family:Georgia, "Times New Roman", Times, serif; width:800px; } .ginput_full { font-family:Georgia, "Times New Roman", Times, serif; display: block; width:475px; overflow: hidden; } .gform_wrapper li.gfield.gfield_error.gfield_contains_required { /* controls the error width ad width to change */ font-family:Georgia, "Times New Roman", Times, serif; margin-bottom: 12px !important; margin-top: 12px; } .gform_wrapper .ginput_complex .ginput_left, .gform_wrapper .ginput_complex .ginput_right, .gform_wrapper .ginput_complex .ginput_full { font-family:Georgia, "Times New Roman", Times, serif; display: block; min-height: 43px; overflow: hidden; } /* logged in edit bitton */ .singular .entry-meta .edit-link a { font-family:Georgia, "Times New Roman", Times, serif; margin:-22px; bottom: auto; left: 50px; position: absolute; right: auto; top: 80px; } .entry-meta .edit-link a, .commentlist .edit-link a { margin:10px; background: none repeat scroll 0 0 #CCC; border-radius: 3px 3px 3px 3px; font-family:Georgia, "Times New Roman", Times, serif; color: #000099; float: right; font-size: 12px; font-weight: 300; line-height: 1.5em; padding: 0 8px; text-decoration: none; } .edit-link a:hover{ color: #FFF; background:#999; }</code></pre> <p>( please excuse all the font-family:Georgia, "Times New Roman", Times, serif; )</p> <p>for some reason this is the only way all browsers would change from serif as chose 1 lol </p> scott@adszoom.com on "adding html image to right side of form" https://legacy.forums.gravityhelp.com/topic/adding-html-image-to-right-side-of-form#post-62093 Mon, 11 Jun 2012 09:39:03 +0000 scott@adszoom.com 62093@https://legacy.forums.gravityhelp.com/ <p>Any idea? </p> scott@adszoom.com on "adding html image to right side of form" https://legacy.forums.gravityhelp.com/topic/adding-html-image-to-right-side-of-form#post-61957 Fri, 08 Jun 2012 15:27:35 +0000 scott@adszoom.com 61957@https://legacy.forums.gravityhelp.com/ <p>same issue on page 2 with the preview fyi </p> scott@adszoom.com on "adding html image to right side of form" https://legacy.forums.gravityhelp.com/topic/adding-html-image-to-right-side-of-form#post-61956 Fri, 08 Jun 2012 15:24:48 +0000 scott@adszoom.com 61956@https://legacy.forums.gravityhelp.com/ <p>so the other stuff like the page title and all un needed is not called ? </p> scott@adszoom.com on "adding html image to right side of form" https://legacy.forums.gravityhelp.com/topic/adding-html-image-to-right-side-of-form#post-61955 Fri, 08 Jun 2012 15:22:26 +0000 scott@adszoom.com 61955@https://legacy.forums.gravityhelp.com/ <p>please do you have an example of the "Or you will need to place this via CSS to the #gform_wrapper_3 div and position the background image accordingly to where you want it show. " </p> <p>full like im retarded please lol </p> <p>see the issue is if i did what you said with the css it then puts the form at the bottom of the page with " clear " or not, because of the " edit " wile logged in and post page title div, it spans the full length of the image so therefore it dose not work and the form is then under at the bottom. </p> <p>question<br /> what can i use as a min. to get the form to render on the cust temp? im using this now is there something that i can use to just render the form replacing </p> <pre><code><div id="container"> <div id="content" role="main"> <?php while ( have_posts() ) : the_post(); ?> <?php get_template_part( 'content', 'page' ); ?> <?php endwhile; // end of the loop. ?></code></pre> scott@adszoom.com on "adding html image to right side of form" https://legacy.forums.gravityhelp.com/topic/adding-html-image-to-right-side-of-form#post-61954 Fri, 08 Jun 2012 15:16:16 +0000 scott@adszoom.com 61954@https://legacy.forums.gravityhelp.com/ <pre><code>css /* posts new ads page */ .gform_wrapper form { width:475px; float: left; margin-left:-60px; } .gform_page { width:475px; float: left; } /* post-instructions */ .post-instructions1{ float:right; height:800px; margin-right:-68px; margin-top:-2050px; } .singular.page .hentry { width:400px; padding: 3.5em 0 0; } .ginput_container{ width:800px; } .ginput_full { display: block; width:475px; overflow: hidden; } .gform_wrapper li.gfield.gfield_error.gfield_contains_required { /* controls the error width ad width to change */ margin-bottom: 12px !important; margin-top: 12px; } .gform_wrapper .ginput_complex .ginput_left, .gform_wrapper .ginput_complex .ginput_right, .gform_wrapper .ginput_complex .ginput_full { display: block; min-height: 43px; overflow: hidden; } /* logged in edit bitton */ .singular .entry-meta .edit-link a { margin:-22px; bottom: auto; left: 50px; position: absolute; right: auto; top: 80px; } .entry-meta .edit-link a, .commentlist .edit-link a { margin:10px; background: none repeat scroll 0 0 #CCC; border-radius: 3px 3px 3px 3px; font-family:Georgia, "Times New Roman", Times, serif; color: #000099; float: right; font-size: 12px; font-weight: 300; line-height: 1.5em; padding: 0 8px; text-decoration: none; } .edit-link a:hover{ color: #FFF; background:#999; }</code></pre> Rob Harrell on "adding html image to right side of form" https://legacy.forums.gravityhelp.com/topic/adding-html-image-to-right-side-of-form#post-61952 Fri, 08 Jun 2012 15:08:46 +0000 Rob Harrell 61952@https://legacy.forums.gravityhelp.com/ <p>Instead of using negative margins on your .post-instructions1 class, you should float the form's parent div left and assign a width to it. Then place your .post-instructions1 div immediately after that, float it right (as you are doing) and assign a width. Then clear them both in the following div. This is going to be the most bulletproof way to do the columning, unless you regress back to using a two column table.</p> <p>Or you will need to place this via CSS to the #gform_wrapper_3 div and position the background image accordingly to where you want it show. </p> scott@adszoom.com on "adding html image to right side of form" https://legacy.forums.gravityhelp.com/topic/adding-html-image-to-right-side-of-form#post-61951 Fri, 08 Jun 2012 15:02:08 +0000 scott@adszoom.com 61951@https://legacy.forums.gravityhelp.com/ <p>ok got this up and running the only issue now is i cant get the image to stay at the top right if there is an error ( info not submitted in form ) it floats down to the center of the screen im shore its a css issue can someone help ? just cant get this image to stay put!!!!!!! </p> <p>Header and footer are included in custom temp. </p> <p><a href="http://nichedeliverysystem.com/post-new-ad/" rel="nofollow">http://nichedeliverysystem.com/post-new-ad/</a></p> <pre><code><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <?php /* Template Name: post new ad */ ?> <?php get_header(); ?> <title>Post new classified ads</title> </head> <div class="searchpagebox"> <body> <div id="container"> <div id="content" role="main"> <?php while ( have_posts() ) : the_post(); ?> <?php get_template_part( 'content', 'page' ); ?> <?php endwhile; // end of the loop. ?> <div class="post-instructions1">  <img name="readbeforeyoupost2" src="/wp-content/themes/adszoom/images/readbeforeyoupost2.gif" width="400" height="800" border="0" usemap="#m_readbeforeyoupost2" alt="" /> <map name="m_readbeforeyoupost2"> <area shape="rect" coords="191,125,226,141" href="http://nichedeliverysystem.com/keywords-tool-help-page/" target="_blank" title="keywords tool help" alt="keywords tool help" /> </map>  </div> </div> </div> </body> <?php get_footer(); ?></code></pre> <p>please check the page source and let me know what the heck im over it!!!!!! </p> scott@adszoom.com on "adding html image to right side of form" https://legacy.forums.gravityhelp.com/topic/adding-html-image-to-right-side-of-form#post-61870 Thu, 07 Jun 2012 19:58:42 +0000 scott@adszoom.com 61870@https://legacy.forums.gravityhelp.com/ <p>Hi </p> <p>Ya so have this half solved via css just having an issue with ie7 of cores lol works in all browsers with form but!!! can not click link in image if i don't use <header id="branding" role="banner"> it is not click-able in any browser but ie with out!///??<br /> so if i do use this the image dispersers in ie7 not shore why i think it is put behind something please check page source if you can and give me a pointer or 2, missing something gonna look at this am with fresh eyes <a href="http://nichedeliverysystem.com/post-new-ad/" rel="nofollow">http://nichedeliverysystem.com/post-new-ad/</a><br /> ps so tired cant spell lol </p>