Solved

CSS Styling question-- simple, hopefully

Posted on 2011-02-22
13
1,773 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
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
3 Use Cases for Connected Systems

Our Dev teams are like yours. They’re continually cranking out code for new features/bugs fixes, testing, deploying, testing some more, responding to production monitoring events and more. It’s complex. So, we thought you’d like to see what’s working for us.

 

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

DevOps Toolchain Recommendations

Read this Gartner Research Note and discover how your IT organization can automate and optimize DevOps processes using a toolchain architecture.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
Divi Them Help with Full Width header 20 59
css issues with IE 11 8 33
show form submit button based on jquery sum 5 26
Select only the top record in a left join 13 34
I've been asked to discuss some of the UX activities that I'm using with my team. Here I will share some details about how we approach UX projects.
Password hashing is better than message digests or encryption, and you should be using it instead of message digests or encryption.  Find out why and how in this article, which supplements the original article on PHP Client Registration, Login, Logo…
In this tutorial viewers will learn how to style a corner ribbon overlay for an image using CSS Create a new class by typing ".Ribbon":  Define the class' "display:" as "inline-block": Define its "position:" as "relative": Define its "overflow:" as …
This tutorial walks through the best practices in adding a local business to Google Maps including how to properly search for duplicates, marker placement, and inputing business details. Login to your Google Account, then search for "Google Mapmaker…

808 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