Basic lessons in HTML, CGI, SEO, domain registration, hosting - build an on line business! » HTML

CSS Vertical Menu Using Unordered Lists

AdminP — Mon, 23 Apr 2012 19:31:22 +0000

A couple of weeks back we covered CSS horizontal drop down menus, today we’ll see how to code a vertical menu using CSS where the sub-level links display to the side. As before, I’ll not go into a lengthy discussion of what each line of code means, however, the link below is for those that would like to read a detailed explanation of each line. This will be helpful for those wanting to make changes to display sizes, background colors, fonts, etc.

Vertical code explanation – http://www.devinrolsen.com/pure-css-vertical-menu

Some of the information covered is:

How the HTML structure of menu / sub-menu is written
How to set the color of the background for menu and sub-menu
How to set the color of the fonts for menu and sub-menu
How to set font size

Visit this link to see menu in action

For convenience, we’ve included a link below to the CSS code we used for our sample so that you can just copy/paste it to get links like ours. Of course the colors, size and number of links, and levels can be modified to accommodate your website. If you need more than one (1) sub-level of links, please visit the information link above for details on how to do this.

Remember: When coding the CSS code to use on your own website, don’t forget that it MUST be saved in a Text Editor as a TEXT ONLY document with the extension .css after the name, i.e., mymenu.css – otherwise it will not work.

Get CSS Code: http://powertoearnmoney.com/vertical-drop-down-menu-css/

NOTE: The colors for backgrounds and fonts are in hex triplet colors – not hexadecimal. This is a link to a page where you can get hex triplet colors designations for use. Note: Not all hexadecimal colors have a corresponding hex triplet color.

The HTML code for the sample page can be found at the link below. Again, just copy and paste, then replace the Menu, Sub-menu titles with your own names and put in your links. For the sample, there are seven (7) main menu links each one with 3 sub-levels. You can adjust these to meet your needs. To remove a line in the sub-level menu, simply delete one of the

. . .

lines; to increase the number of sub-level lines, add in a

…

for each new sub-level link needed. Do this by using an HTML editor and saving the page with the usual .html extension.

In our HTML sample code, note the sample.css” /> bit of code in the header that references the .css document. For our Text Only .css document we named it ‘sample’. You would replace ‘sample’ with the name you choose to call your .css document.

Get HTML Code - http://powertoearnmoney.com/vertical-drop-down-menu-html-unordered-list/

The CSS code can be on the page, or uploaded to the domain’s root directory using an FTP program. If you choose to upload the CSS code, make sure you reference the stylesheet in the section of each of the HTML document’s pages where you want the vertical menu to appear using the following string of code shown below - where sample.css would be the name you have given to your .css page – or it will not work.

Header Code: sample.css” />

Using Cascading Style Sheets on your website for menus and various other apsects of the page can make managing your website easier, since any changes you make to the CSS code affects every page where that uniquely named style sheet code appeaers in the header.

Horizontal Drop-Down Menu Using CSS

AdminP — Tue, 27 Mar 2012 15:46:22 +0000

Using a drop-down menu to display sub-menus can make your page look more professional. But, if you’re like me, rather than use JAVA or jQuery, you’ll look for the easiest way to do this. And, as far as I’m concerned, those nice drop-down menus can easily be had using basic HTML to write an unordered list, and then configuring the display in a CSS (Cascading Style Sheet) bit of code.

I’m not one to re-invent the wheel, so I’m giving you the link where all of this is explained in detail. Get details here. However, to make things easier so you don’t have to create the documents as you read, I have placed the complete CSS code on a page (link below) where all you have to do is copy and paste it into a Text Editor. Once this is done, you MUST save the CSS code as a Text Only document giving it a name with the extension .css, i.e, mymenu.css, or it will not work.

Visit this link to see the menu in action

Depending on your website, you can customize the HTML code for the number of Menu Headings and Sub-menu headings that you need. You can also make any changes to the CSS text document if you want to change the background or font colors to blend with your website. Otherwise leave as is. Before starting any of this, take a few minutes to read through the information at the other link to understand how the CSS works and how the code is structured.

The information covered there includes:

How the HTML structure of menu / sub-menu is written
How the menu displays – left or right justification
How to determine the color of the background for menu and sub-menu
How to determine the color of the fonts for menu and sub-menu
How to set font size

NOTE: The colors for backgrounds and fonts are in hex triplet colors – not hexadecimal. This is a link to a page where you can get hex triplet colors designations for use. Not all hexadecimal colors have a corresponding hex triplet color.

The HTML code for the sample page can be found here. Again, just copy and paste, then replace the Menu, Sub-menu titles with your own names and put in the links. For the sample, there are seven (7) main menu links with six (6) of them having three (3) sub-menus each. You can adjust these to meet your needs. Place into an HTML document and save.

The CSS code can be on the page (placed in the section), or uploaded to the domain’s root directory using an FTP program. If you upload the CSS code, make sure you reference the stylesheet in the HTML document’s section using the following string of code, where ptem.css would be replaced with the name you have given to your .css page. Get the CSS code here.

Want to use a vertical menu, where the sub-menus display to the side? Check back next time where we’ll cover how to do this.

Floating Images – Part II

AdminP — Mon, 29 Aug 2011 19:44:28 +0000

We’ve seen how to use the align tag to make images ‘float’ to one side or the other of your page. We’ve also seen how the text will wrap around these images. But what if you don’t want the text to wrap?

Since a floated image will affect all the elements that follow it, you will need to insert a special line break: clear to control the text. Using the clear attribute along with the regular br tag indicates that the text should not start until the specified margin is cleared. This ‘specified margin’ would be at the end of the image or images.

How to Stop Text from Wrapping

To stop the text from wrapping you would place the cursor at the place where you want to stop wrapping text and elements to the side of the image. In most cases this will follow the image. The code used would look like:

– to stop flowing content until there are no more floating images aligned to the left margin

– to stop flowing content until there are no more floating images aligned to the right margin

You can use
– to stop flowing content until there are no more floating images on either margin

To see how this might look, we’ve taken the same HTML code we used for our last sample, but this time we’ve included the clear attribute to see how the text is affected.

Begin HTML Code Sample (Using clear Attribute):

SAMPLE PAGE WITH FLOATING IMAGES & CLEAR ATTRIBUTE

Floating Image . . . Left Side

This image has been coded to float to the left of the page using a clear attribute. Notice how the heading and text now display below the image around the image.

Floating Image . . . Right Side

Notice how the image floats to the right side of the page… but since we’ve used a clear attribute, the text and heading appear below the image.

How to Add Space Around an Image

If you look at the sample above, you’ll see that the text and heading associated with the second image are butted right up next to the images. However, you can use the vspace and hspace attributes to add a margin of space around the images. Both of these are included in the same line of code you would use for the image. For example, to add space around an image you would use the following:

hspace=”x” for horizontal space where x is the number of pixels you want to add on both the right and left sides of the image

vspace=”x” for vertical space where x is the number of pixels you want to add on both the top and bottom sides of the image

Your code might look like …

… where we’ve placed 10 pixels on the left and right side; and 5 pixels on the top and bottom.

Note that you do not have to add both horizontal and vertical space at the same time. However, using this attribute does not allow for adding space to only one side of the image. If you want to have space on only one side of the image or if the space needs to be uneven, you would do better to use a graphics program to add in the blank space.

Don’t miss our post next week, we’ve got a super new FREE program to tell you about.

How to Make Images Float

AdminP — Mon, 22 Aug 2011 19:41:41 +0000

We’ve seen how an image can be placed in a specific area of a page by using tables. However, you can also include images by using the ‘align’ attribute to make images float along one side or other of the page. If you’re familiar with using Word Press, this ‘align’ process is much the same as inserting images in your post. When you align an image on a page – left or right, you have the image display with the text and other elements wrapping around. The code used to accomplish this is within the page’s HTML code.

Floating a Image on One-side

Sample line of code:

Type [ image_name.jpg is the image name and location of the image on the server ]
Type either align=”left” or align=”right” depending on which side you want the image to float to. Remember, any text associated will flow to the opposite side of the page.
Add other image attributes, i.e., width, height, border, etc. before you….
Type the final /> to close the line
Create the elements, text that should flow next to the image

Floating an Image on Both-sides

To float both left and right side images on one page you put in two (2) lines of code; one for the left image and one for the right image. The screen capture below shows the results when having two (2) images float on one page.

To force the text to wrap for our sample, we’ve put our images inside of a table with a width of 400 pixels. We’ve placed the code used below for reference.

Note: we’ve use the paragraph tag

to begin a new paragraph and have the text align with the new image. Use the

tag to close paragraphs, text, etc. associated with any image.

HTML Code:

SAMPLE PAGE WITH FLOATING IMAGES

Floating Image . . .

Left Side This image has been coded to float to the left of the page. Notice how the heading and text wrap around the image.

Floating Image . . . Right Side

Notice how the image floats to the right side of the page, while the text and heading appear to the left. More text will continue to wrap around the image filling in the blank space.

Helpful Tips

When aligning images, remember it will be the image that appears left or right – not the text.
Place the image directly before the text it is to ‘disrupt’.
The text will continue to appear on the opposite side from the image until there is no more text or a break is encountered.

Conclusion

This is an easy way to include images and incorporate them with text without having to use tables. However, there may be times when you don’t want the text to wrap. Next week we’ll look at how to stop elements from wrapping and we’ll learn how to add space around a floating image.

HTML: Creating a Marquee

AdminP — Mon, 08 Aug 2011 19:14:18 +0000

If you want to have a marquee on your page without using JAVA, try using the following HTML code to insert a scrolling marquee anywhere on your web page. Your marquee can be words, sentences, or even images. The information contained in your marquee code will start at one point (on the screen) and float across much like the advertising marquees you see at some businesses.

Marquee Code for our sample text:

This is a sample marquee scroll

To see this code in action, visit this link…. Marquee

For our sample, we’ve coded our text to scroll across 85% of the screen with a height of 15 (pixels). We’ve set our delay at 175 milliseconds; our direction to scroll is ‘left‘ and we want our loop to be ‘infinite‘. Note: You can use marquee code inside of tables also.

Marquee Attributes

Width and Height – you can assign width and height to your marquee area as either a percentage of the area where the marquee is to display or in pixels. In our sample we’ve used a percentage for the width and a pixel designation for the height.

Scroll Delay – use this attribute to control the amount of time (in milliseconds) that passes before the text scrolls again.

Behavior – allows you to select the type of movement you want to use:

Scroll – use this for text that starts at one side of the screen and disappears off the other side.

Slide – use this for text that starts at one side and stops when it reaches the other side.

Alternate – use this for text that starts at one side and bounces back when it reaches the other side.

Direction – this determines the direction the text starts from (left or right).

Loop – allows you to select the number of times the marquee is to pass across the screen. You can also make the text appear continuously by using ‘infinite’ in place of a number.

Other – additional placement and attributes of the marquee can also be controlled by using the following attributes as well. This information is contained in the first tag.

HSPACE (Horizontal space)

VSPACE (Vertical Space)

ALIGN (Align – left, right, center)

BGCOLOR (Background color)

Marquee Content

This code is placed between the beginning and ending marquee tags HTML Code for Content Goes Here

Images – If you want to use images inside the scroll, keep them as small and as few as possible.

Font – color, face and size: use the same code you would use anywhere else in your HTML docuement to control how the text displays.

A scrolling marquee can be used to highlight a specific section of a page, draw attention to a special offer or display a larger quantity of information that you might think you have space for. Hope you have fun using this bit of code.