Some CSS Image Help

Famous Phil — Fri, 31 Jul 2009 19:18:33 +0000

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!

FamousPhil.com Admin Blog and More » image

Some CSS Image Help

First, a helpful CSS Imagemap code creator:

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