Redesigned, or I should say designed drdesandies.com is up today. Basically just added a few images and a contact form, and we are ready to go. The CSS is quite a bit more complicated now, but by using png-8 for all the images, the size of the site is still crazy small.
Launched preliminary version of drdesandies.com. This is a small site for My father’s private therapy. It is designed for simplicity, creating a quite striking and attractive design with about 10 lines of XHTML and 20 lines of CSS. The content is handled by our simpleCMS, so the actual new code is less than 40 lines. We have to add some images though, mainly a the title text as an image, and an image of the principle.
We released the new front page of backstreet last week, it is backed by a new Wordpress plugin we wrote. WP is a great piece of software. Craeting the plugin was a snap, and allowing the client to have a unified inferface to update all the content in the site is very helpful.
The design is a berak for the original. The problem was that although the previous design was “pretty” it did not have enough space for up-to-the-date info. So we let it go a little bit in terms of style, and we make it up by giving more space to the bar to advertise it’s acts and events. This is the whole form vs. function debate. And in this case, I think we made a good compromise.
Posted the new design for Backstreetjazzbar.com today. The new look is really slick. Mad props to the designer, Adrian, and to the Wordpress people for designing such a great CMS system. The whole thing runs on top o WP, and our design is just a theme. It works really well, and I can’t wait to start adding more content. We still have to design and upload the secondary level pages. Look for that in about a week’s time.
I learned something today while trying to figure out why the new design for backstreet was behaving so badly in IE6. Finally, I narrowed it down to one thing, the < !DOCTYPE> document identifier was not the first line of the file. Instead, I had flippantly placed an HTML comment in the first line, not realizing that it could cause problems. Sure enough, as soon as I removed that comment, everything in IE was a smooth as apple pie?
So if you are going to be a good web developer, and use modern web standard xhtml in your pages, remember that the doctype declaration must be at the top!
< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
Finally uploaded the newest changes to LotusRomances.com. Installed SimpleCMS (our wiki based CMS system) with Textile formatting, added some boxes to the front, and fixed up the font page. Actually, the home page loads much faster now that it uses the 3 - column layout instead of millions of tables. It is still full of tables, but those will have to wait for another day, CSS based design takes too long.
This layout - 37signals » 3-column CSS Layout is a godsend. It is very simple, and magically, it works. The secret to its simplicity, and unfortunately it’s only drawback, is that you have to define the columns in reverse order. But using this I have managed to re-design the lotusromances front page for web standards without losing a single pixel.
Finally launched OCPGroup.cn. This website is actually the culmination of several PHP technologies that I have been toying with. It includes our newly named HMW SimpleCMS software, as well as the HMW Product Management system. I am proud of the fact that we got all 4 languages in there, its a little bit crazy, NO.
Maybe my explanation o the Roundrect CSS technique was not so clear. So, here is some code. My apologies to the person that invented this, if anyone can find the original link, please let me know.
.RoundRect{
margin-top: 20px;
background-color:ff0000;
width:700px;
position:relative;
margin-left:auto;
margin-right:auto;
}
.RC1 {
background-image:url(images/roundrect.png);
background-repeat:no-repeat;
width:10px;height:10px;
position:absolute;
}
.RC2 {
background-image:url(images/roundrect.png);
right:0px;background-repeat:no-repeat;
background-position:right top;
width:10px;height:10px;
position:absolute;
}
.RC3 {
background-image:url(images/roundrect.png);
bottom:-1px;/*this is the IE value*/
background-repeat:no-repeat;
width:10px;
height:10px;
background-position:0 bottom;
position:absolute;
}
/* hack for IE... don't know why it is so different. */
/* IE adds an extra pixel at the bottom, while Firefox */
/* lets 0 be 0, well for this height anyway. */
/* Since IE does not understand the html>body selector, */
/* this style directive only applies to firefox. */
html>body .RC3 {
bottom:0px;
}
.RC4 {
background-image:url(images/roundrect.png);
bottom:-1px;
right:0px;
background-repeat:no-repeat;
background-position:right bottom;
width:10px;height:10px;
position:absolute;
}
/**/
html>body .RC4 {
bottom:0px;
}
.RR_Content{padding:15px;}
Found a really cool rounded rect CSS stylesheet while hacking together the backstreet site. It is really simple, and while it doesn’t work perfectly (had to do some 1 px tweaking in both Firefox and IE), it works pretty well. Link. OK, can’t find the link. You all are on your own!
No, OK, I’ll explain. Basically, you make a single rounded rect gif or png in GIMP (Photoshop if you must). Calculate exactly the dimensions of the curve, be it a 5, 10, or 25 pixel square. Then, we make 6 divs, one div encloses all the elements. Then we have four divs, one for each corner. Finally, we have a div on the inside for the content. The main div’s background color should match the color of the rounded rect image. Then, the same full rectangle image is used a a background image for all four corner divs. The trick is to use CSS to position the background image so that only the appropriate corner is showing. Finally, put the content in the content div and viola! we have a nice rounded rect content box for any site.