?
Solved

CSS Styling question-- simple, hopefully

Posted on 2011-02-22
13
Medium Priority
?
1,812 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
  • 5
  • 5
11 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
Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 

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 2000 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

[Webinar] Cloud and Mobile-First Strategy

Maybe you’ve fully adopted the cloud since the beginning. Or maybe you started with on-prem resources but are pursuing a “cloud and mobile first” strategy. Getting to that end state has its challenges. Discover how to build out a 100% cloud and mobile IT strategy in this webinar.

Question has a verified solution.

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

Today, the web development industry is booming, and many people consider it to be their vocation. The question you may be asking yourself is – how do I become a web developer?
The first step to building an amazing About page is to figure out what you want the page to say about your company. You then must grab the attention of the reader, boast a bit, tell a story and let others brag about you. With a little bit of thought…
In this tutorial viewers will learn how to style different bullet points for unordered lists in CSS. Begin with a normal unordered list; the default bullet point is a solid circle: In the CSS, create a defined class of unordered list by typing "ul.S…
The viewer will learn how to look for a specific file type in a local or remote server directory using PHP.
Suggested Courses
Course of the Month13 days, 12 hours left to enroll

755 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