Website Designers and Webmasters

Dedicated to all the tasks Webmasters, Website Developers and Website Designers find themselves facing.

By: Ashton Sanders

Development Temporary Image Placeholder

Mar 21 2011

I found this great website that helps you instantly create temporary image placeholders for your development websites. Here’s the default example of the temporary image:

Temporary image placeholder

I create this image by making the image source (src=) “http://dummyimage.com/480×108”.

The website automatically creates the temporary image with the number. Just looking at their home page, I found that you can also change the background color, text color and replace the dimensions with text. Here’s an example:

Temporary image placeholder

The source for this image is:

http://dummyimage.com/470×115/0F6983/fff&text=Temporary+Image+Text

I highly recommend checking out their website at: http://dummyimage.com/

Enjoy,
Ashton Sanders

By: Ashton Sanders

CSS Scroll Box instead of iFrames

May 1 2008

Filed under: CSS,HTML,Website Design

You’ve probably heard “iframes are horrible with search engines.” Well, they are.

I recently had a client want me to create scroll boxes for their website so they could fit 1000+ words into a 300×457 pixel scroll box. How can I create this scroll box without the iframe? Well, you are about to find out.

CSS Scroll Box Instead of an iframe:

We’re going to use a css property called “overflow,” and by setting it to auto, it turns a normal div into a scroll box!

#scrollbox {
width:300px;
height:457px;
overflow:auto;
}
<div id=”scrollbox”> *enter endless amounts of words*</div>

So what just happened there is we assigned a div with a fixed width and a fixed height. Normally, if you had an element (ie image or text) that was too big for those dimensions, the element will be pushed larger. By adding the CSS scrollbox property of “overflow:auto” we tell the div to create a scrollbar instead of changing the size of the div.

The CSS property “overflow” does have a possible value of “scroll”, but this adds a permanent scrollbar to the bottom and right-hand side of the div even if you don’t need them. This “auto” value is great because if your content isn’t larger than the div, no scrollbars will appear. And if your content only stretches horizontally, you will only see a horizontal scrollbar!

That’s it!
Ashton Sanders

By: Ashton Sanders

1 year and 100+ posts!

Mar 15 2008

Well it has been a year since my first post here on Website Design in a Flash, and this will be my 104th post!

Website Design for 1 year

This was my first blog that really got me started in the world of blogging, and I have learned a lot. I hope that I can continue to provide useful information for people working to tame the Internet. My posting frequency has slowed down over the last couple months, but I will try to pick it up again.

Here’s to another year of Website Design Tips and Tricks!
Ashton Sanders

By: Ashton Sanders

Let it Snow, Let it Snow

Dec 25 2007

Filed under: Blogging,Website Design

On a separate hobby of mine, I came across Tom’s Boring Mordheim Blog. Tom is a very skilled miniature painter and modeler. After joining his online community, I helped him to make his home page “Snow.”

Check out the link to the blog above to check out (EDIT: see what his header image usually looks like. Now that he has taken down the snowing animation, click here to see the same image Christmas Style. It used to be just a plain .JPG. I replaced it with a Flash Animation, and amazingly, it is a smaller file than the .JPG!

Enjoy,
Ashton Sanders

By: Ashton Sanders

PHP – Finding the Width or Height of an Image

Dec 22 2007

Filed under: HTML,PHP,Website Design

Knowing the width, height, Image type or attributes of an image can be extremely useful.

I’ve used this once to make a line of images all line up on the bottom. I found out the height of the image and then added a margin to the top of the image to make the bottom of the image always be 300 px from the to. So if the height of the image was 140, I would make the margin on top of the image = 300-140.

Here’s the code to find the height or width of an Image:

<?php

list($width, $height, $type, $attr) = getimagesize(“image_name.jpg”);

echo “Image width ” .$width;
echo ”
“;
echo “Image height ” .$height;
echo ”
“;
echo “Image type ” .$type;
echo ”
“;
echo “Attribute ” .$attr;

?>

Enjoy,
Ashton Sanders

Older Posts »
RSS

Where Am I?

You have found the semi-coherent ramblings of Ashton Sanders: a website designer, developer and webmaster. This is primarily Ashton's place to save notes about techniques and things that he learns in his never-ending conquest of the internet. Hopefully it's coherent enough to be useful to you too.

Subscribe:

Enter your email to get automatic emails whenever Ashton posts on the blog.

Email:

Advertisers:

Email Marketing $19/Month! OIOpublisher Learn how to make Money from Blogging Hillarious, High-Quality Shirts for $6/each Great Book Keeping and Invoicing Software Advertiser Here

Tags and Categories

Links

Blog Roll