SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Member
    Join Date
    Nov 2003
    Location
    Oregon
    Posts
    19
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    scrolling text and watermark

    Hi,

    What I want to do is use a watermark in a wrapped div and position it on the bottom right. However, I do NOT want the text to scroll THROUGH the image. I want the text to scroll to the left of image. I have tried everything (accept what works), to accomplish this. I give up. Can any one help? Here is the CSS I am using. The test page can be found at Browser Title

    Thanks for any help.

    Jim



    <style type="text/css">
    <!--
    body {
    background-color: #000000;
    }
    --->
    </style>

    <style type="text/css">
    <!--
    #wrap {
    margin: 0 auto;
    width: 750px;
    }
    -->
    </style>

    <style type="text/css">
    <!--
    #stuff {
    background-color: #000000;
    color: #ffffff;
    background-image: url(logo.jpg);
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-position: 72% 95%;
    }
    -->
    </style>

    <style type="text/css">
    <!--
    #stuff {
    Margin: 0;
    padding: 2%;
    }
    --->
    </style>

  2. #2
    SitePoint Zealot zbing's Avatar
    Join Date
    Jun 2002
    Location
    Lisbon, Portugal
    Posts
    159
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Either you give the #stuff div more width to accommodate the image or you can wrap the hole thing in another div and use separate containers for the text and watermark:

    <div id="wrapper">
    <div id="text"></div>
    <div id="watermark"></div>
    </div>

    Use absolute positioning to place the watermark where you want it to be. Remember to add position relative the the wrapper div so that the watermarks position is absolute to the wrapper.
    zbing

  3. #3
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,467
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    You could also just give some padding right to #stuff to keep the text clear.

    Code:
    #stuff {
        margin: 0;
        padding: 2% 250px 2% 2%;
    
    
    }
    If on the other hand you were expecting text to stretch full width but then wrap around the image then it can't be done in CSS. You can wrap text around a floated (non fixed) image only but not one that sits exactly at the end of random content.


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
  •