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

  • kemingMatters
    Reply to Logo critique
    kemingMatters
    Call me crazy but green is just one of those colours I don't want to see when I'm thinking about a grilled cheese or comfort food. IMHO I think your first iteration attempt was better and just need a...
    Today, 12:45 PM
  • PrintDriver
    Reply to Final Art Disclaimer
    PrintDriver
    The problem today is many clients and designers consider the printer's proof one more opportunity to proof read. The document you are having printed should be FINAL before it is sent to the printer. The...
    Today, 11:30 AM
  • PrintDriver
    Reply to Design Assignment
    PrintDriver
    A lot of people will not download a PDF from an unknown source. Especially with the recent rash of Cryptoware floating around. You'll get more response if you post an image.
    Today, 11:26 AM
  • PrintDriver
    Reply to Trouble Printing Correctly onto Labels, even with my own Template
    PrintDriver
    most printers have a border that cannot be infringed. Unless you have a borderless printer, you need to account for that. Usually the bottom border is wider than the other three too.

    What...
    Today, 11:23 AM
  • kinner
    Reply to Advice for logo
    kinner
    Guys, thanks a lot for your feedback and comments! Really appreciated!
    Sorry I really don't get it how to quote everybody in one reply only, it keeps copying just one post instead of many.
    Today, 11:14 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, 04: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. call (212) 389-2000 or email us
                    Working...
                    X