positioning puzzle

Discussion in 'HTML Development' started by JohnC, May 18, 2006.

  1. JohnC < ? />

    OK folks, what I've got is a vertical image (concert poster), and I'd like to centre it, and put a text box on either side with a title, one in English, one in Japanese.
    The image's width is fixed of course, so I'd like the two boxes to equally share the remaining space, minus margins, and take whatever height is needed to hold the text in them. If possible, they should both be the same height, so take the height of whichever of them has the more content, and be vertically centered against the sides of the image.

    Sounds easy? Maybe it is to you UberCoders out there (that's what I'm hoping of course :) ) but I can't even get the image properly centered, let alone the two boxes of equal height.

    My best effort so far is a 3-cell table, the img in the middle <td> and an <h2> in the other two cells. Like this:
    Code:
    <body>
    <center> <!-- for Netscape4 etc -->
    <!----stuff---->
    <table style="table-layout:fixed;" width="100%">
     <tr>
      <td>
       <h2 class="headerbox">6?11??????????????????????!
       </h2>
      </td>
      <td>
       <a href="***">
        <img src="***" width="270" height="394" alt=*** title="poster for printing">
       </a>
      </td>
      <td>
       <h2 class="headerbox">6th June - see you at "Goya Moon" in Irinaka!
       </h2>
      </td>
     </tr>
    </table>
    And the relevant css:
    Code:
    html, body, div, table, tr, th, td, ul, ol, dl, li, p, h1, h2, h3, h4, h5, h6, form, fieldset, a {margin:0;padding:0;border:0;}
    body {background:#e6e6ff;color:#000000;font-size: 100.01%;padding:10px;text-align:center;}
    h1,h2,h3 {text-align:center;}
    .headerbox {padding:5px;margin:5px;background: #D2B48C;color:#000000;font-size:1.3em;font-weight:bold;}
    img {border:none;}
    It's near the top of this page:
    http://www.daihachiryodan.com/
    That doesn't look too awful in IE but without the "table-layout:fixed" bit ,and the width="100%", (of course that would all go in the css file eventually) Firefox skews everything over if the <h2> contents are unequal. Even now there's something wrong with the margins in Fx, and I can't get the two boxes the same height.

    It would be nice to forge ahead and do it without a table, but any suggestions will be appreciated...
  2. apacheman Registered Insane

    Hi John,

    Check out the festival website (in the sig!) - if you think that is what you want - you can either copy it or I will send you the appropriate files.

    Suggestion - Make the browser box adjustable and vary the width.
  3. JohnC < ? />

    Hi Colin,

    Not sure if that's quite it - your middle column seems to be flexible, and I want a fixed width (for the image).

    My first problem is getting the middle image solidly centered, regardless of how much text is in the boxes on left or right.
    Equal height for the two boxes might be asking too much I suppose...

    Not sure what you mean by "Make the browser box adjustable and vary the width."
    What's the "browser box"?

    Thanks, John
  4. apacheman Registered Insane

    My outside 4 columns are fixed (includes a 'space' each side) and the middle is flexible - you could swap it around.
  5. JohnC < ? />

    Right - that's basically what I've got now.
    The problem is making sure the two outside columns share the space equally even if one has more content than the other.

    "table-layout:fixed;" is supposed to do this according to the specs but Firefox doesn't seem to do it the way I was hoping.
    Haven't been able to find any reference to a Fx bug on this so I suppose it's my lack of understanding of some subtle detail. (seems to work in IE :( )
  6. apacheman Registered Insane

    Does putting a percentage in for each of the outside columns work? I believe (from observation) that the pixels values take precedence over the percentage values. e.g. 10%, 2%, 800px, 2%, 10%
  7. fidget Vox et praeterea nihil

    OMG ... tables! Horrible things, lol.

    You may spend much less time at this by using a css layout John, can't you go that way instead?

    Anyway, just adding an align="center" to the td tags containing the image rectified it for me ...

    Code:
     
    <td align="center">
    <img src="http://www.daihachiryodan.com/posters/p060611.jpg" width="270" height="381" title="poster for printing">
    </td>
    
  8. JohnC < ? />

    (sorry guys- I've been slacking off for a few days :eek:)

    Fidget, I think
    align="center"
    applies to aligning the content in the cell, not the placing of the cell itself.
    Anyway, 'fraid it didn't work.

    Colin, your idea of an equal percentage width for the two outside cells seems to be doing it. I've given them 50% each ( a lower figure gave odd results), and even with only one word in one of the outer cells the image gets centred.
    Feels a bit uncomfortable to allocate 50% each when there's still the middle cell to fit in but what works... Maybe the browser takes it to mean 50% of what's left, which would be just right.

    The "width" attribute is "deprecated" for a <td> so I should really do it with a style of "width:50%;" instead, but that doesn't work on Netscape 4 and anyway it validates OK for "4.01 Transitional".

    (I've given up for now on getting the two boxes the same height.)

    Fidget, really I'd prefer to do the whole thing with css instead of a table- I expect there's a "3-column layout" out there somewhere I could adapt.
    Eventually the whole site, but bit by bit...

    Thanks,
    John
  9. fidget Vox et praeterea nihil

    Hmmm, wanna create one now for this page?

    I've a previous engagement this morning, but later today we could work one out here.
  10. apacheman Registered Insane

    :lol:

    It did what I wanted to do at the time and still works. Not saying it was the best way, so... If you want to work on it here, I am all for that!!

    So, CSS Masterclass it is then. Seriously, I really want to know how to do this before I start to learn XML (special application)!! (along with php, GD, mySQL OMG my head is going to explode soon!!!)
  11. Impel GD Graphic and Web Design

    Know the feeling... I've just started on mod_rewrite, my first introduction to regular expressions.
  12. JohnC < ? />

    Happy to join in a collective attempt if we're not talking about something huge or a pressing deadline, but... which page did you mean exactly?

    (edit)
    Aah... Colin's KIte Festival one?
  13. JohnC < ? />

    They look really powerful and interesting (seem to pop up everywhere) but not pretty to look at. (I like code that looks neat.)

    If you find a good "regular expressions for beginners" tutorial or something please post it up. (maybe a new thread though...)
  14. Impel GD Graphic and Web Design

    I think fidget meant your site John.

    I've found a few nice mod_rewrite beginner tutorials, but nothing that anyone who can type wouldn't come across on the first page of Google. If I do find something more buried I'll post it, although I'm only interested in them for the purposes of rewriting urls at the moment.
  15. fidget Vox et praeterea nihil

    Sorry, I was unwelcomely distracted last night.

    Well, let's develop a generic css layout page which you can use to convert your entire site, does that sound useful? If not, let's just get to wrok on one to produce the page you mention in your OP.

    To start, can you advise us on whether you want a header and footer (if so, what heights do you want?). And how many columns do you want? What total width do you want for your page, or do you want it to stretch? If you want it to stretch which column(s) do you want to stretch? What widths do you want any fixed columns to be?

    Personally I'd advise a fixed width layout (*ducks for cover from fixed width opponents*) with a total width of 780px. That can either be centred or parked to the left (or right, although I've never seen that done).

    Once we get to grips with the preferred layout, we can work out something to render that, then add the necessary trimmings to recreate your design.

    I'll reserve some multiple browser testing space so we can see how the page will eventually look in all browsers, this will give us the opportunity to overcome any cross browser rendering issues, but I doubt there will be many if any at all.
  16. JohnC < ? />

    Yes indeed. Don't even have to type it turns out- just copy & paste :eek:

    er... "OP"?
    OK basically the way it is now, but there's nothing set in stone about this exact layout.
    Logo at the top (stretchy right now), then a row of members' photos (with popups on the front page) but that's already table-free, then a row of navigation buttons, likewise already css'd - just a <ul>.

    Then the tables - first the imageplustwoheaders that started this thread.

    Other "content" tables are basically all the same: a <th> then a <tr> with two <td>'s, the left one in Japanese, the right one in English. Some tables have more <tr>'s the same. Sometimes a colspan="2" <td> over the whole width. Bit of padding.

    My idea on this was a <div> to hold the content, containing an <h2> (or maybe two- English & Japanese) then two more <div>'s with width set to 50% each, some padding and a background colour. ie something like:
    Code:
    <div class="box"><h2>[I]Japanese heading[/I]</h2>
    <h2>[I]English heading[/I]</h2>
    <div class="ja">[I]stuff[/I]</div>
    <div class="en">[I]more stuff[/I]</div>
    </div>
    Think that might work?

    Overall everything centered, occupying most of the page width, with a bit of background on each side. Stretchy, rather than fixed-width as it's mostly text.

    Fairly straightforward I suppose. It's lazyness as much as anything that's kept me from doing this before...

    this would be fantastic! :)
    :cool:
    Fidget, I've got to admire an optimist!
  17. Impel GD Graphic and Web Design

    Reading that sentence of mine by itself again I realise that could be taken as a put down - please know it wasn't. I know you're a very competent user John, who doesn't need people like me shouting 'Google!' - I was just saying I hadn't done much digging myself and so didn't have anything worthwhile to post.

    :)

    Original Post. Either that or Overhead Projection. ;)
  18. fidget Vox et praeterea nihil

    OP = original post, not overhead projection, lol.

    This is ok, but the stretched layout will cause problems with IE, although this is not insurmountable, just needs some hacks applied.

    So... I quickly modded one of my own CSS templates to suit your present layout. I haven't yet used any images or text from your page as I'm just looking at a generic layout to which we can add those once we've determined the best way to do this. I've also written the CSS coding in indented format (which I hate) just so that we can see individual elements more easily here, normally I'd code CSS in single lines. I've also left the CSS in the html document for the moment, we'll put it in an external file with a link when we finalise the code.

    Looking at your present page, you have a header, footer and two columns broken up with single full width columns, so the following should be suitable (all comments welcome, no one's perfect) ...

    Code:
     
     
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "[URL="http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"]http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd[/URL]">
    <html xmlns="[URL="http://www.w3.org/1999/xhtml"]http://www.w3.org/1999/xhtml[/URL]">
    <head>
    <title>2 column CSS layout - each columns 50% fluid</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <style type="text/css">
    html,body {
     padding: 0;
     margin: 0
    }
    body{ 
     text-align: center;
     width: 100%;
     min-width: 760px; /* for mozilla and all other compliant browsers - wont work in IE, see min-width hacks below */
     background-color: #FFF;
     color: #000000
    }
    /* min-width hacks for IE begin */
    * html .ieminwidth1 {
     border-left:760px solid #fff;
     position:relative;
     float:left;
     z-index:1;
     height: 0px
    }
    * html .ieminwidth2 {
     margin-left:-760px;
     position:relative;
     float:left;
     z-index:2;
     text-align:left;
     height: 0px
    }
    /* min-width hacks for IE end */
    #outer{
     color: #000000;
     text-align: left;
     margin: auto;
     position: relative;
     width: 100%
    }
    #header{
     position: absolute;
     top: 0;
     height: 100px;
     color: #0000FF;
     z-index: 100;
     width: 100%;
     text-align: center;
     background-color: #FFFFCC /* only coloured to show it up during coding */
    }
     
    .clrhdr { /* clears the page header for upper left and right columns */
     padding-top: 100px
    }
    .left {
     position: relative; /* to show float - right column floats right */
     width: 50%;
     float: left;
     margin-left: -1px; /* cures left column jumping below right column during stretch - IE only */
     color: #666666
    }
    #footer {
     width: 100%;
     clear: both;
     height: 50px;
     background-color: #FFCCCC; /* only coloured to show it up during coding */
     color: #0000FF;
     text-align: center;
     left: 0;
     bottom: 0;
     position: absolute
    }
    * html #footer{ /*ie rounding bug*/
     margin-bottom: -1px
    }
    * html #footer { /*only ie gets this style*/
     \height: 52px;/* for ie5 */
     he\ight: 50px;/* for ie6 */
    }
    div,p { /* clear top and bottom margins for mozilla etc */
     margin-top: 0;
     margin-bottom: 0px
     }
     
    .right {
     width: 50%;
     float: right;
     color: #666666
    }
    .clear { /* to clear footer */
     width: 100%;
     height: 52px;
     clear: both
    }
     
    .fullwctr {
     width: 100%;
     background: #CCCCCC;
     text-align: center;
     clear: both
    }
     
    p {
     padding-left: 20px;
     padding-right: 20px
    }
    </style>
    </head>
    <body>
    <div id="minHeight"></div>
    <div id="outer"> <!-- this will contain the two main columns to allow them to sit side by side -->
    <div class="ieminwidth1"> <!-- IE min-width hack 1 -->
    <div class="ieminwidth2"> <!-- IE min-width hack 2 -->
    <div class="left">
    <div class="clrhdr"></div>
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Mauris semper.   Integer convallis, diam nec vehicula facilisis, lectus dui condimentum odio, eu   consectetuer neque pede id magna. In euismod placerat eros. Vestibulum ante   ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Proin   elit lorem, porttitor sed, volutpat ac, bibendum id, mauris. Praesent suscipit.   Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia   Curae; Proin interdum ullamcorper nulla. Nulla justo nisi, placerat eu, posuere   id, scelerisque sit amet, est. Maecenas vehicula faucibus tortor. In hac   habitasse platea dictumst. Vestibulum ultricies. Nunc sollicitudin sem ac velit.   Pellentesque dignissim velit ac urna. </p>
    <p>Maecenas eget quam vel mauris congue mattis. Fusce ac neque. Proin pretium   sagittis neque. Morbi commodo. Aliquam erat volutpat. Sed neque. Curabitur dolor   nisl, pretium ac, sollicitudin eget, pellentesque ut, libero. Suspendisse   molestie gravida magna. Nulla augue. Pellentesque habitant morbi tristique   senectus et netus et malesuada fames ac turpis egestas. Suspendisse potenti.   Aliquam vehicula. Nullam semper. Aliquam sollicitudin arcu in lorem. Duis tempus   velit eu orci. Morbi odio neque, tempor sit amet, feugiat ut, porttitor ut,   nunc. Donec at erat. Sed nisl nisi, aliquet ut, porta vitae, porttitor vel,   diam. Duis id nibh a odio feugiat vestibulum. </p>
    </div>
    <div class="right"> 
    <div class="clrhdr"></div>
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Mauris semper.   Integer convallis, diam nec vehicula facilisis, lectus dui condimentum odio, eu   consectetuer neque pede id magna. In euismod placerat eros. Vestibulum ante   ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Proin   elit lorem, porttitor sed, volutpat ac, bibendum id, mauris. Praesent suscipit.   Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia   Curae; Proin interdum ullamcorper nulla. Nulla justo nisi, placerat eu, posuere   id, scelerisque sit amet, est. Maecenas vehicula faucibus tortor. In hac   habitasse platea dictumst. Vestibulum ultricies. Nunc sollicitudin sem ac velit.   Pellentesque dignissim velit ac urna. </p>
    <p>Maecenas eget quam vel mauris congue mattis. Fusce ac neque. Proin pretium   sagittis neque. Morbi commodo. Aliquam erat volutpat. Sed neque. Curabitur dolor   nisl, pretium ac, sollicitudin eget, pellentesque ut, libero. Suspendisse   molestie gravida magna. Nulla augue. Pellentesque habitant morbi tristique   senectus et netus et malesuada fames ac turpis egestas. Suspendisse potenti.   Aliquam vehicula. Nullam semper. Aliquam sollicitudin arcu in lorem. Duis tempus   velit eu orci. Morbi odio neque, tempor sit amet, feugiat ut, porttitor ut,   nunc. Donec at erat. Sed nisl nisi, aliquet ut, porta vitae, porttitor vel,   diam. Duis id nibh a odio feugiat vestibulum. </p>
    <p>Vivamus eu magna. Nullam semper ligula eu neque. Proin eget diam a tellus   consequat malesuada. Donec feugiat ipsum eu arcu. Nulla ut nunc. Nulla diam.   Integer urna ligula, dapibus ac, venenatis non, euismod eget, est. Aliquam diam.   Aliquam sit amet magna. Curabitur aliquam massa sit amet nisi. Etiam non lacus.   Vivamus porttitor. Aenean sollicitudin, orci ut dignissim ullamcorper, orci quam   rhoncus risus, in ultricies lacus quam vel dui. Nulla facilisi. Cras adipiscing   orci eget leo. Morbi at tortor vitae urna tristique dapibus. Duis risus sem,   cursus vitae, varius ac, faucibus sed, mauris. Ut risus. </p>
    </div>
     
    <div class="fullwctr">
    <p>&nbsp;</p>
    <p>This is a full width div which can contain the elements that you want to stretch across the page, such as images, etc.</p>
    <p>&nbsp;</p>
    </div>
    <div class="left">
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Mauris semper.   Integer convallis, diam nec vehicula facilisis, lectus dui condimentum odio, eu   consectetuer neque pede id magna. In euismod placerat eros. Vestibulum ante   ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Proin   elit lorem, porttitor sed, volutpat ac, bibendum id, mauris. Praesent suscipit.   Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia   Curae; Proin interdum ullamcorper nulla. Nulla justo nisi, placerat eu, posuere   id, scelerisque sit amet, est. Maecenas vehicula faucibus tortor. In hac   habitasse platea dictumst. Vestibulum ultricies. Nunc sollicitudin sem ac velit.   Pellentesque dignissim velit ac urna. </p>
    <p>Maecenas eget quam vel mauris congue mattis. Fusce ac neque. Proin pretium   sagittis neque. Morbi commodo. Aliquam erat volutpat. Sed neque. Curabitur dolor   nisl, pretium ac, sollicitudin eget, pellentesque ut, libero. Suspendisse   molestie gravida magna. Nulla augue. Pellentesque habitant morbi tristique   senectus et netus et malesuada fames ac turpis egestas. Suspendisse potenti.   Aliquam vehicula. Nullam semper. Aliquam sollicitudin arcu in lorem. Duis tempus   velit eu orci. Morbi odio neque, tempor sit amet, feugiat ut, porttitor ut,   nunc. Donec at erat. Sed nisl nisi, aliquet ut, porta vitae, porttitor vel,   diam. Duis id nibh a odio feugiat vestibulum. </p>
    <p>Vivamus eu magna. Nullam semper ligula eu neque. Proin eget diam a tellus   consequat malesuada. Donec feugiat ipsum eu arcu. Nulla ut nunc. Nulla diam.   Integer urna ligula, dapibus ac, venenatis non, euismod eget, est. Aliquam diam.   Aliquam sit amet magna. Curabitur aliquam massa sit amet nisi. Etiam non lacus.   Vivamus porttitor. Aenean sollicitudin, orci ut dignissim ullamcorper, orci quam   rhoncus risus, in ultricies lacus quam vel dui. Nulla facilisi. Cras adipiscing   orci eget leo. Morbi at tortor vitae urna tristique dapibus. Duis risus sem,   cursus vitae, varius ac, faucibus sed, mauris. Ut risus. </p>
    </div>
    <div class="right"> 
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Mauris semper.   Integer convallis, diam nec vehicula facilisis, lectus dui condimentum odio, eu   consectetuer neque pede id magna. In euismod placerat eros. Vestibulum ante   ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Proin   elit lorem, porttitor sed, volutpat ac, bibendum id, mauris. Praesent suscipit.   Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia   Curae; Proin interdum ullamcorper nulla. Nulla justo nisi, placerat eu, posuere   id, scelerisque sit amet, est. Maecenas vehicula faucibus tortor. In hac   habitasse platea dictumst. Vestibulum ultricies. Nunc sollicitudin sem ac velit.   Pellentesque dignissim velit ac urna. </p>
    <p>Maecenas eget quam vel mauris congue mattis. Fusce ac neque. Proin pretium   sagittis neque. Morbi commodo. Aliquam erat volutpat. Sed neque. Curabitur dolor   nisl, pretium ac, sollicitudin eget, pellentesque ut, libero. Suspendisse   molestie gravida magna. Nulla augue. Pellentesque habitant morbi tristique   senectus et netus et malesuada fames ac turpis egestas. Suspendisse potenti.   Aliquam vehicula. Nullam semper. Aliquam sollicitudin arcu in lorem. Duis tempus   velit eu orci. Morbi odio neque, tempor sit amet, feugiat ut, porttitor ut,   nunc. Donec at erat. Sed nisl nisi, aliquet ut, porta vitae, porttitor vel,   diam. Duis id nibh a odio feugiat vestibulum. </p>
    </div>
     
    <div class="clear"></div> <!-- ie needs this -->
    <div id="header"> 
    <p>This is the header section (it may contain text, images or both). Its entred and will stretch to 100% width<br />
    It has a fixed height which will need to be included in the left and right column styles (by way of padding values) to allow them to sit below it.<br />
    It actually sits below the main columns in the document flow (positioned absolutely), this is better for SEO since the left and right columns will be placed at the top of the document.</p>
    </div>
    <div id="footer">
    <p>This is the Footer section and can contain whatever you like. Its placed after the main columns in the document flow.</p>
    </div>
    </div> <!-- end IE min-width hack 2 -->
    </div> <!-- end IE min-width hack 1 -->
    </div> <!-- end outer div -->
    </body>
    </html>
     
    
    You'll see the various comments which explain the reason for some of the styling, especially the necessary minimum width hacks for IE since IE does not understand min-width like other browsers do. I've also alternated the heights of each column so that you can see how following divs or the footer clear them both properly. Note also that the doc type is set to XHTML transitional, we can change that to strict later if you want, but I tend towards transitional for a reason that I cannot presently remember :crazy:

    I cannot live test this at the moment because our server is down again :( but it validates anyway and works in IE, FF and Opera :)
  19. fidget Vox et praeterea nihil

    The only thing I'd think about changing here is perhaps is the paragraph padding values, we could make them specific to the left and right divs to ensure equal spacing (left, middle and right).
  20. JohnC < ? />

    First, David,
    of course no offence was taken.
    Actually I really meant, if you found a tutorial on regexps you had read and found useful/comprehensible among all the 1000s of hits the Big G throws at you, then please pass it on... :)

    Now Fidget, this is super-cool :cool:
    There's so much there to chew on I'll have to go away for a bit and play with it. (actually I'm away from the box most Sundays & Mondays anyway)

    I think what I'll do is try and plug in all the existing content of that page, and see how it looks. Lots of detail I'd like to discuss (eg I use an html doctype) but that can all come later. Meanwhile thank you very much for all that input!
    (Maybe it could be adapted for Colin's page too, though that's a bit more complicated than mine.)
    :anmflower

Share This Page