Announcement Announcement Module
Collapse
No announcement yet.
Fixed positioning problem... Page Title Module
Move Remove Collapse
Search Search Module
Collapse

Advertisement Advertisement Module
Collapse

Featured Images Featured Images Module
Collapse

Mediabistro Creative Sites Mediabistro Creative Sites Module
Collapse
Latest Topics Latest Topics Module
Collapse

  • PrintDriver
    Reply to Graphic Design tutorials
    PrintDriver
    The Dadaist approach would go one step further. Maybe tearing them up or putting an 'accidental' coffee stain on them.
    Today, 10:08 AM
  • PrintDriver
    Comment on What do you want to know?
    PrintDriver
    Do rabbits cough up hairballs? If not, they definitely can replace cats. Easily.
    Today, 10:06 AM
  • PrintDriver
    Reply to Business Logo Design
    PrintDriver
    You can have the best logo in the world, but if your product is garbage, that will be far more impressionable than any logo. Does anyone remember what the Ronco logo looks like? No? Bet you remember that...
    Today, 10:04 AM
  • snehal_Joshi
    Comment on Business Logo Design
    snehal_Joshi
    A logo is the first impression for any brand, as per my view only logo can create your first corporate brand image.
    Today, 06:31 AM
  • approveme
    Reply to Which of HTML and XHTML works best for most browsers?
    approveme
    What Is XHTML?

    XHTML stands for EXtensible HyperText Markup Language
    XHTML is almost identical to HTML
    XHTML is stricter than HTML
    XHTML is HTML defined as an XML application...
    Today, 05:46 AM
Advertisement Advertisement Module
Collapse

Sponsors Sponsors Module
Collapse

X
Conversation Detail Module
Collapse
  • Filter
  • Time
  • Show
Clear All
new posts

  • Fixed positioning problem...

    I did a quick search and hadn't found anything on this... so hopefully this isn't a duplicate post... but, I'm wondering if there is a way to have an element fixed (say, in the bottom right corner) but for it to stop moving in at a certain point when you are resizing the browser?

    Basically, I have an element I always want to be to the right, but only to a certain point (I don't want it to overlap any of my content... I want it to just stop when it it "hits" my content div)...

    Any help on this would be greatly appreciated... I've been looking around for an answer everywhere!
    [insert clever signature here]

  • #2
    is your fixed object relative to the browser window, or to a container?

    if it's the browser window, it will overlap the content when you resize...but if you put it relative to a container, it will stay positioned in that container when you resize...

    for example:

    #container {position: relative;}
    #container img {position: absolute; right: 0; bottom: 0;}

    with your content etc in the container...
    Monarchs Rule!

    Comment


    • #3
      I guess I am a little confused (sorry, some of this is still a little new to me)... I was making the fixed object relative to the browser window, yes.

      What would happen if I gave the container an absolute position (left: 800px; top: 0px; because that's where I want the image to "stop")... and then left the height and width at 100% (so that it would fill out as the browser expanded an contracted).. is there a way to make the img div relative to the container then?

      I thought if you gave an element the "fixed" position it would essentially "ignore" everything on the page anyway and position itself relative to the browser no matter where it is...


      Or am I thinking about this backwards? The container div should be relative (and I can still do it left: 800px; top: 0px and make the width/height 100% and then have the image absolutely positioned in the bottom right corner?
      BUT.. how would this work with a "jello" layout? because I wouldn't always want my fixed img to stop at 800px to the left of the browser.. it would vary... hmpf... looks like I now have more questions than when I started...

      I'm going to go play with this code a little...
      [insert clever signature here]

      Comment


      • #4
        Ooop... smiley face unintended... (that one is real)
        [insert clever signature here]

        Comment


        • #5
          Ok... so I might be on to something... It was kind of working when I had a set size for #container, but once I tried to make the height/width 100% it made everything disappear (no background color or anything) ... I've tried making the height/width auto, and then I was playing with visibility and overflow, but I'm not really sure what I'm doing wrong...

          and even if I get this to work, there are a whole slew of new problems if I want to do it with a "jello" layout, right?

          Here's the code:

          <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
          <html xmlns="http://www.w3.org/1999/xhtml">
          <head>
          <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
          <title>Untitled Document</title>

          <style type="text/css">

          body {

          padding: 0px;
          margin: 0px;

          }

          #content {

          background-color: #0CF;
          width: 800px;
          height: 600px;
          position: absolute;
          top: 0px;
          left: 0px;
          z-index: 2;
          }

          #container {

          background-color:#000;
          position: relative;
          width: 100%;
          height: 100%;
          left: 800px;
          top: 0px;
          z-index: 2;
          visibility: visible;
          overflow: auto;

          }

          #containerimg {

          position: absolute;
          right: 0;
          bottom: 0;
          z-index: 3;

          }

          </style>

          </head>

          <body>

          <div id="content">

          </div>


          <div id="container">

          <div id="containerimg">

          <img src="img.jpg" width="175" height="156" alt="alt" />

          </div>

          </div>

          </body>
          </html>
          Last edited by Quirk; 04-29-2009, 05:52 PM. Reason: urgh... stupid copy paste... today is just not my day!
          [insert clever signature here]

          Comment


          • #6
            well, when you position something absolute, you're removing it from it's natural position in the flow and essentially putting it on top of everthing...

            and with fluid dimensions it's still gonna move over your content because the dimensions change...and i know of know way of making it stop because it's on top of everything and not in the flow...

            with a fixed width, you can position the image outside the content area inside the container...but when the browser resizes, you'll get a scroll bar instead of overlapping the content...

            do you have a screenshot of what you're trying to achieve?...
            Monarchs Rule!

            Comment


            • #7
              you should use relation position
              i don't know if you are styling with CSS if yes the you should do that relative to your container tag and not you body tag

              Comment


              • #8
                ok...after further experiment:

                <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
                <html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
                <head>
                <title>-Something-</title>
                <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />

                <style type="text/css">
                #container {position: relative; width: 100&#37;; min-width: 1058px; height: 100%;}
                #container img {position: absolute; right: 0; bottom: 0;}
                #content {width: 800px;}
                </style>

                </head>
                <body>
                <div id="container">
                <img src="front.jpg" width="258" height="139" />
                <div id="content">
                <h2>content main</h2>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore magna aliqua. Ut enim ad minim veniam, quis nostrud</p>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud</p>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud</p>
                </div>
                </div>
                </body>
                </html>

                setting a min-width equal to the width of your content area plus the width of your positioned image will 'stop' the image at the edge of the content and not overlap, producing a scroll bar instead...

                you will have to account for ie and it's failure to honor min-width tho...
                Monarchs Rule!

                Comment


                • #9
                  Originally posted by flutterby nut View Post
                  you will have to account for ie and it's failure to honor min-width tho...
                  Damn ie! Thank you so much for your help on this... it at least pointed me in the right direction. I really appreciating you to take the time to look into it.
                  [insert clever signature here]

                  Comment


                  • #10


                    put this in an ie stylesheet in a conditional comment:

                    #container {width: expression(document.body.clientWidth < 1060? "1058px" :
                    document.body.clientWidth > 1282? "1280px" : "auto");}

                    and plug in you min and max width numbers...note the 2px differences...this is because there's a buggy behavior on resizing if they're exactly the same...
                    Monarchs Rule!

                    Comment

                    Mediabistro A division of Prometheus Global Media home | site map | advertising/sponsorships | careers | contact us | help courses | browse jobs | freelancers | content | member benefits | reprints & permissions terms of use | privacy policy Copyright © 2014 Mediabistro Inc.
                    Working...
                    X