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 />& 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?

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.

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 />& 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;}

Try something like this. Works in FireFox, but test thoroughly. Instead of floating all 3 images to the left…


.images span {
    display: inline-block;
    overflow: hidden;
    [color=blue]text-align: center;[/color]
}
.images .tall {
    [color=red][s]float:left;[/s][/color]
    height: auto;
    max-width: 400px;
    [color=blue]vertical-align: top;[/color]
    width: 32%;
}
.picleft {
    float:left;
    border: 0 none;
    [color=red][s]margin-right: 2%;[/s][/color]
}
middle image {
    float:none;  /* not really needed */
}
.picright {
    float:right;
    border: 0 none;
    [color=red][s]margin-left: 2%;[/s][/color]
}

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. :slight_smile:

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.

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. :slight_smile:


.images .tall {
    float:left;
    height: auto;
    max-width: 400px;
    vertical-align: top;
    [color=blue]width: 32%;[/color]
}

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 [noparse]

 

[/noparse] 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.

These are lines 41 through the end of your home.css file.


[color=red]/* .picleft{border:0;margin-right:2%;}
.picright{border:0;margin-left:2%;}  /* */[/color]
.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;
    [color=blue]text-align:center;[/color]
}
.images .tall {
[color=red]/*    float:left; /* */[/color]
    width:[color=blue]33%[/color];
    max-width:400px;
    height:auto;
    border:0 none;
    [color=blue]vertical-align:top;[/color]
}
[color=blue].images .picleft {
    float:left;
}
.images .picright {
    float:right;
}[/color]
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%:

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.

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.

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. :slight_smile:

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.


<!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>

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.

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/showthread.php?1189557-Styling-a-horizontal-box&p=5637223#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?

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.

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. :eek: 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… :slight_smile:

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. :scratch:

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.

“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.

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. :slight_smile:

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 :slight_smile: and your solution works fine!