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

  • skribe
    Reply to Latest Bloomberg Businessweek Cover
    skribe
    Wow. I would be hanging my head in shame if I created that, and it got published all over the world.
    Today, 06:23 AM
  • skribe
    Reply to Please Help
    skribe
    What you have there looks like it is embroidery possibly by hand....
    Today, 06:07 AM
  • skribe
    Reply to Logo design for Game Developer
    skribe
    @Printdriver Nice find. So I just had to do some digging to keep in practice. The original design was done by an individual named John Le aka Dragonkhn. Apparently the Backtrack group did use it originally...
    Today, 05:30 AM
  • skribe
    Comment on Logo design for Game Developer
    skribe
    Double yikes!
    Today, 04:57 AM
  • PrestoArts
    Reply to Logo design for Game Developer
    PrestoArts
    So help me understand if you don't mind me further pestering you all. I like the "concept" of a dragon wrapping around a word. I've done some sketches trying different things. Am I in the wrong...
    Today, 01:15 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