ThemeShaper Forums » Thematic

[closed]

How to get an image div OUTSIDE thematic

(7 posts)
  • Started 7 years ago by 4rederick
  • Latest reply from helgatheviking
  • This topic is resolved
  1. josephfrederick.com

    On the Blog Page, the Pixel Mosaic image in the background to the right -- How do I get it outside the Thematic structure so that it won't bring up scroll bars when its outside the browser window? Putting it into the body won't work, will it? Right now it's in thematic_before. This is important because I hope to "hang" a lot of images in various parts of the screen. They need to be independent of the Thematic structure, with the ability to go over and under with the z-index tag.

    This is how I've got to where I am now:

    in function.php ...

    function childtheme_mosaic() { ?>
    <div id="mosaic-image">
    <img src="<?php echo bloginfo('stylesheet_directory') ?>/images/mosaic300x1400.png" width="300" height="1400" alt="" />
    </div>
    <?php }
    add_action('thematic_before', 'childtheme_mosaic');

    in default.css...

    #mosaic-image {
    height: 0px;
    width: 0px;
    overflow: visible;
    position:absolute;
    left:1100px;
    top:200px;
    }

    .page-template-home-template-php #mosaic-image {
    display: none
    }

    Posted 7 years ago #
  2. Still struggling with this, but I'll keep trying!

    Posted 7 years ago #
  3. middlesister
    Member

    The reason you get scrollbars has not so much to do with thematic, but how html works. You are putting the image there with html <div> and <img> elements. This means that the browser thinks the image is IN the document and therefore will add scrollbars if needed to display it.

    The solution is to use the image as a background and put it there with css, much like you did with the background on the front page.

    body {
        background: url(path-to-image) no-repeat positionX positionY;
    }
    Posted 7 years ago #
  4. On a side note, for some good examples of z-indexing and positioning, pick through some of these layouts if you have firebug, http://lostworldsfairs.com/

    Posted 7 years ago #
  5. Yeh, I considered going the way you suggested, middlesister, and I might still have to do that, but I was hoping to have control over individual images across the screen. Am I wrong to think that with the background technique, it only allows me to add one image?

    But seriously, thank you for the well thought-out response. I really do appreciate it.

    And, Scott, I'm gonna definitely check out that site. Thanks.

    Posted 7 years ago #
  6. you can hide the scroll bars using

    html, body {overflow-x:hidden}
    or
    html, body {overflow-y:hidden}
    or
    html, body {overflow:hidden}

    but it's generally not really good practice

    I guess you could create a div right under the body that covers the whole area, has a negative z-index, is position: absolute at left:0, top:0, and has overflow: hidden on it into which you would pull your pictures? Just thinking out loud here

    Posted 7 years ago #
  7. you could add extra, empty divs and put the background on those? it isn't semantically ideal, but it might work.

    Posted 7 years ago #

RSS feed for this topic

Topic Closed

This topic has been closed to new replies.