Posted on: July 31st, 2009 by Famous Phil

I’m going to break this fairly short blog into 2 parts since I have 2 helpful tips that are fairly fast to implement.  I was going to make two blog posts on these, but they are closely related concepts, so here is a single post.

First, a helpful CSS Imagemap code creator:

For this site, if you ever have noticed, you might see that the top icons in the header (including the FamousPhil.com text) all link to certain pages on FamousPhil.  Usually, a HTML or CSS imagemap is used to make these links.  The site designer figures out where to place the selectable link area on the header by calculating pixels on the image.  Being the lazy designer that I am, I went to find a better solution to where I wouldn’t have to figure out exactly what pixel lengths I need to accomplish the clickable areas I wanted.  There is a really handy site that I found that allows you to upload or specify an image location on the web and easily specify areas for clickable links.  It then makes the html code.  This site is: http://www.maschek.hu/imagemap/imgmap. I have used this site many times for creating CSS Imagemap code.  I just have one word of caution when using this site, that is, the code generated is really condensed and not really friendly to work with.  I recommend using a program like PHPDesigner 2008 in HTML mode and using HTML Tidy, make the code into the CSS2 standard to make the code look better and much easier to read.

Second, I would like to cover making a div in HTML with two images and have text span both images.

This problem plauged me for a good two hours the other night.  Basically, I am designing a site that has a body with an image gradient (fades out as the image goes down the page), and then at the bottom of that fading image, I have to continue a textured background repeating.

To accomplish this in CSS, you need to nest div tags in HTML and specify CSS.  Here is an example that I am using directly on this site:

"

	<div class="middle">

		<div class="middle2">	

		div>

	div>
"

"/*CSS CODE*/

div.middle{

	background: transparent url("img/backgroundrepeat.png") repeat;

	min-height:250px

}
div.middle2 {

	background:url("img/bodytopgradient.png") no-repeat;

	min-height:124px

}

"

In this example, middle is the bottom layer that will repeat down the entire page.  middle2 in this example is the top layer and has a single image that contains the top gradient. I add a min-height to make the top layer show up entirely before the background repeating pattern becomes the top image.  Text will expand the page downwards, but due to the lack of text, I made a minimum height on the repeating image also to verify that it works as expected.
Hopefully these tips will help you on your next design.  Thanks for reading my blog as always!
Tags: css, div, image, imagemap, map, span
Posted in My Site
 || 1 Comment »

Posted on: May 20th, 2009 by Famous Phil

After a lot of pressure, not only from Jordan but mostly everyone, FamousPhil.com now has a new, shiny look!  *at least for the most part*.  Sure, I could improve the navigation buttons a bit to make them look “web 2.0,” but that will come in another project down the road after I finish up the rest of this never ending to do list.

As you’ve probably noticed, over the past couple of weeks, I’ve been very tight with my blog releases after posting almost every day for one stretch there.  The truth of the matter is, when I get highly involved in a site redesign, I like to spend all of my time and effort working on that redesign and forgetting about everything else.   I do admit that its tough for me to get into working on a website design in the first place, but once I’m in the process of working, I generally do not like being distracted.

For me, a distraction of any kind, even that 1 second hi to a friend passing by can throw my mind off by a huge amount.  To me, distractions can end up costing me a few hours (sometimes an entire day) to get my thoughts back and continue working on the problem I was focusing on at the time of the distraction.  Sure, this is annoying, but I’ve learned how to slam the door and tell people not to disturb me at all unless the world is on fire when I begin such projects.  Its just the way that I work I suppose.

Read the rest of this entry »

Tags: chrome, css, design, div, firefox, internet explorer, position, positioning, problems, relative, safari, table, validation, web 2.0, website, xhtml
Posted in My Site
|| 1 Comment »