none
"Position:fixed" by different screen resolution RRS feed

  • Question

  • Hi,

    I want to use an object, which sell stay fixed by scrolling. So far I used "".

    The problem is, that on screen with different resolution the object does not fit into the page as need.

    example:
    www.ceskeafery.cz

    The purpose is, that the two object would be exactly next to each other.

    Thanks a lot.

    Thursday, August 15, 2013 1:43 PM

All replies

  • I would guess (and could be wrong here) but Position: Fixed and Position: absolute may be causing the issues.

    The yellow box does stay fixed in place (doesn't scroll) but the black bar "moves out of place" (if that is what you're meaning) if the browser window is re-sized (and probably if screen resolution changed).

    I'm no expert in CSS but your code kind of looks wrong to me - can't really explain why.

    Your inline styles start "style=;"  (there's no need for that semi-colon).  No real need for height definition, as the content will determine the height of the div.

    ID of "Layer25" is not defined as anything in the page and therefore has no relevance there.

    As above, the absolute and fixed positioning are probably the issue.  Try using padding and margin more effectively to position the objects

    <div id="reklamavpravo"   style="; width: 270px; height: 540px; z-index: 7; margin:auto; left:50px; top: 150px" class="auto-style66"></div>

    <div id="layer25" style="; width: 880px; height: 90px; z-index: 9; left: 50px; top: 681px" class="auto-style65"></div>

    A couple of resources explaining positioning:

    (1) CSS-Tricks.Com

    (2) W3C Schools

    I'm sure someone well versed in this can point you in the right direction.


    Andrew M


    http://www.murraywebs.com

    "Nothing spoils numbers faster than arithmetic!"
    -- Peppermint Patty (Peanuts, Charles M. Schulz)





    • Edited by AndrewOZ1 Thursday, August 15, 2013 10:37 PM more info
    Thursday, August 15, 2013 10:16 PM
  • Your black div is postitioned absolute inside the body, which you have positioned relative.  This means the black div's absolute postion is relative to the body (its first positioned ancester).  You have given the body a width, and set left and right margins to auto, which means it centers.  That means the black div moves 50px to the right of the left side of the centered body.  When the browser window is wide enough, the left side of the body is further and further from the browser opening, and the black div moves further and further to the right.

    Remove postiion relative from the body, and watch the black div snap to the same left edge as the yellow div, since now the black div is absolute relative to the browser opening, not the body.

    The yellow div is position fixed.  "Fixed" is relative to the browser opening.  It has no idea about the body centering. And, if you remove "relative" from teh body, the black div will also have no idea about the body centering.  They will be outside, overlap, or be inside the body depending on the visitor's browser window width.

    If you want them to stay inside the body, remove the "left:50px" from the yellow div.  With no left specified, it will stay inside the body, at its left edge.  Then put the relative back on the body, and the black div will stay inside the body, too.  Both will now shift side to side when the browser window width is changed, but the yellow div won't scroll.  You can modify the black div's "left" amount to place it where you want (overlapping or beside) the yellow div.

    Now, having said all that, if you intend to put text content into either of these, you'll have issues with putting heights on them.  Text size can be changed by the visitor using browser settings, so containers of text need to be able to expand.

    Thursday, August 15, 2013 11:19 PM
  • I want to use an object, which sell stay fixed by scrolling. So far I used "".

    As you can see, this asinine, execrable editor will not permit you to enter any CSS position attribute, so your "pos ition:fixed" became "". I got by that here by adding the extraneous space in "position." Stupid? Yes. Unnecessary? Sure. Can we do anything about it? Nope. OTOH, the powers-that-be have apparently at last removed the prohibition on including links for new forum users (as well as the requirement to provide a reason for editing a post), so there is hope that this, too, will pass.  ;-)

    The purpose is, that the two object would be exactly next to each other.

    That makes no sense. With the properties that you have set, they could not be next to each other. They could abut vertically, if that is what you actually meant, but not side-by-side. Unfortunately, you are using two different CSS position properties, each of which has a completely different frame of reference. When you assign fixed as an element's position, it is relative to the browser window (referred to as the "viewport"). When you assign absolute as an element's position, it is relative to the element's nearest positioned ancestor (container), which, in this case, is the body.

    That is why they move independently. Or, rather, why the black div moves and the yellow does not. It's not very clear what your actual intent is, but using the CSS position property is very prone to error and unintended consequences, and to breaking badly when viewed in circumstances other than those in which designed, or when text is resized.

    You really should not use the position property unless you thoroughly understand the consequences on source order and page flow of doing so. If you will explain clearly what your intent is, we may be able to offer suggestions as to how to implement it using margins, padding, and floats, without using the position property at all.

    cheers,
    scott


    Please remember to "Mark as Answer" the responses that resolved your issue. It is common courtesy to recognize those who have helped you, and it also makes it easier for visitors to find the resolution later.

    Friday, August 16, 2013 2:08 AM
  • Your inline styles start "style=;"  (there's no need for that semi-colon).  No real need for height definition, as the content will determine the height of the div.

    ID of "Layer25" is not defined as anything in the page and therefore has no relevance there.

    As mentioned in my previous post, you cannot have anything that looks like the CSS position property assignment in a post in this forum. So, what you probably meant to say (and probably did, until it was stripped when posted) was this:

    "Your inline styles start "style=pos ition:  fixed;"  (there's no need for that semi-colon).  No real need for height definition, as the content will determine the height of the div."

    Note the extra space that fools this idiot editor into allowing the display of the position attribute. Anyway, you are wrong. The semicolon is used to separate properties when a series of properties are specified, and is necessary when multiple properties are specified, except for the last property in the series. Therefore, in the case of the inline styles in the OP's page, the semicolons were both appropriate and required.

    As for the height property, not only is there no need for it, it is contraindicated for any container which will contain text, which may be resized and cause the content to overflow the container. Only rarely are heights appropriate for a container, and never for a container which contains text.

    I would be surprised if the OP actually assigned that id of "Layer25." Looking at his source code, and the page in general, I'm guessing that he worked solely in design view, and probably invoked the Layers panel to create that div, which assigned the id without input from the OP. That would consistent with the auto-styles and general "newbieness" of the page, anyway.  ;-)

    cheers,
    scott

    Please remember to "Mark as Answer" the responses that resolved your issue. It is common courtesy to recognize those who have helped you, and it also makes it easier for visitors to find the resolution later.

    Friday, August 16, 2013 3:21 AM
  • Thanks for the advises so far. The aim is to make a typical moving banner for advertisement which would always be in the same position during scrolling down and reading the page. The problem which I faced is, that on different screen resolution it was in different position.

    thanks

    Friday, August 16, 2013 8:59 AM
  • Thanks for the advises so far. The aim is to make a typical moving banner for advertisement which would always be in the same position during scrolling down and reading the page. The problem which I faced is, that on different screen resolution it was in different position.

    thanks

    Friday, August 16, 2013 9:25 AM
  • Scott, points well taken

    Cheers


    Andrew M


    http://www.murraywebs.com

    "Nothing spoils numbers faster than arithmetic!"
    -- Peppermint Patty (Peanuts, Charles M. Schulz)

    Friday, August 16, 2013 10:19 AM
  • It was not screen resolution that made it in different positions.  It was different browser window sizes, even on the same screen.  My first post explained why.


    • Edited by KathyW2 Monday, August 19, 2013 9:17 PM
    Friday, August 16, 2013 11:46 AM
  • Thanks for the advises so far. The aim is to make a typical moving banner for advertisement which would always be in the same position during scrolling down and reading the page. The problem which I faced is, that on different screen resolution it was in different position.

    thanks

    Here's the basic problem—as noted in my previous post, using the CSS "position" property requires a thoroughgoing understanding of the relationship between source order, which establishes the "natural" position of elements defined in the page, and the CSS which modifies that presentation.

    Both "pos ition:fixed" and "pos ition:absolute" remove the affected element from the page flow, so that source order has no effect on their location, and they are essentially "not there" as far as other, non-positioned elements are concerned. "Pos ition:relative" elements remain within the page flow, and other elements remain aware of these elements, and they behave as if the relatively positioned element were in fact located where it would have been (as defined in source order), even though the element may actually be displayed elsewhere because of the relative positioning.

    As you can see, there is much to consider, and to take into account, when using any kind of CSS positioning. It is for this reason that we in this forum generally advise that novice developers do NOT use CSS positioning. Not only is it difficult to correctly conceptualize, it is fragile and fraught with cross-platform vulnerabilities and accessibility issues.

    It is also largely unnecessary. With very, very few exceptions (e.g. dropdown/flyout menus, disjoint popups, etc.), anything that can be done with CSS positioning can be accomplished using margins, padding, and floats.

    BTW, you might also want to consider your user's preferences. Many people will tolerate some advertising if your content is compelling enough. However, the more "in yer face" you make it (and forcing an ever-present animated banner to consume significant screen real estate while browsing fits that definition), the more likely they are to simply say "The hell with it!" and click away from your obnoxious site to one more considerate of their sensibilities, such as your competitors' sites.

    Remember, to your visitor, your site does NOT exist for your benefit, but for theirs. Forget that key fact, and you will find the dwell time on your site is minimal, as visitors quickly become aggravated and click away, negating any advertising you may have on your site, no matter how implemented.

    cheers,
    scott


    Please remember to "Mark as Answer" the responses that resolved your issue. It is common courtesy to recognize those who have helped you, and it also makes it easier for visitors to find the resolution later.

    Friday, August 16, 2013 9:06 PM