SitePoint Sponsor

User Tag List

Results 1 to 21 of 21

Thread: positioning

  1. #1
    SitePoint Addict TBanks's Avatar
    Join Date
    Jan 2003
    Location
    Earth:\USA\California
    Posts
    228
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    positioning

    I'm trying to create this page in CSS

    http://www.eodweb.com/wsc/test.jpg

    The goal is to have a centered, flexible layout where the elements of the page stay put. I can't figure it out! I've just finished HTML Utopia and am inspired. Unfortunately, I'm also stumped! So, I've ended up putting all my stuff as a background image (if anyone wants to take a stab at suggesting how to position the graphics and text with CSS, I'm so open!) and tried just positioning the picture slideshow.

    http://www.eodweb.com/wsc/test2.htm

    I realize this is a problem for search engines - but on to bigger fish...The problem now is that I need the picture slideshow to be positioned as in the jpg. Currently, both the picture and the caption are wrong, which is secondary to the fact that when the window is resized, it doesn't move with it. I really need to get this finished and am about to resort to table layout (but I don't want to!!).

    I guess, bottom line is, I need something very specific about positioning elements - including text and pictures. I've read the 3 column layout stuff and box model hack and Utopia but I'm still not getting it.

    Suggestions? I'm very open at this point and I need to get this finished.

    Thanks!

    Toni
    Last edited by TBanks; Oct 3, 2003 at 05:09.
    dare to Dream, dare to Be...
    www.eodweb.com

  2. #2
    American't awestmoreland's Avatar
    Join Date
    Sep 2002
    Location
    Grand Rapids, MI
    Posts
    1,168
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You're along the right lines, but I think that you need to make sure that you're setting the position of your page elements relative to each other and not the page itself.

    Check this out to see what I mean: Example


    Andy

    Edit:

    Just noticed that if you try to highlight the "Company Name..." text then the highlighted section is very tall as though the span is 100px tall with its contents vertically-positioned at the bottom. Probably not an issue, but I'd be interested to know what causes it.
    From the English nation to a US location.

  3. #3
    SitePoint Addict TBanks's Avatar
    Join Date
    Jan 2003
    Location
    Earth:\USA\California
    Posts
    228
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by awestmoreland
    make sure that you're setting the position of your page elements relative to each other and not the page itself.
    So (just to see if I get it here). The picture and caption are contained in a main div (kind of like we "contain" tables in a main table to control layout?) Or is it not necessary that you have the "outer" div (thinking for other cases here too). Or is the outer div (in this situation) so that the picture and caption have something (besides the page) to be relative to?

    Assuming this is the case, I think I get the position of the picture - but I'm a little confused on how the caption works. It's positioned with the styesheet, but why did you use the span tag?

    One other thing, I would like the whole thing to be centered in a flexible layout. I'm assuming you avoided positioning the outer div for a reason? I tried making it absoute (meaning relative to the page, right?) but then it stays in one place regardless of how I resize the browser window. Augh!

    Anyway, thanks for explaining a little further - as you can tell, I really don't understand the how and why of things yet! And thanks for helping me out with this in the first place!

    Toni
    dare to Dream, dare to Be...
    www.eodweb.com

  4. #4
    American't awestmoreland's Avatar
    Join Date
    Sep 2002
    Location
    Grand Rapids, MI
    Posts
    1,168
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by TBanks
    The picture and caption are contained in a main div (kind of like we "contain" tables in a main table to control layout?)
    Yes, kinda.
    Quote Originally Posted by TBanks
    Is the outer div (in this situation) so that the picture and caption have something (besides the page) to be relative to?
    Yes. The background you're using is 744 pixels wide. If you made the background image the background of the page and centered it, then when your browser was 1000 pixels wide, there would be a gap of ((1000-744)/2)=133pixels on either side of it. You could set the slideshow to be about 150pixels from the left to make it display over the background, but if you then reduced the size of your browser window to 800 pixels wide, there would only be a gap of 33pixels on either side of the background, but your slideshow would still appear 150px from the left edge of your browser window.
    Quote Originally Posted by TBanks
    I'm a little confused on how the caption works. It's positioned with the styesheet, but why did you use the span tag?
    Try it with a div and see The reason is that a div is a block element and - unless you restrict the size by specifying a width in your CSS - it expands to fill the available space and in this case would be as wide as the surrounding div. This means that you see the background colour of it stretching out across the page (of course you could just not set a background colour). By comparison, the <span> tag is only as long as it needs be.
    Quote Originally Posted by TBanks
    One other thing, I would like the whole thing to be centered in a flexible layout. I'm assuming you avoided positioning the outer div for a reason? I tried making it absoute (meaning relative to the page, right?) but then it stays in one place regardless of how I resize the browser window. Augh!
    You would need to add a text-align: center for your body tag to achieve that, however I've noticed that while that works in IE, I've had problems with it in NS (and possibly other browsers).

    I've amended the Example to hopefully achieve what you're looking for. Note that I also had to put a text-align: left in #outer so that #slideshow and .caption are relative to where they'd be if aligned left. Otherwise the body centering cascades down and #slideshow and .caption are positioned relative to where they'd be if they were centered.
    Quote Originally Posted by TBanks
    Anyway, thanks for explaining a little further - as you can tell, I really don't understand the how and why of things yet! And thanks for helping me out with this in the first place!
    No problem. I may have just made my explanation clear as mud though so if you have any questions, don't worry about asking

    Andy
    From the English nation to a US location.

  5. #5
    SitePoint Addict TBanks's Avatar
    Join Date
    Jan 2003
    Location
    Earth:\USA\California
    Posts
    228
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by awestmoreland
    Try it with a div and see The reason is that a div is a block element and - unless you restrict the size by specifying a width in your CSS - it expands to fill the available space and in this case would be as wide as the surrounding div.
    Yikes, and that's where I started! I just didn't know why the background color stretched ALL the way across the page!


    I've amended the Example to hopefully achieve what you're looking for.
    That's awesome. Funny you mention the bugs with NS and other browsers because I initially viewed your examples with Mozilla and wondered why it wasn't centered! So, when you said you'd used text-align, I still couldn't see it - til I used IE. I'm glad that it was actually omitted in the first example and not just that I couldn't see it in Mozilla - since I wouldn't have caught it - duh!

    I may have just made my explanation clear as mud though so if you have any questions, don't worry about asking
    No, that was great! And - you have no idea how much I appreciate your help! It really helps to have a live person to ask and discuss the "why' and 'how' of the little things. thank you thank you thank you!

    Toni
    dare to Dream, dare to Be...
    www.eodweb.com

  6. #6
    SitePoint Addict TBanks's Avatar
    Join Date
    Jan 2003
    Location
    Earth:\USA\California
    Posts
    228
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    oops - I do have one more question - why is the caption's 'left' position a neg value? Is it positioned in relationship to the 'outer' div or the 'slideshow' div? (or neither?)

    thx

    T
    dare to Dream, dare to Be...
    www.eodweb.com

  7. #7
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,775
    Mentioned
    158 Post(s)
    Tagged
    3 Thread(s)
    Hi,

    Excuse me for butting in right at the end but there are a couple of little points that need clearing up.
    You would need to add a text-align: center for your body tag to achieve that, however I've noticed that while that works in IE, I've had problems with it in NS (and possibly other browsers).
    text-align:center is supposed to be for aligning text and images within an element. It is not supposed to centre a nested element. IE gets this wrong and will centre a nested element whereas mozilla and other browsers will not.

    The correct way to centre is to use margin-right:auto and margin-left auto on the element to be centred. The element needs to have a specified width fro this to work correctly. Unfortunately IE5 doesn't understand the margin:auto thing so you still have to use text-align:center (as you have already done in the body tag.)

    So to center in other browsesr add this code to your style.
    Code:
    body{
    text-align: center;
    }
    #outer{
    background: #184642 url(test.gif) no-repeat top center;
    width: 744px;
    height: 800px;
    text-align: left;
    margin-left:auto;
    margin-right:auto;
    border:1px solid #184642;
    }
    You will notice that i've added a same color border to the element. This is a fix to stop mozilla from sliding the whole page off the left hand side of the viewport as the browser window is resized smaller. (If you want that effect then take the border out.)

    You seem to be struggling with the concept of positioning and although you have achieved the layout effect you required your use of relative positioning could come back to haunt you if you need to add more content later.

    Relative positioning means move the element from where it is to the new co-ordinates entered. It is in fact relative to itself and nothing else. Basically it means move me from where I am and put me xxpx away from that original position regardless of my parent.

    The drawback with this is that by design, relative positioning preserves the space that it originally occupied. (If the element was 100px x 100px then there will be a 100px x 100px gap on the page where the image was). What this means is that all content on the page thinks that the element is where it was originally, its as though it had never been moved at all. If you have moved it a long way away you will have a big gap that static (non positioned) content will avoid. The element in its new position is removed from the flow and will overwrite existing content if it is in the way (which may be the effect you require.)

    Absolute positioning removes the element from the flow completely and doesn't preserve any space. An absolute element will overwrite any content that happens to be in the way and the content will not try to avoid it because it doesn't know its there as an absolute element is removed from the flow.

    The placing of an absolute element is in relation to its nearest ancestor that has a value set for the property position other than static (static means that it is in the normal flow and not positioned (I don't know why they called it static (lol)).

    What this means is say the element's parent has been set with position:relative, (or absolute), then the co-ordinates of the inner element will be in relation to that outer elements top left hand corner. So an element can be absolutely placed inside another element and so on...

    If there are no ancestors of the inner element that have positioning set (as already described) then the containing window is the html element (ie the body outside of all margins).

    Static positioning means that the element is not positioned at all and is in the normal flow of the document. This means that content will flow logically from one element to the next without overlapping other static content. Static positioning is the default so there is no need to set it explicitly.

    Pages may be a mixture of all the above but it is much easier to let most of the page flow fluidly without placing everything absolutely (or relatively).

    You can actually move static positioned elements (as well as the other types already mentioned) by using margin-top (or left,right,bottom) to place them away from other elements.

    As an example I have recode your page without any positioning except for using margin-left etc. (The page is also centred in other browsers.)
    Code:
    <style type="text/css">
    <!--
    body{
    text-align: center;
    }
    
    #outer{
    background: #184642 url(test.gif) no-repeat top center;
    width: 744px;
    height: 800px;
    text-align: left;
    margin-left:auto;
    margin-right:auto;
    border:1px solid #184642;
    }
    
    #slideshow {
    margin-left: 40px;
    margin-top: 100px;
    width:230px;
    text-align:center;
    }
    .caption { 
    font: 12px Arial bold;
    color: #cccc99;
    background-color: transparent;
    }
    //-->
    </style>
    </head>
    <body onload="runSlideShow()">
    <div id="outer">
    <div id="slideshow">
    <p><img src="images/homepage/001.jpg" name="PictureBox" width="230" height="168" alt="" />
    <br /><span id="CaptionBox" class="caption">Company Name, Inc. 2003</span></p>
    </div>
    </div>
    </body>
    </html>
    I'm not saying this way is the only way to do it but just offering an alternative.

    Hope this helps.

    Paul

  8. #8
    SitePoint Addict TBanks's Avatar
    Join Date
    Jan 2003
    Location
    Earth:\USA\California
    Posts
    228
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B
    Excuse me for butting in right at the end
    No problem. Butt away, I'll take all the help I can get!

    to center in other browsesr add this code to your style
    Thanks!

    You seem to be struggling with the concept of positioning and although you have achieved the layout effect you required your use of relative positioning could come back to haunt you if you need to add more content later.
    I AM struggling and yes it WILL come back! Thank you for taking the time to explain this - this is exactly what I need.

    Relative positioning means move the element from where it is to the new co-ordinates entered.
    and where it is (by default) is the order in which it is placed in the code (if it were not positioned or statically positioned)?

    all content on the page thinks that the element is where it was originally
    that could be a problem! How (in the simplest sense) does one overcome this? With z-index/layering? or by positioning things absolutely in the holes?

    The placing of an absolute element is in relation to its nearest ancestor that has a value set for the property position
    This means another element from which it inherits...uh properties? For example outer (if it was positioned) could be the parent for 'slideshow' . Or is it anyway (though it's not positioned) ?? Maybe that's not a good example...

    Well, I kind of get it - it certainly sheds light on some stuff - maybe I have to digest it a little more because it seems I have even more questions! But I am certainly open to further explanations/clarification too!

    Thanks Paul!

    Toni
    dare to Dream, dare to Be...
    www.eodweb.com

  9. #9
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,775
    Mentioned
    158 Post(s)
    Tagged
    3 Thread(s)
    Hi,

    I think you've got the gist of it

    and where it is (by default) is the order in which it is placed in the code (if it were not positioned or statically positioned)?
    Yes elements will take up the order that they are in the html unless some form of positioning is applied to them. Each element will flow logically from one to the next depending on the properties applied to them.

    that could be a problem! How (in the simplest sense) does one overcome this? With z-index/layering? or by positioning things absolutely in the holes?
    When you use position relative you should use it for a reason and not just to move something somewhere else. Using it in the correct context means that you don't have to allow for it later. If you have holes in your pages then you are using the wrong technique to achieve what you want. it means that there is probably a better way to do what you want either by absolute positioning or using margins on static objects.

    I find that there are relatively (sic) few time to use position relative in a page.

    Z indexing just adjusts the stacking order on the page and doesn't physically change the position of an object. It just defines which object is on top etc. Each element that has a position set (relative or absolute) then sets a stacking context for the elements nested within.

    These nested elements have their z-index stacking in relation to their parent and for a nested element to overlap another element with a different parent then its the z-indexe of the parent that determine which elements overlap.

    This means another element from which it inherits...uh properties? For example outer (if it was positioned) could be the parent for 'slideshow' . Or is it anyway (though it's not positioned) ?? Maybe that's not a good example...
    I think you've understand that. If the outer has a position:relative set (no co-ordinates are needed so there is no movement of outer and the element still stays in the flow). Now slideshow can be absolutely placed from the top left of the outer. If the outer moves with the flow then so will the slideshow because it is attached to it. The slideshow will still stay in the same place within outer relative to the top left corner.

    There are many ways of achieving the same thing in CSS but I find it best to keep things as straight forward as possible. It all depends on the tye of layout and the easiest way to achieve the effect you require. This may include absolutely positioning everything but more often than not its a combination of using static and absolute elements. Relative position is often used without co-ordinates to gain a stacking context and keep the element in the flow while allowing absolutely elements to be positioned within it.

    I hope some of this makes sense.

    Paul

  10. #10
    SitePoint Addict TBanks's Avatar
    Join Date
    Jan 2003
    Location
    Earth:\USA\California
    Posts
    228
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    good stuff - again, it's really nice to have someone to explain the details. I have a much better understanding of positioning now - now to play with it a little and see what I can do!

    thanks!

    Toni
    dare to Dream, dare to Be...
    www.eodweb.com

  11. #11
    SitePoint Addict TBanks's Avatar
    Join Date
    Jan 2003
    Location
    Earth:\USA\California
    Posts
    228
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    and...

    Ok, I played and now I have another question - or am seeking clarity anyway...

    Quote Originally Posted by Paul O'B
    You can actually move static positioned elements (as well as the other types already mentioned) by using margin-top (or left,right,bottom) to place them away from other elements.
    So does this mean that when I use margins, I'm moving the object/content (or at least setting the margin value which appears to move the content) relative to it's original position as well? For example, if I have three divs, statically positioned (or in order in the html code) and I want to move the third div to a position (say horizontally level and to the right of the second div) using margins - then, theoretically, the top margin of that (3rd) div will have to be a negative value (to move it up the page from where it would originally sit) and the left margin would be whatever the value necessary to sit clear of the content of the 2nd div? Yes? Without using absolute or relative positioning (though it sounds like using margins is similar in concept to relative positioning - but without the "hole" in the page - if I'm on the right track) ?

    Also - this looks great in IE 6 and Netscape 7 and Mozilla Firebird - can you tell me how positioning works (or doesn't work) in older browsers?

    Thanks!

    Toni
    Last edited by TBanks; Oct 6, 2003 at 05:18.
    dare to Dream, dare to Be...
    www.eodweb.com

  12. #12
    SitePoint Addict langedav's Avatar
    Join Date
    Apr 2002
    Location
    Rotterdam, The Netherlands
    Posts
    207
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Very interesting topic!
    Now i have another question (maybe this should be a whole new topic but with all the input found here i'd thought this would now be the best place :-)) anyway, now i have this problem:

    I have a div, let's say width: 800px height: 500px and i want it positioned in the middle of my screen. So not only horizontally but also vertically. Can this be done only using layers and css or do we also have to use javascript to 'read' a persons resolution?

    Hopefully some of you have experience with this one and want to share this with the rest of us??

  13. #13
    American't awestmoreland's Avatar
    Join Date
    Sep 2002
    Location
    Grand Rapids, MI
    Posts
    1,168
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    My money would be on the Javascript route, but see how many times I've been wrong before
    From the English nation to a US location.

  14. #14
    SitePoint Addict
    Join Date
    Sep 2003
    Location
    Europe
    Posts
    222
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    No JavaScript needed, just some creative CSS:
    http://www.stijlstek.nl/demo/center.html
    http://www.limpid.nl/arthur2/

  15. #15
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,775
    Mentioned
    158 Post(s)
    Tagged
    3 Thread(s)
    Hi Tbanks,

    Your assumptions are correct. A negative margin will pull an object (even a static object) back and maybe on top of another object. The normal flow will then continue from wherever this object is placed. This may cause it to overwrite previous content if you have moved it above, but of couse this may be the effect you desired.

    If you are trying to arrang objects horizontally then you may need to think about using floats instead.

    As usual with css there are many ways to do the same thing and each will depend on the situation.

    As for which browsers will accept positioning I suggest you look up one of the browsers compatability charts on the web to make exactly sure. However most modern browsers will position correctly (aprt form their bugs etc) and of course you will need to take into account IE5's broken box model.

    Hope this helps.

    Paul

  16. #16
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,775
    Mentioned
    158 Post(s)
    Tagged
    3 Thread(s)
    Hi Langedav,

    In case you are didn't understand the concept in yngwin's link, here's a brief outline of how to centre.

    If you want to centre an image (or element)vertically and horizontally in the page for perhaps use in a splash page or something similar. Then one way to accomplish this without tables is to use the following CSS.
    Code:
    <style type="text/css" media="screen">
    html,body {
     height: 100%; 
    }
    img {
     position: absolute;
     left: 50%;
     top: 50%;
     margin-top: -30px; /* make this half your image height */
     margin-left: -30px; /* make this half your image width */
    }
    </style>
    In the body of your document add the following
    Code:
    :
    <div ><img src="img.gif" width="60" height="60" /></div>
    The first thing we do is declare the body at 100% so that we have something to work on and allow us to find the centre of.

    We then absolutely position the image (or element)at 50% from the left and 50% from the top. This will place the top left hand corner of the image in the centre of the page. Now to get the image completely central we apply a negative margin to the left and right, which will be half the width and half the height of the image respectively.

    This has the effect of dragging the image back into the centre. If our image is 60px square we drag it left by -30px and up by -30px.

    Now our image is centred and will stay central when the window is resized. (This will only work when you know in advance what size your image is and obviously will not remain central if you scroll the window.)

    This technique should work in most modern browsers but as usual you should text in all the browsers you wish to support.

    Hope this helps.

    Paul

  17. #17
    SitePoint Addict langedav's Avatar
    Join Date
    Apr 2002
    Location
    Rotterdam, The Netherlands
    Posts
    207
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    It is so easy... Why didn't i come up with that??
    No seriously, it is so obvious :-)

    I love this website!

  18. #18
    SitePoint Addict TBanks's Avatar
    Join Date
    Jan 2003
    Location
    Earth:\USA\California
    Posts
    228
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B
    Hope this helpsl
    So much! Thanks for everything.

    Quote Originally Posted by langedav
    I love this website!
    Me too!! Sitepoint and its community ROCKS!

    Know what else? CSS is COOL! I'm really enjoying it!!

    Toni
    dare to Dream, dare to Be...
    www.eodweb.com

  19. #19
    SitePoint Addict langedav's Avatar
    Join Date
    Apr 2002
    Location
    Rotterdam, The Netherlands
    Posts
    207
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by yngwin
    No JavaScript needed, just some creative CSS:
    http://www.stijlstek.nl/demo/center.html
    http://www.limpid.nl/arthur2/
    I have tested the code and it does work great in many different browsers. Unfortunally vertical alignment does not work in IE 5.0 for Mac [img]images/smilies/confused.gif[/img]

  20. #20
    SitePoint Addict
    Join Date
    Sep 2003
    Location
    Europe
    Posts
    222
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Does it work in version 5.2? I don't think many people still use IE5.0/Mac... I don't own a Mac, so I can't test it on that platform.

  21. #21
    SitePoint Addict langedav's Avatar
    Join Date
    Apr 2002
    Location
    Rotterdam, The Netherlands
    Posts
    207
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by yngwin
    Does it work in version 5.2? I don't think many people still use IE5.0/Mac... I don't own a Mac, so I can't test it on that platform.
    I tested it with IE5.1 for the Mac (sorry my mistake). I suffer so many problems with this browser... [img]images/smilies/bawling.gif[/img]


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •