Correctness of code for box with header

Discussion in 'HTML' started by Ryan Stewart, Mar 6, 2004.

  1. Ryan Stewart

    Ryan Stewart Guest

    In some situations, I'd like to put some content within a box with a header.
    No real problem there. But what if I want the header to have something on
    the left hand side as well as on the right, and possibly of different sizes?
    The code I have included appears to work fine in IE 6.0, Mozilla 1.6, NN
    7.1, and Opera 7.23, except that Opera chops off the bottom of the 'g' in
    "Right". Padding problem? That's minor though. I'm curious if there's a
    better way to accomplish this look. As I have it below, you have to
    micromanage the heights to fit whatever is within the header. Furthermore,
    if you want to put an image in the header, I think you'd have to specify a
    fixed height in 'px' to ensure it fits the image properly. Any and all
    comments are welcome.

    Code:
    <html>
    <head><title>A Container</title></head>
    <body>
    <!-- Start box -->
    <div style="width: 250px; border: 2px solid #333399;">
    <!-- Start header -->
    <div style="color: #ffffff; background-color: #333399; padding: 2px;
    height: 2em;">
    <div style="float: left; line-height: 2em; vertical-align: center;">
    Left
    </div>
    <div style="float: right; font-size: 200%;">
    Right
    </div>
    <div>
    &nbsp;
    </div>
    </div> <!-- End header -->

    <!-- Start body -->
    <div>
    <p>Some stuff to put in this block.</p>
    <p>Could be a lot.</p>
    <p>But you never know.</p>
    </div> <!-- End body -->

    </div> <!-- End box -->
    </body>
    </html>
    Ryan Stewart, Mar 6, 2004
    #1
    1. Advertising

  2. Ryan Stewart

    Spartanicus Guest

    "Ryan Stewart" <> wrote:

    >In some situations, I'd like to put some content within a box with a header.


    h1, h2, h3, h4, h5, h6 take your pick (don't use divs)

    >No real problem there. But what if I want the header to have something on
    >the left hand side as well as on the right, and possibly of different sizes?


    Without actual data it's impossible to make suggestions as to the right
    type of markup. Achieving the look is the easy bit (text-align one bit,
    float the other).

    >The code I have included


    URLs are preferred.

    >appears to work fine in IE 6.0, Mozilla 1.6, NN
    >7.1, and Opera 7.23, except that Opera chops off the bottom of the 'g' in
    >"Right". Padding problem?


    I get the same in Mozilla, IE stupidly stretches the div height to
    accommodate the content (non standard compliant behaviour).

    >if you want to put an image in the header, I think you'd have to specify a
    >fixed height in 'px' to ensure it fits the image properly.


    Probably (depends on context).

    >vertical-align: center


    vertical-align:middle

    --
    Spartanicus
    Spartanicus, Mar 6, 2004
    #2
    1. Advertising

  3. Ryan Stewart

    Ryan Stewart Guest

    "Spartanicus" <> wrote in message
    news:...
    > "Ryan Stewart" <> wrote:
    >
    > >In some situations, I'd like to put some content within a box with a

    header.
    >
    > h1, h2, h3, h4, h5, h6 take your pick (don't use divs)

    Okay, but whichever I use, my questions remain the same.

    >
    > >No real problem there. But what if I want the header to have something on
    > >the left hand side as well as on the right, and possibly of different

    sizes?
    >
    > Without actual data it's impossible to make suggestions as to the right
    > type of markup. Achieving the look is the easy bit (text-align one bit,
    > float the other).
    >

    The data is dynamic. What I provided is representative of what this box
    widget could contain. The look is what I'm concerned with here. Is there a
    better way to get this same look? My main concern is the header. The body is
    very simple.

    > >The code I have included

    >
    > URLs are preferred.
    >

    http://68.184.230.252:8080/strutsTest/testPage.jsp
    for now.

    > >appears to work fine in IE 6.0, Mozilla 1.6, NN
    > >7.1, and Opera 7.23, except that Opera chops off the bottom of the 'g' in
    > >"Right". Padding problem?

    >
    > I get the same in Mozilla, IE stupidly stretches the div height to
    > accommodate the content (non standard compliant behaviour).
    >

    What version of Mozilla? With 1.6, it doesn't cut anything off, though it is
    a bit closer to the bottom than in IE. Yes, IE will stretch a div to
    surround any floats that it contains, and though that is not in compliance
    with standards, it's the behavior I sometimes wish for and specifically what
    I would like in this instance. Then I wouldn't need the empty div there to
    fill in the gap between the floats.

    > >if you want to put an image in the header, I think you'd have to specify

    a
    > >fixed height in 'px' to ensure it fits the image properly.

    >
    > Probably (depends on context).
    >

    If the image is taller than 1em, I think you would need to stretch the
    header to accomodate it.

    > >vertical-align: center

    >
    > vertical-align:middle
    >

    Oops. Obviously I didn't need it though, as the text was positioned
    correctly. I think that was a holdover from something I had tried before.

    > --
    > Spartanicus

    Thanks for the reply.
    Ryan Stewart, Mar 6, 2004
    #3
  4. Ryan Stewart

    Spartanicus Guest

    "Ryan Stewart" <> wrote:

    >> Without actual data it's impossible to make suggestions as to the right
    >> type of markup. Achieving the look is the easy bit (text-align one bit,
    >> float the other).
    >>

    >The data is dynamic. What I provided is representative of what this box
    >widget could contain.


    It isn't, hence it's impossible to suggest markup.

    >The look is what I'm concerned with here.


    First get your markup right, then start thinking about how you want it
    to look.

    >Is there a better way to get this same look?


    I just told you. We can't supply a complete example without real
    content.

    >> I get the same in Mozilla, IE stupidly stretches the div height to
    >> accommodate the content (non standard compliant behaviour).
    >>

    >What version of Mozilla?


    A recent one.

    >With 1.6, it doesn't cut anything off


    It probably does with different settings. IIRC you used relative font
    sizing, thus user settings affects the result.

    >Yes, IE will stretch a div to
    >surround any floats that it contains, and though that is not in compliance
    >with standards, it's the behavior I sometimes wish for and specifically what
    >I would like in this instance. Then I wouldn't need the empty div there to
    >fill in the gap between the floats.


    Use a standard compliant renderer for developing, only bring in IE at
    the end of the developing cycle.

    >>>if you want to put an image in the header, I think you'd have to specify
    >>>a fixed height in 'px' to ensure it fits the image properly.

    >>
    >> Probably (depends on context).
    >>

    >If the image is taller than 1em, I think you would need to stretch the
    >header to accomodate it.


    I've used a pixel sized header so that it matches the height of an image
    here: http://www.pan-europe.utvinternet.ie

    The navbar used on that page uses left and right aligned text in the way
    I suggested, vertical alignment is achieved by setting an appropriate
    line height and font size. You can specify different font sizes to
    create the visual appearance you want provided you use appropriate
    values for both.

    --
    Spartanicus
    Spartanicus, Mar 7, 2004
    #4
  5. Ryan Stewart

    Spartanicus Guest

    Spartanicus <> wrote:

    >I've used a pixel sized header so that it matches the height of an image
    >here: http://www.pan-europe.utvinternet.ie


    To expand on that, the sizing in pixels is done via line-height, not
    height, thus the header will expand to accommodate font zooming.

    --
    Spartanicus
    Spartanicus, Mar 7, 2004
    #5
  6. Ryan Stewart

    Ryan Stewart Guest

    "Spartanicus" <> wrote in message
    news:...
    > "Ryan Stewart" <> wrote:
    >
    > >> Without actual data it's impossible to make suggestions as to the right
    > >> type of markup. Achieving the look is the easy bit (text-align one bit,
    > >> float the other).
    > >>

    > >The data is dynamic. What I provided is representative of what this box
    > >widget could contain.

    >
    > It isn't, hence it's impossible to suggest markup.
    >

    How can you say it isn't representative when you don't know what I'm doing
    with it? I want a bordered box with a header that can have some text on the
    left and on the right at the same time. That's how my sample layout was
    provided. The main content of the box itself can vary.

    > >The look is what I'm concerned with here.

    >
    > First get your markup right, then start thinking about how you want it
    > to look.
    >

    That's exactly what I was asking about with this post originally. How do you
    suggest I make my markup "right"?

    > >Is there a better way to get this same look?

    >
    > I just told you. We can't supply a complete example without real
    > content.
    >

    Define "real content". As I said, text to the left and right in the header,
    internal content may be a few lines of text, may be text and graphics, may
    be a complex layout.

    > >> I get the same in Mozilla, IE stupidly stretches the div height to
    > >> accommodate the content (non standard compliant behaviour).
    > >>

    > >What version of Mozilla?

    >
    > A recent one.
    >
    > >With 1.6, it doesn't cut anything off

    >
    > It probably does with different settings. IIRC you used relative font
    > sizing, thus user settings affects the result.
    >

    I did, yes. That's probably what caused it.

    > >Yes, IE will stretch a div to
    > >surround any floats that it contains, and though that is not in

    compliance
    > >with standards, it's the behavior I sometimes wish for and specifically

    what
    > >I would like in this instance. Then I wouldn't need the empty div there

    to
    > >fill in the gap between the floats.

    >
    > Use a standard compliant renderer for developing, only bring in IE at
    > the end of the developing cycle.
    >

    No such thing, AFAIK. I develop in IE and Mozilla or Netscape concurrently
    so that I don't have to spend an inordinate amount of time tracking down
    stupid little incompatibilities in one browser or the other.

    > >>>if you want to put an image in the header, I think you'd have to

    specify
    > >>>a fixed height in 'px' to ensure it fits the image properly.
    > >>
    > >> Probably (depends on context).
    > >>

    > >If the image is taller than 1em, I think you would need to stretch the
    > >header to accomodate it.

    >
    > I've used a pixel sized header so that it matches the height of an image
    > here: http://www.pan-europe.utvinternet.ie
    >
    > The navbar used on that page uses left and right aligned text in the way
    > I suggested, vertical alignment is achieved by setting an appropriate
    > line height and font size. You can specify different font sizes to
    > create the visual appearance you want provided you use appropriate
    > values for both.
    >
    > --
    > Spartanicus

    Thanks for the link. I'll definitely look into it more. I notice though that
    you don't seem to have a noindex class defined anywhere, though you use it
    on your navbar.
    Ryan Stewart, Mar 7, 2004
    #6
  7. Ryan Stewart

    Spartanicus Guest

    "Ryan Stewart" <> wrote:

    >> >The data is dynamic. What I provided is representative of what this box
    >> >widget could contain.

    >>
    >> It isn't, hence it's impossible to suggest markup.
    >>

    >How can you say it isn't representative when you don't know what I'm doing
    >with it?


    "Left" and "Right" is not real content, your usage of a div suggest that
    it has no semantic distinction from normal text, yet you use it as a
    header. Whatever content you actually use in place of "Left" and "Right"
    is probably not part of 1 header, thus they need to be marked up
    individually, hence the method you need to employ to style it so that
    you'll get the desired look can't be established.

    >> First get your markup right, then start thinking about how you want it
    >> to look.
    >>

    >That's exactly what I was asking about with this post originally. How do you
    >suggest I make my markup "right"?


    Provide a real example with real content.

    >> Use a standard compliant renderer for developing, only bring in IE at
    >> the end of the developing cycle.
    >>

    >No such thing, AFAIK. I develop in IE and Mozilla or Netscape concurrently
    >so that I don't have to spend an inordinate amount of time tracking down
    >stupid little incompatibilities in one browser or the other.


    Then you get what you describe, a sense of "IE is doing what I want, how
    can I get other UAs in line with IE". This approach won't work.

    >I notice though that
    >you don't seem to have a noindex class defined anywhere, though you use it
    >on your navbar.


    It's used by the Atomz search bot.

    --
    Spartanicus
    Spartanicus, Mar 7, 2004
    #7
  8. Ryan Stewart

    Ryan Stewart Guest

    "Spartanicus" <> wrote in message
    news:...
    > "Ryan Stewart" <> wrote:
    >
    > >> >The data is dynamic. What I provided is representative of what this

    box
    > >> >widget could contain.
    > >>
    > >> It isn't, hence it's impossible to suggest markup.
    > >>

    > >How can you say it isn't representative when you don't know what I'm

    doing
    > >with it?

    >
    > "Left" and "Right" is not real content, your usage of a div suggest that
    > it has no semantic distinction from normal text, yet you use it as a
    > header. Whatever content you actually use in place of "Left" and "Right"
    > is probably not part of 1 header, thus they need to be marked up
    > individually, hence the method you need to employ to style it so that
    > you'll get the desired look can't be established.
    >
    > >> First get your markup right, then start thinking about how you want it
    > >> to look.
    > >>

    > >That's exactly what I was asking about with this post originally. How do

    you
    > >suggest I make my markup "right"?

    >
    > Provide a real example with real content.
    >

    The whole point of this is that it's supposed to be generic. I'm developing
    some custom tags for JSP to create a content pane with customizable look and
    feel via CSS. "Left" is the title describing the box as a whole, i.e.
    "Message", "Category Listing", "File Description", "User Details",
    "Favorites", "My Breakfast". It could be anything. "Right" could be small
    hyperlinks, icons, text, or a mix of the three. Most likely to be used as
    controls, like a window's minimize, maximize, and close. I don't have time
    just now to update the HTML, but I may do so later if you insist.

    > >> Use a standard compliant renderer for developing, only bring in IE at
    > >> the end of the developing cycle.
    > >>

    > >No such thing, AFAIK. I develop in IE and Mozilla or Netscape

    concurrently
    > >so that I don't have to spend an inordinate amount of time tracking down
    > >stupid little incompatibilities in one browser or the other.

    >
    > Then you get what you describe, a sense of "IE is doing what I want, how
    > can I get other UAs in line with IE". This approach won't work.
    >

    I never once asked for that. You pointed out that IE wasn't in compliance
    with standards. I agreed but noted its behavior was at times desirable. I
    never asked how to get the same behavior from other agents.
    Ryan Stewart, Mar 7, 2004
    #8
  9. Ryan Stewart

    Spartanicus Guest

    "Ryan Stewart" <> wrote:

    >> Provide a real example with real content.
    >>

    >The whole point of this is that it's supposed to be generic. I'm developing
    >some custom tags for JSP to create a content pane with customizable look and
    >feel via CSS.


    This is not how css should be used:
    http://www.w3.org/TR/CSS2/selector.html#class-html

    >"Left" is the title describing the box as a whole, i.e.
    >"Message", "Category Listing", "File Description", "User Details",
    >"Favorites", "My Breakfast". It could be anything. "Right" could be small
    >hyperlinks, icons, text, or a mix of the three. Most likely to be used as
    >controls, like a window's minimize, maximize, and close.


    These controls are provided by the UA, creating another set of controls
    inside the document can only confuse.

    --
    Spartanicus
    Spartanicus, Mar 7, 2004
    #9
  10. Ryan Stewart

    Ryan Stewart Guest

    --
    Ryan Stewart, A1C USAF
    805 CSPTS/SCBE
    "Spartanicus" <> wrote in message
    news:...
    > "Ryan Stewart" <> wrote:
    >
    > >> Provide a real example with real content.
    > >>

    > >The whole point of this is that it's supposed to be generic. I'm

    developing
    > >some custom tags for JSP to create a content pane with customizable look

    and
    > >feel via CSS.

    >
    > This is not how css should be used:
    > http://www.w3.org/TR/CSS2/selector.html#class-html
    >

    I assume you're referring to the note at the bottom. That's something I've
    been trying to remember: not using divs for everything, but using other tags
    for their intended purpose. I've never been taught HTML in any kind of
    formal way, and I'm just making the transition to tableless layout,
    primarily because I have the time to do so. I prefer to learn the correct
    way to do things, though, even if I get started off the wrong way.

    > >"Left" is the title describing the box as a whole, i.e.
    > >"Message", "Category Listing", "File Description", "User Details",
    > >"Favorites", "My Breakfast". It could be anything. "Right" could be small
    > >hyperlinks, icons, text, or a mix of the three. Most likely to be used as
    > >controls, like a window's minimize, maximize, and close.

    >
    > These controls are provided by the UA, creating another set of controls
    > inside the document can only confuse.
    >

    Either we don't understand each other, or I disagree. Updated version (code
    listing below):
    http://68.184.230.252:8080/strutsTest/testPage.jsp

    The "Edit" is what I mean by a control. It could easily be replaced by an
    icon.

    > --
    > Spartanicus


    <html>
    <head>
    <title>A Container</title>
    <style>
    .control {
    border: 1px solid #dddddd;
    color: #ffffff;
    font-size: 75%;
    margin-right: 2px;
    padding: 0 2px;
    text-decoration: none;
    }

    h4#boxHeader {
    background-color: #333399;
    color: #ffffff;
    font-weight: normal;
    line-height: 1.33em;
    margin: 0;
    }
    </style>
    </head>
    <body>
    <!-- Start box -->
    <div style="width: 15em; border: 2px solid #333399;">

    <!-- Start header -->
    <h4 id="boxHeader">
    <p style="float: left; margin: 0;">
    My Breakfast Menu
    </p>
    <p style="text-align: right; margin: 0;">
    <a href="#" class="control">Edit</a>
    </p>
    </h4>
    <!-- End header -->

    <!-- Start body -->
    <ul style="margin-top: 10px; margin-bottom: 10px;">
    <li>Eggs -- 2</li>
    <li>Toast -- 2</li>
    <li>Sausage -- 1</li>
    <li>Orange Juice -- 1</li>
    </ul>
    <!-- End body -->

    </div>
    <!-- End box -->
    </body>
    </html>
    Ryan Stewart, Mar 7, 2004
    #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. Gnarlodious
    Replies:
    4
    Views:
    17,565
    elizas
    May 5, 2010
  2. David
    Replies:
    20
    Views:
    656
    Nicola Musatti
    Jun 3, 2008
  3. David
    Replies:
    2
    Views:
    318
    David
    Jun 11, 2008
  4. wimalopaan
    Replies:
    6
    Views:
    396
    Salt_Peter
    Nov 22, 2008
  5. mlt
    Replies:
    2
    Views:
    820
    Jean-Marc Bourguet
    Jan 31, 2009
Loading...

Share This Page