WordPress.org

Support

Support » How-To and Troubleshooting » [Resolved] CSS Formatting

[Resolved] CSS Formatting

  • Hello,

    I’m trying to do some formatting but have been unsuccessful thus far. I am trying to get the “Free Website Audit & Report” image to be closer to the text to the left of it, still keeping the whole thing centered, but I am not sure how to go about doing it.

    Does anyone have any suggestions?

    Website is http://www.webrevmarketing.com

    Thank you!

Viewing 13 replies - 1 through 13 (of 13 total)
  • esmi

    @esmi

    Forum Moderator

    Try using Firefox with the Firebug add-on for this kind of CSS work.
    http://getfirebug.com/

    Hello,

    Thanks for the response. I did that, but I am still unable to figure out what I need to do…

    The image has both position:absolute & float:right; properties.
    An element can’t have both attributes.

    If it has to be position:absolute; , then reduce the left: number.

    If it has to float right, give a margin-right:30px; and see if that helps.
    (adjust the number of pixels as needed).

    Hi Tom,

    I removed the position: absolute, and added a margin-right, but the problem is it moves everything to the left (including the text), instead of just moving the image closer to the text…

    Do you have any other suggestions?…

    Thanks so much!

    Danielle

    WPyogi

    @wpyogi

    Forum Moderator

    You have many mark-up errors that may be contributing to problems:

    http://validator.w3.org/check?uri=http%3A%2F%2Fwww.webrevmarketing.com%2F&charset=%28detect+automatically%29&doctype=Inline&group=0

    Since that’s a commercial theme, you should be asking the vendor for help.

    WPyogi

    @wpyogi

    Forum Moderator

    You should also not be using <center> — it been deprecated for some time.

    Hi Danielle,

    It looks like you are using a text widget with the box checked to automatically add paragraphs.

    You should uncheck the box to automatically add paragraphs and try this code:

    <img style="float:right;margin-right:20px;" src="http://www.webrevmarketing.com/wp-content/uploads/2012/10/email-opt-in-book-e1351098608776.png"/>
    <div align="center">
    <span style="font-family: SansationBold; font-size:19px; color:#666;">Join The Online Revolution Now & Get Your<span style="color:#de5817;border-bottom:1px dashed #de5817;"> FREE (15+ PAGE) WEBSITE AUDIT!</span></span>
    </div>
    <div align="center">
    <span style="font-family: SansationBold; font-size:16px; color:#666;">Uncover the Hidden Tips & Tricks to Drive Massive Traffic, Leads & Sales.</span>
    </div>
    <div align="center">
    <form method="post" action="http://www.aweber.com/scripts/addlead.pl">
    <input type="hidden" name="listname" value="webrev_website" />
    <input type="hidden" name="redirect" value="http://www.webrevmarketing.com/thank-you/" />
    <input type="hidden" name="meta_adtracking" value="custom form" />
    <input type="hidden" name="meta_message" value="1" />
    <input type="hidden" name="meta_required" value="name,email" />
    <span style="font-family: SansationBold; font-size:19px; color:#666;">Name: <input type="text" name="name" value="" size="25"> Email: <input type="text" name="from" value="" size="25"> <input type="submit" name="submit" value="JOIN NOW!" size="15"></span></form>
    </div>

    You should also note that using inline styles in text widgets (or anywhere in your code), is bad for SEO.

    Let me know if that works.

    Danielle,

    WPyogi is right, notice I used <div align=”center”> , which really isn’t any better than <center> ….you should control the styling with your CSS.

    🙂

    Thank you for your suggestions and input. Tom, the code provided didn’t seem to make a difference. I will take a different approach and mess with it more by removing the center div and styles in the text widget and moving them into style.css.

    As for the validation errors. I will see what I can fix.

    Thanks so much!

    Danielle

    Hi Danielle,

    You said margin-right moved everything to the left.

    Try this:

    margin:0px 20px 0px -20px;

    that will give it a right margin of 20px and left margin of -20px, meaning it should keep the text right where it is.

    That did it Tom! Good thinking! Thank you so much for your help!!!

    Anytime, Glad you it worked out for you!

    If you could mark this thread as “Solved”, that would be great.
    (it’s in the sidebar on the right) 🙂

    Thanks again, and you got it!

Viewing 13 replies - 1 through 13 (of 13 total)
  • The topic ‘[Resolved] CSS Formatting’ is closed to new replies.