Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 10 of 10

Thread: CSS help.

  1. #1
    New Coder
    Join Date
    Aug 2011
    Posts
    60
    Thanks
    32
    Thanked 0 Times in 0 Posts

    CSS help.

    Please see my site here http://reputationmight.com I am trying to get the telephone image into the contact form, so its sits inside the form.

    I am no expert with CSS, so I am just looking to accompolish this using negative top margin and a left margin.

    The contact form and image sit inside the same <div> and paragraph.

    The site is hosted by Wordpress and the contact form is a plugin of which I have no experience of besides the interface.

    My phone image manages to go so far inside the contact form, but then for some reason the image just stops going any higher… E.g. I could put a top margin of -2500px and it would still be at its same position.

    How do I get the image to the top of the contact form as I want?

    Thanks

  • #2
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,852
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    Remove that anchor and img tag completely and set that image as the background of the form, like
    Code:
    #form-1-1337336807{
    background:#B4D8E7 url(http://reputationmight.com/wp-content/uploads/2012/01/TEMPORARY-PHONE-2-300x300.png) no-repeat right middle;
    }
    Then remove background-color: inherit; from #form-1-1337336807 div
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • Users who have thanked abduraooft for this post:

    adamwestrop (05-18-2012)

  • #3
    New Coder
    Join Date
    Aug 2011
    Posts
    60
    Thanks
    32
    Thanked 0 Times in 0 Posts
    Thanks for the input, but something isn't working.

    What I have done now, because I couldnt find the CSS to remove:- background-color: inherit; from #form-1-1337336807 div

    Is apply the background image to the .contactus div.. Like this:-

    Code:
    .contactus {
    background:#B4D8E7 url('http://reputationmight.com/wp-content/uploads/2012/01/TEMPORARY-PHONE-2-300x300.png') no-repeat right middle;
    }
    However still no image.

    Please help....

  • #4
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    Remove this line
    Code:
    form { background-color: #B4D8E7 !important; }
    from style.css
    and change this
    Code:
    .contactus {
    background:#B4D8E7 url('http://reputationmight.com/wp-content/uploads/2012/01/TEMPORARY-PHONE-2-300x300.png') no-repeat right middle;
    }
    to this
    Code:
    .contactus {
    background:#B4D8E7 url('http://reputationmight.com/wp-content/uploads/2012/01/TEMPORARY-PHONE-2-300x300.png') no-repeat right center;
    }
    There is no such thing as "middle" when aligning background images.
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • Users who have thanked _Aerospace_Eng_ for this post:

    adamwestrop (05-18-2012)

  • #5
    New Coder
    Join Date
    Aug 2011
    Posts
    60
    Thanks
    32
    Thanked 0 Times in 0 Posts
    Thanks for your time, however that didnt work. I think how the contact form is structured is probably complex.

    Take a look now, the image color is only applying to the left of the contact form. Note I also tried the same

    Code:
    .contactus {
    background:#B4D8E7 url('http://reputationmight.com/wp-content/uploads/2012/01/TEMPORARY-PHONE-2-300x300.png') no-repeat right center;
    }
    Code on both:-

    form

    And

    #form-1-1337350873

    With no success.

    Seems like it will work, however need to get the element to have the background image in right.

    Any ideas?

  • #6
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,852
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    It's because you have a background-color of #ffffff; applied on #form-1-1337351605
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • Users who have thanked abduraooft for this post:

    adamwestrop (05-18-2012)

  • #7
    New Coder
    Join Date
    Aug 2011
    Posts
    60
    Thanks
    32
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by abduraooft View Post
    It's because you have a background-color of #ffffff; applied on #form-1-1337351605
    Thanks, how can I over-write this though?

    E.g. Because I am using Wordpress, its hard to find the exact code in my CSS file which I would have to change..... So how can I fix this problem with additional CSS and not removing CSS?

    I know its not ideal and I intend to learn PHP etc myself so I can mark up myself how I want in the future, but now I just would like to fix this.

  • #8
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,852
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    Add
    Code:
    #content form{
    background:none;
    }
    into your CSS
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #9
    New Coder
    Join Date
    Aug 2011
    Posts
    60
    Thanks
    32
    Thanked 0 Times in 0 Posts
    Thanks for the input, but that just isn't working... In my HTML the contact form is set out like this:-

    Code:
    <div class="contactus"><p>[customcontact form=1]</p></div>
    Would another option not be to put in an <img> in the above paragraph before the contact form and float that to the right and put in the appropriate padding that I want?

    Surely if I fiddle around with display:inline/display:inline-block rules then this could work?

    I just dont understand why applying a large negative margin wont work to position the image though.... I dont understand why it will only go so far into the contact form and not all the way........

    Anyone has any thoughts?

  • #10
    New Coder
    Join Date
    Aug 2011
    Posts
    60
    Thanks
    32
    Thanked 0 Times in 0 Posts
    Floating worked. Prob solved.

    Thanks all for your input.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •