Crispin Porter HTML Test

I got an email that contained the following instructions.

Attached are two graphic mock-ups (narrow state and wide state)

* The image panel width should expand and contract with the page.

* The Image cells should wrap as the panel width grows and shrinks.

* The image panel should have rounded corners.

* Info panel (right side) should float above the image panel, be a static width and retain a fixed position with respect to the right edge of the image panel.

* The info panel should not obscure any image cells.

* The image panel should have rounded corners.

* Images should be centered in their respective image cells.

* All image cells should have the same width and height.

* Each image cell has a drop shadow.

* Javascript Task (extra credit):

* Clicking on an individual thumb should open up a lightbox, starting with lightbox.js 1.0 which shows the fullsize image

(You can see the orginal size of these pictures in the download.)

I can’t cover every detail, however I will cover the nuts and bolts of how I got this div based layout to get liquid, keep the rounded corners at all times, and act like a table.

HTML:

CSS:

Explination:

The background is a single image that is 1px wide and 746px tall and told to repeat horizontally: (background:#747474 url(../images/bg.jpg) repeat-x top left;). The margin and padding on both the HTML tag and the Body tag both need to be set to 0 or you will have a 10px space all around the edges of the page: (* {padding:0;margin:0;} and * {padding:0;margin:0;}body {margin:0;padding:0;}, the * is a holly hack for IE).

Centering is always a tricky thing, what worked best for this layout becasue it needs to be liquid and streatch horizontally was to set it to fill 80% of the page, position it absolutely, move it left 50%, nad tell the left margin to come in 44%: (#wrapper {background:#d5d5d5;width:80%;float:left;position:absolute;left:50%;top:72px;margin:0 0 0 -44%;}).

It is a real pain to make rounded corners expand in a liquid layout so here is how to do it. HTML: <div id="tl"><div id="tr">&nbsp;</div>&nbsp;</div>. First make a containing div called "tl" make it 100% of the width then tell the top left corner to stay at the "top left" an make the background the same color as the inside color #d5d5d5. Next tell the inside div, "tr", to float right and stay at the "right top". Also don't forget to leave the non breaking space (&nbsp;) in the divs, if you don’t the divs will not draw. Also note that I used a Safari Hack because the bottom right corner was not behaving so I told it to have a margin of 0: (/* Safari Hack*/ @media screen and (-webkit-min-device-pixel-ratio:0){div#br{margin:0;}}).

The next step is to make boxes that are centered and vertically aligned to the middle using advanced CSS. In order to do this you have to tell the divs you want them to act like a table.
(Note that you need to do exaclty and I specify if you want it to work in IE 6, IE 7, IE 8, FireFox, Safari, Chrome, and Opera.)

First make the "outer" div: (.outer {height:160px;width:160px;overflow:hidden;position:relative;margin-top:10px;background:#b2b2b2;float:left;margin:0 14px 12px;} .outer {display:table;position:static;*position:relative;}). What is going on here is that you are telling the overflow to hide it self, set the margin, set the background color.

Next in order for this to work in IE you have to declare the outer class again and tell it to display as a table, become static and for IE to become relative. Next make the "middle" div and tell it to become static and display as a table cell: (.middle {display:table-cell;vertical-align:middle;position:static;}). Makeing the "middle" div act like a table, it will now take the "vertical-align:middle;" and it works.

Next, in order to get the img tag in the middle to center you need to set "inner" div to set the left and right margin to auto and tell the text to align center: (#inner {margin-left:auto;margin-right:auto;text-align:center;}). Putting both margin and the aligning center forces the browser to center th img tag in the middle. Now dont forget to give the image a border like so: #inner img {border:1px solid #7b7b7b;}).

The last part is to add a shaddow, but since only Safari and FireFox support box-shaddow, you still have to pace a div behind the image like so: .shadow {width:160px;height:8px;background:url(../images/sb.jpg) no-repeat 0 0;position:absolute;margin:160px 0 0 -159px;*position:fixed;*margin:160px 0 0 0;_display:none;} .shadow div {width:7px;height:168px;background:url(../images/sr.jpg) no-repeat 0 0;position:absolute;margin:-160px 0 0 160px;*position:relative;_display:none;}). The "*position:fixed;*" applied to IE and "_display:none;" applies to IE6 and the "*position:relative;" applies to IE while "_display:none;".

The next section is very tricky to get a div to stay exactly placed above another in a liquid layout.

Basically you need to pace your z-index above the "wrapper", position it absolutely, push it 102px from the top and tell it to position it self 7% from the right of the browser window: (#info {width:130px;background:#fff;border:10px solid #d6d6d6;color:#000;z-index:15;padding:15px;font-size:12px;position:absolute;top:102px;right:7%;}).

IE Conditional Comments

I in general hate to use conditional comments, but there was no other way to talk the "ID" for "outer" and "middle" divs without screwing up other browsers <!--[if IE]><link rel="stylesheet" type="text/css" href="css/ie.css" /><![endif]-->

Basically you need to tell "outer" and "middle" divs in compliant browsers to act like a table to center horizontally and vertically, while makeing IE push the width out 100% align center and move up 50%: (.outer[id] {display:table;position:static;} .middle {position:absolute;top:50%;width:100%;text-align:center;} /* for explorer only*/ .middle[id] {display:table-cell;vertical-align:middle;position:static;} #inner {position:relative;top:-50%;text-align:center;} /* for explorer only */).

Crispin porter asked for lightbox so I grabbed that JavaScript, however I prefer lightview because it is more refined and has more hooks to exploit.

The quick and dirty is to source "lightbox.js" in the head: (<script type="text/javascript" src="lightbox.js"></script>).

Next in the anchor you need to set the href to point to the bigger image you want to open up, then set the rel to lightbox, and set the title to whatever message you want to display: (<a href="images/4Big.jpg" rel="lightbox" title="I Love Comics">).