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

Firefox Adding and Removing Scrollbar (CSS Fix)

Nov 3 2010

Filed under: CSS,Firefox,HTML

In Firefox, if the webpage you are viewing is not taller than your screen (and doesn’t need a scrollbar), Firefox will completely remove the scroll bar from your screen. This adds 20px of more space to your view space. Unfortunately, if your website is centered, this will actually move your webpage 10px to the left or right when switching between some pages.

This CSS code will automatically force a sidebar onto every page of your website; even if the scrollbar is not needed. That will stop your webpage from moving left and right on different pages:

html { overflow-y: scroll;}

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

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

By: Ashton Sanders

CSS – Paragraph Indent Text

Jun 8 2007

Filed under: CSS,HTML

WiaF Mascot“Can you indent the paragraphs?” This can be a very dreaded request to a web designer who doesn’t know better. This may mean that you have to go through and add

&nbsp; &nbsp; &nbsp;

to the front of every paragraph… or if you are a CSS Master, you know about text-indent!

All it takes is a

<style type=”text/css”>
p
{
text-indent: 20px
}
</style>

And then all of your paragraphs look like this, everyone is happy and you are done with the website 4 hours earlier! Easiest way to intent paragraphs or text on the planet! Thank you CSS for being so cool.

-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