{"id":15,"date":"2004-08-23T14:29:07","date_gmt":"2004-08-23T14:29:07","guid":{"rendered":"http:\/\/lachy.id.au\/log\/2004\/08\/another-redesign-now-it%e2%80%99s-my-turn"},"modified":"2006-04-30T23:54:55","modified_gmt":"2006-04-30T23:54:55","slug":"another-redesign-now-its-my-turn","status":"publish","type":"post","link":"https:\/\/lachy.id.au\/log\/2004\/08\/another-redesign-now-its-my-turn","title":{"rendered":"Another Redesign (Now it\u2019s My Turn)"},"content":{"rendered":"

In light of the many other\r\n\t\tredesigns<\/a> recently, I figured it\u2019s about time I actually implemented my\r\n\t\tredesign that I\u2019ve been developing for the last month or so. I\u2019ve had this\r\n\t\tdesign on my homepage<\/a> for quite a while, but it hasn\u2019t been\r\n\t\tready for site wide implementation until now. The main things holding me back\r\n\t\twere the menu not working in Opera, and having no SSI<\/abbr> set\r\n\t\tup to include the common features, such as the page header, sidebar, footer\r\n\t\tand the document head section so that I could easily include stylesheet links.<\/p>\r\n

The colour scheme for this actually took inspiration from Dave\r\n\t\tShea\u2019s<\/a> Proton<\/a> design. I liked the blue\r\n\t\tand yellow contrast, but I didn\u2019t want to use the exact same colours. So I\r\n\t\tdownloaded a copy of Colour Wheel\r\n\t\tPro<\/a>, and had a play around until I found some nice colours. Though, I do\r\n\t\tintend to, one day, produce some alternate style sheets with different colour\r\n\t\tscheme, but the same layout. I also intend to come up with a completely different\r\n\t\tlayout, but that can wait for a while \u2014 this one was hard enough.<\/p>\r\n

I didn\u2019t want to use a fixed width design because for many sites that do,\r\n\tI sometimes wish it were slightly wider, or slightly thinner. But, I didn\u2019t\r\n\twant to go for a completely fluid design because I didn\u2019t want it getting too\r\n\twide for users who don\u2019t understand about line\r\n\tlength<\/a>, and have their window maximised. So, to get the best of both worlds,\r\n\tbecause I don\u2019t care much about IE<\/abbr>, I\r\n\tdecided to make the whole content (including main content and side bar) 80%\r\n\tof the width of the window, the further constraints of min-width: 600px;<\/code> and max-width:\r\n\t800px;<\/code>. With a 250px<\/code> side bar, this makes the main content\r\n\trange from 350px<\/code> to 550px<\/code>. Plus, there is a 5%<\/code> padding\r\n\ton the side of the main content column. This makes the line length vary from 315px<\/code> to 495px<\/code>.\r\n\tThis is farily close to the recommended measurements in this Daily\r\n\tFlight article<\/a>.<\/p>\r\n

For the drop down menu, the initial complication I had was to figure out how\r\n\tto get the borders to overlap. The first difficulty was working out the measurements\r\n\tfor widths, margins, paddings and borders. The menus are 33%, 34% and 33% of\r\n\tthe width, respectively, of the content column and thus stretch the content\r\n\tstretches when you resize your window. The borders are 10px wide on either side.\r\n\tIn order to create the overlap, it required a reasonably complicated addition\r\n\tand subtraction of borders and margins in appropriate places and correct positioning\r\n\tto ensure the overall menu was the correct length, in the right position and\r\n\tthe borders overlapped exactly. z-index<\/code> was used to bring the menu\r\n\tcurrently being hovered to the front, so that it\u2019s borders overlapped the adjoining\r\n\tborders. The rounded corners were achieved using -moz-border-radius<\/code>.\r\n\tOf course that means it only works in Gecko based browsers, but until\r\n\tCSS3<\/abbr><\/a>\u2019s border-radius<\/code><\/a> becomes\r\n\ta recommendation and is supported, there\u2019s no point using it. So, they\u2019re just\r\n\ta bonus for Mozilla users \u2014 it\u2019s nothing detrimental to others at all.<\/p>\r\n

After extensive testing and failing to achieve the columns using floats and\r\n\tabsolute positioning, I realised that I\u2019m not supporting IE fully for this site.\r\n\t(infact, there is only one IE hack in the entire file, to prevent menu overlapping\r\n\tthe content). So, the columns were achieved using the display<\/code> properties: table<\/code>, table-row<\/code> and table-cell<\/code>.\r\n\tThe table-row<\/code> is redundant, but I had to add an extraneous element\r\n\tto get around a strange bug in Mozilla that caused the side bar to move below\r\n\tthe content if either contained content wider than the cell. This was a problem\r\n\twhen I launched this style on Net\r\n\tTwits<\/a> because of some preformatted text, using <pre><\/code>, in\r\n\tsome articles<\/a>. There are still some bugs, I\u2019m working on them, and most\r\n\tof them seem to be in Mozilla, and can be fixed by doing a refresh of the page.\r\n\tI don\u2019t yet know why.<\/p>\r\n

The side bar style is yet to be completed, but I\u2019ve applied some very simple\r\n\tstyles so that I could at least launch It, and get on with the rest of the site.\r\n\tYou can expect to see some big changes to the side bar over the next couple\r\n\tof weeks.<\/p>\r\n

My next problem will be ensuring that everything works in Safari. I\u2019ll be\r\n\tgetting a Mac soon, but until then, I\u2019m sorry if it doesn\u2019t all work correctly.\r\n\tIf you can help, let me know and I\u2019ll apply any fixes you send me if they don\u2019t\r\n\tbreak any other browser in the process. (If it breaks IE more, I don\u2019t care,\r\n\tas long as the content is still at least readable.)<\/p>\r\n","protected":false},"excerpt":{"rendered":"In light of the many other redesigns recently, I figured it\u2019s about time I actually implemented my redesign that I\u2019ve been developing for the last month or so. I\u2019ve had this design on my homepage for quite a while, but it hasn\u2019t been ready for site wide implementation until now. The main things holding me … Continue reading Another Redesign (Now it\u2019s My Turn)<\/span> →<\/span><\/a>","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[3],"tags":[],"_links":{"self":[{"href":"https:\/\/lachy.id.au\/log\/wp-json\/wp\/v2\/posts\/15"}],"collection":[{"href":"https:\/\/lachy.id.au\/log\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/lachy.id.au\/log\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/lachy.id.au\/log\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/lachy.id.au\/log\/wp-json\/wp\/v2\/comments?post=15"}],"version-history":[{"count":0,"href":"https:\/\/lachy.id.au\/log\/wp-json\/wp\/v2\/posts\/15\/revisions"}],"wp:attachment":[{"href":"https:\/\/lachy.id.au\/log\/wp-json\/wp\/v2\/media?parent=15"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/lachy.id.au\/log\/wp-json\/wp\/v2\/categories?post=15"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/lachy.id.au\/log\/wp-json\/wp\/v2\/tags?post=15"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}