SitePoint Sponsor

User Tag List

Page 1 of 3 123 LastLast
Results 1 to 25 of 51
  1. #1
    SitePoint Enthusiast
    Join Date
    Sep 2004
    Location
    USA
    Posts
    71
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Styling a horizontal box

    If you look at the test page for my restyled home page:

    http://www.vintagetextile.com/index3b.html

    you will see a horizontal bronze rectangle just under the top three pictures.

    <div><img src="images/Graphics/logohome.gif" width="269" height="74" id="top" alt="vintage textile logo" /><h1>High Style Vintage Clothing<br />&amp;&nbsp;18th Century Costume</h1></div>

    <div class="images"><span><img src="images/1920%27s/c422home.jpg" alt="Fortuny peplos" width="800" height="1170" class="tall picleft" /><img src="images/Edwardian/2762p.jpg" alt="Callot Soeurs" width="800" height="1170" class="tall" /><img src="images/1920%27s/1336o.jpg" alt="1920s gold dress" width="800" height="1170" class="tall picright" /></span>
    <p id="bronze"></p> </div>

    The code was simply a <p> styled with the rule "bronze", which is

    #bronze{margin-top:.5em;background:#fc6;height:1em;width:98.5%; text-align:center;}

    When I use width of 100% (or no width), the bronze rectangle extends beyond the pictures to the right.

    But using less than 100% will cause problems when the browser makes text and pictures large enough, in which case the bronze rectangle obvious is shorter by 1.5% than the parent image box.

    How should I style "bronze" to make it exatly fit the above pictures?

  2. #2
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,599
    Mentioned
    65 Post(s)
    Tagged
    2 Thread(s)
    The URL to the web page returns a 404 error. If you can post a working link to your page, we'll be glad to look at it.

  3. #3
    SitePoint Enthusiast
    Join Date
    Sep 2004
    Location
    USA
    Posts
    71
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Margins between pictures

    Ron,
    Since I solved most of the problems by myself, I took down the trial page and went live at
    http://www.vintagetextile.com/

    The remaining minor issue has to do with the spaces (margins) between) the three pictures.
    I use a right and left margin of 2% as you can see from the relevant code and styles.
    I would like to use smaller right and left margins for the left and right pictures (respectively), e.g., about 1.3% but run into this problem: if margins are set to anything other than 2%, then the bronze bar (bottom border of the <div>) no longer exactly matches the width of the <div>, especially when user changes browser's font-size.

    <div><img src="images/Graphics/logohome.gif" width="269" height="74" id="top" alt="vintage textile logo" /><h1>High Style Vintage Clothing<br />&amp;&nbsp;18th Century Costume</h1></div>

    <div class="images" id="bottomBorder"><span><img src="images/1920%27s/c422home.jpg" alt="Fortuny peplos" width="800" height="1170" class="tall picleft" /><img src="images/Edwardian/2762p.jpg" alt="Callot Soeurs" width="800" height="1170" class="tall" /><img src="images/1920%27s/1336o.jpg" alt="1920s gold dress" width="800" height="1170" class="tall picright" /></span></div>

    html {height: 100%;
    padding-bottom: 1px; }
    body {width: 88%;
    max-width: 980px;
    margin: 0 auto;
    border:0;
    color:#000;
    background-color:#fff;
    font: 1em/1.2 Verdana, Tahoma, Helvetica, sans-serif; }
    .picleft{border:0;margin-right:2%;}
    .picright{border:0;margin-left:2%;}
    #top{margin-top:1em}
    img { max-width: 100%;border:none;
    height: auto !important; }
    .center img.tall { width: 100%;
    max-width: 400px;
    height: auto; }
    .images span { display: inline-block;
    overflow: hidden; }
    .images .tall { float: left;
    width: 32%;
    max-width: 400px;
    height: auto; }
    .images.tall + img + img {float: right;}
    img.tall {width:400px;height:585px;}
    img.wide {width:600px;height:500px;}
    #bottomBorder {padding-bottom: 0.5em;border-bottom: #fc6 solid 1em;}

  4. #4
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,599
    Mentioned
    65 Post(s)
    Tagged
    2 Thread(s)
    Try something like this. Works in FireFox, but test thoroughly. Instead of floating all 3 images to the left....
    Code:
    .images span {
        display: inline-block;
        overflow: hidden;
        text-align: center;
    }
    .images .tall {
        float:left;
        height: auto;
        max-width: 400px;
        vertical-align: top;
        width: 32%;
    }
    .picleft {
        float:left;
        border: 0 none;
        margin-right: 2%;
    }
    middle image {
        float:none;  /* not really needed */
    }
    .picright {
        float:right;
        border: 0 none;
        margin-left: 2%;
    }
    PS: if you need to post code, please click the link at the bottom of my post and read our guidelines. Basically, they ask that posters place their code between "code" tags. You can click the "#" symbol in the message toolbar and they will appear.

  5. #5
    SitePoint Enthusiast
    Join Date
    Sep 2004
    Location
    USA
    Posts
    71
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ron,
    Thanks. I will try this tomorrow. As I understand the instructions, I am allowed to post styles from my style sheet as is.
    For code, I have to surround my HTML code sample with " ".
    Is that right?
    I will try to avoid using HTML code in this forum in the future, although that is very difficult.

  6. #6
    SitePoint Enthusiast
    Join Date
    Sep 2004
    Location
    USA
    Posts
    71
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ron,
    I made the changes you suggested and in addition got rid of the style
    images.tall + img + img {float: right;}
    However, the page now seems to have the same 2% spacing between images. That is weird. In any case, I want to be able to adjust the spacing between the pictures. I don't see how I could adjust the spacing between the pictures with your styles.

  7. #7
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,599
    Mentioned
    65 Post(s)
    Tagged
    2 Thread(s)
    Quote Originally Posted by cma6 View Post
    Ron,
    I made the changes you suggested and in addition got rid of the style
    images.tall + img + img {float: right;}
    However, the page now seems to have the same 2% spacing between images. That is weird. In any case, I want to be able to adjust the spacing between the pictures. I don't see how I could adjust the spacing between the pictures with your styles.
    Change the width of the images from 32% to 33% or somewhere in between.
    Code:
    .images .tall {
        float:left;
        height: auto;
        max-width: 400px;
        vertical-align: top;
        width: 32%;
    }

  8. #8
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,599
    Mentioned
    65 Post(s)
    Tagged
    2 Thread(s)
    Quote Originally Posted by cma6 View Post
    Ron,
    I made the changes you suggested and in addition got rid of the style
    images.tall + img + img {float: right;}
    However, the page now seems to have the same 2% spacing between images. That is weird. In any case, I want to be able to adjust the spacing between the pictures. I don't see how I could adjust the spacing between the pictures with your styles.
    I'm not sure what your take on my request was, but you are free to post HTML and CSS within your message. We just request that the code (HTML and/or CSS) be surrounded by [code] [/code] tags so your code appears in a "code" box with scroll bars and retains its formatting.

    With one click, that hash symbol (#) in the reply toolbar will generate the "code" tags for you.

  9. #9
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,599
    Mentioned
    65 Post(s)
    Tagged
    2 Thread(s)
    These are lines 41 through the end of your home.css file.
    Code:
    /* .picleft{border:0;margin-right:2%;}
    .picright{border:0;margin-left:2%;}  /* */
    .book1{margin-top:1.8em;}
    .book1 img{border:0;vertical-align:bottom;}
    .bookleft2{border:0;margin-right:3%;margin-left:9%;}
    .bookright2{border:0;margin-left:3%;}
    p.largecat a#burn {color:#00f;background-color:#fff;text-decoration:underline}
    a.ct:link{color:#00f;text-decoration:none;background-color:#fff;}
    a.ct:visited{color:#8B0000;text-decoration:none;background-color:#fff;}
    a.ct:hover{color:red;text-decoration:none;background-color:#fff;}
    #top{margin-top:1em}
    img {
        max-width:100%;
        border:none;
        height:auto !important;
    }
    .center img.tall {
        width:100%;
        max-width:400px;
        height:auto;
    }
    .images span {
        display:inline-block;
        overflow:hidden;
        text-align:center;
    }
    .images .tall {
    /*    float:left; /* */
        width:33%;
        max-width:400px;
        height:auto;
        border:0 none;
        vertical-align:top;
    }
    .images .picleft {
        float:left;
    }
    .images .picright {
        float:right;
    }
    img.tall {
        width:400px;
        height:585px;
    }
    img.wide {
        width:600px;
        height:500px;
    }
    #bottomBorder {
        padding-bottom:0.5em;
        border-bottom:#fc6 solid 1em;
    }
    And this is how it looks to me in FireFox after changing the image width from 32% to 33%:

    cma6.jpg

  10. #10
    SitePoint Enthusiast
    Join Date
    Sep 2004
    Location
    USA
    Posts
    71
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Perfect solution

    Ron,
    Thanks for your masterful CSS work. I have increased the width of each picture to 32.4%, getting the spacing just right.
    You have done such a fantastic job that I'm tempted to post my next scalable design problem:
    http://www.vintagetextile.com/1940s_to_designer.htm
    These category pages use a table design. They do not scale well to tablets, let alone phones.
    My detail pages, e.g., http://www.vintagetextile.com/new_page_399.htm
    and Home Page (thanks to you!) now scale well.

  11. #11
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,599
    Mentioned
    65 Post(s)
    Tagged
    2 Thread(s)
    As you already know, the tables will have to go. I think you need to consider a different layout, too. The present layout imposes awkward dead spaces. In a new layout the images can be aligned down one edge or alternated to opposite edges. If the details are allowed to start at the top of each block, then longer details can wrap beneath the image. On narrow devices, the details can be positioned beneath each image, or the thumbs can be scaled smaller and the text still allowed to wrap. The text in the details can be vertically centered for wider screens. You may also consider just showing a screen full of images which the user can click to show the details.

    Give it some thought and start a new thread with your requirements.

  12. #12
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,599
    Mentioned
    65 Post(s)
    Tagged
    2 Thread(s)
    cma6. This test page is my take on your 1940s_to_designer page. It's the best I could do without some discussion about your tastes in page design.

    At > 900px, it looks like your original.

    As the page narrows, it will go through 3 media queries, 900px 700px, and 520px, to adjust the content before reaching the smallest width. It seems to work in FF, Chrome and Opera. I did not test it in IE. It will not work in IE8 without adding a JS script to accommodate media queries. Like I said, this is just a hack to help you decide and describe what you want.
    Code:
    <!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">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>1940s_to_designer 4</title>
    <!--
    http://www.sitepoint.com/forums/showthread.php?1189557-Styling-a-horizontal-box
    Feb 1, 2014, 10:23
    cma6
    -->
        <style type="text/css">
    *, *:before, *:after {
        -webkit-box-sizing:border-box;
        -moz-box-sizing:border-box;
        box-sizing:border-box;
    }
    .outer {
        width:90%;
        margin:0 auto;
    }
    .item {
        display:table;
        width:100%
        overflow:hidden;
    }
    .item > div {
        display:table-cell;
        vertical-align:middle;
        padding:0;
    }
    .item img {
        vertical-align:top;
    }
    .item:nth-child(even) {
        margin-:1px 0;
        margin-left:209px;
    }
    .item:nth-child(odd) {
        background-color:#e5e5e5;
    }
    .item:nth-child(odd) img {
        margin-right:209px;
    }
    p {
        line-height:1.375;
        margin:.5em 1.25em;
    }
    .pid {
        padding:0 1.25em;
    }
    .pid p {
        display:inline-block;
        width:186px;
        vertical-align:top;
        overflow:hidden;
        font-weight:bold;
        margin:1em 0 0;
    }
    .pid span {
        float:right;
    }
    .pid .reserved {
        display:inline-block;
        vertical-align:top;
        width:auto;
        color:#f00;
        margin:1em 0 0 3em;
    }
    @media screen and (max-width:900px) {
        .item {display:inline-block;vertical-align:middle;}
        .item:nth-child(even) {margin-left:0px;}
        .item:nth-child(odd) img {margin-right:0px;}
    }
    @media screen and (max-width:700px) {
        .item .details {display:block;}
        .item .image {float:left;margin-right:1.25em}
    }
    @media screen and (max-width:520px) {
        .item .image {float:none;display:block;text-align:center;}
    }
        </style>
    </head>
    <body>
    
    <div class="outer">
        <div class="item">
            <div class="image"><a href="new_page_399.htm"><img src="images/Thumbnails/7416thumb2.jpg" alt="Hanae Mori evening dress" width="209" height="325"></a></div>
            <div class="details">
                <div class="pid"><p>#7416<span>$975</span></p></div>
                <p><a href="new_page_399.htm">Hanae Mori silk evening dress, 1970s.</a> With a silk chiffon top printed with airy blossoms, the exquisite evening design is an exemplar of Mori's style. The floating quality of the print is enhanced with a profusion of bias-cut ruffles that frame the front opening. Celebrated for her exquisitely feminine style, Mori was the first Asian woman to be admitted to France's elite haute couture syndicate.&nbsp; NEW LISTING</p>
            </div>
        </div>
        <div class="item">
            <div class="image"><a href="new_page_294.htm"><img src="images/Thumbnails/2782thumb2xx.jpg" alt="Zandra Rhodes 1980s" width="209" height="325"></a></div>
            <div class="details">
                <div class="pid"><p>#2782<span>$850</span></p></div>
                <p><a href="new_page_294.htm">Zandra Rhodes printed silk chiffon dress, 1980s.</a> The extravagantly feminine, fantasy print is signature Rhodes, who is among today's most original designers. It is hand screened with a peacock feather print accented with iridescent leaf paillettes and clear beads. The edges are hand rolled and embellished with faux pearls, faceted clear beads, and faux pearl drops on the hem points.&nbsp; NEW LISTING</p>
            </div>
        </div>
        <div class="item">
            <div class="image"><a href="new_page_419.htm"><img src="images/Thumbnails/2780thumb2.jpg" alt="Carosa di Roma ballgown" width="209" height="325"></a></div>
            <div class="details">
                <div class="pid"><p>#2780<span>$1,250</span></p><p class="reserved">Reserved</p></div>
                <p><a href="new_page_419.htm">Carosa di Roma satin ball gown from the Dupont estate, 1950s.</a> The soft petal pink satin fabric embodies an ineffable feminine elegance. The regal simplicity of the front draws attention to the dramatic bouffant back, held in place with a garland of charmingly lifelike satin flowers. This matchless exemplar of 1950s romanticism personifies  the unabashed, heartrending femininity of the period.&nbsp; NEW LISTING</p>
            </div>
        </div>
        <div class="item">
            <div class="image"><a href="new_page_787.htm"><img src="images/Thumbnails/2801thumb2.jpg" alt="Bill Blass 1970s" width="209" height="325"></a></div>
            <div class="details">
                <div class="pid"><p>#2801<span>$850</span></p></div>
                <p><a href="new_page_787.htm">Bill Blass chiffon dress, 1970s.</a> Finely constructed with bias-cut panels of black chiffon over a black silk crepe lining, the LBD flutters when you move. I love the contrast of the high neckline with the sexy, open, faux sleeves. The stand up collar, ruched at the center-back, drapes in graceful folds in front. Here is Bill Blass at the top of his gameóglamorous and casually sophisticated.&nbsp; NEW LISTING</p>
            </div>
        </div>
        <div class="item">
            <div class="image"><a href="new_page_605.htm"><img src="images/Thumbnails/7410thumb2.jpg" alt="Zandra Rhodes dress" width="209" height="325"></a></div>
            <div class="details">
                <div class="pid"><p>#7410<span>$1,450</span></p><p class="reserved">Sold</p></div>
                <p><a href="new_page_605.htm">Zandra Rhodes &quot;Field of Lilies&quot; evening dress, 1970s.</a> This exemplar of Rhodes' early work uses the original paper design, <em>Field of Lilies</em>, that the Victoria and Albert Museum chose for their textile archives. The ethereal creation floats over the body like a delicate  butterfly. The Field of Lilies print is embellished on the bodice and sleeves with sparkling star-shaped paillettes.</p>
            </div>
        </div>
    <!--
        <div class="item">
            <div class="image"><a href=""><img src="images/Thumbnails/" alt="" width="209" height="325"></a></div>
            <div class="details">
                <div class="pid"><p><span></span></p></div>
                <p><a href=""></a></p>
            </div>
        </div>
        <div class="item">
            <div class="image"><a href=""><img src="images/Thumbnails/" alt="" width="209" height="325"></a></div>
            <div class="details">
                <div class="pid"><p><span></span></p></div>
                <p><a href=""></a></p>
            </div>
        </div>
    -->
    </div>
    
    </body>
    </html>

  13. #13
    SitePoint Enthusiast
    Join Date
    Sep 2004
    Location
    USA
    Posts
    71
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Working on your ideas

    Hi Ron:
    I am deeply grateful for your work. I never got a notice from Sitepoint that you had replied again to this thread.
    So this weekend, I will work through your concept for a category page and reply here next week.

  14. #14
    SitePoint Enthusiast
    Join Date
    Sep 2004
    Location
    USA
    Posts
    71
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Ronpat's replacement of tables by CSS

    Quote Originally Posted by ronpat View Post
    As you already know, the tables will have to go. I think you need to consider a different layout, too. The present layout imposes awkward dead spaces. In a new layout the images can be aligned down one edge or alternated to opposite edges. If the details are allowed to start at the top of each block, then longer details can wrap beneath the image. On narrow devices, the details can be positioned beneath each image, or the thumbs can be scaled smaller and the text still allowed to wrap. The text in the details can be vertically centered for wider screens. You may also consider just showing a screen full of images which the user can click to show the details.
    @ronpat , your design for my category pages looks really great.
    http://www.vintagetextile.com/1940s_to_designer.htm

    You have the images aligned down one side and text below in DW Design view. By your CSS magic, the page preserves the checkerboard effect I want on screens 900 pixels or above. I then looked at a tablet preview (521-900 px) and a smartphone preview (520 or less px) and those both looked really fine.
    My next step is to really understand your CSS and how you accomplished your magic and then implement it for the 1940s-Designer page. Something will probably have to be done with the logo, which is a .jpg or .gif, probably creating a smaller one.
    Also the heading (1940s to Designer Vintage Clothing) will probably have to be styled to accomodate smaller screens. Finally, there is tricky but important issue of the links at both top and bottom of the page. I assume that CSS will have to stack them vertically one at a time for the phone and perhaps 2/line for the tablet.
    Also you mentioned a problem with IE8 (and earlier). The page looked great in IE10.

  15. #15
    SitePoint Enthusiast
    Join Date
    Sep 2004
    Location
    USA
    Posts
    71
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    There is one problem with your first iteration of the design. When one makes the type larger in FF (and probably in all browsers) from my desktop, at some point the extra empty box disappears, e.g., the checker board effect is not scallable to larger font-sizes.
    We achieved that scalabiity on the current iteration of my home page and the detail pages in the original thread: http://www.sitepoint.com/forums/show...23#post5637223

    Perhaps the loss of scalability is inevitable when adapting for media queries (small screens), in which case I will just have to live with it on the desktop version. Or perhaps there is a CSS solution to retain the checker board effect for 900px + screens?

  16. #16
    SitePoint Enthusiast
    Join Date
    Sep 2004
    Location
    USA
    Posts
    71
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Please ignore the last post (don't know how to delete posts). Final review tells me that lack of scalability is a non-issue for larger fonts on a desktop compared with properly addressing media queries as your design successfully does.

  17. #17
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,599
    Mentioned
    65 Post(s)
    Tagged
    2 Thread(s)
    Hi, cma6.

    There are a couple of errors in the code in post #12 that need to be repaired, so don't try to use it as-is. It's purpose was to see if that type of transition would suit you, and apparently they are satisfactory pretty much as-is.

    I'll go about repairing the demo css while you decide how you want the other items to look/behave.

    Quote Originally Posted by cma6 View Post
    the heading (1940s to Designer Vintage Clothing) will probably have to be styled to accomodate smaller screens.
    The top banner line should not be given a fixed height. It should be allowed to wrap at narrower screen widths and/or switch to a smaller font-size.

    Quote Originally Posted by cma6 View Post
    Something will probably have to be done with the logo, which is a .jpg or .gif, probably creating a smaller one.
    The logo image can be made to resize smaller at narrower screen widths.

    Quote Originally Posted by cma6 View Post
    there is tricky but important issue of the links at both top and bottom of the page. I assume that CSS will have to stack them vertically one at a time for the phone and perhaps 2/line for the tablet.
    The menu that you started with didn't strike me as all that bad on this page, but you may prefer a vertical list to an inline list at narrow screen widths. Choices... Decisions...

    Quote Originally Posted by cma6 View Post
    There is one problem with your first iteration of the design. When one makes the type larger in FF (and probably in all browsers) from my desktop, at some point the extra empty box disappears, e.g., the checker board effect is not scallable to larger font-sizes.
    We achieved that scalabiity on the current iteration of my home page...
    I don't see the empty space disappearing. The difference between your post and my hack is that your images remain top aligned and mine are vertically centered. That could be changed to vertical-align:top, if you prefer. Then again, maybe you're describing something else.

  18. #18
    SitePoint Enthusiast
    Join Date
    Sep 2004
    Location
    USA
    Posts
    71
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ronpat View Post
    Hi, cma6.

    There are a couple of errors in the code in post #12 that need to be repaired, so don't try to use it as-is. It's purpose was to see if that type of transition would suit you, and apparently they are satisfactory pretty much as-is.

    I'll go about repairing the demo css while you decide how you want the other items to look/behave.


    The top banner line should not be given a fixed height. It should be allowed to wrap at narrower screen widths and/or switch to a smaller font-size.


    The logo image can be made to resize smaller at narrower screen widths.


    The menu that you started with didn't strike me as all that bad on this page, but you may prefer a vertical list to an inline list at narrow screen widths. Choices... Decisions...


    I don't see the empty space disappearing. The difference between your post and my hack is that your images remain top aligned and mine are vertically centered. That could be changed to vertical-align:top, if you prefer. Then again, maybe you're describing something else.


    Your suggestion for the top banner line seems to make sense. I'd like to see how it would look.

    The logo is a .gif 296px W X 74 H. I did not know that CSS can resize a .gif. That is miraculous! The logo on my tablet version is OK but could be a little smaller. On the phone viewport, the logo should definitely be scaled.

    As for the links, which are essential to the design, since they are not in your prototype page with your styles, I viewed the links in my current category page in DW 5.5 Media Queries at 2 sizes: 800X1024 tablet and 360X480 smartphone.
    On the tablet, the links are not that bad, but 4 links/line looked much better. If my tablet size is too large, then 3 links/line for the tablet. For the phone, 2 links/line should be best.

    Here is what I meant to describe. Viewing your page on my desktop with default font of Verdana 13 px, the checkerboard effect in the current design remains. But when I zoom in the font to a slightly larger size by ctrl-+ (presumably to font-size of 14px), then the design has only two columns with the large thumbnails on the left and the details on the right. I can live with that if necessary to make to media queries work for smaller screens.

  19. #19
    SitePoint Enthusiast
    Join Date
    Sep 2004
    Location
    USA
    Posts
    71
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    "I don't see the empty space disappearing. The difference between your post and my hack is that your images remain top aligned and mine are vertically centered. That could be changed to vertical-align:top, if you prefer. Then again, maybe you're describing something else."

    I am referring to the lack of scalability here, in contrast to the scalability we achieved in the original thread for my detail pages. The success of the scalable design on a detail page with two pictures next to each other is apparent here:
    http://www.vintagetextile.com/new_page_294.htm
    Make your fonts larger and will will see the pictures remain side-by-side.

  20. #20
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,599
    Mentioned
    65 Post(s)
    Tagged
    2 Thread(s)
    The behavior that you are describing occurs because you are zooming the content, not just the font-size. This is a normal, expected behavior.

    You would also find that if you had a wider monitor, that the shift from staggered view to left columnar view would not happen so soon. Window width makes a big difference. When you zoom content, everything is magnified.

    If you zoom font-size only (Firefox), you will see that the images remain staggered as the text size increases, but the vertical space between the images increases.

    The breakpoints that I chose were intended to minimize the amount of vertical space between images before changing from the staggered image alignment to the left columnar alignment. That breakpoint assumes that your example text is typical and that users are unlikely to zoom the font-size much. If they do zoom, the page adapts as designed.

    It sounds like you are seeking a different behavior than my suggestion produces. If so, that's good to know, because that is what my demo was supposed to help us find out.

  21. #21
    SitePoint Enthusiast
    Join Date
    Sep 2004
    Location
    USA
    Posts
    71
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ron,
    Thanks for the explanation of the difference between zooming content and zooming just font. I have changed my FF to zoom only font, in which case there is no longer an issue of losing the attractive staggered effect. I agree that it is unlikely that users will be increasing content size that often. So my issue is now a non-issue and your solution works fine!

  22. #22
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,599
    Mentioned
    65 Post(s)
    Tagged
    2 Thread(s)
    I have finished repairing the code for the 1940s_to_designer page.

    There is one version that is checkerboard compatible with IE9+ and falls back to a single column of images for IE8 with the same background color for all products. It is very easy to maintain by hand.

    There is a second version that is fully checkerboard compatible with IE8+. However, unless the HTML is generated by a CMS, it is tedious to maintain.

    Both versions require a server side JavaScript, respond.js, to enable IE8 to respond to media queries.

    You can download the files from here: https://www.dropbox.com/sh/8nk4sqbgqbzjo55/sNOYbQEll8

    Most of the time, I enjoy publishing pages that are IE8 compatible. In this case, however, I would recommend forgoing the designer checkerboard look for IE8 because of the HTML maintenance involved and live with the plain fallback look.

    Your call.

    We can work on the logo, banner, and menu next.

  23. #23
    SitePoint Enthusiast
    Join Date
    Sep 2004
    Location
    USA
    Posts
    71
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ron,
    I have downloaded the html page and the css page. I've printed out the css page. However, the style sheet is not being applied to the html page even though I have the stylesheet path correct.
    So I will have to type in your style sheet code by hand to recreate another stylesheet and see if that works.

    In Dropbox, I was able to open the stylesheet and copy the text to a new style sheet on my system. However, with Productpage8.html it did not open in Dropbox. When downloaded, it appears to be a js file, not an html file.

  24. #24
    SitePoint Enthusiast
    Join Date
    Sep 2004
    Location
    USA
    Posts
    71
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I figured out how to get the Dropbox html file and will start reviewing it today. I'm looking only at the IE9 files. I guess I have to link the js file to the html page.

  25. #25
    SitePoint Enthusiast
    Join Date
    Sep 2004
    Location
    USA
    Posts
    71
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ron,
    The design (IE9+) looks very good!
    Just as an aside, I should mention that while the design falls back to a single column of images in FF, in IE10 the design retains the checkerboard effect as I zoom in (increase content size.)


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •