KellanStec

Today, I have decided to diverge from my normal topics and write about my life. This week is my spring break, and I am home alone all week. It can’t go much better than it has been. I have been working on two different websites; one for a class and one for a paying client. It’s been a long time since I have done any website development. I think the last major thing that I did was my sister’s website. My normal approach was to take a design in Photoshop, chop it up, and put it into neat tables. I took a different approach this time, and decided to go for a table less design–something I had never tried before. At first it was tough, but I am really starting to get the hang of it. It’s much easier to position things exactly where I want them, and it takes much less space than a typical table design. Now I’ll tell you a little bit about them.

Little Red Hen Theater
This is the website that I am developing for a class. Instead of registering for Website Development this semester, I talked to the instructor and worked out a deal to test out, since I have been doing this for a number of years and really wouldn’t gain much from the class. It is also saving me about $300 for credits, plus the time I have to waste going to class. This was not my first attempt at doing a XHTML/CSS site with no tables, but it was my first successful attempt. It took me a while–much longer than a table design would have. But once I knew how to do it, it was simple. So far it’s a very simple design, and I just need time to design a suitable logo and fill it with content. Also, I’m not sure about that grey bar on the bottom, it seems like it makes the site look a bit too bland. If anyone has any ideas, let me know. I’d like to toy around with some different colors, but I don’t know where to go with it.

Volf Records
I am working on this website for my buddy Nick, who owns his own record company. This is where I really started to like CSS. If you click on the image to the right, a new page will open of the live design. As you can see, the logo hangs off the edge of the design a little bit. I really like the way that looks, and it would have been nearly impossible to do efficiently with tables. It would have either required me to chop up the logo and put the pieces in different cells, or to create one cell that spanned two below it. This would have created an empty cell to the left of where the links will go (column 1), and threw the whole design off-center. So, in order to remedy that, I would have had to put another cell to the right of everything. Talk about inefficient. Now I’ll show you the (very simple) way I did it. First comes the container for the cell behind the image. I made it the same height as the image, and used a z-index (the third dimension, or depth, of a website) to make that cell go behind everything. Then I positioned the image with three percent less padding than the main container for the entire site. It kind of makes me mad that this is the furthest that I will be going with the site for now, because I left the original design image on my computer in my dorm. But, I worked with what I already had on my web server.

Here is the code for the Volf Records logo:

<style type=”text/css”>
<!–
#contents {
margin-top:0px;
margin-left:10%;
margin-right:10%;
background-color:#333333;
height:100%;
}
#logo_back{
background-color:#333333;
padding-left:10%;
clear:left;
height:100px;
z-index:-1;
}
#logo{
float: left;
position:absolute;
left:7%;
z-index:1;
border:0px;
}
–>
</style>
<div id=”contents”>
<img src=”images/logo.png” alt=”logo” title=”Volf Records” id=”logo” />
<div id=”logo_back”></div>
</div>

Simple, huh? It is much simpler than a table design, that’s for darn sure. I know most of my readers probably don’t understand this code, but I am really excited to be learning something new. I had to share. If any of you have any suggestions or comments, please feel free to leave a comment in the form below. I’d love to hear feedback. Keep in mind that I am still working on these, and there are still some obvious problems with them. If you want to report a problem with the way the site is rendering, please tell me which browser and version you use. I have only tested them in Internet Explorer 7. I have nothing else to test with, since this is my family’s PC which is on dialup. I am not downloading Firefox on 24k.

Also, for my readers who are competent with CSS, you can sure suggest ways to optimize my code. I’m new to this!

Filed under: Personal, Technology by kellanstec