CSS, HTML, XHTML - Code tips, tricks, links

[carju1]

CSS, HTML, XHTML - Code tips, tricks and other information tutorials.

In this section of the WebProWorld Site Design Tutorials you will find information on the subject matter that we are loosely grouping together under Code and Layout.

The tutorials are all listed in this post (which will remain at the top of the Site Design menu) and the full tutorial can be found below. If however, you would like to comment on a particular tutorial, add some information or ask a question then please follow the link provided with each tutorial to the specific discussion thread.

If you would like to write a tutorial for this section, or you'd like to suggest a link, then please contact one of the moderators to arrange its addition to this section.


Regards

Matauri, Carju1 & Paulhiles
Moderators Site Design

__________________________________________________ __


Tutorials & Articles in this Section

1. Deprecated HTML Tags & Alternatives in CSS
Matauri 16th February 2004 - WPW Discussion Thread

2. Font Sizes
Matauri 25th February 2004

3. Why use CSS to separate content from presentation?
Webnauts 25th February 2004 - WPW Discussion Thread

4. Tables and CSS Formatting
Matauri 22nd March 2004

__________________________________________________ __


External Links to Tutorials

1. What is XHTML 1.1?

[matauri]

Deprecated HTML Tags & Alternatives in CSS

Click here for definition (W3C)

Deprecated - A deprecated element or attribute is one that has been outdated by newer constructs. Deprecated elements are defined in the reference manual in appropriate locations, but are clearly marked as deprecated. Deprecated elements may become obsolete in future versions of HTML.

Obsolete - An obsolete element or attribute is one for which there is no guarantee of support by a user agent. Obsolete elements are no longer defined in the specification, but are listed for historical purposes in the changes section of the reference manual.

Which Tags are deprecated or obsolete? Here is a start. Feel free to add more & their solution as you find them.

TAG:
<align=left|center|right|justify>
<valign=middle|top|bottom>

Solution:
{text-align: left|center|right|justify ; }
or...
{width: 50%; margin-left: auto; margin-right: auto; }
or...
{margin: 2em 0em 2em 0em ; }
or...
{padding: 2em ; }
or...
{padding: 2em 0em 2em 0em ; }

_________________________________________

TAG:
In your BODY tag
<bgcolor=color text=#000000>

Solution:
body { font-size : 10px ; font-family : Arial, Helvetica, Verdana ; background-color: #000000; }

_________________________________________

TAG:
<clear=none|left|right|all>

Solution:
BR { clear: left ; }

_________________________________________

TAG:
Although they are not all deprecated, their use is discouraged in favor of style sheets.

[b] , [i] , <u>

Solution:
[b] - { font-weight: bold ; }
[i] - { font-style: italic ; }
<u> - { text-decoration: underline ; }

_________________________________________

TAG:
<font size="1" color="#000000" face="arial">
<basefont>

Solution:
size - { font-size : 10px ; }
color - { color : #ffffff; }
face - { font-family: Arial, Helvetica, Verdana, sans-serif ; }

_________________________________________

TAG:
<HR width="50%" align="center">
<HR size="5" width="50%" align="center">
<HR noshade size="5" width="50%" align="center">


Solution:
{ color: #000000 ;
background-color: #ffffff;
height: 5px ; }
note: Doesn't support in all browsers, see HERE for modifications.

_________________________________________

Will add more as I come to them.
-----------------------------------------
Click Here to discuss this Tutorial

.

[matauri]

FONT SIZES

There are a few ways you can write font sizes, so I thought it would be handy to have a comparison of them here.

{font-size: 14pt}
{font-size: 14px}
{font-size: x-large}
{font-size: larger}
{font-size: 1.5 em}
{font-size: 125%}

IMO the best practice to get into is to use either em or % , as they adjust to various resolutions better.



^

[Webnauts]

Why use CSS to separate content from presentation?

The aim for web developers is to remove all presentation from the html code, leaving it clean and semantically correct. More: http://www.maxdesign.com.au/presenta...ts/index07.htm


Click Here to discuss this Article


^

[splinter]

This is a subject that I'm really getting into: accessibility. In designing my newest site I have run into a number difficulties trying to incorperate this and I wish to pass on my new-found experience :P

1. Tables For Design

This is a major no-no. Tables were created to display data in a table, not for designing websites. Unfortunately, before the invention of CSS the use of tables was the only way to display our designs the way we wanted. But since we do have CSS, tables for design should be redundant. This has not happened because too many designers either can't be bothered to learn CSS or are unwilling to change their ways.

There are many good tutorials out there but in my opinion once you learn the basics, the most useful place is the CSS section on www.w3.org . Go there and find the CSS properties sheet. That's all I ever use now.

2. Tables for data

This is perfectly acceptable as long as it is set out correctly. The W3C have set out many tags for use to utilise to make tables more acceptable but you do not require many of them. Here are a couple of the ones I feel you require plus a brief description:

<table summary=''> - This provides a brief description of what the table is about. I tend to include a description of the layout as well.

<th id='Monday' scope='col'></th> - <th> is used instead of <td> but only for your tables header cells. In this example I am using a table to create a calendar and this is the first column. id='Monday' means that everything suggested by scope (see later) is, in this case, on a Monday. scope='col' means that this applies to that column. row can also be used and this, of course, means that the content in id applies to that row.

3. Abbreviations and Acronyms

First off, what's the difference? Here is a little hint: acronyms are always abbreviations, but not the other way around. This tip is not only good for making your site accessible to people with disabilities, it makes it better for everyone (actually, that can be applied to all of these hints). The two tags you'll need are these:

For abbreviations: <abbr title='Content'></abbr>
For acronyms: <acronym title='Content'></acronym>

These will inform the visitor what the words/letters between the tags mean.

4. Link Descriptions

This is very similar to the above only it applies to anchor tags. All you need to do is this:

Home

The very same thing will happen.

5. Forms

Just a few things here: accesskeys, lables and alt. Actually, accesskeys can be used nearly everywhere, but this is their most common use.

Accesskeys allow a key combination to be pressed (usually 'Alt + [letter that you suggest]') and the user will be taken to that area. For forms it will be used in the <input> tags:

<input type='text' accesskey='u' name='username' />

Alts can also be used within an <input> tag and provide a description as to what the <input> tag is used for.

<input type='text' accesskey='u' name='username' alt='Type in your username' />

Labels are used to group parts of forms together. Here is an example:

<label for='username'>username: <input type='text' name='name' accesskey='u' alt='Enter your username to log in' id='username' /></label>

The for section in the label tag must correspond to the id tag in the input tag. What this does is mean that the words "username" can also be used to access the <input> form.

6. Menus

When most people visit a website, they can look at only the parts they want to. Imagine you couldn't do that and had to read every single bit of the page (the menu, the adverts etc. etc.) every time. It would really grate. So we need to provide a way to skip these parts. How? By the use of links.

At the first word of your main content, imclude this:

<a name='skip'>[Word]</a>

Now go to the top of the page and find the first thing you can put a link around. Enter this:

<a href='#skip>[Whatever]</a>

There you have it.

7. Just general stuff

Whenever you make a website, you really should include these parts:

A DOCTYPE - these declare what type of page the browser is loading. I won't go through all the different types right now as they are probably listed on this site.

I use this DOCTYPE:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

It is the XHTML Strict. It means I have to be very careful and forces me not to be lazy.

A Character Set - this suggests what erm... charaters the browser should load. The most popular is this:

<meta content="text/html; charset=iso-8859-1" http-equiv="Content-Type" />

A Default Language - this tells the browser what the language is. It is set by doing this:

<html lang='en'>

8. The End

There, I hope I have enlightened you in your future ways. I feel that the web should be accessible for all and at the moment it just ain't happening. This is my little bit to help things go along and if only one person ever uses the information here, it will be one more person who has tried to make a difference.

This is not everything you will need to know about accessibility, but I never claimed it was. It is just some little hints. There are probably a few errors in it as well, so if I've got something wrong don't hesitate to contact me.

[matauri]

Tables & CSS Formatting

You may have noticed that there are a lot of deprecated attributes in relation to tables. Many have asked how to validate with this happening. The solution: put all your formatting in your CSS (style sheet) file, or in your <style> tags. Below is an example how to do this for a basic table setup.

All attributes below are just examples, customize to suit.

HTML File:
<table class="one">
<tr><td>text/image</td><td>text/image</td></tr>
<tr><td>text/image</td><td>text/image</td></tr>
<tr><td>text/image</td><td>text/image</td></tr>
<tr><td>text/image</td><td>text/image</td></tr>
<tr><td>text/image</td><td>text/image</td></tr>
<tr><td>text/image</td><td></td></tr>
</table>

CSS File:
table.one {
width: 80%;
border: 0.05em #6699CC solid;
border-collapse: collapse;
}

table.one td {
text-align: center;
font-family: Arial, Helvetica, Verdana, sans-serif;
font-weight: normal;
font-size: 0.80em;
color: #404040;
width: 50%;
background-color: #fafafa;
border: 0.05em #6699CC solid;
border-collapse: collapse;
}

End Product:




.

[morpheus.100]

W3C CSS Validator Results for http: //attitude-emedia.com/
To work as intended, your CSS style sheet needs a correct document parse tree. This means you should use valid HTML.

Errors
URI : http: //attitude-emedia.com/attitude(1).css
Line: 0 Context : #content-block3
Property paddin doesn't exist : 0

Warnings
URI : http: //attitude-emedia.com/attitude(1).css
Line : 0 font-family: You are encouraged to offer a generic family as a last alternative


Decline to comment further than your site provided the link to validate.

[matauri]

Why thank you very much Morpheous for picking that up for me. All fixed ;-)

[Niko Holopainen]

Just to comment to splinter's great example, to my understanding you should use " instead of ' since Mac's have difficulty with ' signs and both work similarly elsewhere.

No point in restricting people without accessibility issues ;)

Yours truly,

[DaButcher]

Originally Posted by splinter

This is a subject that I'm really getting into: accessibility...

...<th id='Monday' scope='col'></th>...
...<a name='skip'>[Word]</a>...

Hi,
I have some additions to your tag-properties.

You talked about acronyms, but you forgot to mention acronyms for the properties for the tags.

* You use the "id" property for the tag "<th>", but you use the "name" property for the tag "<a>".

I know this will work, atleast in IE, but if you do this in all your tags, you will soon have problems if you try using, let's say an <iframe>.

With the property "name", it will work fine in IE, but if you try Opera and maybe other browsers, the "blah" wont target the iframe.

Why?

IE works with both properties (I think), Opera works only with the property "id". What is the sollution? Use both!

eg.
<iframe name="content_frame" id="content_frame"...></iframe>

ps. I dont know about compatability for all other tags, but I think this only applies to things you need to target with an hyperlink.

[charms987]

Originally Posted by matauri

Tables & CSS Formatting

HTML File:
<table class="one">
<tr><td>text/image</td><td>text/image</td></tr>
<tr><td>text/image</td><td>text/image</td></tr>
<tr><td>text/image</td><td>text/image</td></tr>
<tr><td>text/image</td><td>text/image</td></tr>
<tr><td>text/image</td><td>text/image</td></tr>
<tr><td>text/image</td><td></td></tr>
</table>

CSS File:
table.one {
width: 80%;
border: 0.05em #6699CC solid;
border-collapse: collapse;
}

table.one td {
text-align: center;
font-family: Arial, Helvetica, Verdana, sans-serif;
font-weight: normal;
font-size: 0.80em;
color: #404040;
width: 50%;
background-color: #fafafa;
border: 0.05em #6699CC solid;
border-collapse: collapse;
}

End Product:
.

I still think tables are better but....

Ok, take a look at this:
<table class="one">
<tr><td>text/image1</td><td>text/image2</td></tr>
<tr><td>text/image3</td><td>text/image4</td></tr>
<tr><td>text/image5</td><td>text/image6</td></tr>
<tr><td>text/image7</td><td>text/image8</td></tr>
<tr><td>text/image9</td><td>text/image10</td></tr>
<tr><td>text/image11</td><td>12</td></tr>
</table>

I want to merge cells 3-5-7-9. How? I also want to allow the table to be say 85% of the screen. Why? Because this will be the core of my site.

I have not even begun to figure out how to nest a table in a table!

Does all this keep us little guys out of the market or do-it-yourself? Or am i just being thick?

Thanks matauri.

Michael

[bj]

Originally Posted by matauri

IMO the best practice to get into is to use either em or % , as they adjust to various resolutions better.

You should be aware that using em on the body can trigger nasty behaviors in IE. Best practice is to define font on the body as 100.01% (plays nice with Opera) then use either percentages or ems on the inner elements. By doing so you can define how you, the designer, wish the page to look, but allow for those who need to do so to resize the font to suit themselves.

Also, to anyone using font sizes in lists, remember that IE6 has a problem with inheritance which can be a bugbear with nested lists.

I'm also going to mention that I have my online web development bookmarks in the Kickass Webgeek Resources section of my website. Those who are tackling the intricacies of css might especially find the CSS section helpful, since there are numerous categorized links to css layouts, tricks, browser bugs, css-friendly scripts, and much more, all in an easy to decipher format. Most of these links are attributable to the folks on the CSS-Discuss List, the best group of mentors on the face of the planet (even if they can be a bit feisty at times!)

[drummin]

I want to merge cells 3-5-7-9. How? I also want to allow the table to be say 85% of the screen. Why? Because this will be the core of my site.

I have not even begun to figure out how to nest a table in a table!

Does all this keep us little guys out of the market or do-it-yourself? Or am i just being thick?

It's best not structure your whole site in table format, but to answer your question.

<table class="one">
<tr><td>text/image1</td><td>text/image2</td></tr>
<tr><td rowspan="4">text/image3</td><td>text/image4</td></tr>
<tr><td>text/image6</td></tr>
<tr><td>text/image8</td></tr>
<tr><td>text/image10</td></tr>
<tr><td>text/image11</td><td><table class="two">
<tr><td>text/image1b</td></tr>
<tr><td>text/image2b</td></tr>
<tr><td>text/image3b</td></tr>
</table></td></tr>
</table>

Note: I also "nested" another table into cell 12.
I know, I know... But he asked...

[jackson992]

[quote="drummin"]

<table class="one">
<tr><td>text/image1</td><td>text/image2</td></tr>
<tr><td rowspan="4">text/image3</td><td>text/image4</td></tr>
<tr><td>text/image6</td></tr>
<tr><td>text/image8</td></tr>
<tr><td>text/image10</td></tr>
<tr><td>text/image11</td><td><table class="two">
<tr><td>text/image1b</td></tr>
<tr><td>text/image2b</td></tr>
<tr><td>text/image3b</td></tr>
</table></td></tr>
</table>

Note: I also "nested" another table into cell 12.
I know, I know... But he asked...

ok I must be a bit slow but how does this help? I don't see an advantage on doing it this way versus regular tables? Looks like the same coding except for the table class part.

[drummin]

charms wrote "I want to merge cells 3-5-7-9. How?"
The example was just showing how to merge these cells.
As far adding class to tables, it's a good way to lighten up your code, especially if you're using tables.

[jackson992]

so is there two parts you have to code? It says above a section for html and a section for css?

[drummin]

so is there two parts you have to code? It says above a section for html and a section for css?

Sure. Just save css to file with .css extention then add link in head section of html to your style sheet.
Use link like this in head...
<link rel="stylesheet" href="tablestyle.css" type="text/css" />

[ani_123]

Originally Posted by drummin

Sure. Just save css to file with .css extention then add link in head section of html to your style sheet.
Use link like this in head...
<link rel="stylesheet" href="tablestyle.css" type="text/css" />

hii.. chk out this site its very gud n helpful 4 all.. its made using flash ,photoshop,html,css etc.
its www.webdesigningcompany.net .

[arbie]

Using css and the following code to your style.css

img
{ border-style: none;
}

and the blue border will disappear for all but netscape old version users.

much easier than I anticipated - really hard to find out that it was that easy though!

Might be useful to someone?

[PosterManiac]

Very nice collection of tips.. Thanks all..will help a n00b like me

[cssadmin]

I was using a template to create a site, and on the home page, it already had a place for someone to put in their email address. Here is the code:

td class="newsletter_box"><form name="form1" method="post" action="">
<table width="100%" border="0" cellspacing="3" cellpadding="0">
<tr>
<td><span class="text13px_blue">Newsletter Subscription:</span></td>
</tr>
<tr>
<td><input name="textfield" type="text" class="textField" value="enter your email here -----------" size="30"></td>
</tr>
<tr>
<td><input type="submit" name="Submit" value="Sign Up!" class="btn"></td>
</tr>
</table>
</form>

What would someone have to do, to get it to work so that when someone did enter their email here, it subscribes them to the newsletter.

I tried asking the template seller, but they of course do as all internet customer service departments do, ignore you after the sale, and I guess it's not their job to educate me on this to begin with. It just seems the whole concept behind someone who uses a template versus creating their own design is because they don't know how to code from scratch to begin with, so it doesn't seem that out of it that a question like this would come up? but hey... why should anyone listen to me. I'm not their mom.

I would however like to know how to do this. If anyone could answer it, I would greatly appreciate it.

Thanks.

[sushil]

here is site where we can see some css tip and tricks
Ten more CSS tricks you may not know
CSS Techniques Roundup - 20 CSS Tips and Tricks

[DBLL]

A common question also seam to be how to create rounded corners using CSS and divs in place of tables, while not fully possible yet without additional divs, there is a position based technique to Create a Fluid Box with Rounded Corners at Brugbart, which still uses a few additional divs.

[williamc]

Originally Posted by Pintu

Basic HTML Document Code Structure

Begin writing your HTML tags by creating your document's basic layout. Copy and paste this code into your text or HTML editor.

This post was stolen from here: HTML Tags / Codes / Web Page Design

Pintu: your not long for this forum....