CSS positioning : relative, fixed, absolute and liquid layouts

Discussion in 'HTML' started by KatB, Feb 14, 2005.

  1. KatB

    KatB Guest

    Please note that I have re-checked all my sources, and checked the
    Internet, and either I have missed something or I have misunderstood.
    Which is why I am asking.

    My question is:
    Can you have <div> tags in your physical html file in a specific order
    (for example,
    <div id="one"><p>This is div one</p></div>
    <div id="two"><p>This is div two</p></div>
    <div id="three"><p>This is div three</p></div>
    )

    yet on screen display them in a different order (eg, 3, 2, 1), with a
    fluid/liquid layout, so that on browser resizing, all items are still
    displayed, even though the user may need to scroll vertically?

    As far as I can tell, absolute positioning reduces fluidity?

    Any helpful hints, comments or suggestions would be appreciated.
    Thanks,

    Kat
     
    KatB, Feb 14, 2005
    #1
    1. Advertising

  2. KatB

    Richard Guest

    On Mon, 14 Feb 2005 14:33:01 +1030 KatB wrote:


    > Please note that I have re-checked all my sources, and checked the
    > Internet, and either I have missed something or I have misunderstood.
    > Which is why I am asking.


    > My question is:
    > Can you have <div> tags in your physical html file in a specific order
    > (for example,
    > <div id="one"><p>This is div one</p></div>
    > <div id="two"><p>This is div two</p></div>
    > <div id="three"><p>This is div three</p></div>
    > )


    > yet on screen display them in a different order (eg, 3, 2, 1), with a
    > fluid/liquid layout, so that on browser resizing, all items are still
    > displayed, even though the user may need to scroll vertically?


    > As far as I can tell, absolute positioning reduces fluidity?


    > Any helpful hints, comments or suggestions would be appreciated.
    > Thanks,


    > Kat



    Float:left will order the divisions as "1.........2........3" while
    float:right will order them as "3.........2........1".
    All you have to do is THINK how it's going to look on the screen.
     
    Richard, Feb 14, 2005
    #2
    1. Advertising

  3. KatB

    Erik Blair Guest

    That's an interesting development.

    Are the DIV's the result of a PhP output?

    Have you tried,

    <P><div id="one">This is div one</div></p>
    <P><div id="two">This is div two</div></p>
    <P><div id="three">This is div three</div></p>

    I know it looks strange, but I am a noob to this stuff too.

    Hope this help!

    Erik
    http://www.downloadcrazy.com


    "KatB" <> wrote in message
    news:1108353295.418114@teuthos...
    >
    > Please note that I have re-checked all my sources, and checked the
    > Internet, and either I have missed something or I have misunderstood.
    > Which is why I am asking.
    >
    > My question is:
    > Can you have <div> tags in your physical html file in a specific order
    > (for example,
    > <div id="one"><p>This is div one</p></div>
    > <div id="two"><p>This is div two</p></div>
    > <div id="three"><p>This is div three</p></div>
    > )
    >
    > yet on screen display them in a different order (eg, 3, 2, 1), with a
    > fluid/liquid layout, so that on browser resizing, all items are still
    > displayed, even though the user may need to scroll vertically?
    >
    > As far as I can tell, absolute positioning reduces fluidity?
    >
    > Any helpful hints, comments or suggestions would be appreciated.
    > Thanks,
    >
    > Kat
     
    Erik Blair, Feb 14, 2005
    #3
  4. KatB

    rf Guest

    "Richard" <Anonymous@127.001> wrote
    > On Mon, 14 Feb 2005 14:33:01 +1030 KatB wrote:


    > Float:left will order the divisions as "1.........2........3" while
    > float:right will order them as "3.........2........1".


    Where did the OP state that the divs were to appear *across* the page?

    > All you have to do is THINK <snip>
     
    rf, Feb 14, 2005
    #4
  5. KatB

    rf Guest

    "KatB" <> wrote

    > My question is:
    > Can you have <div> tags in your physical html file in a specific order
    > (for example,
    > <div id="one"><p>This is div one</p></div>
    > <div id="two"><p>This is div two</p></div>
    > <div id="three"><p>This is div three</p></div>
    > )
    >
    > yet on screen display them in a different order (eg, 3, 2, 1), with a
    > fluid/liquid layout, so that on browser resizing, all items are still
    > displayed, even though the user may need to scroll vertically?


    I assume you want these to be arranged vertically on the page.

    Can't be done. You can position div 3 at the top of the page with absolute
    positoning and you can position div 2 after that (the start of div 3 that
    is) but you cannot position div 2 *at the end* of div 3. You don't know
    where div 3 ends.

    Why would you want to do this?

    --
    Cheers
    Richard.
     
    rf, Feb 14, 2005
    #5
  6. KatB

    Mitja Guest

    >> My question is:
    >> Can you have <div> tags in your physical html file in a specific order
    >> (for example,
    >> <div id="one"><p>This is div one</p></div>
    >> <div id="two"><p>This is div two</p></div>
    >> <div id="three"><p>This is div three</p></div>
    >> )
    >>
    >> yet on screen display them in a different order (eg, 3, 2, 1), with a
    >> fluid/liquid layout, so that on browser resizing, all items are still
    >> displayed, even though the user may need to scroll vertically?


    AFAIK no. What is the underlying problem? Probably there are other, more
    suitable ways of solving it.

    > Have you tried,
    >
    > <P><div id="one">This is div one</div></p>
    > <P><div id="two">This is div two</div></p>
    > <P><div id="three">This is div three</div></p>
    >
    > I know it looks strange, but I am a noob to this stuff too.


    No offence, but one can tell :)
    Not only could this in no way help with OP's question, it is also
    incorrect. A paragraph can't containt block-level elements, e.g. divs.

    Also, please don't top-post.
     
    Mitja, Feb 14, 2005
    #6
  7. KatB

    Andy Dingley Guest

    On Mon, 14 Feb 2005 14:33:01 +1030, KatB <>
    wrote:

    >Can you have <div> tags in your physical html file in a specific order
    >yet on screen display them in a different order (eg, 3, 2, 1), with a
    >fluid/liquid layout,


    No. If you want real fluidity to work well, the order in the document
    is significant.
     
    Andy Dingley, Feb 14, 2005
    #7
  8. KatB

    KatB Guest

    rf wrote:
    > "KatB" <> wrote
    >
    >
    >>My question is:
    >>Can you have <div> tags in your physical html file in a specific order
    >> (for example,
    >> <div id="one"><p>This is div one</p></div>
    >> <div id="two"><p>This is div two</p></div>
    >> <div id="three"><p>This is div three</p></div>
    >> )
    >>
    >>yet on screen display them in a different order (eg, 3, 2, 1), with a
    >>fluid/liquid layout, so that on browser resizing, all items are still
    >>displayed, even though the user may need to scroll vertically?

    >
    >
    > I assume you want these to be arranged vertically on the page.
    >
    > Can't be done. You can position div 3 at the top of the page with absolute
    > positoning and you can position div 2 after that (the start of div 3 that
    > is) but you cannot position div 2 *at the end* of div 3. You don't know
    > where div 3 ends.
    >
    > Why would you want to do this?
    >


    Thank you for replying.

    I was reading about search engine optimisation, and it was suggested
    that having the actual content closer to the opening body element(tag)
    would be beneficial.

    So I thought maybe I could have the content listed first, then the
    navigation, and at last, the logo, and use CSS to rearrange it.

    Instead I will minimise the logo and the navigation to bear bones
    essentials.

    Again, Thank you:)

    Kat
     
    KatB, Feb 14, 2005
    #8
  9. KatB

    rf Guest

    "KatB" <> wrote

    > I was reading about search engine optimisation, and it was suggested
    > that having the actual content closer to the opening body element(tag)
    > would be beneficial.


    Ah, thought this might have been what you were after.

    I really don't think it makes any difference. The SE's bot is going to read
    all of the text anyway.

    Probably of more importance is to use the correct elements to mark up your
    content. For example a bot will pay more attention to your headings if they
    are inside a <Hn> element rather than a styled <div>.

    > So I thought maybe I could have the content listed first, then the
    > navigation, and at last, the logo, and use CSS to rearrange it.


    > Instead I will minimise the logo and the navigation to bear bones
    > essentials.


    I would think you should do this anyway.

    The most important viewer of your page is your human viewer. You have eight
    to eleven seconds to grab her attention enough to stay on the page.

    A huge logo or navigation scheme at the top of the page is not going to do
    that. Some worthwhile content is :)
     
    rf, Feb 14, 2005
    #9
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Half Dolla 2003

    Can CSS benefit non-liquid layouts?

    Half Dolla 2003, Jul 22, 2003, in forum: HTML
    Replies:
    10
    Views:
    798
    Adrienne
    Jul 26, 2003
  2. Brian
    Replies:
    0
    Views:
    396
    Brian
    Jul 24, 2003
  3. Chris
    Replies:
    10
    Views:
    1,118
    Chris
    Mar 1, 2004
  4. Replies:
    0
    Views:
    547
  5. jenny wilkinson
    Replies:
    0
    Views:
    640
    jenny wilkinson
    Mar 20, 2013
Loading...

Share This Page