SitePoint Sponsor

User Tag List

Results 1 to 9 of 9

Thread: Clear image

Hybrid View

  1. #1
    Web Enthusiast
    Join Date
    Jul 2000
    Location
    Western Massachusetts, USA
    Posts
    1,383
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Clear image

    What's the best way of clearing the "Get Started" image on this page:
    http://impowerdemo.com/clients/demoi...ina-silver-rn/
    so it rises higher under the page text, and not below the image to the right?
    Paul C.
    ClickBasics
    http://www.clickbasics.com

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,281
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    HI,

    Not sure I quite understand but if you don't want it to clear the image on the right then don't clear it

    Code:
    div.entry p img.aligncenter{clear:none}
    Or did you mean something else?

  3. #3
    Web Enthusiast
    Join Date
    Jul 2000
    Location
    Western Massachusetts, USA
    Posts
    1,383
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I just want the "Get Started" button to appear right under the text on the page, and now below the image to the right. It doesn't seem to want to wrap.
    Paul C.
    ClickBasics
    http://www.clickbasics.com

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,281
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    The code I gave you will make the image start just under the text above and not clear the image on the right. It will be centered under the text because you have it in a p tag that has an inline style of text-align:center.

    That seems to be what you asked for but I think we may be taking at cross purposes?

    You have the same rule twice in your style.css (line 618 and line 646) that is applying clear:both to the button.

    Code:
    div.entry img.aligncenter{
    	clear:both;
    	text-align:center;
    	margin:10px auto;
    	display: block;
    	padding:5px;
    	}
    
    div.entry p img.aligncenter{
    	clear:both;
    	text-align:center;
    	margin:10px auto;
    	display: block;
    	padding:0;
    	}

  5. #5
    Web Enthusiast
    Join Date
    Jul 2000
    Location
    Western Massachusetts, USA
    Posts
    1,383
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    For reasons too complicated to explain here, I do not have the ability to edit the style sheet. I know this may sound weird, but is there some way I can add your code
    Code:
    div.entry p img.aligncenter{clear:none}
    in line at
    HTML Code:
    <h2><a title="Salon Hours" href="http://impowerdemo.com/clients/demoinstalls/essentials/salon-hours/">Salon Hours</a></h2>
    Paul C.
    ClickBasics
    http://www.clickbasics.com

  6. #6
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,281
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    You'd have to add it here.

    Code:
    <p style="clear:none;text-align: center;"><a href="http://impowerdemo.com/clients/demoinstalls/essentials/your-initial-session/"><img width="224" height="51" src="http://impowerdemo.com/clients/demoinstalls/essentials/wp-content/uploads/2013/01/get_started.png" alt="Get Started" class="size-full wp-image-533 aligncenter"></a></p>

  7. #7
    Web Enthusiast
    Join Date
    Jul 2000
    Location
    Western Massachusetts, USA
    Posts
    1,383
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I have replaced my code with yours. It doesn't seem to make a difference.
    http://impowerdemo.com/clients/demoi...ina-silver-rn/
    Paul C.
    ClickBasics
    http://www.clickbasics.com

  8. #8
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,281
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Ah sorry,

    It needed to go here on the image:

    Code:
    <img style="clear:none" width="224" height="51" class="size-full wp-image-533 aligncenter" alt="Get Started" src="http://impowerdemo.com/clients/demoinstalls/essentials/wp-content/uploads/2013/01/get_started.png">
    Apologies.

  9. #9
    Web Enthusiast
    Join Date
    Jul 2000
    Location
    Western Massachusetts, USA
    Posts
    1,383
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Paul C.
    ClickBasics
    http://www.clickbasics.com


Bookmarks

Posting Permissions

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