For tonights topic, we’re going to create some Expandable menu’s with css. These can contain links, or just text. You’ll need a basic knowledge of CSS and HTML for editing these. You’ll also need some sort of Photo Editing Software, I personally use Photo Shop CS2.

There are several things going on here, so I will break things down, then at the very end of the post I’ll post the whole code. Also, I’ll include a link to this menu in action.

First, you’re going to need to make 3 Image, a Top, Middle, and Bottom. The sizes you use can be adjusted to suit your needs, here’s the images and sizes I used.

Top Image:

Size: 193 x 46
Middle Image:

Size: 193 x 40
Bottom Image:

Size: 193 x 35

Now comes the fun part, putting it all together. We’ll Start with the top image and it’s CSS attributes.

As you see in the code below, you put the url for your image as the background, with a top left no-repeat attribute. This insures the image starts at the top left, and isn’t repeated. You can toy around with the height here to make it work for your particular image, but I found 30px does great with this sample image.

Next take a look at your font css. This will allow you to change the font of the text within this “header” of your menu. This is usually just 1 line of code. In the example here, I chose the text “Store Categories:” as my header text. You can change your font, sizes, and colors to suit your needs and make it flow with your particular website.

The last part of this is your padding at the top. You can adjust this to suit your needs as well, depending on your background image, and font size. This merely adjusts your “header” down away from the top of the “Header” background image.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

dt { 
 
height: 30px;
 
padding-top: 15px;
 
background: url(http://www.millerwebtechnologies.com/gfx/expandtop_sample.gif) 
top left no-repeat;
 
font-size: 1.3em;
 
font-weight: bold;
 
text-align: center;
 
color: #00FF00;
 
}

Next, we’ll address the middle image, which actually holds the “content” of your menu. With the middle image it’s slightly different with the css, as you want the middle image to repeat downward with the content…the more content you have, the longer the middle section will be. So same as before you set the image’s url as the background, but you put it in as top left repeat-y which allows the image to be repeated downward, but not side to side.

Now we’ll talk about the padding. The padding here plays a completely different role. You don’t need padding on the top or bottom of the image because you have your “header” image above, and the closing image below; but you want padding on either side so your text isn’t pushed to the outsides of your image. So, here’s what you do, set your padding to 0 for top and bottom, and set the sides to 20px. You can of course adjust this to your liking depending on your background image as well. You might be ok with less padding, you might need more.

Set your Text alignment to Justify, pic your color for your text within the “content” section, and you’re all done with the “content” section of your menu.

1
2
3
4
5
6
7
8
9
10
11
12

dd {
 
padding: 0 20px 0 20px; 
 
text-align: justify;
 
background: url(http://www.millerwebtechnologies.com/gfx/expandmid_sample.gif) 
top left repeat-y; 
 
color: #FFFFFF;
 
}

Now comes your “footer” or bottom image. This one is pretty simple. You set the image as a background once again. You want the alignment to be bottom left no-repeat. Then set the padding to padding-bottom to keep your content text away from the bottom of your image. See, quick simple and easy for this one.

1
2
3
4
5
6
7
8

dl { 
 
background: url(http://www.millerwebtechnologies.com/gfx/expandbtm_sample.gif)
bottom left no-repeat;
 
padding-bottom: 30px; 
 
}

Now that we have the images in place we can talk about the other elements. I chose to have this menu 50px from the left, 25px from the top, and the width is 194px to contain your image.

1
2
3
4
5
6
7
8
9

dl { 
 
left: 50px;
 
top: 25px;
 
width: 194px; 
 
}

You want to make sure all 3 images line up so you need to set the overall margin and padding to 0. You do so like this:

1
2
3
4
5
6
7

dl, dt, dd { 
 
margin: 0;
 
padding: 0;
 
}

And that should take care of all the CSS elements of your Expandable Menu created with CSS. Below is what all the CSS put together in your stylesheet should look like.

CSS:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67

 
dl { 
 
left: 50px;
 
top: 25px;
 
width: 194px; 
 
}
 
 
 
dl, dt, dd { 
 
margin: 0;
 
padding: 0;
 
}
 
 
 
dl { 
 
background: url(http://www.millerwebtechnologies.com/gfx/expandbtm_sample.gif)
bottom left no-repeat;
 
padding-bottom: 30px; 
 
}
 
 
 
dt { 
 
height: 30px;
 
padding-top: 15px;
 
background: url(http://www.millerwebtechnologies.com/gfx/expandtop_sample.gif) 
top left no-repeat;
 
font-size: 1.3em;
 
font-weight: bold;
 
text-align: center;
 
color: #00FF00;
 
}
 
 
 
dd {
 
padding: 0 20px 0 20px; 
 
text-align: justify;
 
background: url(http://www.millerwebtechnologies.com/gfx/expandmid_sample.gif) 
top left repeat-y; 
 
color: #FFFFFF;
 
}

Now for the HTML part of this menu. This part is really simple. There’s really one 3 parts to it on the HTML side. The DL tag starts your menu much like the TABLE tag does for starting a table. Next is your DT tag. This is your “header” we talked about above. Inside your DT tag, you put the heading of your menu. Then comes the DD tag. This is your “content” area. This is where you put your links, or text whichever you’ve created this expandable menu block for. Close your DD tag, then your DL tag, and you’re done. Below is what the HTML will look like.
HTML:

1
2
3
4
5
6
7
8
9
10
11

<dl>
<dt>Store Categories:</dt>
<dd><br>
<a href="http://www.millerwebtechnologies.com/store/agora.cgi?product=Banners&amp;xm=on">Banner Graphics</a><br>
<a href="http://www.millerwebtechnologies.com/store/agora.cgi?product=Dedicated_Servers&amp;xm=on">Dedicated Servers</a><br>
<a href="http://www.millerwebtechnologies.com/store/agora.cgi?product=Hosting&amp;xm=on">Hosting Solutions</a><br>
<a href="http://www.millerwebtechnologies.com/store/agora.cgi?product=Reseller_Packages&amp;xm=on">Reseller Hosting</a><br>
<a href="http://www.millerwebtechnologies.com/store/agora.cgi?product=Business_Site_Services&amp;xm=on">Website Developer Solutions</a>
</dd>
 
	</dl>

Here’s what your Menu Should look like if you created it properly.

To see the menu in action in various ways visit Miller Web Technologies

Ok for tonights topic, we’ll cover the Keyword and description tags in the <head> section of your HTML pages.

First we’ll talk about the “Description” tag. Completed as follows:

<meta name=”description” content=”Miller Web Technologies is a company based in Peoria IL. We specialize in E-Commerce, Hosting Solutions, and Banner Graphics. Consider Miller Web Technologies as your next Web Developer.”>

28 words, 187 characters (we’ll discuss this in a little bit)

Basically, the description is self explanatory. It is a short description of your website. This is used by search engines in their description they publish of your site. Use this space wisely, and be as descriptive as you can about your company, organization or whatever your website is about.

Next we’ll discuss the “Keywords” tag in the meta tag. It is produced as follows:

<meta name=”keywords” content=”Peoria, Web Developer, hosting solutions, E-Commerce, Banner Graphics”>

8 words, 70 characters (again, we’ll discuss this in a minute)

This is your chance to help boost your SEO. Pick your keywords and phrases carefully. Don’t be too broad, but don’t be too specific either. You’ll want words that actually pertain to your site. If you start putting in irrelevant words, and a search engine finds this out, it could wreak havoc on your chances in the search engines.

Now, for the word count/character count. You don’t want more then 200 characters in your description nor your keyword section. Anymore then this, and it will hurt you more then it will help you. So do the best you can in the space you have, and you will be pleased with your outcome, and glad that you took the time to add these to your site when you go to look at the search engines.

Well for my first tutorial on FeedtheDragon I’m going back to the Basics of HTML. Linking…

There’s several reason to use links. Creating links to your pictures, link to news stories on your website, there are many more reasons why you might want to use links, but that’s not the point of this post.

Take the following example:

1
2

<a href="http://www.millerwebtechnologies.com" target="_blank" class="copyright_link">
Miller Web Technologies</a>

The Href part defines where to send the web browser to; in this case it’s going to www.millerwebtechnologies.com. You can define this link however you wish, as long as the URL placed inside is valid. It can be a website, a photo, a blog, facebook/myspace or anything else you want to link to.

The next part within this link is the Target. this defines the action taken when the link is clicked on. There are several options available, they are as follows:

_blank opens the link in a new browser window.

_parent opens the link in the immediate frameset parent.

_self opens the link in the frame with focus

_top opens the link in the full window without frames.

The most commonly used are _blank and _top.

The next part is the Class, this is mainly used in CSS, and allows you to control font, color, text decorations among many other things. If you are not using CSS then you really don’t have a need for the Class part of the tag. If you’re using CSS, use the Class to define the CSS Classification of your link. Most Web designers use several on their sites, creating different specifics for copyright links, header links, sidebar links, so on and so fourth.

That about wraps it up for this tutorial, if you have any questions please feel free to contact me, and I will do my best to get back with you.

So, it’s been a while since I last posted on here. Actually it’s been since the day the new site was created, or the day after. Anyways, just thought I’d give ya’ll a lil about me and about my experience.

The name’s Scott AKA The Insane Webmaster. I’ve been doing Websites since back in 1995…Yep, in the old Geocities days where people were snaggin up the lil “houses” on the “block”. I started doing it just for fun back then, and my interest in weather. Geocities and AngelFire became more and more crowded, and I needed more room then they offered, so I bought my very first domain name. www.miller-webdesign.com I still own that domain to this day.

Well time past and I created several sites for myself and some of my interests. From the site StormTalkers which is currently undergoin a revamp, to a site named RealDisturbedFans for a contest for a fansite for the metal band Disturbed. I caught a break about 6 years ago, and got hired on at a local liquor store to design them a site to sell their products online. That lasted about 9 months, and they had about a dozen or two orders. The owner scrapped the idea because it “didn’t produce overnight” Well we web developers know that doesn’t happen. Anyways, that’s where I really started learning the software AgoraCart. I’ve since become a gold member and have done contributions to the project.

Well, I think that’s enough boring stuff about me for now. Maybe I’ll delve more into things with the next post, we’ll see what things bring.

Well, let’s try this Blog thing out. We’ll see how things go, I might have to start blogging more then i do. Then again, maybe not, we’ll just have to see.
I started to load this up myself on my server, but couldn’t get past the first page without errors, so i said screw it and I’ll come back to it another time.