ConnorMiddleton.com

Alot of geeks change jobs every year or so in hopes of better pay, better management, or simply because their current situation sucks. Not every company out there knows how to treat their IT resources. Developers like to be comfortable when they code, IT personnel like to wear sneakers, etc. Of course this doesn't apply to everyone, but this is a list based on my experience.

1. Relaxed dress code. Nothing bugs me more than having to dress up for nobody on a daily basis.

2. Access to current computer hardware/software. It's great they are paying be X dollars, but could I get a monitor that actually goes up to 1024 x 768.

3. Sunlight. Sure the mojority of coders will probably disagree with this one, but I like being able to tell what time of day it is without a clock. Also serotonin makes me happy :)

4. Working from home. Being able to remote in to tweak some code or just work from home makes life much easier. Ideas come at random times and being able to use them is important.

5. Knowledgable Boss. Does the boss/supervisor have a clue about your job? This can be good or bad. I prefer to have someone with more knowledge than me, otherwise, why is he the boss.

6. Flexable Work hours. Creative minds are not alike. Some people perform better in the evening.

7. Reimbursable Learning Costs. Do they support you learning the new software/methods/updates. They should be willing to take an active investment in you continuing to improve yourself especially when it will benefit them as well. Nobody like a stale worker.

8. Great Co-Workers. Nothing is worse than spending 8 hours cubicle hell than spending it with a monotonous boring person with no common interests. I like to have fun outside work whether it be drnking, gaming, or rec league sports.

9. Challenges. Who wants to do the same old thing day in and day out. I want some challenges.

10. Fun environment. I like to know that the other people play pranks on one another and generally make things active and exciting.

I most often work with designs from other creative developers and I am tasked with converting it into a workable site with CSS. I recently ran into an issue where there were several designs layered over each other. A quick and dirty approach would have been to just cut up the design and use the graphics like normally, but the aesthetics of it would have been lost in translation.

Here is what the original design looked like:


As you will see it included several different layers with varying levels of opacity. If it were just this page, I could have just made it a background element without worrying about it. But this was a template to use for every page throughout the site. The interior pages would have to allow for growing vertically, because the content was of variable heights.

The first thing i did was determine how I would setup the background. Taking the gradient of dark orange to light orange, I created a small sliver from top to bottom and repeated it in the background only on the x-axis:

body {
background:#FEBF24;
background-image:url(../images/background.gif);
background-repeat:repeat-x;
}

As you'll notice I also made the background color the same as the bottom most color. If you look at the comp I worked with, you'll see that there are some images that are not in the "main div" that overlay on the background. Working with the art director, we decided to eliminate these images. We could have done it I know, but on to other things.

To allow for vertical expansion I divided the image into several sections. The top "header", the top of the "container", and the bottom of the container. I chose a seperation line in the middle of the image straight through the middle of the two swirls on the right side.

This is the Header image:

The top of the "container":

The bottom of the "container":

From the header image I made a "logo image" and the right side. This would allow me to change the logo whenever needed.

I took the top and bottom images and faded them into the background color to prevent any hard lines in the images.

The overall result would have been easy to accomplish if there were ways of assigning a top image and bottom image for a background. Since there is not, here is how I accomplished it.

<body id="interior">
<div id="container">
	<div id="logo"> <a href="index.cfm"><img border="0" src="Sheraton/images/logo.jpg"  /></a> </div>
	<div id="header">
	
	
		<table cellpadding="0" cellspacing="0"><tr><Td width="100px" valign="top" ></td><td>
		<tr><td></td><td></td></tr>
		<tr><td></td><td align="right"  style="padding-top:3px;"></Td></tr></table>

</div>
<div class="clearall">&nbsp;</div>
<div id="navigation">
</div>
<div id="containerbottom">&nbsp;</div>
<div class="clearall">&nbsp;</div>
</div>
</div>
</div>
</body>

#container {
margin:0 auto;
text-align:left;
width:866px !important;
background-image:url(images/topbg.jpg);
background-repeat:no-repeat;
background-position:0px 110px;
background-color:#F37421;
z-index:1;
position:relative;
}

#containerbottom {
width:866px;
height:327px;
background-image:url(images/bottombg.jpg);
background-repeat:no-repeat;
background-position:bottom left;
float:left;
margin:-297px 0 0 0;
position:relative;
z-index:0;
}

#header {
background-image:url(images/headerbg.jpg);
height:100px;
float:right;
width:666px;
text-align:left;
margin:10px 0 -5px 0;
font-size:11px;
}
#navigation {
fl