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
Solved

CSS Styling question-- simple, hopefully

Posted on 2011-02-22
13
1,777 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
Master Your Team's Linux and Cloud Stack!

The average business loses $13.5M per year to ineffective training (per 1,000 employees). Keep ahead of the competition and combine in-person quality with online cost and flexibility by training with Linux Academy.

 

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

The New “Normal” in Modern Enterprise Operations

DevOps for the modern enterprise offers many benefits — increased agility, productivity, and more, but digital transformation isn’t easy, especially if you’re not addressing the right issues. Register for the webinar to dive into the “new normal” for enterprise modern ops.

Question has a verified solution.

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

Suggested Solutions

Any business that wants to seriously grow needs to keep the needs and desires of an international audience of their websites in mind. Making a website friendly to international users isn’t prohibitively expensive and can provide an incredible return…
Does your audience prefer people in photos or no people? How can you best highlight what you’re selling? What are your competitors doing, and what can you do that is different and unique from them?  Continue reading to learn how to make your images …
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…
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…

837 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