SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Guru
    Join Date
    Jul 2003
    Location
    england
    Posts
    819
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)

    Question Move Linked Heading From Top of Image to Right of Image

    I'm using CSS to layout a linked heading above content (refer to Holiday Almond Bars).

    The downside to using the CSS method is that if the heading wraps to two lines, the image moves down with it and the first line of the linked heading moves slightly to the right, which makes this visually undesirable.

    Is there a way to override this with CSS to prevent the image from moving down if a heading wraps to two lines and the first line of the heading from moving to the right? I already tried 'h2:first-line' and that didn't seem to make any difference. Now if the heading's line is only one line, then the movement of the image and the heading isn't a problem.

  2. #2
    Mouse catcher silver trophy
    Stevie D's Avatar
    Join Date
    Mar 2006
    Location
    Yorkshire, UK
    Posts
    5,838
    Mentioned
    114 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by toad78 View Post
    I'm using CSS to layout a linked heading above content (refer to Holiday Almond Bars).

    The downside to using the CSS method is that if the heading wraps to two lines, the image moves down with it and the first line of the linked heading moves slightly to the right, which makes this visually undesirable.

    Is there a way to override this with CSS to prevent the image from moving down if a heading wraps to two lines and the first line of the heading from moving to the right? I already tried 'h2:first-line' and that didn't seem to make any difference. Now if the heading's line is only one line, then the movement of the image and the heading isn't a problem.
    The easiest way to go about it would be to take the image out of the HTML altogether, and call it as a background image with CSS. That way you can be sure that it always aligns to the top-left of the block and doesn't interfere with anything else. Just make sure you set a min-height on the block to ensure that you have enough space.

  3. #3
    SitePoint Guru
    Join Date
    Jul 2003
    Location
    england
    Posts
    819
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)

    Unhappy

    Quote Originally Posted by Stevie D View Post
    The easiest way to go about it would be to take the image out of the HTML altogether, and call it as a background image with CSS. That way you can be sure that it always aligns to the top-left of the block and doesn't interfere with anything else. Just make sure you set a min-height on the block to ensure that you have enough space.
    Setting it to a background is not an option, in this case.

  4. #4
    Mouse catcher silver trophy
    Stevie D's Avatar
    Join Date
    Mar 2006
    Location
    Yorkshire, UK
    Posts
    5,838
    Mentioned
    114 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by toad78 View Post
    Setting it to a background is not an option, in this case.
    Why not?

    Another option would be to put the image as the first item in the <div> and float it left. Again, that would ensure that it appeared in the right place.

    Quite honestly, I'm looking at your code and I haven't got the faintest idea what it's doing or how it gets where it does. But then when I see things like
    HTML Code:
        <div class="blogrecipes">
    
    	
    
    
    
    
    
    
    
    			<div class="items-row cols-1 row-0">
    		<div class="item column-1">
    (reproduced with white space intact) with class names that don't appear to be used for anything at all, I start to feel slightly sick and suffering from CMS-induced fevers that sap me of the will to live...


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
  •