Announcement

**me'** · Mar 13, 2004, 01:24 PM

Okay, I'll nail the big one if I may.

Q: I've heard tables for layout purposes are bad. Why is this, and how do I lay out my pages otherwise?

A: First: why?

Nearly every tag has a meaning. <h1> means the main title of a page, <em> means emphasised text. Correct application of these meanings is extremely advisable practice in today's Web. Why? That's a little more complicated. XML (which XHTML is based on), SGML (which HTML is based on) and therefore their derivatives are all markup languages. This is a special way of describing data — with tags.

Each tag describes the data contained with it. <em> means that the text inside is slightly more important. If we used, say, <cite> to achieve the same presentational effect, we're saying that the data inside was quoted, or cited, from somewhere else, when it's not. In the same way, if we use tables to lay out our page, we are describing this data as tabular. It's not. This undermines the very purpose of HTML, XHTML, or whatever markup language we're using.
Second reason: tables are presentational. XML, which is really the new markup standard, dictates that all presentation should be removed from style! This means not using presentational tags like <b> or <font> in our XHTML, but instead using CSS to achieve this presentation. This makes sense — our code becomes lighter, the same presentational code can be cached for the entire site meaning faster loading times, and when something like a webpage to braille converter comes along, it won't be confused (how can braille be bold? Chances are you want strong emphasis, <strong>, or you want to make something a header, <h1>, <h2>, <h3> ... <h6>).

Also, if we have an 'inferior' rendering device like a PDA or mobile phone (cell phone), we can present to them the unstyled XHTML, which will be perfectly legible. Tables can screw up a design on such small resolutions.
Tables bloat your code. Using tables means far bigger file sizes, which means 1) slower loading times for your visiters, 2) larger bandwidth required, and lets face it: bandwidth isn't free. With semantic CSS-based positioning, our file sizes drop huge amounts.
Search engines love clean code. CSS-based positioning gives us clean-as-you-like code, which inevitably results in higher search engine ratings.
Maintainability/Updateability: In the future, you may want to make changes to your presentation, but it's much less likely you'll want to change the underlying content. Seperating content from style by CSS and CSS-based positioning makes it so easy to change what the site looks like. Just a single file to change, bypassing complicated and untrustableglobal search and replaces.

Case in point: One magazine, in order to improve its brand, went for a CSS site that allowed them to change their colour scheme, chameleon like, to keep up with the colours that that month's magazine used.

That's basically all the reasons, but I hope you'll find that's enough. Also consider visiting Why tables for layout are stupid if you're not totally convinced. Absolutely fantastic site.

Next part of the question. What can we do about this? I've mentioned CSS several times in this post already. If you've never heard of it, head right over to W3Schools and start learning it! It really is very simple.

CSS-based positioning (or CSS-P), involves using semantically empty tags to act as divisions in our code. We want to mark up our navigation as one part of our page, our banner as another, our main content as a third, and maybe our sidebar (if applicable) as a final part of tha page. However, we are dividing up the page presentationally, so there's no XHTML tag with a good semantic meaning for this. So instead, we use a tag without a meaning, and the easiest one just happens to be <div>. Here's an example of a template XHTML semantically rich document:

Code:

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-gb">
<head>
  <title>Semantically Rich Document Example</title>
</head>
<body>
  <div id="banner"><h1>Semantically Rich Document Example</h1></div>

  <div id="navigation">
    <ul>
      <li>Home</li>
      <li>About</li>
      <li>Contact</li>
    </ul>
  </div>
  [color=green][another application of semantics -- our navigation is
  really an unordered list, so it should be marked up
  as such.][/color]

  <div id="content">
    <h2>Lorem Ipsum Dolor Sit Amet</h2>
    <p>Lorem ipsum dolor sit amet</p>

    <h2>Lorem Ipsum Dolor Sit Amet</h2>
    <p>Lorem ipsum dolor sit amet</p>
  </div>

</body>
</html>

<div> can be styled very easily with CSS-P. Lets say we have two divs next to each other, one of which is the main content and the other is the navigation. We want them to reside next to each other. Give each one an applicable id (eg, <div id="nav">) and lets delve into our first bit of CSS:

Code:

div#nav, div#content { float: left }
div#nav { width: 200px; }
div#content { width: 450px; }

The <div>s now have width, and appear next to each other. We can apply more CSS style:

Code:

div#nav, div#content { float: left; border: 1px solid #006 }
div#nav { width: 200px; margin-left: 10px; }
div#content { width: 450px; }

Starting to look a lot prettier already! I won't go into much more detail, I'm not much of a designer, but check out The CSS Zen Garden for hundreds of awesome CSS demos, and Holy CSS, Zeldman! for more CSS links than you could shove down your throat sideways.

Hope that helps someone! Any additions, PM me.

**liorean** · Mar 13, 2004, 02:26 PM

Q: Why doesn't Mozilla/Mozilla Firefox/Netscape/Camino render my stylesheets?

A: This issue has been discussed elsewhere on these forums. Have a look at the Stylesheet not applying in Mozilla or style sheets not being read properly by mozilla? threads for information about why this may happen if you trigger Standards Mode or Almost Standards Mode.

**Alex Vincent** · Mar 13, 2004, 07:21 PM

Q: What is XHTML and how does it compare to HTML?

A: XHTML 1.0 is HTML 4.01 rewritten as XML. As an XML language, the requirements are much stricter. In a nutshell:

Every element in the XHTML language must be lowercase.
Every attribute must be quoted.
Each element must either have an opening tag and a closing tag
Code:
```
<p>...</p>
```
or close itself
Code:
```
<img />
```

These are the most obvious differences between XHTML and HTML. Note there are three "document type definitions", or DTD's, for HTML (Frameset, Transitional, and Strict), so there are likewise three DTD's for XHTML.

XHTML 1.1 is a modified version of XHTML 1.0 Strict, designed to allow for other XML languages to mix in cleanly. This means support for features such as MathML (mathematics in web pages).

XHTML 1.1 (and optionally, XHTML 1.0) must be served with a different content-type than HTML. XHTML may be served with "application/xhtml+xml", "application/xml", or "text/xml".

Now, why would you want to use it?

The strictness of XML forces you to be very careful in how you code your pages. The end result is that it is (usually) very difficult for any browser to render your page differently than the W3C Recommendations for XHTML and HTML indicate.

At present, it's probably better to use HTML 4.01 unless XHTML 1.0+ is necessary. HTML 4.01 is almost as demanding as XHTML 1.0, and the text/html content-type is still the most commonly supported for web pages.

But if you're interested in learning XML, XHTML is an excellent starting point.

Both the HTML & CSS forum and the XML forum welcome XHTML-related questions.

Note the following threads as well for further information:

http://www.codingforum.net/showthrea...threadid=25897
http://www.codingforum.net/showthrea...threadid=26358

**DougBTX** · Mar 14, 2004, 12:45 PM

Q. How do I style a single tag?

Q. How do I style a single tag?

A. There are three basic ways to style a tag.

The first is based on selecting by context. For example, all list items, you would use this selector:

li { }

You can use more than one element in the selector. To find all list items which happen to be inside divs, you could use:

div li { }

There are lots of ways to do this, see http://www.w3.org/TR/REC-CSS2/selector.html for more information. Note: Not all of these work in all browsers!

The second way, is based on a class. This works in two parts, the first is in the HTML:

<li class="myclass">

and the second part is in the style sheet. It consists of the class (myclass) prefixed by a full stop:

.myclass { }

The third way is by using IDs, which are very similar to the class method. The difference is that IDs must be unique, so if you call one tag "MyID", you cannot all any other tags "MyID". You use them like this:

<li id="MyID">

#MyID { }

IDs are more "important" than classes. If you set the same property in a class and an ID, then the one in the ID will be used:

Code:

.red { color: red; font-weight: bold; }
#blue { color: blue; }

<li class="red">Red and bold text</li>
<li class="red" id="Blue">Blue and bold Text</li>

You can also link to an ID on a page using the <a> tag:

Code:

<div id="bob">This is Bob's div</div>
<a href="#bob">Goto Bob</a>

I'll tie this off with an example for Leonard:

Code:

li {
  margin: 0;
  padding: 0;
}
.bigfoot {
  margin-bottom: 1em;
}

<ul>
<li class="bigfoot">Home</li>
<li>About</li>
<li>Contact</li>
</ul>

Good luck, (and feel free to correct typos in this,)
Douglas

**mindlessLemming** · Mar 15, 2004, 05:31 AM

Re: Q: How can I apply one .css file to many .html pages?

Originally posted by shlagish
btw, if anyone wants to make a better version of this frequently asked question...

Q: How can I apply one .css file to many .html pages?

A:First off, you need to create your .css file.
Open your text editor, write your css (but leave out the <style> tag, which is html, not css) and save the file as name.css (don't forget the .css extension).

Then, in your html file, you must link to the file to apply it.

open the link tag: <link
What's the relationship between the linked content and the current page? it's a stylesheet: rel="stylesheet"
what type of content is it: type="text/css"
where is it: href="name.css"
when do you want the style sheet to be used? When the page is being displayed on a screen: media="screen, projection" (the projection addition is due to Opera's use of "projection" media for full screen)
close the tag: />

Here it is: <link rel="stylesheet" type="text/css" href="name.css" media="screen, projection" />
This goes in the header of the html documents to which you want that stylesheet to be applied.

so basically, your html looks like this:

Code:

<html>
 <head>
  <title>my title</title>
  <link rel="stylesheet" type="text/css" href="name.css" />
 </head>
 <body>
   <p>some bold, red content</p>
 </body>
</html>

and your css file looks like this:
It should be saved as "name.css"

Code:

body { color: #F00; }
p { font-weight: bold; }

* Note about media types
Declaring a media type will exclude Netscape Navigator 4, but that could be a Good Thing.
Using a media type of "print" will apply that stylesheet when the page is printed, so you can apply display: none; to your navigation and other elements which are totally useless in the context of a printed document.

By declaring a relationship of "alternate stylesheet", and giving the <link /> a title attribute, (title="2nd Layout") you can take advantage of modern browsers' (moz, saf, op, konq[?]) ability to let the user switch between multiple stylesheets via View>User Style> (Moz.)
________________________________

The other common way to link stylesheets is using the “@import” method:

Code:

<!---HTML--->
<style>
  @import: url(name.css);
</style>

This technique has various advantages and drawbacks (some of which are one and the same

). To see a very comprehensive list of the different hiding techniques associated with the “@import” technique, see this page. Now including extensive Mac results thanks to a couple of CF regulars

Original post by shlagish, added to by mindlessLemming.

**Mhtml** · Mar 15, 2004, 12:36 PM

Q: How can I protect my page source code?

A: Protecting your source code is impossible.

The following thread covers mostly everything associated with it, including a vast scope of satire.

http://www.codingforum.net/showthrea...threadid=4437.

As you can see, meerly posting about this often asked question will result in nothing more but really really bad jokes and sarcasm!

Sorry.

**me'** · Mar 15, 2004, 01:59 PM

Q: Why won't my page validate?

Q: Why won't my page validate?

A: There are various reasons, but I'll outline some of the main ones here:

Only block level elements can be contained within <body>. Block level elements are things like <h*>, <p>, <ul> that form rectangular boxes in the flow and can be styled with every CSS rule available (except vertical-align?). Think of block level elements as boxes, and inline level elements (such as <span>, <em>, <strong>) as part of text. Getting back to the original statement, <body> can only contain block level elements, so if you have a rogue <span> etc. floating around somewhere, you need to surround it with something, like <p> or <div>.
Only inline level elements can be contained within other inline level elements. So if you had a <span>, you can only place things like <ins> and <a> within it, not things like <div>. EG:
Code:
```
<span><div/></span>
```
is illegal,
Code:
```
<div><span/></div>
```
is legal.
You must specify a DOCTYPE and character encoding. For more information on DOCTYPEs, see the sticky at the top of the forum. Character encoding simply tells the browser which character set to use. The standard way of telling it this is to include a single <meta/> tag (I have this set as a code snippet in Dreamweaver, along with a strict XHTML DOCTYPE declaration and the <html> opening tag with the xmlns attribute):
Code:
```
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
```
UTF-8 is another perfectly valid charset for English documents, I often use it because it's easier to remember. You could also declare the encoding with the <?xml?> prefix if you're using it:
Code:
```
<?xml version="1.1" encoding="UTF-8" ?>
```
It can also be easily done serverside (untested):
Code:
```
mb_internal_encoding('UTF-8');
```
Some elements/attributes no longer exist in XHTML that previously existed in HTML. <script language="javascript"> should be <script type="text/javascript"> or <script type="application/x-javascript"> (only supported by nn6+). <embed> no longer exists, use <object> instead. Presentational tags like <font> are deprecated under XHTML 1.0 strict. Use instead the most semantically applicable tag; for example, <cite> to mark up the title of a book, <h*> to mark up headings and sub-headings.

If in doubt, visit the XHTML 1.0 Strict DTD and search for an element. Keep pressing 'Find Next' until you come across something that looks like this:
Code:
```
<!ELEMENT [elementname] ...>
```
If you can't find that, that element doesn't exist.
IDs may only be used once. If you have an element with an ID, you can't later use that same ID on a different element. If you must use an identification attribute more than once, use class.
Under XML (and therefore XHTML), some characters are illegal. Every time you use <, > or &, you must convert it to &lt;, &gt; or &amp; respectively. This includes attribute values (eg: <a href="http://www.example.org/?id=1&page=1"> is illegal, you must convert the ampersand to &amp;.)

For a much fuller list, see the list on the W3C Validator site.

**me'** · Mar 15, 2004, 04:00 PM

Q: How do I center my page on screen?

A: There are two main methods, with varying degrees of browser support.

The margin: 0 auto method. Most browsers support the auto keyword for margin. Saying margin: 0 auto is short for margin: 0 auto 0 auto. When parsed, the values are assigned in clockwise direction, i.e. the first will be assigned to margin-top, the second to margin-right, the third to margin-bottom and the last to margin-left. Here's a quote from the CSS spec to explain what auto does:

If both 'margin-left' and 'margin-right' are 'auto', their used values are equal. This horizontally centers the element with respect to the edges of the containing block.

So, margin: 0 auto should center whatever you're applying it to inside its containing block — use it on the parent <div> and the containing block is the viewport (screen). IE5.5 and down does not support this method, so it's not really perfect; but Microsoft being Microsoft programmed some 'features' (read: bugs) into their software so that using text-align: center will center a block level element (this is incorrect according to the CSS specs, but IE5.5 and down does it anyway). So, here's the cross-browser code (thanks DougBTX):
Code:
```
#e { margin: 0 auto; text-align: left }
body { text-align: center }
[color=green]/*NB: this assumes a document structure something like this:

<html>
  <head>...</head>
  <body>
    <div id="e">content</div>
  </body>
</html>

*/[/color]
```
The negative margin method. (Which almost everyone seems to have forgotten about). If you know the width of a box (whether it be expressed in percentages or pixels doesn't matter), you can use a nice trick supported by all browsers. Set the width on your box, then absolutely position it (NB: absolutely positioned children will now be offset against this box's top left corner, not that of the viewport), and give it a left margin of 50%. This should align the left edge of the box 50% across the screen — but we want the middle of the box to be 50% across the screen. So, give the box a negative margin of exactly half its width. Example:
Code:
```
div#e { 
[color=green]/*e is short for 'everything'; I use it as an ID on my surrounding-everything <div>.*/[/color]
  width: 600px;
  position: absolute;
  left: 50%;
  margin-left: -300px;}
```
This method has increased support, however, it of course has some drawbacks — when the screen gets too small, the content will disappear off the left side without so much as a scrollbar, making that area of the page completely unaccessable . For this reason, the margin: 0 auto; method is probably better (with the appropriate IE5 hack.

**DougBTX** · Mar 15, 2004, 04:18 PM

Q. Which method should I use to center my page?

Q. Which method should I use to center my page?

The drawback of the margin: auto; method is that it will not work in IE5. IE5 does (incorrectly) center blocklevel content when text-align: center; is used. So, for IE5, the following code can be used:

Code:

#centred {
	text-align: center; /* IE5 Hack */
}
#centred #inner {
	text-align: left; /* Un IE5 Hack */
	margin: auto;
	width: xxx; /* enter width here */
}

The drawback with the negative margin method is that if the browser window is too narrow for the content, then part of the content will dissapear out of the left hand side of the window, without a scroll bar. The user can then not see that part of the content. Oops.

Later,
Douglas

PS: The complete source for CSS informations: http://css-discuss.incutio.com/?page=FrontPage

If it isn't there, it probably doesn't exist.

**jeskel** · Mar 15, 2004, 05:29 PM

Q: How can I handle forms without tables?

Q: How can I handle forms without tables?

A: The forms layouts usually rely heavily on tables to keep everything lined up. You can easily achieve the same thing by applying a little CSS to your page.

Using tables, you would line up your form elements like that:

Code:

<form action="whatever.php" method="post">
<table>
<tr>
<td>First name:</td>
<td><input type="text" name="first_name" id="first_name" size="20" maxlength="30" /></td>
</tr>
<tr>
<td>Last name:</td>
<td><input type="text" name="last_name" id="last_name" size="20" maxlength="30" /></td>
</tr>
<tr>
<td>Gender:</td>
<td>
<select name="gender">
<option value selected="Not specified">Not specified</option> 
<option value="Male">Male</option> 
<option value="Female">Female</option>
</select>
</td>
</tr>
</table>
</form>

You can easily achieve the same thing using CSS. Here is the CSS part:

Code:

form p {
   width: 350px;
   clear: both;
}

form p label {
   display: inline;
   float: left;
   width: 100px;
}

form p input, form p textarea, form p select {
   margin: 0;
}

And here is the HTML part:

Code:

<form action="whatever.php" method="post">

   <p><label for="first_name">First name:</label>
   <input type="text" name="first_name" id="first_name" size="20" maxlength="30" /></p>
   <p><label for="last_name">Last name:</label>
   <input type="text" name="last_name" id="last_name" size="20" maxlength="30" /></p>
   <p><label for="gender">Gender:</label>
   <select name="gender">
   <option value selected="Not specified">Not specified</option> 
   <option value="Male">Male</option> 
   <option value="Female">Female</option>
   </select></p>

</form>

Labels float to the left of the paragraphs appearing within forms while form fields will apear to the right. To make it short, the clear property will achieve what the </tr><tr> used to do. Note that my explanations are based on Dan Shafer's book 'HTML Utopia, Designing Without Tables Using CSS'.

Please note that:

Older versions of Safari didn't support legend, just the fieldset border is visible. Camino (post-Chimera) has a bug causing floated labels are replaced with input fields. Buggy Opera6/Mac: legend is displayed inside the fieldset (among other text). MSIE/Mac only displays legend on the right side if text-align:right is specified. NS6 fails badly on these constructs (thanks to Manuel Razzari); however, NS7 works fine.

taken from: http://www.pixy.cz/blogg/clanky/css-...andlabels.html

**shlagish** · Mar 17, 2004, 09:39 PM

Q: How can I specify colour?

A:
There are three ways.

Using the name of the colour
Using an rgb value such as rgb(255,255,255)
Using a hexadecimal value such as #FFFFFF

Using the name of the colour
Just enter a colour name that is accepted. A list of accepted colours can be found... well, here:

aqua
black
blue
fuchsia
gray
green
lime
maroon
navy
olive
purple
red
silver
teal
white (white, but you can't see it because of the background)
yellow

Using an rgb value
With this method, you specify the amount of red, green and blue respectivly there is in the colour for a maximum of 255.
so this: rgb(255,0,0) is red.
rgb(0,255,0) is green
rgb(0,0,255) is blue.
rgb(0,0,0) is black (no colour)
and rgb(255,255,255) is white (all colours)

Using a hexadecimal value
This is pretty much the same as rgb, except you give the values in hexadecimal.
The first two numbers are for red, the last two are for blue and the middle two are for green.
#redredgreengreenblueblue
so this: #FF0000 is red.
#00FF00 is green
#0000FF is blue.
#000000 is black (no colour)
and #FFFFFF is white (all colours)

But you can also shorten the hex value if all the colors are represented by a pair of numbers.
ex:
#FFFFFF, #000000, 5544FF, 996633, etc.
Just replace the pair with a single number
#FFF, #000, #54F, #963

One more thing. In CSS, we use color (background-color).
but don't be confused, the proper english is indeed colour (with the u).

So if you want your text colour to be red, you can put:
body { color: red; } or
body { color: rgb(255,0,0); } or
body { color: #FF0000; } or even
body { color: #F00; }

**me'** · Mar 20, 2004, 06:32 AM

Q: How do I get my font to appear consistently?

Q: How do I get my font to appear consistently?

A: If you want your typeface to appear constant throughout your pages, you should use a widely-installed typeface. In the thread consistent font I outlined this as a list of fairly safe typefaces:

Very Safe:

Times New Roman
Arial
Courier

Almost as Safe:

Georgia
Verdana
Courier New

Still safe enough:

Garamond
Trebuchet MS

There's many a statistic site around with details on installed fonts, VisiBone is quite a good one.

Some people want their font sizes to remain constant. That's fine, as long as the user can still scale them. Remember: the web is a universal medium, and we must design with user-centricity in our minds. What if someone with poor eyesite visits your site? They should be able to scale the text in order to be able to read it (this is REGARDLESS of your target audience, anyone should be able to visit your site and read your text; likewise you can't predict everyone in your target audience will have good eyesight). Therefore, it's also important that your design doesn't 'break' once the user resizes the text (obviously beyond around 300-400% it will eventually break, but that's acceptable).

The easiest way to set a typeface for your entire site is using CSS:

Code:

html, body { font-family: arial [color=green]/*for example*/[/color] }

**liorean** · Jan 10, 2005, 05:50 AM

Q: How to prevent form from submitting when the user press enter?

Originally posted by glenngv

A: When there is only one text field and it has focus when you press Enter, the form is automatically submitted. That is even if there is no submit buttons, even with normal button, it will cause the form to be submitted. The solution is to have a dummy field. But of course, the dummy field must not be visible to the user. If you make it as hidden field (<input type="hidden" />), the form will still be submitted. But if you make a normal text field and set its CSS display to none, the form will not be submitted. Try running the demo below:

Code:

<html>
<head>
<title>How do I prevent the page from submitting a form when the user presses Enter key in a field?</title>
</head>
<body>
<form name="test">
<h3>How do I prevent the page from submitting a form when the user presses Enter key in a field?</h3>
<input name="txt1" />
<input type="button" value="Submit" />
[b]<input type="text" name="dummy" style="display:none" />[/b]
</form>
</body>
</html>

Of course, you can use also id or class selectors to define the CSS display for that field.

CSS:

Code:

#dummy {display:none;}

HTML:

Code:

<input type="text" name="dummy" id="dummy" />

or

CSS:

Code:

.hide {display:none;}

HTML:

Code:

<input type="text" name="dummy" class="hide" />

**rmedek** · Feb 13, 2005, 03:00 PM

Q: How do I create a three column layout using CSS only?

A: That's a good question, I'm glad you asked. It's almost a shame that given all the possibilities CSS offers in designing a website that a table-based layout is still the most emulated. But, still, it does have its advantages and can be one of the harder things for a beginner to CSS to master.

There are in fact several different ways to create a three column table, and there is no "right or wrong." There are advantages (and disadvantages) to all methods; floats, relative positioning, absolute positioning, etc. Rather than discuss in detail all the possiblities, I present to you a link to the (in)famous css-discuss website.

http://css-discuss.incutio.com/?page=ThreeColumnLayouts

This link leads you to an expanding collection of three column layout templates, each explaining the different methods involved and, in most cases, providing a walkthrough of both the HTML and the CSS. Hopefully it will help you find a method that works for you and your site!

Announcement

HTML & CSS Frequently Asked Questions

HTML & CSS Frequently Asked Questions

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment