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

Advertisement Advertisement Module
Collapse

Latest Topics Latest Topics Module
Collapse

  • Kayekaye
    Comment on Client charging/payment issues
    Kayekaye
    Yeah, nice huh? I probably would have done it for free if they had asked nicely and respected me. Another relative did hire me and my writing partner to produce a full id campaign and we delivered. When...
    Today, 04:04 AM
  • Kayekaye
    Comment on Book cover critique
    Kayekaye
    Yup, that's what I would do. It's a bit unbalanced. You can still have the veggies look free form, and ever make more of them on the bottom but it's just unbalanced to me. It doesn't have to be justified,...
    Today, 03:56 AM
  • KitchWitch
    Reply to Inquiry about Current Designers
    KitchWitch
    I think eventually every artist finds a style they either prefer or excel at. Unfortunately, in graphic design you are not designing to satisfy your own idea(s) of art and style. Graphic design solves...
    Today, 02:22 AM
  • KitchWitch
    Reply to Feedback on image compositing/photomedia piece
    KitchWitch
    Hi Courtney and welcome to GDF.

    We ask all new members to read very important links here and here. These explain the rules, how the forum runs and a few inside jokes. No, you haven't done...
    Today, 02:16 AM
  • pdodd72
    Feedback on image compositing/photomedia piece
    pdodd72
    Hi,

    I have created a photomedia design by compositing 5 photos I took into 1 image.

    I would appreciate any feedback you may have on it.

    Thanks
    Courtney...
    Today, 01:49 AM

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 © 2015 Mediabistro Inc.
                    Working...
                    X