"Las Historias de Ladera" re-design

New projects to keep me busy—more adventures into CSS. Yes, I’m busy procrastinating and doing geeky stuff to keep myself entertained in the interim. So, what do I do? Try something new… -ish….

So, for the project of killing time at hand, I decided to re-do the “Las Historias de Ladera” site that I did some years back for Peoples’ Self-Help Housing. My main motivation for re-doing the site is that the site in its original form made extensive use of frames.

Why frames? I didn’t know better at the time. They seemed convenient, and got the job done.

Why not frames? A few reasons….

  • First, they are pretty cumbersome in general. For each page of the Ladera website, I had the static frameset that included a header, footer, left, right, and center borders, and two areas in which to load the English and Spanish versions of each of the pages.
  • Second, because we wanted the page title to show up for each of the pages properly and I didn’t know any better, I duplicated the frameset for each of the pages. Thus, while there were 10 stories and a total of about 7 other pages, there were actually some 50+ HTML pages in the end—not counting the photo gallery pages! Well, not only does that defeat the whole claimed advantage of using frames, but compare that to the sleek 17 pages total in the revised version!
  • Third, I had to do funny things to make sure that people always got the full frameset and not just one of the frames that made up the page. In other words, if someone searched in Google and got a link to the Spanish version of a page, I needed to make sure that when they clicked on the indexed link, it would (1) pop the page back in the frameset and (2) make sure it stayed on the page the user wanted and not take them back to the home page. Fortunately, GoLive, which is what I used when I was originally designing that site, had some readymade JavaScripts to help me out with that….

Well, since I’ve explored more web-technologies in the time since I originally did the Ladera site, frames have become #1 on my list of least favorite web-design tools. Granted, part of this stems from the website for my current workplace, which includes a big-yet-ineffective navigation frame across the top, but in general, I haven’t found much use for them in recent months.

So, with that in mind, I decided to check out what I could do with CSS instead, and here’s what I did.

  • First, I mapped out my page as logically as I could. Fortunately, since I already had a design that everyone was happy with, this step was easy. The top of the page would have basic site-specific navigation. The left and right borders would mirror each other. English would be on the left part of the screen, Spanish on the right, and a decorative border in-between. Finally, there would be a decorative border at the bottom of the page.
  • Second, I sized my graphics as best as I could. All the graphics would be implemented using the CSS “background-image” property, repeat/no-repeat as necessary….
  • Third, I created my basic div tags. Header, Left, English, Center, Spanish, Right, Footer. I decided on a fixed width of 795px and a fixed height for the text area of 500px (since this matched the size of the graphic I had for the left and right borders).
  • Fourth, I went ahead in Dreamweaver and started making my template. I ran into a few problems when testing out my initial layout.
    • Things weren’t going in quite the right places. They were sort of stacking on each other instead of going side-by-side as they should. To solve this, I remembered that rather than positioning the middle row of div tags (Left, English, Center, Spanish, Right) I could have them just all float left and wrap them all in a div tag together.
    • Since I don’t like HTML tables too much and I wanted to use CSS as much as possible, I needed to find a way to center my page horizontally and vertically. I looked around a bit and came across two sets of CSS snippets that would help me. I don’t remember exactly what I did, but it ended up working for me.
    • When I first tried using the solutions mentioned at the above links, some stuff still wasn’t working out right. For example, the middle section, presumably because I was using the “float” CSS property, “floated” all the way to the left of the screen instead of being centered as I had hoped. So, I created divs to go around each horizontal section of the page (header section, content section, and footer section). Additionally, these three divs were themselves within another set of div tags.
    • For the centering horizontally and vertically, one thing that I noticed was that in Firefox at least, I was getting a scroll bar all the time when it wasn’t necessary. So, to solve that, instead of making the body and html height 100%, I changed it to 90%…. And no more scrollbar!

In the end, here’s what the basic skeleton for the HTML page was:

<body>
  <div id="mainwrap">
    <div id="contentarea-a">
      <div id="header"><!--navigation stuff went here--></div>
    </div>
    <div id="contentarea-b">
      <div id="left"><!--empty--had a background graphic--></div>
      <div id="english"><!--English section of the page--></div>
      <div id="center"><!--empty--had a background graphic--></div>
      <div id="spanish"><!--Spanish section of the page--></div>
      <div id="right"><!--empty--had a background graphic--></div>
    </div>
    <div id="contentarea-c">
      <div id="footer"><!--empty--had a background graphic--></div>
    </div>
  </div>
</body>

And here’s what the basic CSS for layout was:

body, html { height: 90%; }
#mainwrap, #contentarea-a, #contentarea-b, #contentarea-c, #header, #footer {
  position: relative;
}
#mainwrap {
  min-width: 795px;
  max-width: 795px;
  margin: auto;
  text-align: center;
}
#header {
  width: 795px;
  height: 20px;
  z-index: 4;
  overflow:  hidden;
  text-align:  center;
  background-color:  #FFFFCC;
}
#header, #header.a {padding-top: 12px; }
#contentarea-b {
  height: 500px;
  width: 795px;
}
#left, #right, #english, #spanish, #center&nbsp;{
  position: relative;
  height: 500px;
  z-index: 4;
  float: left;
}
#left, #right {
  width: 80px;
  overflow:  hidden;
}
#left {
  background: url(images/left_column.jpg) no-repeat;
}
#english, #spanish {
  width: 300px;
  overflow:  auto;
  text-align: left;
}
#center {
  width: 35px;
  overflow:  hidden;
  vertical-align: middle;
  background: url(images/center.jpg) repeat-y;
}
#right {
  background: url(images/right_column.jpg) no-repeat;
}
#footer {
  left: 0;
  top: 0;
  width: 795px;
  height: 36px;
  z-index: 5;
  overflow:  hidden;
  background: url(images/tile.jpg) repeat-x;
}

Now, with that out of the way, and with all the content transferred to my new, sleek 17 page site, I added some old tricks to add some new functionality. Since Spanish is of no use to me—and presumably, I’m not the only one in this case—and since the same can be said of English for some of the site’s viewers, I thought, why not give the users the option to view either one or the other rather than making them have to view both all the time.

Well, since I used CSS, that was a breeze to do. Two more stylesheets later and one of my favorite little JavaScripts, and a single language version was a click away.

Now, the last section of the site that needed to be addressed was the photo section. For this section, I created a div in which all the thumbnails would be located and a div in which the larger photos would be loaded. The thumbnail div was a fixed height and would scroll to accommodate the number of thumbnails I included and the main photo div filled the remaining screen real-estate…. I used a cool little JavaScript thing I found for the photos, and used some CSS to preload the thumbnails while viewers were reading different pages of the site, and overall, I’m pretty happy with the re-designed site!

comments powered by Disqus