Record or Upload Your Videos FREE
Powered by MaxBlogPress  


Archive for the 'HTML' Category

How To Create Jump Link Top Of Page

I always hated that code <a name="top"></a> under the body tag. So here’s a better solution

  • Reference links can be placed anywhere on your page
    • A convenient link to have at the bottom of your webpage is one that the visitor can click on to "jump" them back to the top of the page, without using the scrollbar
    • At the bottom of your page place your link between paragraph tags <p><a href="#top">Top of Page</a></p>
    • ***NEW*** Instead of just the plain old <body> tag, use this instead <body id="top">. Your link will work and you won’t be using ugly code for the "jump link" under the <body> opening tag
    • You can name the reference link anything you like – I use top

About the author. Claire Poulton is a professional web designer. I design my sites using ONLY CSS and PHP, no tables, no WYSYWIG editor. Visit my design site at Tygerz Designs

No Comments »

How To Fix List-Style-Image bug in IE


 Powered by Max Banner Ads 

Have you experienced IE’s crocked rendering of list-style-images?  Either they don’t display at all or  are chopped in half (choose how much here! – LOL), especially when you’re floating a list beside an image. Or how about the annoying IE "peek-a-boo" bug, hiding and re-appearing indiscriminately.

Anyway, I found a solution: First I created a class ul.list for the unordered list.

Clear the list-style-type to none, remove all margins and padding. This makes it cross-browser compatible.

ul.list
{
list-style-type:none;
padding:0;
margin:0;
}

Then I created a rule for the .li

ul.list li
{
margin-left:40px;
background-image:url(../images/arrow.gif);
background-repeat:no-repeat;
background-position:0 6px;
padding-left:22px;
}

Indent the left and right margins about 10px narrower than your header and paragraph margins.

Use a background-image instead of a list-style-image. You will have to adjust the background-position through trial and error so it lines up beside the text.

As for the padding: If your background-image is 16px in width, make the padding the width of the image plus about 6px, for a total of 22px. The extra px for padding will depend on your personal tastes as far as white-space between the image and the text happen to be.

<ul class=”list”>
<li> Item One</li>
<li> Item Two</li>
<li> Item Three</li>
<li> Item Four</li>
</ul>

You can also do this for "nested lists" indenting the margin by only 10px instead of the 40px as in the demonstration.

About the author. Claire Poulton is a professional web designer. I design my sites using ONLY CSS and PHP, no tables, no WYSYWIG editor. Visit my design site at Tygerz Designs

No Comments »

CSS Only Round Corner Boxes

Today’s post was going to be a demonstration of creating round corner boxes with CSS Only!

But, NO, the WP WYSIWYG Editor repeatedly changed all the “b” box codes to “strong”. Go figure!

Here’s an outside link so you can see the demonstration for creating round corner boxes with CSS Only

CSS Only Round Corner Boxes

About the author. Claire Poulton is a professional web designer. I design my sites using ONLY CSS and PHP, no tables, no WYSYWIG editor. Visit my design site at Tygerz Designs

No Comments »

Still laying out out your website designs using tables?

I still use tables ….. WHAT? But NOT for what you think. I use tables when I have to show some kind of a schedule, or data presentation….. and I style my tables with CSS, so I don’t have to mark up each <tr> and <td> tag to present them…….

You must have heard by now that designing with tables is becoming obsolete. CSS is the professional easy way to design web pages, and it has quickly become a must-have for standards-compliant websites.

What are standards-compliant websites?

At first new web designers think OMG Rules! But, these rules make it easier in the end, which is what? Designing a web page that can be viewed in any web browser and can be accessed by anyone who may need screen-readers, braille devices, or who want to print information or receive via a cell phone or i-pod. This is ALL available now by using standards-compliant (X)HTML for markup and content, and CSS for design. No more "transparent gif’s" to create white space between your page elements.

CSS (Cascading Style Sheets) allow you to separate the content of your website from the design, making both much easier to update and much friendlier to search engines. Search Engines look for CONTENT, not endless redundant and empty <tr> and <td> tags.

Tables require much more mark-up in the of your web page This means it takes longer to download, and more bandwidth useage.

Tables are usually slower to layout for the browser because tables require mathematical calculations by the browser engine which means it takes longer for people to actually view your pages.

Tables usually prevent incremental rendering. In other words your page is loading away in the background revealing nothing but a blank white screen with little parts showing up bit by bit.

Tables may require you to chop single, logical images into multiple ones. You’ve seen those web designs where the header image is all in small pieces designed to fit within a table cell. Very difficult to change the look of your page.

Once you know CSS, table-based layouts usually take more time to implement. Over the past few years I have created simple templates. One-column, Two-column, and Three column, as well as some unusual ones that mimic a frames layout.

Tables are semantically incorrect mark-up for layout because tables describe the presentation, not the content – which is what people came to your page to see… CONTENT.

People who use screen-readers have a terrible time with table-based layouts. Wouldn’t you want to make your website content available to everyone?

Tables lock you into the current design and make re-designs MUCH harder than semantic HTML plus CSS. You can’t just "fix" a table based design to update it. You pretty much have to create the WHOLE design from scratch. With CSS layout and design you only need to change those elements in your style sheet that you want to look different.

No Comments »

Organized HTML CSS Code

Learn to write neat, easy to read Style Rules and HTML Code. You will save yourself a LOT of work and frustration by always doing things the same way every time and organize your Style Sheets. This is how I organize mine so if I need to edit or find some error, it’s way easier to work with:
Style Sheets:

  • Start your Style Sheet with all the regular HTML tags such as html, body, p, h1 – h6, img, and other often used html tags
  • “Classes” come next such as colors, text-alignment, and text formatting
  • “ID’s” for layout follow at the end

By organizing your Style Sheets in this order ALL THE TIME, you create a pattern that you can follow for every website you design. Continue Reading »

No Comments »

Keep Code Organized

The worst way to create well-designed web pages is to use a WYSIWYG Editor. They may look like they’re doing the job, but what is happening is the code created by these monstrosities is almost unreadable and uneditable.

By creating NEAT organized Styles in a stylesheet, you have effectively removed about 75% of the junk out of your webpage. JUNK that will drive you nuts.

Some webmasters who create CSS Stylesheets, copy and paste code from a bunch of different websites because they don’t know how to create their own style rules. The result is a mish-mash of messy hard to read style rules.

There are 3 steps to good web page organization: Continue Reading »

No Comments »

Use The Correct DOCTYPE

You must use a proper “DOCTYPE” when creating Web Pages styled with CSS and (X)HTML.I have “Viewed the Source” of a LOT of web pages and find that most people don’t even use a proper DOCUMENT Type – Then they wonder why their pages look terrible.What does a “DOCTYPE” look like:
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml“>

You don’t have to remember all that because when you use an editor such as Note Tab Lite the DOCTYPE is automatically generated for you.

Code It Right On Your Site!

Claire Poulton

No Comments »