Re: Replacing tables with divs

Discussion in 'HTML' started by dorayme, Mar 8, 2012.

  1. dorayme

    dorayme Guest

    In article <>,
    Alfred Molon <> wrote:

    > 1. How do I replace a table with three columns with an equivalent div-
    > based code?
    >
    > From:
    > <table>
    > <tr><td></td><td></td><td></td></tr>
    > </table>
    >
    > to:
    > <div>
    > <div id="div1"></div><div id="div2"></div><div id="div3"></div>
    > </div>
    >
    > 2. Same question for a table with three rows:
    >
    > From:
    > <table>
    > <tr><td></td></tr>
    > <tr><td></td></tr>
    > <tr><td></td></tr>
    > </table>
    >
    > to an equivalent code with divs.
    >
    > Should be easily possible with CSS based on what I understood.


    The three columns is easy if you have few requirements other than that
    the divs go from left to right on a big enough screen, not necessarily
    filling the width of the screen. But soon as you start imposing
    requirements that are easily satisfied in table layout, the difficulty
    curve gets ever steeper.

    Clearly, you want three blocks of content always left to right and
    never wrapping under as with your first table example above. Many
    ways, you can float the three inner divs and impose width
    restrictions. Clearly, the simple

    #div1, #div2, #div3 {float: left;}

    cannot do the job without further restrictions because you will easily
    risk floats wrapping.

    Similar considerations apply to another method of styling:

    #div1, #div2, #div3 {display: inline-block;}

    There is no simple one general answer to how to fix this that is
    independent of at least some details about your actual requirements on
    a job in hand. If you have an idea of the purpose of the columns, the
    width restrictions you would be happy with, most of your needs can be
    accommodated. But not as easily or as robustly cross browser-wise as
    with HTML tables.

    There is some css that you can use that have no width requirements and
    the result behaves much more like a table, namely the display: table;
    and display: table-cell;

    <http://dorayme.netweaver.com.au/tableStyle.html>

    should look the part in some modern browsers.

    --
    dorayme
     
    dorayme, Mar 8, 2012
    #1
    1. Advertising

  2. 2012-03-08 20:38, Alfred Molon wrote:

    > The requirements are various, since at the moment I'm relying on tables
    > for layout for a variety of purposes.


    The solutions need to vary too, to the extent that any solution is
    needed. There's no reason to be religious about tables, for layout or
    otherwise.

    > In one case I'd like to replace
    > the rows of thumbnails on my site, e.g.
    > http://www.molon.de/galleries/Spain/Granada/Alhambra/


    That looks a bit complicated, with nested tables, but not too bad. Some
    care is needed, but care would be needed in any other approach, too. And
    there's little reason to transmogrify the existing structure just on
    GROSS principles (Get Rid Of Slimy tableS).

    But if such a page structure were designed now, or if it were to be
    redesigned (not just re-implemented but all aspects reconsidered), you
    could use a set of div elements, set to the same specific width in
    pixels, each containing span elements, set to positioned blocks each
    with a specific width and content centered (text-align: center, I
    suppose, would do, if the content is just an image).

    If you want tabular rendering with _fixed_ widths (in pixels, em units,
    or other units), then you can use such a strategy. Or you could use
    floated elements. Either way, it is a bit more messy than a simple HTML
    table, but not very much.

    If, on the other hand, you want columns with widths that adapt to
    contents (e.g., a column is as wide as its widest cell contents
    requires), then you need a table, either in HTML or in CSS.

    > Another case is the menu bar at
    > http://www.molon.de/test/test14/
    >
    > where for the moment I put the galleries, categories and travelogues
    > items into tds. I guess here a div with float:left would work.


    Surely. And float: left can even be used to set an item to the minimal
    width required by its contents, if that's what you want.

    Or you could just put inline elements, like simple links (<a> elements)
    one after another, and they would appear linearly in succession, space
    permitting. But if you wish to have some part of them left-aligned and
    the rest right-aligned, with a gap between, then you would probably find
    a simple two-cell table the simplest way. Floats are another approach;
    they behave differently when the available width is smaller than needed
    for all the items.

    The point is that for some layout features, tables do the job best. This
    does not mean that you should use tables for layout in general. For
    example, just putting a box under another box, with the same width,
    doesn't really call for a table.

    > In another situation I'd like to place a button 50px to the right of an
    > image, vertically in the middle. I've used a table with one row and two
    > cells to position the button, but I guess that divs with CSS could do
    > the trick as well.


    This can be done easily: assuming markup

    <div class=foo><img src=test.jpg alt=test> <button>Do!</button></div>

    you could have just the following stylesheet:

    ..foo *{
    vertical-align: middle;
    }
    ..foo button {
    margin-left: 50px;
    }

    (One of the pitfalls of CSS is that vertical-align has no effect on
    block elements. It needs to be set on table cells or, as here, on inline
    elements, in this case the img and button elements.)

    --
    Yucca, http://www.cs.tut.fi/~jkorpela/
     
    Jukka K. Korpela, Mar 8, 2012
    #2
    1. Advertising

  3. 2012-03-08 20:38, Alfred Molon wrote:

    > The requirements are various, since at the moment I'm relying on tables
    > for layout for a variety of purposes.


    The solutions need to vary too, to the extent that any solution is
    needed. There's no reason to be religious about tables, for layout or
    otherwise.

    > In one case I'd like to replace
    > the rows of thumbnails on my site, e.g.
    > http://www.molon.de/galleries/Spain/Granada/Alhambra/


    That looks a bit complicated, with nested tables, but not too bad. Some
    care is needed, but care would be needed in any other approach, too. And
    there's little reason to transmogrify the existing structure just on
    GROSS principles (Get Rid Of Slimy tableS).

    But if such a page structure were designed now, or if it were to be
    redesigned (not just re-implemented but all aspects reconsidered), you
    could use a set of div elements, set to the same specific width in
    pixels, each containing span elements, set to positioned blocks each
    with a specific width and content centered (text-align: center, I
    suppose, would do, if the content is just an image).

    If you want tabular rendering with _fixed_ widths (in pixels, em units,
    or other units), then you can use such a strategy. Or you could use
    floated elements. Either way, it is a bit more messy than a simple HTML
    table, but not very much.

    If, on the other hand, you want columns with widths that adapt to
    contents (e.g., a column is as wide as its widest cell contents
    requires), then you need a table, either in HTML or in CSS.

    > Another case is the menu bar at
    > http://www.molon.de/test/test14/
    >
    > where for the moment I put the galleries, categories and travelogues
    > items into tds. I guess here a div with float:left would work.


    Surely. And float: left can even be used to set an item to the minimal
    width required by its contents, if that's what you want.

    Or you could just put inline elements, like simple links (<a> elements)
    one after another, and they would appear linearly in succession, space
    permitting. But if you wish to have some part of them left-aligned and
    the rest right-aligned, with a gap between, then you would probably find
    a simple two-cell table the simplest way. Floats are another approach;
    they behave differently when the available width is smaller than needed
    for all the items.

    The point is that for some layout features, tables do the job best. This
    does not mean that you should use tables for layout in general. For
    example, just putting a box under another box, with the same width,
    doesn't really call for a table.

    > In another situation I'd like to place a button 50px to the right of an
    > image, vertically in the middle. I've used a table with one row and two
    > cells to position the button, but I guess that divs with CSS could do
    > the trick as well.


    This can be done easily: assuming markup

    <div class=foo><img src=test.jpg alt=test> <button>Do!</button></div>

    you could have just the following stylesheet:

    ..foo *{
    vertical-align: middle;
    }
    ..foo button {
    margin-left: 50px;
    }

    (One of the pitfalls of CSS is that vertical-align has no effect on
    block elements. It needs to be set on table cells or, as here, on inline
    elements, in this case the img and button elements.)

    --
    Yucca, http://www.cs.tut.fi/~jkorpela/
     
    Jukka K. Korpela, Mar 8, 2012
    #3
  4. dorayme

    dorayme Guest

    In article <>,
    Alfred Molon <> wrote:

    > In article <>, dorayme
    > says...
    > > There is no simple one general answer to how to fix this that is
    > > independent of at least some details about your actual requirements on
    > > a job in hand. If you have an idea of the purpose of the columns, the
    > > width restrictions you would be happy with, most of your needs can be
    > > accommodated. But not as easily or as robustly cross browser-wise as
    > > with HTML tables.

    >
    > The requirements are various, since at the moment I'm relying on tables
    > for layout for a variety of purposes. In one case I'd like to replace
    > the rows of thumbnails on my site, e.g.
    > http://www.molon.de/galleries/Spain/Granada/Alhambra/
    >


    Yes, that is what I suspected, you are used to laying things out with
    tables but now do not want to for perhaps the good reasons that have
    been many times argued for, here and in the CSS groups.

    > with divs and your example below would be the answer. But not if I run
    > into trouble with IE7 as Jukka put it.


    What trouble you run into with older browsers depends on quite a few
    things. If you are not needing all the features that html tables
    naturally provide for layout, but want some of them, then the css way
    below is not necessarily the only half-decent alternative. In fact, it
    is probably not the best first choice. You can use floats. Or
    inline-blocks.

    Support for inline-blocks in older browsers like IE6 and 7 is
    incomplete but there are workarounds and the strongest argument for
    using this inline-block is that it is rather ideal for the sort of
    thing you want, blocks with images and text and links inside.

    Better than html tables for your layout where you have to accept huge
    unused spaces in the cells anyway, is to use floats with a fixed
    height that is taken from the biggest picture on the page (to avoid
    float snagging). The markup for this, compared to tables and tables
    within tables is like the difference between room furniture that the
    Austrian philosopher Wittgenstein was content with and the sort that
    King Farouk of 1940s Egypt demanded. In other words, it is simpler by
    far, easier to maintain, less worrying to make without need to
    calculate how many blocks you want in each row, it will all go
    automatically.

    However, you might not actually like the free-flowing layout of floats
    or inline boxes because the boxes are unlikely to neatly line up at
    the right edge as in an HTML table. For some of us, this is not a
    problem because there are other aesthetic sensibilities than all edge
    line-ups, but your sense of things might be different. If you really
    do have many very particular aesthetic requirements, then you will
    need to be pretty skilled at CSS styling to move away from HTML table
    layout.

    >
    > Another case is the menu bar at
    > http://www.molon.de/test/test14/
    >
    > where for the moment I put the galleries, categories and travelogues
    > items into tds. I guess here a div with float:left would work.
    >


    As far as I can see you have a whole block of table markup to give a
    bit of empty blue rectangular height. There is certainly no need for
    this, you can style a DIV as the block which contains your heading and
    the logo and menu.

    <table class="menu1"...
    ....
    </table>

    About the menu, yes, you could use floats. I would use floats in a UL.

    > In another situation I'd like to place a button 50px to the right of an
    > image, vertically in the middle. I've used a table with one row and two
    > cells to position the button, but I guess that divs with CSS could do
    > the trick as well.


    Perhaps you might profit from going through some of the material at
    whatever level you feel you need:

    <http://htmldog.com/guides/cssbeginner/>
    <http://htmldog.com/guides/cssintermediate/>
    <http://htmldog.com/guides/cssadvanced/>

    and ask things about styling at
    comp.infosystems.www.authoring.stylesheets.

    --
    dorayme
     
    dorayme, Mar 8, 2012
    #4
  5. dorayme

    dorayme Guest

    In article <>,
    Alfred Molon <> wrote:

    > In article <>, dorayme
    > says...
    > > However, you might not actually like the free-flowing layout of floats
    > > or inline boxes

    >
    > That is exactly the point. I guess I'll wait a few more years until the
    > old browsers have died out before replacing the thumbnail table layout
    > with a CSS-based version.


    My comment was not about cross-browser failings. I meant simply that
    you might not like what you see in the most modern of standards
    compliant browsers when first making a thumbnail page using floats or
    inline-blocks. You need to do various extra things to finesse the look
    you might want and this requires a study of CSS and trading off
    various requirements.

    For example, talking floats, you might want the right edge of the
    block of thumb boxes to be as even as the left, with no unnatural gaps
    between thumb boxes in each row.

    This can be done at the cost of making all the boxes the same width,
    maybe all the same height too for neatness, a price perhaps well worth
    paying for the gain in simplicity of markup and styling over tables
    and tables within tables. Especially considering that there is quite
    some wasted space in table cell layout because a table will force each
    row to be as high as the tallest content in one of the cells.

    You won't have problems with IE 7 with floats and the mentioned
    strategy. The effort to make flexible thumbnail pages is well worth it
    and of benefit to users who can then use their screens to their
    natural advantages instead of having things so fixed by the author.

    If I could know in advance all your requirements I could suggest more
    specific ideas. In the meantime, here are some pages that have very
    simple markup and CSS that display thumbnail boxes with floats.

    <http://tinyurl.com/73x67qr>

    It can be adapted to suit different conditions. I mention it not to
    say it is for you as it is but to show how such an economy of markup
    and CSS is not to be sneezed at compared to table markup.

    If I was wanting the greatest flexibility, the simplest management and
    the least amount of markup and CSS, for thumb boxes (the boxes that
    hold the images and links and captions) of greatly varying heights I
    would nowadays probably go for inline-blocks and not set widths or
    heights, and make workarounds for IE7. I would let IE6 cope as best as
    it could (and it could, btw).

    --
    dorayme
     
    dorayme, Mar 9, 2012
    #5
  6. dorayme

    richard Guest

    On Fri, 09 Mar 2012 18:15:25 +1100, dorayme wrote:

    > In article <>,
    > Alfred Molon <> wrote:
    >
    >> In article <>, dorayme
    >> says...
    >>> However, you might not actually like the free-flowing layout of floats
    >>> or inline boxes

    >>
    >> That is exactly the point. I guess I'll wait a few more years until the
    >> old browsers have died out before replacing the thumbnail table layout
    >> with a CSS-based version.

    >
    > My comment was not about cross-browser failings. I meant simply that
    > you might not like what you see in the most modern of standards
    > compliant browsers when first making a thumbnail page using floats or
    > inline-blocks. You need to do various extra things to finesse the look
    > you might want and this requires a study of CSS and trading off
    > various requirements.
    >
    > For example, talking floats, you might want the right edge of the
    > block of thumb boxes to be as even as the left, with no unnatural gaps
    > between thumb boxes in each row.
    >
    > This can be done at the cost of making all the boxes the same width,
    > maybe all the same height too for neatness, a price perhaps well worth
    > paying for the gain in simplicity of markup and styling over tables
    > and tables within tables. Especially considering that there is quite
    > some wasted space in table cell layout because a table will force each
    > row to be as high as the tallest content in one of the cells.
    >
    > You won't have problems with IE 7 with floats and the mentioned
    > strategy. The effort to make flexible thumbnail pages is well worth it
    > and of benefit to users who can then use their screens to their
    > natural advantages instead of having things so fixed by the author.
    >
    > If I could know in advance all your requirements I could suggest more
    > specific ideas. In the meantime, here are some pages that have very
    > simple markup and CSS that display thumbnail boxes with floats.
    >
    > <http://tinyurl.com/73x67qr>
    >
    > It can be adapted to suit different conditions. I mention it not to
    > say it is for you as it is but to show how such an economy of markup
    > and CSS is not to be sneezed at compared to table markup.
    >
    > If I was wanting the greatest flexibility, the simplest management and
    > the least amount of markup and CSS, for thumb boxes (the boxes that
    > hold the images and links and captions) of greatly varying heights I
    > would nowadays probably go for inline-blocks and not set widths or
    > heights, and make workarounds for IE7. I would let IE6 cope as best as
    > it could (and it could, btw).


    FWIW, many better photo galleries use <ul> as the basis for their displays.
    Once you fully understand how to manipulate the CSS, that <ul> can look
    like an ordinary table and nobody knows any different.
    Take a good close look at the CSS they use and follow it.

    One very good <ul> based menu that I've used a few times is here
    http://4thorder.us/Scripts/Scripts/JS.ECContentAreas/default.cfm
     
    richard, Mar 9, 2012
    #6
  7. dorayme

    dorayme Guest

    In article <1l2om7buj2jsq$>,
    richard <> wrote:

    > many better photo galleries use <ul> as the basis for their displays.
    > Once you fully understand how to manipulate the CSS, that <ul> can look
    > like an ordinary table and nobody knows any different.


    Certainly, these can be better than HTML table layout. For all sorts
    of reasons, but not particularly to do with them being in the UL
    element though. But I have no particular argument against using a
    list, have even done it myself now and then. A series of thumbnails
    is certainly a list of things of a type. This latter would be an
    argument for using a UL.

    But note, there is nothing at all special about using a UL for such
    things in terms of the look and operation in browsers. It is usually
    simpler to use a DIV as the unit of the box for thumbnail not to have
    to cope with the margins, padding and list-styles that come as default
    (and differently for different browsers) with ULs. Still, it is easy
    to use a UL instead of the DIV and you can easily enough adapt this
    element for the example I gave, using UL element itself as the wrapper
    and the LI element instead of the inner DIVS used.

    The real work of fluid design for thumbnail boxes is to do with the
    CSS rather the particular HTML elements used. In fact, even the HTML
    table element *could* be used, at least for modern browsers. Just for
    fun, let's see now...

    If you look at the URL I mentioned

    <http://tinyurl.com/73x67qr>

    and change

    <div id="wrapper">

    <div>
    <a href="some.html"><img src="dummy.gif" alt="some"></a>a shortish
    caption
    </div>

    <div>
    <a href="some.html"><img src="dummy.gif" alt="some"></a>a shortish
    caption
    </div>

    etc

    to

    <table id="wrapper">
    <tr>
    <td>
    <a href="some.html"><img src="dummy.gif" alt="some"></a>a shortish
    caption
    </td>

    <td>
    <a href="some.html"><img src="dummy.gif" alt="some"></a>a shortish
    caption
    </td>

    etc.

    and change the CSS from

    #wrapper div {margin: 5px 5px 10px 5px; padding: 0; float: left;
    width: 200px; text-align: center;}

    div img {width:200px; height:150px; border: 4px ridge #ccc;
    background: #fff;}

    to

    #wrapper td {margin: 5px 5px 10px 5px; padding: 0; float: left;
    width: 200px; text-align: center;}

    td img {width:200px; height:150px; border: 4px ridge #ccc; background:
    #fff;}

    (Could be simpler, but I leave the analogy)

    You should, I think, get similar results. Similar changes apply to UL
    as a wrapper and LI as child. The point I am making is that it is the
    styling doing all the work rather than the elements chosen.

    --
    dorayme
     
    dorayme, Mar 9, 2012
    #7
  8. dorayme

    dorayme Guest

    In article <>,
    Alfred Molon <> wrote:

    > I tried replacing the tables in this page:
    > http://www.molon.de/test/test14/
    >
    > with divs and get the following result:
    > http://www.molon.de/test/test16/
    >
    > What am I doing wrong?


    Your very first table

    <table class="menu1" style="height: 9px; width: 850px; text-align:
    left; margin-left: auto; margin-right: auto;" cellpadding="0"
    cellspacing="0">...</table>

    only function seems to be to extend the blue rectangular box at the
    top. There are ways of marking up and styling the table below to
    achieve this. For example a simple adding of the style of padding-top:
    9px to the table of class "menu2" should be sufficient instead.

    Similar remark apply to the test16/, add a top padding to the div of
    class "menu2". So that would be the first thing to do.

    Marking up in a modern way does not mean mimicking every detail of a
    table layout, to do this is to risk a wrong direction in learning. You
    don't have to mimic a table row with

    <div><h1>Photo Galleries</h1></div>

    when a simple

    <h1>Photo Galleries</h1>

    will do nicely.

    Your

    <div style="float: right;"><a href="./"><img style="border: 0px none;
    " src="galleries/logorund.gif" alt="" height="24" width="33"></a></div>

    is wrong really. You want this logo sort of level with the heading
    "Photo Galleries", so no need for the div just mentioned. something
    like

    <h1>Photo Galleries <a style="float: right;href="./"><img
    style="border: 0px none; " src="galleries/logorund.gif" alt=""
    height="24" width="33"></a></h1>

    should be on the right path.

    To see how all the rest is best done, I suggest you get rid of all the
    dropdown stuff in your markup and css, purely as an exercise to learn
    about how to go about things using styling for the moment.

    --
    dorayme
     
    dorayme, Mar 9, 2012
    #8
  9. dorayme

    dorayme Guest

    In article <>,
    Alfred Molon <> wrote:

    > In article <>, dorayme
    > says...
    >
    > > > I tried replacing the tables in this page:
    > > > http://www.molon.de/test/test14/
    > > >
    > > > with divs and get the following result:
    > > > http://www.molon.de/test/test16/
    > > >
    > > > What am I doing wrong?

    > >
    > > Your very first table
    > >
    > > <table class="menu1" style="height: 9px; width: 850px; text-align:
    > > left; margin-left: auto; margin-right: auto;" cellpadding="0"
    > > cellspacing="0">...</table>

    >
    > There are no tables on that page (test16). What are you talking about?
    >


    You gave two URLs. One of them had tables and I was making a remark
    about *that* layout as a prelude to discussing what is worth
    converting even as an exercise to non-table layout.

    > I'm asking why the test16 div-based layout does not look like the test14
    > one.
    >


    I realise that, but I think it inadvisable to take you through such an
    exercise line by line assuming that the table markup *should* be the
    model.

    > > only function seems to be to extend the blue rectangular box at the
    > > top. There are ways of marking up and styling the table below to
    > > achieve this. For example a simple adding of the style of padding-top:
    > > 9px to the table of class "menu2" should be sufficient instead.
    > >
    > > Similar remark apply to the test16/, add a top padding to the div of
    > > class "menu2". So that would be the first thing to do.
    > >
    > > Marking up in a modern way does not mean mimicking every detail of a
    > > table layout, to do this is to risk a wrong direction in learning. You
    > > don't have to mimic a table row with
    > >
    > > <div><h1>Photo Galleries</h1></div>
    > >
    > > when a simple
    > >
    > > <h1>Photo Galleries</h1>
    > >
    > > will do nicely.

    >
    > I tried and could not get a vertical alignment between the <h1> and the
    > img.
    >


    Ah, you want *exact* vertical alignment. For this, it is likely
    easiest with a table or with table css (with limitations in IE7 as
    discussed). But there are ways to get good enough alignment.

    <h1 style="padding: .2em; min-width:10em; border: 1px solid;">Photo
    Galleries <a style="float: right;" href="./"><img style="height: 1em;
    border: 0px none; " src="galleries/logorund.gif" alt="" height="24"
    width="33"></a></h1>

    looks well enough to me. But perhaps not to you.

    > > Your
    > >
    > > <div style="float: right;"><a href="./"><img style="border: 0px none;
    > > " src="galleries/logorund.gif" alt="" height="24" width="33"></a></div>
    > >
    > > is wrong really. You want this logo sort of level with the heading
    > > "Photo Galleries", so no need for the div just mentioned. something
    > > like
    > >
    > > <h1>Photo Galleries <a style="float: right;href="./"><img
    > > style="border: 0px none; " src="galleries/logorund.gif" alt=""
    > > height="24" width="33"></a></h1>
    > >
    > > should be on the right path.

    >
    > No, like that the graphic drops below the <h1>.
    >


    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
    "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    <title>layout</title>
    </head>
    <body style="color: white;background: black;">
    <h1 style="padding: .2em; min-width:10em; border: 1px solid;">Photo
    Galleries <a style="float: right;" href="./"><img style="height: 1em;
    border: 0px none; " src="logorund.gif" alt="" height="24"
    width="33"></a></h1>
    </body>
    </html>

    might give you an idea to stop the drop.


    > > To see how all the rest is best done, I suggest you get rid of all the
    > > dropdown stuff in your markup and css, purely as an exercise to learn
    > > about how to go about things using styling for the moment.

    >
    > The dropdown menu is supposed to be there in the blue block and should
    > also properly align with the border of the blue block as is the case in
    > the table-based layout.


    Yes, I know. I had to have breakfast. Quite often, this sort of
    failure is due to the floats not being seen by the container of the
    floats. Floats are taken out of the flow. A container of floats will
    not develop height naturally for its floated children. There are ways
    to force it to do this. I had a go at trying to help the understanding
    of this stuff at my

    <http://netweaver.com.au/floatHouse/>

    Perhaps someone will just bypass all this and simply tell you what to
    do on your one occasion. But it is better to try to more thoroughly
    understand the issues involved. Yes, CSS layout can be hard and it
    does take quite some time to get about it.

    --
    dorayme
     
    dorayme, Mar 9, 2012
    #9
  10. dorayme

    dorayme Guest

    In article <>,
    dorayme <> wrote:

    > In article <>,
    > Alfred Molon <> wrote:
    >

    ....

    > >
    > > I tried and could not get a vertical alignment between the <h1> and the
    > > img.
    > >

    >
    > Ah, you want *exact* vertical alignment. For this, it is likely
    > easiest with a table or with table css (with limitations in IE7 as
    > discussed). But there are ways to get good enough alignment.
    >
    > <h1 style="padding: .2em; min-width:10em; border: 1px solid;">Photo
    > Galleries <a style="float: right;" href="./"><img style="height: 1em;
    > border: 0px none; " src="galleries/logorund.gif" alt="" height="24"
    > width="33"></a></h1>
    >
    > looks well enough to me. But perhaps not to you.
    >


    Sorry about this Alfred, I was playing around with em sizing for a
    logo and was going to offer this thought to you but I forgot to be rid
    of the other height and width in px in the img. It looks good in some
    modern broswers to just go:

    <h1 style="padding: .2em; min-width:10em; border: 1px solid;">Photo
    Galleries <a style="float: right; " href="./"><img style="height: 1em;
    width: 1em; border: 0px none; " src="logorund.gif" alt="" ></a></h1>
    ....
    >

    might also give you an idea to stop the drop. A little experimental.
    >


    --
    dorayme
     
    dorayme, Mar 10, 2012
    #10
  11. dorayme

    Tim Streater Guest

    In article <>,
    dorayme <> wrote:

    > In article <>,
    > Alfred Molon <> wrote:


    > > The dropdown menu is supposed to be there in the blue block and should
    > > also properly align with the border of the blue block as is the case in
    > > the table-based layout.

    >
    > Yes, I know. I had to have breakfast. Quite often, this sort of
    > failure is due to the floats not being seen by the container of the
    > floats. Floats are taken out of the flow. A container of floats will
    > not develop height naturally for its floated children. There are ways
    > to force it to do this. I had a go at trying to help the understanding
    > of this stuff at my
    >
    > <http://netweaver.com.au/floatHouse/>


    A very handy site which saved my bacon the other day. Although I have to
    say that I *resent* having to add:

    <div style="clear:left"></div>

    just to get the parent to pay attention to the children.

    And I know you've got other handy sites, are you going to link them all
    together?

    --
    Tim

    "That excessive bail ought not to be required, nor excessive fines imposed,
    nor cruel and unusual punishments inflicted" -- Bill of Rights 1689
     
    Tim Streater, Mar 10, 2012
    #11
  12. dorayme

    dorayme Guest

    In article <>,
    Tim Streater <> wrote:

    > In article <>,
    > dorayme <> wrote:
    >
    > > In article <>,
    > > Alfred Molon <> wrote:

    >
    > > > The dropdown menu is supposed to be there in the blue block and should
    > > > also properly align with the border of the blue block as is the case in
    > > > the table-based layout.

    > >
    > > Yes, I know. I had to have breakfast. Quite often, this sort of
    > > failure is due to the floats not being seen by the container of the
    > > floats. Floats are taken out of the flow. A container of floats will
    > > not develop height naturally for its floated children. There are ways
    > > to force it to do this. I had a go at trying to help the understanding
    > > of this stuff at my
    > >
    > > <http://netweaver.com.au/floatHouse/>

    >
    > A very handy site which saved my bacon the other day. Although I have to
    > say that I *resent* having to add:
    >
    > <div style="clear:left"></div>
    >


    Well, if you have a healthy enough contempt for older IE like many of
    us, and if you are talking about ways to make containers grow height
    around floats, there is the more elegant CSS of giving overflow:
    hidden; to the container. I mention the various ways.

    Oddly enough, is it irony or what?, with older IE, the containers
    often naturally (though wrongly, according to standards) grow height;
    a bordered box with floats inside will have its borders envelope the
    floats in some older IE without doing anything special. But there are
    some tricky things and bugs in this business, widths (or hack heights
    of 1px) sometimes needing to be done to make some older IE behave.

    If you are just wanting to escape the train of floats, nothing to do
    with the container, then you don't always need to make a special clear
    DIV even in this case. You can put the style on the element that is
    needed to be cleared of the train. This is the more elegant and
    natural thing to do.

    Suppose you have a series of images that are floated, but for some
    reason you do not want more than three per line. Here you just need to
    style the fourth, the seventh, etc. with the clear. This is just one
    example. Another would be you are floating some paragraph elements and
    suddenly you want one to be clear; of course, you clear style that
    paragraph, no need for an intermediary clearing DIV.

    Pardon me if you know all this stuff. I just like to see my words in
    black and white when I press keys, rather like I used to never tire of
    seeing my pictures come up in the developer in my old darkroom. <g>

    > just to get the parent to pay attention to the children.
    >
    > And I know you've got other handy sites, are you going to link them all
    > together?


    One day maybe, but I worry that if I link too much up, the Russians
    will be able to locate me. I have always worried about the Russians. I
    wonder if they know I greatly admired how they threw the Nazis back, I
    have a speech ready for them about this when they finally corner me,
    they will surely spare me, it is *very* admiring. If this does not
    work, I can only hope their guns are as bad as their cars.

    --
    dorayme
     
    dorayme, Mar 10, 2012
    #12
  13. dorayme

    dorayme Guest

    In article <>,
    Alfred Molon <> wrote:

    > In article <>, dorayme
    > says...
    >
    > > Sorry about this Alfred, I was playing around with em sizing for a
    > > logo and was going to offer this thought to you but I forgot to be rid
    > > of the other height and width in px in the img. It looks good in some
    > > modern broswers to just go:
    > >
    > > <h1 style="padding: .2em; min-width:10em; border: 1px solid;">Photo
    > > Galleries <a style="float: right; " href="./"><img style="height: 1em;
    > > width: 1em; border: 0px none; " src="logorund.gif" alt="" ></a></h1>
    > > ...
    > > >

    > > might also give you an idea to stop the drop. A little experimental.
    > > >

    >
    > I just tried both of your proposals. The logo does not display. In any
    > case, thanks for your effort.


    You have to get the right path... I just used your logo name without
    bothering about the path. Try it again but make sure you substitute
    the path where your logo is. For example, if your logo is called
    logo.png and it is in a folder called logoFolder, and this latter is
    on the same level as your HTML doc, then the path to put in is
    logoFolder/logo.png.

    --
    dorayme
     
    dorayme, Mar 10, 2012
    #13
  14. dorayme

    Tim Streater Guest

    In article <>,
    dorayme <> wrote:

    > In article <>,
    > Tim Streater <> wrote:
    >
    > > In article <>,
    > > dorayme <> wrote:


    > > > <http://netweaver.com.au/floatHouse/>

    > >
    > > A very handy site which saved my bacon the other day. Although I have to
    > > say that I *resent* having to add:
    > >
    > > <div style="clear:left"></div>
    > >

    >
    > Well, if you have a healthy enough contempt for older IE like many of
    > us, and if you are talking about ways to make containers grow height
    > around floats, there is the more elegant CSS of giving overflow:
    > hidden; to the container. I mention the various ways.


    Hmmm, both those approaches feel like a hack.

    > If you are just wanting to escape the train of floats, nothing to do
    > with the container, then you don't always need to make a special clear
    > DIV even in this case. You can put the style on the element that is
    > needed to be cleared of the train. This is the more elegant and
    > natural thing to do.


    I have two float:left divs, which were of different heights. I wanted
    the third div to be at the left too, but in the kind of reverse-tetris
    way your movie highlights, it wouldn't do it. So, if I can just get rid
    of the container and my hack from above, and just apply the style to
    that third div, that is indeed much more natural.

    > > And I know you've got other handy sites, are you going to link them all
    > > together?

    >
    > One day maybe, but I worry that if I link too much up, the Russians
    > will be able to locate me.


    But you must think of your art, and posterity.

    --
    Tim

    "That excessive bail ought not to be required, nor excessive fines imposed,
    nor cruel and unusual punishments inflicted" -- Bill of Rights 1689
     
    Tim Streater, Mar 10, 2012
    #14
  15. dorayme

    dorayme Guest

    In article <>,
    Alfred Molon <> wrote:

    > In article <>, Alfred Molon
    > says...
    > > Now how to fix the bottom strip with the dropdown menu elements?

    >
    > After some research I managed to fix that as well. The menu3 bottom
    > strip has no height because it consists only of float elements. So I
    > redeclared the last element as <div style="text-align: right;">
    >


    Yes, that is one way to go. Well done. By removing the float you put
    the DIV in the flow and the appropriate blue will shine through the
    element in this case.

    Had you had kept the right float on the container of this right set of
    links and given your DIV of class "menu3" an 'overflow:hidden' style,
    you probably would achieve the desired result too. I should have had
    more time to attend to this yesterday.


    > In addition there was a problem with old IE browsers (IE7 and older)
    > which I fixed by taking out the logo from the H1 in the middle menu2
    > element and placing the img before the h1 and adding a padding-top:10px
    > to center the logo with the headline.
    >
    > The final result is here: http://www.molon.de/test/test17/


    You don't need such things like

    <div class="menu1">&nbsp;</div>

    to create padding, you can just give menu2 some top padding. But I
    have mentioned this before I think.

    --
    dorayme
     
    dorayme, Mar 11, 2012
    #15
  16. dorayme

    dorayme Guest

    In article <>,
    Alfred Molon <> wrote:

    > In article <>, dorayme
    > says...
    >
    > > You have to get the right path... I just used your logo name without
    > > bothering about the path. Try it again but make sure you substitute
    > > the path where your logo is. For example, if your logo is called
    > > logo.png and it is in a folder called logoFolder, and this latter is
    > > on the same level as your HTML doc, then the path to put in is
    > > logoFolder/logo.png.

    >
    > Ok... that fixes the logo problem. Thanks!
    >
    > I used this code:
    >
    > <div class="menu2">
    > <h1>Photo Galleries
    > <a href="./" style="float: right;"><img style="border: 0px none; "
    > src="galleries/logorund.gif" alt="" height="24" width="33"></a></h1>
    > </div>
    >
    > Interesting that you just put the logo into the h1 element.
    >


    It reduces the markup and it seems appropriate that a logo should go
    into the main heading.

    There are all sorts of ways to centre align this logo with the text,
    you were asking about this, and the reason I used em heighting was to
    help this along, the logo would grow and shrink with the text size of
    the user. But what support there is in all browsers, I am not sure,
    this looks fine in my Mac browsers:

    <http://dorayme.netweaver.com.au/aligningTextAndImage.html>

    --
    dorayme
     
    dorayme, Mar 11, 2012
    #16
    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. rich
    Replies:
    0
    Views:
    752
  2. Gus Richter

    Re: Replacing tables with divs

    Gus Richter, Mar 8, 2012, in forum: HTML
    Replies:
    0
    Views:
    395
    Gus Richter
    Mar 8, 2012
  3. idle
    Replies:
    14
    Views:
    850
    richard
    Mar 9, 2012
  4. richard

    Re: Replacing tables with divs

    richard, Mar 8, 2012, in forum: HTML
    Replies:
    15
    Views:
    789
    Beauregard T. Shagnasty
    Mar 14, 2012
  5. Jukka K. Korpela

    Re: Replacing tables with divs

    Jukka K. Korpela, Mar 8, 2012, in forum: HTML
    Replies:
    3
    Views:
    1,178
    Beauregard T. Shagnasty
    Mar 8, 2012
Loading...

Share This Page