Alignment confusion

Have a quick look here; http://www.betting-resource.com/

The example table and the example lists start with a <h1> tag, however, to <h1> tags used for the table and lists I have applied a class attribute (is that the correct terminology?) “leftheader” which is in my CSS stylesheet. The class “leftheader” stipulates that the text should be aligned to the left.

As you can see - it’s not:rolleyes:

What am I doing wrong?

Scrap that last comment I found the PDF - thanks!

This is changing, though. The new HTML5 recommendations propose using an <h1> inside of every <header>, and therefore importance is “calculated” based on a sort of “importance context”. An h1 next to an h3 would then be perfectly valid.

We can debate these merits elsewhere, but do recognize that these are still all up for debate.

That entire layout makes little sense… are sections 2 & 3 subsections of section 1? If not those should ALL be h2! Paragraph around the non-paragraph menu items are some really weird stuff – and that’s before we talk the subject of your post…

WHICH SHOULD NOT BE A HEADING TAG AT ALL!!!

There’s this other tag you use for tables – it’s called “CAPTION”.

Much less those H1’s at the bottom being total garbage – those should all be ‘demoted’ to H2 since a good rule of thumb is use only one H1 per page. (unless as mentioned you are jumping the gun by a decade using a specification not even out of draft for production work)

I’d also probably put the TR/TH at the top of the table into a THEAD tag, the rest in TBODY and make the first row (name of the team) also be TH… as the headings for that row.

It’s also invalid to have markup after the body tag, the XML prolog means you’d end up having to hack around IE6 being in quirks mode, XHTML 1.1 is NOT a doctype you should use if you care about cross browser compatibility, (drop that to 1.0), and of course don’t forget to include a MEDIA attribute for your LINK to the screen stylesheet – which you might want to name something meaningful like what media type it’s for (like screen) instead of vague/meaningless (like ‘stylesheet’). The structure of that prolog isn’t even valid with the extra spaces around the minus sign, which is why the W3C validator can’t even check the page!

You also appear to be applying style to BODY, which is unpredictable/unreliable cross-browser, so get a wrapping DIV in there if you’re gonna do fixed width.

A ‘proper’ markup using the most recent version of XHTML suitable for making websites would look something like this:


<!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"
	lang="en"
	xml:lang="en"
><head>

<meta
	http-equiv="Content-Type"
	content="text/html; charset=utf-8"
/>

<meta
	http-equiv="Content-Language"
	content="en"
/>

<link
	type="text/css"
	rel="stylesheet"
	href="screen.css"
	media="screen,projection,tv"
/>

<title>
	Betting Resource
</title>

</head><body>

<div id="pageWrapper">

	<ul id="mainMenu">
		<li><a href="index.html">[Home Page]</a></li>
		<li><a href="page2.html">[Page Two]</a></li>
		<li><a href="page3.html">[Page Two]</a></li>
		<li><a href="page4.html">[Page Two]</a></li>
		<li><a href="page5.html">[Page Two]</a></li>
	</ul>

	<h1>This is the Home Page</h1>
	<p>
		Please note, due to the fact that this website is under construction, it may look ghastly! If you're here at the wrong time you may see me experimenting with awful colours, such as yellow text on a black background..... I won't be leaving it like this!
	</p>

	<h2>Section1</h2>
	<p>
		This has a h2 as it's header since the 'home page' text is the h1
	</p><p>
		Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularized in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
	</p>

	<h3>Subsection</h3>
	<p>
		This is a subsection of section 1, which is why it's heading is a h3
	</p>

	<h2>Section2</h2>
	<p>
		This is NOT a subsection of section 1, which is why it's got an h2!
	</p>

	<h2>Section3</h2>
	<p>
		Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularized in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
	</p>

	<p>
		Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularized in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
	<p/>

	<table class="standings">
		<caption>Baseball Standings</caption>
		<thead>
			<tr>
				<th>Team</th>
				<th>Won</th>
				<th>Lost</th>
				<th>GB</th>
			</tr>
		</thead><tbody>
			<tr>
				<th>Los Angeles Dodgers</th>
				<td>62</td>
				<td>38</td>
				<td>-</td>
			</tr><tr>
				<th>San Fransisco Giants</th>
				<td>54</td>
				<td>46</td>
				<td>8.0</td>
			</tr><tr>
				<th>Colorado Rockies</th>
				<td>54</td>
				<td>46</td>
				<td>8.0</td>
			</tr><tr>
				<th>Arizona Diamondbacks</th>
				<td>54</td>
				<td>46</td>
				<td>8.0</td>
			</tr><tr>
				<th>San Diego Padres</th>
				<td>54</td>
				<td>46</td>
				<td>8.0</td>
			</tr>
		</tbody>
	</table>

	<div class="orders">
		<h2>List of bookies ordered</h2>
		<ol>
			<li>Bet355</li>
			<li>Bet355</li>
			<li>Bet355</li>
			<li>Bet355</li>
		</ol>
	<!-- .orders --></div>

	<div class="orders">
		<h2>List of bookies unordered</h2>
		<ul>
			<li>Bet355</li>
			<li>Bet355</li>
			<li>Bet355</li>
			<li>Bet355</li>
		</ul>
	<!-- .orders --></div>

	<div class="orders">
		<h1 class="leftheader">Definition List</h1>
		<dl>
			<dt>Bet355</dt>
			<dd>Sportsbook and casino</dd>
			<dt>Bet355</dt>
			<dd>Sportsbook and casino</dd>
			<dt>Bet355</dt>
			<dd>Sportsbook and casino</dd>
		</dl>
	<!-- .orders --></div>

	<div id="footer">
		Copyright 2010 www.betting-resource.com. All rights reserved.
	<!-- #footer --></div>

<!-- #pageWrapper --></div>

</body></html>

Fixes the heading orders, etc, etc…

The thing about headings in HTML/XHTML is that lower order headings are by definition the start of a subsection of the heading preceding it… In this way everything you say is a h2 is a subsection of the h1, every h3 is the start of a subsection of the h2 preceding it, etc, etc… Think of headings like a tree fanning out it’s branches, with the h1 as the trunk… Which is why as a rule you should only have a single h1 as a tree with multiple trunks looks funny.

Using the web developer toolbar for Firefox you can see this relationship in the “information > view document outline” page, which shows the relationship visually.

Which is just another of the complete retard bull coming out of the HTML5 specification – but then nobody seems to use heading tags properly in the first place and seem to want that extra wrapping “heading tag for nothing” just like they use a wrapping div for nothing today… GAH.

Headings and their use is incredibly simple, but it seems like 80% of the developers out there screw it up… HTML 5 seems to be built by the same people who never got it in the first place, just another reason I call it “the new HTML 3.2” since it undoes all the progress we’ve made the past decade thanks to STRICT.

… because when people can’t be bothered to use CAPTION, LEGEND, FIELDSET, TH, THEAD, TBODY or the half dozen other “rarely seen” tags properly, adding MORE tags to the specification is NOT the answer!!!

Just say no… to HTML 5.

Oh, and on the CSS – avoid using PT on body for font-size (even if it is the ONLY measurement that gecko will auto-resize for large font/120dpi users), use %/em… if you have to declare more than three font-faces you’re probably wasting your time, condensing your properties like padding and border might actually make it more clear, I personally would suggest using a ‘css reset’ since you’ve got different layouts in three different browsers here, when you use the condensed font property you can put the weight and line-height in there… and 8pt is a miserable /FAIL/ so far as accessibility is concerned… and avoid redeclaring properties that you’ve already set up. Gimme a moment and I’ll toss together how I’d do the same CSS but for the above markup.

Here it is as a working rewrite:

http://www.cutcodedown.com/for_others/revolution99/template.html

with the CSS:
http://www.cutcodedown.com/for_others/revolution99/screen.css

Turns out your bold statements in the CSS as well as your alignments were being ignored because you omitted the semi-colon at the end of the font-weight:bold statements too… I switched it to %/em fonts, made the table pretty (adding one class), adjusted your 800 width to ACTUALLY be 800 friendly, (don’t forget you always need to take at least 48px off for browser scrollbars and window borders), and in general made it semantic markup able to be targeted well to all browsers.

Hope this helps.

Just say no…to not expanding the ability of updated tags to help semantics and clarify the relationships between elements because some people are terrible designers/developers.

The heading tag is not an extra wrapper for the sake of wrapping. Often-times, you can have several levels of importance within the same heading for a section.
Think of a main title, plus a subtitle, or a title and a by-line, or a heading that includes h1(or h2-h6) but also an image. Is it really appropriate for an image to be a part of an the h1-h6? No. But it is still part of a heading.

But forgive the rest of us forward looking designers.

Why not? Seriously, IMG is a inline-level element if it qualifies as content and part of the heading – of course if it is just presentation that is not part of the heading it has no business being a content element, which is why semantically you’d be putting it in the CSS instead of the content in the first place… and if you need an empty tag (aka non-content element) to pull that off, oh well.

That’s the question it comes down to a lot – is that image content or presentation applied to the content. If it’s content, use IMG, if it isn’t, it goes in the CSS.

as to ‘forward looking’ excuse me, but IMHO HTML 5 is a colossal step BACKWARDS so far as web development and markup is concerned. It basically undoes ALL the progress STRICT gave us, in particular the simplification of markup. There’s a reason MENU, DIR, and APPLET were deprecated and why EMBED was not accepted into HTML 4 Strict, and why IMG was on the chopping block for the original W3C HTML 5 plans (before they threw the good one away and went with WhatWG’s garbage) – they were redundant to other tags… Now MENU is back (but apparently has something to do with form), AUDIO and VIDEO are undoing the progress of saying “If it’s not CDATA, use OBJECT”, and it fills up the specification with a bunch of garbage that just results in fatter bloated pages… Dan Schulz used to say “the people who used to write endless nested tables for nothing just write endless nested DIV for nothing today” – to which I’d append “and are racing to embrace HTML 5 whether it’s ready or not so they can endlessly nest allegedly semantic tags that are redundant to document layout, flow and existing HTML 4 elements”

Thanks for all the responses, particularly noonnope who I believe has answered the question.

I must admit I got a bit overwhelmed by the thread, as you can see I am a total beginner to CSS.

All I want to be able to do is to create some decent looking websites as a “hobbyist”, I have no goals to become a pro web designer.

I decided that I wanted to learn CSS so that I could build sites as I wanted then, with maintainable code, rather than use “templates” etc.

I’m learning this all out of a book (lol) and I’m somewhat lost in this thread when we start talking about things like;

as to ‘forward looking’ excuse me, but IMHO HTML 5 is a colossal step BACKWARDS so far as web development and markup is concerned. It basically undoes ALL the progress STRICT gave us, in particular the simplification of markup. There’s a reason MENU, DIR, and APPLET were deprecated and why EMBED was not accepted into HTML 4 Strict, and why IMG was on the chopping block for the original W3C HTML 5 plans (before they threw the good one away and went with WhatWG’s garbage) – they were redundant to other tags… Now MENU is back (but apparently has something to do with form), AUDIO and VIDEO are undoing the progress of saying “If it’s not CDATA, use OBJECT”, and it fills up the specification with a bunch of garbage that just results in fatter bloated pages… Dan Schulz used to say “the people who used to write endless nested tables for nothing just write endless nested DIV for nothing today” – to which I’d append “and are racing to embrace HTML 5 whether it’s ready or not so they can endlessly nest allegedly semantic tags that are redundant to document layout, flow and existing HTML 4 elements”

:eek::eek::eek::eek::eek:

I take your point about the H1 tags by the way, I am aware that only one H1 tag should be used per page (bar the debate about it) but that website is me currently experimenting with how CSS affects the pages, but I suppose I should get into the right habits from the start.

I really wish there was a course, book that would teach you to build a website step by step. There do seem to be a lot of good books out there, but they all seem to dive into using heavy jargon as soon as you are past the first chapter and written the “hello world” HTML.

Perhaps a job for sitepoint? Just do a series of videos or a book that will teach you to get a website up and running in a few simple steps?

Lol - yeah this is kind of my point. Kudos to you for wanting to design pages using the most efficient code possible, it will of course make pages load faster, but I think experienced designers need to remember that if newbies tried to get everything correct, they would perhaps never get a page up on the web!

Have a look at:

Build Your Own Web Site The Right Way Using HTML & CSS

Seconded – while very much a beginner book, I feel many “seasoned” developers could stand to forget everything they think they know about web design and go back to that book to start over clean. It’s the one I point EVERYONE at when they ask how to start out.

His Youtube video on the release of 2nd edition has some funny parts to it too… The part where he talks about going into a book store while on a shopping excursion mirrors my own experiences of when I was starting out a few years ago – stuff I’d picked up on websites as being bad still being on shelves.

Ooh, this looks good, it does seem to be what I am looking for. Just lokoed at the contents of the book on amazon and it does indeed seem to get you to build a website from scratch, and it has topics covered that I am interested in, such as building your menu and having a professional looking header.

I’m in the UK, so just ordered it from Amazon UK, I’d like to get the PDF aswell but I can’t see an option on the sitepoint checkout for this?

I’m getting on a lot better with this book (How to design your webiste the right way) - it explains things a lot clearer, I’m actually starting to understand this stuff a bit more now.

There is a secion where the book instructs you to add a rule for the navigation ID.


#navigation {
width: 180px;
border: 1px dotted navy;
background-color: #7da5a8;
}

That’s supposed to turn the background color of the navigation box to a different shade of blue. Mine seems to have gone a funny grey color! www.betting-resource.com

Any comments on what I have done wrong?

You should also learn how to use dev tools browsers have: like F12 for IE, right click and Inspect Element for others.

Firebug, Dragonfly also some to consider.

Why? :slight_smile:

Because using them can convince that that color (#7da5a8) is actually applied as a background. And it is. Try putting “red” instead of “#7da5a8”.

:confused:

Yeah, that is the correct color being displayed. Maybe it’s just not the color you thought it looked like?