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 (http://www.webproworld.com/viewtopic.php?p=74827#74827)

2. Font Sizes
Matauri 25th February 2004

3. Why use CSS to separate content from presentation?
Webnauts 25th February 2004 - WPW Discussion Thread (http://www.webproworld.com/viewtopic.php?p=77530#77530)

4. Tables and CSS Formatting
Matauri 22nd March 2004

__________________________________________________ __


External Links to Tutorials

1. What is XHTML 1.1? (http://xstandard.com/page.asp?p=61588AC0-9A59-4E63-802A-32539ADEB0E4)

[matauri]

Deprecated HTML Tags & Alternatives in CSS

Click here for definition (http://www.w3.org/TR/REC-html40/conform.html#deprecated) (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 (http://www.w3.org/TR/REC-html40/appendix/changes.html) 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 (http://www.sovavsiti.cz/css/hr.html) for modifications.

_________________________________________

Will add more as I come to them.
-----------------------------------------
Click Here to discuss this Tutorial (http://www.webproworld.com/viewtopic.php?p=74827#74827)

.

[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/presentation/benefits/index07.htm


Click Here to discuss this Article (http://www.webproworld.com/viewtopic.php?p=77530#77530)


^

[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 ('index.htm')

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:
http://attitude-emedia.net/images/table1.gif



.

[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]

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]

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:
http://attitude-emedia.net/images/table1.gif.

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]

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 (http://kickasswebdesign.com/webgeekdir/CSS/) 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 (http://www.css-discuss.org/), 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]

<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]

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" />

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?

[sushil]

here is site where we can see some css tip and tricks
Ten more CSS tricks you may not know (http://www.webcredible.co.uk/user-friendly-resources/css/more-css-tricks.shtml)
CSS Techniques Roundup - 20 CSS Tips and Tricks (http://www.petefreitag.com/item/475.cfm)

[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 (http://www.brugbart.com/Examples/Bordertechnique.html) at Brugbart, which still uses a few additional divs.

[johndodrill]

I'm looking at CSS tables trying to find a reason that's better than "because they exist" to use them instead of standard tables. This is the nature of my question: "Why do you think CSS tables are better?" Newer isn't always better.

I like standard HTML/XHTML tables because they're easy to read. I can go back to code that is years old and instantly understand what I did. I don't use a programming format like most do but what I use is very readable to me. To see what I mean, you'd have to look into some of the tables on
Home Page of A Southern California Computer / Network Technician .

The only drawback I find with tables is that what the browsers do with the code isn't necessarily what the W3C has specified, in a few instances. A loosely related example might be that cellspacing and cellpadding are supported by XHTML (Standard, Transitional and Frame) according to W3Schools.com but not according to the W3C Validator. There might be analogues in CSS tables as well I haven't really experimented with them because I haven't found the need. However, if there are real functional advantages, from a programming perspective, I will consider adopting them.

I just know someone is going to run my site through the W3C Validator and see the 200-400 errors the Google translator links throw (thanks, Google), the 2-3 valid errors I'm cleaning up now and the keywords I have to fix. FYI, it's an experimental personal site intended to try to stay pretty close to UTF-8 and XHTML1.1, I don't care if Google lists me or not, I (and many others) have a 8Mb/s fat-pipe, so I don't care if the background takes 130 seconds to load and I'm not selling anything to anybody. What I want is a Web site that is functional but is more like looking out a window to an enticing environment than a flat hypertext markup document. The graphics do still need a bit of work but the experimental part is that it changes environments automatically according to time of day, season and, soon, holidays too. The idea is not to re-invent the Web-site for every occasion but to have the site re-invent itself in accordance with the moment so I don't tire of it quickly. (Also, kudos to imaize.info I used their code right out of the box, for the snow, and gave credits accordingly.)

You might want to comment on what you think of the concept , if you feel so inclined.

Thanks, in advance!
John Dodrill
Home Page of A Southern California Computer / Network Technician

[DBLL]

Hallo John...

I find it hard to comment on your site (http://john.dodrill.name (http://john.dodrill.name/)) from a professional standpoint, I'm not sure that I've seen anything worse in years, pointing out just a few of your mistakes would be a tedious task. But the advantages of using divs instead of tables, should be obvious to people in the industry, you don't appear to be working with Webdesign professionally though?


You are on the wrong track in so many aspects other then using tables, (using tables is not your biggest problem). Your use of, Meta tags, JavaScript for layout purposes, inline styles, br tags for layout purposes, no doctype, and obsolate use of XHTML, is of so much more concern to me.

The code amounts to nothing less then 2605 lines, at a whooping 92kb, just for the index page alone. And thats without taking into account, external files which are loaded. You should easily be able to cut that down to about 5-15kb.

Your use of animated gifs takes up to much CPU, which is also why you don't see many professionally designed websites using animated gifs to the same extend. Flash dose however not take up as much CPU, and it allows for 32bit color, rather then the limited 256 found in gifs.

Use of XHTML can be explained by the Bandwagon effect. There is no real practical benefits from using XHTML above HTML 4.01, but there are many disadvantages. This is not recognised in the amature comunity, but professionals should know about these disadvantages. Heres a few articles on the subject:

Brugbart on XHTML vs HTML (http://brugbart.com/Articles/XHTML-vs-HTML_148.html)
Sending XHTML as text/html Considered Harmful (http://hixie.ch/advocacy/xhtml)

[wadeinni]

IE Vs Firefox Cross Browser Css Tip.

I struggled with having to hack one css file to fit both IE and Firefox for a while until i came across the bracket [] markup code.

Typical example that would make your code work in both FF and IE:

Firefox: (WITH BRACKETS)

#divnameattribute[id]
{
text-align:left;
border: 0px solid #F8D78F;
width: 350px;
margin-left: 14px;
padding-left:3px;
}



IE 6, 7, 8 (WITHOUT BRACKETS)

#featuredlinks
{
text-align:left;
border: 0px solid #F8D78F;
width: 350px;
margin-left: 14px;
padding-left:3px;
}

[johndodrill]

I put up a question about the merits of CSS tables, citing the use of tables in my personal home page (Home Page of A Southern California Computer / Network Technician) which I acknowledged was an experimental design and archaic code. What I got what someone railing on my site for every flaw I had already noted without even considering the question posed, which was about CSS tables.

I would like to point out that there are a fair number of people who don't have or want Flash because the sound can't always be muted short of unplugging the speakers, which makes Flash not a universal solution. I think I'll decline to hop on every code bandwagon that comes along or having so-called "professionals" write code that takes a month to decipher, in favor of brevity.

In light of the response, I'm inclined to believe that Web Pro World might have been the wrong place to go for relevant advice.

[DavidF]

This should be updated for HTML 5 and CSS3

[stevecane]

Just a quick recommendation, CSS The Missing Manual is the best book I've found anywhere about learning CSS. It's a good reference too. The Dreamweaver and Photoshop books are very good as well.

S

[AvailHosting]

3D CSS buttons are easy to create. The trick is to give your elements borders with different colors. Lighter where the light source shines and darker where it does not.
div#button {background: #888; border: 1px solid; border-color: #999 #777 #777 #999 }
This CSS code will create a button with the light source at the upper left. Usually one or two shades of color change is all that’s needed, but you can experiment for different effects.