New Theme in Progress

Well I finally made some progress on my update to the theme. As you can see it’s somewhat different, but mostly the same. I will still have more changes hopefully soon. I just can’t make up my mind.

Well anyway, until I finally finish the updates I’ll go over some changes.

# Position: Fixed backgrounds. (also works in IE)
# New page that explains RSS just in case someone wants to know.
# Centered titles with background highlights. This makes it easier to see in my opinion.
# Scales as you resize the text size. So, don’t make it too large. I didn’t use a max-width yet.

Soon I will add something involving Javascript. It’s gonna be cool, I just hope it works.

Float Menu Bar & Content

*Update: I tested it in IE5.5/Win and it was really messed up. I’ll revisit this when I find out what’s wrong, but at the moment it works in modern browsers.*

h3. Introduction

I’ve been trying to come up with a different way of showing a sidebar for so long. In my old box theme, I tried to have a “sidebar” that is positioned on top of everything. It didn’t really look that great, plus it wasn’t really useful because it was way on top. Another technique that have been used before is a “sliding” sidebar or top bar. This kind of bar is great that it hides when not needed. The problem with it is that it requires javascript for the sliding out. Now I’m not against using javascript, but I want to try out a more simple approach first.

After reading some things about drop-down lists, and fixed attributes in CSS, I came up with the idea of a floating menu bar. It’s been done before, and although, I’ve never seen one with a drop-down list also, I’m sure that’s not new either. However, that’s what I wanted to try out.

Secondly, as I mentioned in previous posts, I am redesigning. On top of my redesign wishlist, is a better background. With that is the wish that the content will “float” over it kind of like glass over the background. Again I used the fixed attribute for this.

Now if you want to skip to the good stuff, here is my demo of the floating menu bar.

h3. Creating the sidebar

Before I start describing the techniques I used to create the CSS for the float, we must first make a structure for the menu. As with any sidebar we must have a number of things including: search, tags, dates, and rss feeds. More can be added but it will have a similar structure.




Just some HTML you’ve all seen before.

h3. On to floating

Now that we got the skeleton down, we can go into CSS to make it pretty with a float. Now the float part I referenced the w3.org CSS tips & tricks. Now to make the float here is the trick:


div#sidebar {
  position:fixed;
  top:0;
  font:small;}

This is all you have to do to float anything. The important attribute to notice here is the ‘position: fixed‘ which “fixes” the block you are floating in relation to the browser. So as you scroll, it will stay “fixed” in the same place on the browser window.

h3. Dropping the menu

I referenced the A List Apart horizontal drop-down menu and the Suckerfish drop-down menu.

Now even with the menu floating in midair, it still looks too much like HTML to be called a true menu. Plus we want to separate the headings of each part of the menu from the content it’s associated with. Here’s how you do it:


div.sideblock {
  padding:5px;
  position:relative;
  float:left;
  width:10em;}

This bit of code makes the menu horizontal with the contents under each heading. Looking better than previously but we need more. Adding to the two codes we have so far we get this:


div#sidebar {
  border-right:1px solid #ccc;
  position:fixed;
  top:0;
  font:small;}

div.sideblock {
  border:1px solid #ccc;
  border-width:1px 0 1px 1px;
  padding:5px;
  position:relative;
  float:left;
  width:10em;
  color:#777;
  background:#235c9d url('nav-bg-blue.gif') repeat-x top left;
  text-decoration:none;
  cursor:pointer;}

We put some colors into it, use a background gradient, and put a border around the menu. We still need to hide the content, however. So we do the following. Hide the bullets in our lists, and use the background color from before:


div.sideblock ul {
  border:1px solid #ccc;
  list-style:none;
  background:#235c9d;}
div.sideblock form input {
  border:1px solid #000;}

You may also notice I added a border to the form in another block, that’s because I wanted to add the border to the search form separately. We must now hide the content:


div.sideblock ul, div.sideblock form {
  display:none;
  position:absolute;
  top:1em;
  left:0;
  width:10em;}

This positions the content absolutely, because apparently IE does it incorrectly if you don’t add the top and left attribute. So to change it back for other browsers we do this:


div.sideblock > ul, div.sideblock > form {
  top:auto;
  left:auto;}

Now here is the fun part. We will make it drop-down:


div.sideblock:hover ul, div.sideblock:hover form {
  display:block;}

h3. Oh woe is IE

Everything going smoothly so far, right? Not if you use IE to do this. As usual something about IE makes life difficult for us. We must use a little javascript in order to make it work in IE also. This is optional, but if you don’t want to abandon the many users still using IE then here is the workaround:


startList = function() {
  if (document.all&&document.getElementById) {
    navRoot = document.getElementById("sidebar");
    for (i=0; i

This little JS will add the class over to the content div's we have. So we just add it to our CSS code:


div.sideblock:hover ul, div.over ul, div.sideblock:hover form, div.over form {
  display:block;}

And that takes care of it.

Here is the final code with some additions and IE fixes:


div#sidebar {
  border-right:1px solid #ccc;
  position:fixed;
  top:0;
  _float:right;
  font:small;}
div#sidebar a, div#sidebar a:link {
  text-decoration:none;
  color:#fff;}
div#sidebar a:hover {
  border-bottom:none;
  color:#0cf;}
div#sidebar a:visited, div#sidebar a:active, div#sidebar a:focus {
  color:#ccc;}
div#sidebar a:visited:hover, div#sidebar a:active:hover, div#sidebar a:focus:hover {
  color:#0cf;}
div.sideblock {
  border:1px solid #ccc;
  border-width:1px 0 1px 1px;
  padding:5px;
  position:relative;
  float:left;
  width:10em;
  color:#777;
  background:#235c9d url('nav-bg-blue.gif') repeat-x top left;
  text-decoration:none;
  cursor:pointer;}
div.sideblock ul {
  border:1px solid #ccc;
  list-style:none;
  background:#235c9d;}
div.sideblock form input {
  border:1px solid #000;}
div.sideblock ul, div.sideblock form {
  display:none;
  position:absolute;
  top:1em;
  _top:2em;
  left:0;
  width:10em;}
div.sideblock > ul, div.sideblock > form {top:auto; left:auto;}
div.sideblock:hover ul, div.over ul, div.sideblock:hover form, div.over form {display:block;}
div.sideblock:hover {
  background:#235c9d;}

h3. Floating content

I suggest you take a break after all that, because frankly, I need a break from typing all that out. Don't worry I'll be waiting right here when you get back, go take a break.

Welcome back. Now that we finished the menu, we can work on the floating content. I referenced Eric Meyer's Complexspiral Demo for this technique.

Go look at the final page. Remember to scroll up and down.

It's a little hard to see perhaps and I apologize, but you should see the background (the clouds) moving behind the content. Nope, I didn't use a png to do this. It's pure CSS coding. Now before you say it doesn't work, make sure you're using Firefox, Camino, Opera, Safari, or some other nearly web standard browser. No, I don't count IE6 with that group.

This is done again with that simple fixed attribute. This time we use it in the background.


body{background:#6cf url("bg.jpg") 0 0 no-repeat fixed;}

This is the same as the shortcut used in the code above:


div#content { 
  background-color:#6cf;
  background-image:url("bg.jpg");
  background-position:0 0;
  background-repeat:no-repeat;
  background-attachment:fixed;}

You can read more about it in the reference link I provided before. I will summarize here. The background-attachment:fixed; is fixed with respect to the browser window. That means as you scroll, the window is not the actual part moving, the elements are. So I just assign a second background image with the color change behind the contents of the page and voila!

h3. Now it's your turn

Here is the finished product once again.

Now I need your help, that seems to work but as you can see the corners are still that: corners. So if anyone know of a way to keep the floating content effect with rounded corners please feel free to comment. Thank you for reading, and enjoy!

Part 1: Defining The Document

h3. Definition

To kick off any redesign, you must first define your XHTML document. So before you do anything you must remember to use a DOCTYPE:






There’s also a frameset one, but it’s for when you want to use frames. Since it’s not recommended that you use frames, I left it out here. Choosing between strict and transitional is actually not as easy as it seems. Sure strict is the “official” way XHTML should be defined. However, the very useful target attribute (to open a new window) is depreciated in the strict form of XHTML. I know that people hate popups, but people also hate losing their place when clicking on a link which takes them to a new site. I will use strict, though, just because I like to follow the rules.

First off, it’s specifically defined in the specification the root document must define a namespace. More specifically the XHTML namespace which we are using. Secondly, according to the XHTML 1.0 specification we should use both the lang and xml:lang attributes. I have not read much about this topic, but I can see the usefulness. The useful part of course being the international support.


        

h3. Header

The next part of defining the document is the header of course. This is part that can get a little over-done. What I mean by that is internal javascript and meta tags. Sure we all have them sometimes, but some sites just have way too many.

After the title, I separated the meta tags into two parts:


        
        

        
        
        

The first part being the important to the document and search engine optimization, respectively. The second part being somewhat important to the SEO, but not really required in my opinion.

Then the next part will be many too I assume for most people. Link tags define alot of things: favicon, stylesheets, rss’s, and pingbacks. I have all of those of course. They are necessary just a simple fact.



        

        

        

        

The final part is the dreaded part I have about many sites. The script tag. Inline CSS, inline javascript, just horrible in my opinion. It’s ok for an example sure, but for a real site, no. Of course, I’m just a beginner, so take my opinion with a grain of salt.

If you want to use javascript, and I might at some point, we must use this:


        

That’s all for defining my XHTML. Here is what the final definition and header looks like:







        TITLE

        
        

        
        
        


        

        

        

        

        


Semantics & Semantic Design Goals

Reading an often linked blogticle (yes I made that word up, it means blog article) on semantics, using the Lynx text browser, and a little bit of thinking about web design in my head made me ponder on a few topics.

First, while I was making this blog a couple months ago, I had already had much knowledge of XHTML, CSS, web standards, and semantics of it all. Well actually I thought I had a lot of knowledge on it all. First of all, I made this site mostly with the look of it in mind first and foremost. I now know this is the wrong way to go; I should have had design goals in mind from the beginning. I will talk more about these goals later on in this post.

The second topic I thought about is really a good question in my opinion. When should we use a class attribute to define something and when do we use an id attribute? There are obviously many answers to when you should use which, and I’m sure not everyone will agree with one answer. What I want to know, however, is if there is a widely agreed upon answer? Surely there’s one thing that you have to consider, id attributes can only appear once, while a class attribute can be repeated. But what about certain elements that you know won’t be repeated but isn’t really that important? Does such an element deserve it’s very own id attribute? I’ll leave you to ponder these questions, as I have not found an answer anywhere nor have I got one myself.

Now the last topic I have thought about started with me wanting to make my design stand out more. Call it a redesign if you want, call it a realignment if you wish, but I do not think my design is anything special. But I digress, the main point I wanted to talk about was this need of mine to redesign, with the reading on semantics and the using of Lynx on websites, made me think about my need to make definite, but flexible, design goals. Flexible because I don’t know the extent of what I can achieve yet. Definite because I’ve been making it up as I coded so far. And without further ado, here are my design goals for this blog:

* It has to be easy to read in Lynx. So content must be near the top of the page.
* It has to look nearly the same in all the modern browsers. So I guess IE5.5/Win is out.
* It has to be more than just “yet another blog theme” look.
* Final goal for now, it will be designed with higher resolutions in mind.

I will surely be adding to these goals in the future, but for now these four cover most of what I think is most important.