...

View Full Version : CSS help.



adamwestrop
05-18-2012, 11:09 AM
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

abduraooft
05-18-2012, 11:33 AM
Remove that anchor and img tag completely and set that image as the background of the form, like

#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

adamwestrop
05-18-2012, 12:00 PM
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:-


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

_Aerospace_Eng_
05-18-2012, 02:10 PM
Remove this line

form { background-color: #B4D8E7 !important; }
from style.css
and change this

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

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

adamwestrop
05-18-2012, 03:23 PM
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


.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?

abduraooft
05-18-2012, 03:35 PM
It's because you have a background-color of #ffffff; applied on #form-1-1337351605

adamwestrop
05-18-2012, 04:03 PM
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.

abduraooft
05-18-2012, 04:10 PM
Add
#content form{
background:none;
} into your CSS

adamwestrop
05-18-2012, 09:32 PM
Thanks for the input, but that just isn't working... In my HTML the contact form is set out like this:-


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

adamwestrop
05-18-2012, 10:21 PM
Floating worked. Prob solved.

Thanks all for your input.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum