Hi
Im looking to ad an image to the right side of my form or on the page its self, it is an html image here is the url for the form http://nichedeliverysystem.com/post-new-ad/ on the test server. the image is 400w by 800l.
do i have to ad this to the form or can we do this with css? im trying with css with 0 luck please help!!!! ether way please share the solution thanks!!
I wouldn't think you would have to attach the image to the actual form. Can't you place it outside the form. So the form can be in a div that is floated left and then the image can be in a div that is floated right?
you would think width of the page is 900px; so there is 489px; room for the form. Can i just attach it in the form somehow ? or is css the best guess?
If you attach it to the form, you will need to place it via CSS as a background image on the main container and then position it to where you want it show up.
If you want it in a field, you can use the HTML field, and place your img src in there and then try to position that field via CSS.
So you have 3 options in total.
Hi
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!///??
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 http://nichedeliverysystem.com/post-new-ad/
ps so tired cant spell lol
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!!!!!!!
Header and footer are included in custom temp.
http://nichedeliverysystem.com/post-new-ad/
<!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">
<!--======================== BEGIN COPYING THE HTML HERE ==========================-->
<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>
<!--========================= STOP COPYING THE HTML HERE =========================-->
</div><!-- post-instructions1 -->
</div><!-- #content -->
</div><!-- #primary -->
</body>
<?php get_footer(); ?>please check the page source and let me know what the heck im over it!!!!!!
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.
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.
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;
}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. "
full like im retarded please lol
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.
question
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
<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. ?>so the other stuff like the page title and all un needed is not called ?
same issue on page 2 with the preview fyi
Any idea?
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 http://nichedeliverysystem.com/post-new-ad/ if after site is done http://www.adszoom.com/post-new-ad/
<!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">
<!--======================== BEGIN COPYING THE HTML HERE ==========================-->
<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>
<!--========================= STOP COPYING THE HTML HERE =========================-->
</div><!-- post-instructions1 -->
<?php while ( have_posts() ) : the_post(); ?>
<?php get_template_part( 'content', 'page' ); ?>
<?php endwhile; // end of the loop. ?>
</div><!-- #content -->
</div><!-- #primary -->
</body>
<?php get_footer(); ?>css page
/* 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;
}( please excuse all the font-family:Georgia, "Times New Roman", Times, serif; )
for some reason this is the only way all browsers would change from serif as chose 1 lol
Awesome man, glad you got it working.