css bottom && center

Discussion in 'HTML' started by Jan Faerber, Mar 13, 2005.

  1. Jan Faerber

    Jan Faerber Guest

    With Mozilla

    a)
    <div style="position:absolute; top:80%; text-align:center"><a
    href="...">------</a></div>
    looks like

    |--------------------------------------------|
    | |
    | |
    | |
    | |
    | |
    | ------ |
    | |
    |--------------------------------------------|

    b)
    <div style="text-align:center"><a href="...">------</a></div>
    looks like

    |--------------------------------------------|
    | ------ |
    | |
    | |
    | |
    | |
    | |
    | |
    |--------------------------------------------|

    c)
    What can I do that it looks like this when a) does not work?

    |--------------------------------------------|
    | |
    | |
    | |
    | |
    | |
    | |
    | ------ |
    |--------------------------------------------|



    --
    Jan

    http://www.h-tut.at
    Jan Faerber, Mar 13, 2005
    #1
    1. Advertising

  2. in alt.html, Jan Faerber wrote:
    > With Mozilla
    >
    > a)
    > <div style="position:absolute; top:80%; text-align:center"><a
    > href="...">------</a></div>
    > looks like


    [ASCII snipped, wants to have centered vertically]

    Add
    width: 100%;
    or
    left:0;right:0;


    --
    Lauri Raittila <http://www.iki.fi/lr> <http://www.iki.fi/zwak/fonts>
    Utrecht, NL.
    Lauri Raittila, Mar 13, 2005
    #2
    1. Advertising

  3. Jan Faerber wrote:

    <snip>
    > c)
    > What can I do that it looks like this when a) does not work?
    >
    > |--------------------------------------------|
    > | |
    > | |
    > | |
    > | |
    > | |
    > | |
    > | ------ |
    > |--------------------------------------------|
    >
    >
    >

    To get (c) add 'width' to your divider like:

    <div style="position:absolute; top:80%; text-align:center WIDTH: 100%"><a
    href="...">------</a></div>

    else your link will be centered with a DIV, but the DIV is only as wide
    it needs to be, if you had added a border to your DIV it would have
    looked like:
    |--------------------------------------------|
    | |
    | |
    | |
    | |
    | |
    |+------+ |
    ||------| |
    |+------+ |
    |--------------------------------------------|

    shows that the link is indeed centered within the DIV but nothing is
    defined to center the DIV within its container...
    or of course your could have the container, in this case the BODY center
    its contents, but I do not think that is what you intended.

    --
    Take care,

    Jonathan
    -------------------
    LITTLE WORKS STUDIO
    http://www.LittleWorksStudio.com
    Jonathan N. Little, Mar 13, 2005
    #3
  4. Jan Faerber

    Jan Faerber Guest

    Lauri Raittila ... output:

    > in alt.html, Jan Faerber wrote:
    >> With Mozilla
    >>
    >> a)
    >> <div style="position:absolute; top:80%; text-align:center"><a
    >> href="...">------</a></div>
    >> looks like

    >
    > [ASCII snipped, wants to have centered vertically]


    Why vertically?

    > Add
    > width: 100%;
    > or
    > left:0;right:0;


    Yes, this works - thank you! :)
    I understand - the div section has to be made wider.



    --
    Jan

    http://www.h-tut.at
    Jan Faerber, Mar 14, 2005
    #4
  5. Jan Faerber

    Jan Faerber Guest

    Jonathan N. Little ... output:


    > shows that the link is indeed centered within the DIV but nothing is
    > defined to center the DIV within its container...
    > or of course your could have the container, in this case the BODY center
    > its contents, but I do not think that is what you intended.


    Thank you for this explaination!
    I don't know why it was not clear to me before but now I think I can predict
    the behaviour of a browser much better.



    --
    Jan

    http://www.h-tut.at
    Jan Faerber, Mar 14, 2005
    #5
    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. Dan
    Replies:
    1
    Views:
    8,337
    ainigma
    Apr 4, 2008
  2. Andrew
    Replies:
    1
    Views:
    3,573
    Travis Newbury
    Jan 12, 2005
  3. Replies:
    17
    Views:
    1,580
    acorn
    Dec 1, 2005
  4. Noozer
    Replies:
    1
    Views:
    7,101
    Carolyn Marenger
    Mar 13, 2006
  5. Cuthbert
    Replies:
    8
    Views:
    420
    Ancient_Hacker
    Sep 13, 2006
Loading...

Share This Page