Center tag

Discussion in 'HTML' started by Zach, May 14, 2012.

  1. Zach

    Zach Guest

    Wanting to have elements move in concert when maximising and minimising the
    screen in a browser, I have used <center> on the first element and have
    placed a subsequent elemet relative to that previously centered element.
    This procedure does not work. How should I proceed to do what I want to do?

    Zach.
     
    Zach, May 14, 2012
    #1
    1. Advertising

  2. Zach wrote:
    > Wanting to have elements move in concert when maximising and minimising
    > the screen in a browser, I have used <center> on the first element and
    > have placed a subsequent elemet relative to that previously centered
    > element. This procedure does not work. How should I proceed to do what I
    > want to do?



    Forget about CENTER element and use margins on block elements, so one
    way is with a wrapper DIV with a width and left and right margins set to
    auto:

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
    "http://www.w3.org/TR/html4/strict.dtd">

    <html>

    <head>

    <title>Use Margins</title>
    <style type="text/css">
    ..wrapper {
    width: 80%; margin-left: auto; margin-right: auto;
    /* a litle color to show it off */
    background-color: #eee;
    }
    </style>

    </head>

    <body>
    <div class="wrapper">
    <h1>Using a wrapper DIV</h1>
    <p>As you can see this is one way to do it...</p>
    </div>

    </body>
    </html>

    --
    Take care,

    Jonathan
    -------------------
    LITTLE WORKS STUDIO
    http://www.LittleWorksStudio.com
     
    Jonathan N. Little, May 14, 2012
    #2
    1. Advertising

  3. 2012-05-15 2:15, Zach wrote:

    > What am I doing wrong?


    You're not posting a URL. You're not even posting HTML code (but ASP
    code expected to generate it). You're not explaining clearly what you
    want. Intuitively, it seems that you have two blocks and you are
    centering the latter one and wondering why the former doesn't get centered.

    Oh, and you're using a forged From field. It doesn't matter much these
    days, but it can be taken as an extra clue.

    --
    Yucca, http://www.cs.tut.fi/~jkorpela/
     
    Jukka K. Korpela, May 14, 2012
    #3
  4. Zach wrote:
    >
    > "Jonathan N. Little" <> wrote in message
    > news:joqtqt$b5$...
    >> Zach wrote:
    >>> Wanting to have elements move in concert when maximising and minimising
    >>> the screen in a browser, I have used <center> on the first element and
    >>> have placed a subsequent elemet relative to that previously centered
    >>> element. This procedure does not work. How should I proceed to do what I
    >>> want to do?

    >>
    >>
    >> Forget about CENTER element and use margins on block elements, so one
    >> way is with a wrapper DIV with a width and left and right margins set
    >> to auto:
    >>
    >> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
    >> "http://www.w3.org/TR/html4/strict.dtd">
    >>
    >> <html>
    >>
    >> <head>
    >>
    >> <title>Use Margins</title>
    >> <style type="text/css">
    >> .wrapper {
    >> width: 80%; margin-left: auto; margin-right: auto;
    >> /* a litle color to show it off */
    >> background-color: #eee;
    >> }
    >> </style>
    >>
    >> </head>
    >>
    >> <body>
    >> <div class="wrapper">
    >> <h1>Using a wrapper DIV</h1>
    >> <p>As you can see this is one way to do it...</p>
    >> </div>
    >>
    >> </body>
    >> </html>


    >>


    <snip sig>

    >
    > If I do this:
    >
    > .Wrapper
    > {
    > width:80%;
    > margin-left:auto;
    > margin-right:auto;
    > }
    >
    > .Panel
    > {
    > position:relative;
    > left:+0px;
    > top:+75px;
    > background-color:Yellow;
    > width:950px;
    > height:550px;
    > }
    >
    > <asp:Image ID="Image" runat="server" ImageUrl="~/TopBand.png"
    > CssClass="Wrapper" />
    > <asp:panel ID="TopPanel" runat="server" Cssclass="Panel" ></asp:panel>
    >
    > The top band isn't in the middle
    > and the panel doesn't locate relative to the TopBand.
    >
    > What am I doing wrong?


    Not posting a URL so we can see the output HTML and not the ASP code
    fragment...

    But if I can speculate, since I do not do MS ASP, but Perl and PHP it
    looks like your "Wrapper" is an IMAGE which is neither a block element
    nor able to have descendant elements where the Wrapper rule would apply...


    --
    Take care,

    Jonathan
    -------------------
    LITTLE WORKS STUDIO
    http://www.LittleWorksStudio.com
     
    Jonathan N. Little, May 14, 2012
    #4
  5. Zach

    Neil Gould Guest

    Zach wrote:
    >
    > If I do this:
    >
    > .Wrapper
    > {
    > width:80%;
    > margin-left:auto;
    > margin-right:auto;
    > }
    >

    This should be centered... is it?

    > .Panel
    > {
    > position:relative;
    > left:+0px;
    > top:+75px;
    > background-color:Yellow;
    > width:950px;
    > height:550px;
    > }
    >

    This will not be centered... is it your "top band"? If so, what happens when
    80% of the viewport window's width is less than 950px? Better to set width
    of panel to the same units as the wrapper.

    > <asp:Image ID="Image" runat="server" ImageUrl="~/TopBand.png"
    > CssClass="Wrapper" />
    > <asp:panel ID="TopPanel" runat="server" Cssclass="Panel"
    > ></asp:panel>

    >
    > The top band isn't in the middle
    > and the panel doesn't locate relative to the TopBand.
    >

    You have created two separate, unrelated items, a wrapper and a topband.
    What you might want to do is include the topband *within* the wrapper,
    rather than ouside of it.

    All that said, this is pure conjecture, since I can't render the code you're
    showing. Post a URL or at least HTML code.

    --
    best regards,

    Neil
     
    Neil Gould, May 14, 2012
    #5
  6. Zach

    Zach Guest

    "Jonathan N. Little" <> wrote in message
    news:joqtqt$b5$...
    > Zach wrote:
    >> Wanting to have elements move in concert when maximising and minimising
    >> the screen in a browser, I have used <center> on the first element and
    >> have placed a subsequent elemet relative to that previously centered
    >> element. This procedure does not work. How should I proceed to do what I
    >> want to do?

    >
    >
    > Forget about CENTER element and use margins on block elements, so one way
    > is with a wrapper DIV with a width and left and right margins set to auto:
    >
    > <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
    > "http://www.w3.org/TR/html4/strict.dtd">
    >
    > <html>
    >
    > <head>
    >
    > <title>Use Margins</title>
    > <style type="text/css">
    > .wrapper {
    > width: 80%; margin-left: auto; margin-right: auto;
    > /* a litle color to show it off */
    > background-color: #eee;
    > }
    > </style>
    >
    > </head>
    >
    > <body>
    > <div class="wrapper">
    > <h1>Using a wrapper DIV</h1>
    > <p>As you can see this is one way to do it...</p>
    > </div>
    >
    > </body>
    > </html>
    >
    > --
    > Take care,
    >
    > Jonathan
    > -------------------
    > LITTLE WORKS STUDIO
    > http://www.LittleWorksStudio.com



    If I do this:

    ..Wrapper
    {
    width:80%;
    margin-left:auto;
    margin-right:auto;
    }

    ..Panel
    {
    position:relative;
    left:+0px;
    top:+75px;
    background-color:Yellow;
    width:950px;
    height:550px;
    }

    <asp:Image ID="Image" runat="server" ImageUrl="~/TopBand.png"
    CssClass="Wrapper" />
    <asp:panel ID="TopPanel" runat="server" Cssclass="Panel" ></asp:panel>

    The top band isn't in the middle
    and the panel doesn't locate relative to the TopBand.

    What am I doing wrong?
    Zach
     
    Zach, May 15, 2012
    #6
  7. Zach

    Zach Guest

    "Neil Gould" <> wrote in message
    news:jorequ$cdi$...
    > Zach wrote:

    <snipped>

    > This will not be centered... is it your "top band"? If so, what happens
    > when
    > 80% of the viewport window's width is less than 950px? Better to set width
    > of panel to the same units as the wrapper.
    >

    <snipped>

    That is true, however, there will be some items placed on the wrapped panel
    that need the preset width, rather than a percentage.

    > You have created two separate, unrelated items, a wrapper and a topband.
    > What you might want to do is include the topband *within* the wrapper,
    > rather than ouside of it.


    Yes!!
    Thank you.

    Regards,
    Zach.
     
    Zach, May 15, 2012
    #7
  8. Zach

    Zach Guest

    "Jukka K. Korpela" <> wrote in message
    news:jor7lp$sf6$...
    > 2012-05-15 2:15, Zach wrote:
    >
    >> What am I doing wrong?

    >
    > You're not posting a URL. You're not even posting HTML code (but ASP code
    > expected to generate it). You're not explaining clearly what you want.
    > Intuitively, it seems that you have two blocks and you are centering the
    > latter one and wondering why the former doesn't get centered.
    >
    > Oh, and you're using a forged From field. It doesn't matter much these
    > days, but it can be taken as an extra clue.
    >
    > --
    > Yucca, http://www.cs.tut.fi/~jkorpela/


    Not sure if this helps. But thank you any way.
    Zach.
     
    Zach, May 15, 2012
    #8
  9. Zach

    Zach Guest

    "Jonathan N. Little" <> wrote in message
    news:jor8gm$2j9$...

    > Of the three options I listed in my reply


    You only suggested one procedure

    > what is below was least preferred. Please review what I wrote.


    Your only suggestion, and not three, appears to be the least preferred.

    Zach.
     
    Zach, May 23, 2012
    #9
  10. Zach wrote:
    > "Jonathan N. Little" <> wrote in message
    > news:jor8gm$2j9$...
    >
    >> Of the three options I listed in my reply

    >
    > You only suggested one procedure
    >
    >> what is below was least preferred. Please review what I wrote.

    >
    > Your only suggestion, and not three, appears to be the least preferred.



    In my reply to the email that you sent me I said what the members here
    in this group would need to assist you in decreasing order of desirability:

    "This as I said on Usenet is not very informative for debug HTML and
    CSS. The output of server side code is what we need. Just like this
    Perl is not helpful:

    print header,html(head(title('foo')),body(h1('Simple page'),p('this is
    pretty simple!'),ul(li([a({-href=>@ls},\@ts)]))));

    You need to either setup up a temporary public ASP page that we can
    access to see the resultant generated HTML and CSS (best).

    Or access the sample page yourself and then make a static HTML document
    from the generated source on a public server (okay)

    Or post the source (not so good because it means someone has to paste
    you code to some file of webserver of their own to debug)"


    and you did the third and sent me the source. Unfortunately the source was:

    ....
    <body>
    <form id="form1" runat="server">
    <asp:panel ID="Dummy" runat="server" CssClass="Wrapper1">
    <asp:Image ID="Image1" runat="server"
    ImageUrl="~/TopBand4.png" />
    <asp:panel ID="BasePanel" runat="server"
    Cssclass="BasePanel" ></asp:panel>
    ....

    which is not the HTML output but the ASP code.


    --
    Take care,

    Jonathan
    -------------------
    LITTLE WORKS STUDIO
    http://www.LittleWorksStudio.com
     
    Jonathan N. Little, May 24, 2012
    #10
    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. jstack
    Replies:
    1
    Views:
    628
    Tor Iver Wilhelmsen
    Jul 4, 2003
  2. shruds
    Replies:
    1
    Views:
    872
    John C. Bollinger
    Jan 27, 2006
  3. Nathan Sokalski

    CSS substitution for the <center> tag

    Nathan Sokalski, Jan 16, 2007, in forum: ASP .Net
    Replies:
    5
    Views:
    334
    Przemek Ptasznik
    Jan 17, 2007
  4. Fokke Nauta
    Replies:
    20
    Views:
    13,001
    123Jim
    Jan 26, 2011
  5. Nathan Sokalski

    CSS substitution for the <center> tag

    Nathan Sokalski, Jan 16, 2007, in forum: ASP .Net Web Controls
    Replies:
    3
    Views:
    155
    Nathan Sokalski
    Jan 16, 2007
Loading...

Share This Page