Solved

CSS Styling question-- simple, hopefully

Posted on 2011-02-22
13
1,792 Views
Last Modified: 2012-06-21
I am so glad EE is still around! Just signed up again after a 10 year absence. Terrific!

Anyway, I am using a plug-in called Gravity Forms for WP.

Gravity forms has style elements here:
http://www.rocketgenius.com/gravity-forms-css-targeting-specific-elements/
But I don't think you'll need to visit the link in order to answer this question. But maybe...

My form is here, temporarily: http://highlifegourmet.com

I have to insert CSS into the WP theme's stylesheet. I can do things for all forms, or I can style forms specifically. I need to style form 1, so here is the code:

body #gform_wrapper_1
      {       
            width:650px;
            height:300px;
            background-image: url(http://highlifegourmet.com/images/mortgage_application.jpg);
      }

/*--------------------- do not display the field label ------------------*/
body #gform_wrapper_1 .gform_body .gform_fields .gfield .gfield_label
{
 display:none;
}



/*----------- form field for form #1------------*/

body #gform_wrapper_1 .gform_body .gform_fields .gfield input[type=text]
      
      {
      font-size:18px;
      width:158px;
      background:green;
      border:5px solid red;
      position:relative;
/*----------
top:100px;
left:100px; -------------*/
      }



/*----submit image----*/
body #gform_wrapper_1 .gform_footer input[type=image]

      {      
            position:relative;             
            top:110px;
            left:495px;
             }

All I want is for the submit button (apply now image) to appear next to the field and I want the field to appear in the white space to the left of the button.

I think I am correct with positioning the button, right?

However, as soon as I add left and right positions for the form field, it disappears. That's why I have it green with a red border right now. I wanted to make sure I could see it! But it's gone as soon as I try and position.

Thank you in advance.
0
Comment
Question by:mikegeorge2
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 5
  • 5
13 Comments
 
LVL 14

Expert Comment

by:Designbyonyx
ID: 34952320
Try adding the following style:

#gform_wrapper_1 {
    position: relative;
}
0
 

Author Comment

by:mikegeorge2
ID: 34952402
Thanks. I tried that, but the input box disappeared as soon as I tried to use left and top again.

Just for the heck of it, I changed the positioning of the input box to "absolute". If you visit http://www.highlifegourmet.com right now, you can see that the input field is showing.

I know "absolute" isn't correct, but if it's positioning is relative, it seems to disappear every time.
0
 
LVL 6

Expert Comment

by:blueghozt
ID: 34952748
absolute sounds correct to me, as long as the container is set to relative then absolute will allow you to position according to pixel co-ordinates relative to this container - relative means it is within the code flow - absolute means it doesn't matter where it is in the code flow, as long as it's within the container it will obey the top/left co-ordinates
0
Why Off-Site Backups Are The Only Way To Go

You are probably backing up your data—but how and where? Ransomware is on the rise and there are variants that specifically target backups. Read on to discover why off-site is the way to go.

 

Author Comment

by:mikegeorge2
ID: 34952849
Okay. I tried something, maybe this will give a clue.

I changed the text input field positioning to this:

body #gform_wrapper_1 .gform_body .gform_fields .gfield input[type=text]
      
      {
      font-size:18px;
      width:158px;
      background:green;
      border:5px solid red;
      position:relative;
        top:10px;
        left:150px;
      }

If you look at the page, you can see that the red border of the text box is gone on the bottom. So something is causing it to disappear once it goes any lower than 10 - 25 pixels from the top of the form. Should I just post the entire stylesheet?
0
 
LVL 14

Expert Comment

by:Designbyonyx
ID: 34953172
Absolute positioning should work, and is actually preferable IMO so long as you use the style I gave you above.  Think about it this way... you want to position the input at about these coordinates RELATIVE TO gform_wrapper_1:

(324, 185)

So you would need to use the following style on your input box:

left: 324px;
top: 185px;

Open in new window


The important thing is the style I gave you above.  Whenever you position something with absolute positioning, you must have a reference point.  In this case, the gform_wrapper_1 becomes the reference point on which the input will position itself.  If the wrapper is not positioned (position: relative), then the reference point would become the BODY tag... or the upper left hand corner of the page.  Hope that helps.

0
 
LVL 14

Accepted Solution

by:
Designbyonyx earned 500 total points
ID: 34953197
Here is the magic combination you need to have:

#gform_wrapper_1 {
    position: relative;
}

body #gform_wrapper_1 .gform_body .gform_fields .gfield input[type=text]  {
    position: absolute;
    top: 185px;
    left: 324px;
}

Open in new window

0
 

Author Comment

by:mikegeorge2
ID: 34953692
Kick ass! Thank you. So... that moved my button around. Does that mean I should reposition by button using absolute also? I realize the answer is most likely "yes," but I just want to be sure. Thanks!!!
0
 
LVL 14

Expert Comment

by:Designbyonyx
ID: 34954448
Yup, I would.  And I would suggest you do a quick positioning tutorial to gain a better understanding of how positioning works.

Cheers.
0
 

Author Closing Comment

by:mikegeorge2
ID: 34955279
Thank you!
0
 
LVL 14

Expert Comment

by:Designbyonyx
ID: 34955476
Glad to help.  Also, having been guilty and scrutinized of this in the past I now pass on this bit of "rulery" to others... the admins here at EE ask that we tame our language to a G rating ;)
0
 

Author Comment

by:mikegeorge2
ID: 34974567
Thank you. It's my age you know. American males who are around forty tend to say "kick ass" a lot, as it was the catch phrase of my youth.

Nonetheless, I'll always be cautious.

Thanks a bunch!
0

Featured Post

MS Dynamics Made Instantly Simpler

Make Your Microsoft Dynamics Investment Count  & Drastically Decrease Training Time by Providing Intuitive Step-By-Step WalkThru Tutorials.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

There’s a good reason for why it’s called a homepage – it closely resembles that of a physical house and the only real difference is that it’s online. Your website’s homepage is where people come to visit you. It’s the family room of your website wh…
CTAs encourage people to do something specific to show interest in your company, product or service. Keep reading to learn why CTAs should always be thought of as extremely important, albeit small, sections of websites.
In this tutorial viewers will learn how to style a decorative dropcap for the first letter in a paragraph using CSS. In CSS, create a new paragraph class by typing "p.fancy": Then, to style only the first letter of the first sentence, include the ps…
The viewer will get a basic understanding of what section 508 compliance can entail, learn about skip navigation links, alt text, transcripts, and font size controls.

729 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question