Solved

CSS Styling question-- simple, hopefully

Posted on 2011-02-22
13
1,797 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
Secure Your WordPress Site: 5 Essential Approaches

WordPress is the web's most popular CMS, but its dominance also makes it a target for attackers. Our eBook will show you how to:

Prevent costly exploits of core and plugin vulnerabilities
Repel automated attacks
Lock down your dashboard, secure your code, and protect your users

 

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

Major Serverless Shift

Comparison of major players like AWS, Microsoft Azure, IBM Bluemix, and Google Cloud Platform

Question has a verified solution.

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

Learn by example how to specify CSS selectors for Selenium WebDriver test automation software.
Developer portfolios can be a bit of an enigma—how do you present yourself to employers without burying them in lines of code?  A modern portfolio is more than just work samples, it’s also a statement of how you work.
This tutorial demonstrates how to identify and create boundary or building outlines in Google Maps. In this example, I outline the boundaries of an enclosed skatepark within a community park.  Login to your Google Account, then  Google for "Google M…
In this tutorial viewers will learn how to embed custom externally-hosted Google Fonts using the Google Font API in CSS Go to the Google Fonts website at google.com/fonts: Browse or search based on font properties or name to find a suitable font for…

630 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