Topic: Nothing Special

This is a homepage type site.
I can't get page 4 to validate..not sure how to define (lh)
Any comment welcome..
It won't sing and dance but I think it works ok
http://www.hartake.com

(Edited by brake check on 01-13-2006 04:02)

quote:

---

brake check said:

not sure how to define (lh)

---

The element "<lh>" does not exist. An element that does not exist will not validate (and unless you feel like writing your own DTD, there's no point in using a tag that doesn't exist)...

You will want to use an <h3> or an <h4> tag for those headers.

CoffeeCup adds that on a bulleted list..
I should know better than to ever use anyone elses "quickies."
I try to research every tag I use but I got lazy..
I solved the problem by putting the headers into <li></li>
It will not validate as a h1 --->h5 tag either..It won't validate when I wrapped the headers in <p> and had the UL below the headers..but I fixed!
Validates as (li) (/li)

There should be no problem using the proper h- tags. Where did you palce them? If they were inside the <ul> tags then that would cause a problem. Placing them before the <ul> tags is the proper way to go about it. It is technically valid to place the header text as part of the list, but semantically it is very bad practice.

In addition - what you have there is an ordered list - an <ol>, but you have coded it as an unordered list - a <ul> and added the numbers yourself. It would make much more sense to use an <ol> tag, and code the headers as headers outside of the list.

Hope that helps.

As for the overall site - not a lot to talk about as far as design. It's simple and clean, which is a plus. The color scheme a tad on the garish side - I would work on playing with the various shades of blue to get a more congruent feel.
I would also be sure to differentiate on the side menus between the headers and the links - they look identical, and that's never a good idea.

On that note, let's look at the code again. Here is what you have for the left menu -

<div class="lebox">
PAGES
<hr>
<a rel="nofollow" href="http://www.hartake.com.">Home</a>
<hr>
<a rel="nofollow" href="http://www.hartake.com/page1.html">Page 1</a>
<hr>
<a rel="nofollow" href="http://www.hartake.com/page2.html">Page 2</a>
<hr>
<a rel="nofollow" href="http://www.hartake.com/page3.html">Page 3</a>
<hr>
<a rel="nofollow" href="mailto:brkchk@hotmail.com">Email</a>

<hr>
</div>

What you have here is a list - it should be coded as such. The <hr>'s can be done away with, and the visual effect created via CSS. Something like this -

<div id="navigation">
<h2>Pages</h2>
<ul>
 <li><a rel="nofollow" href="http://www.hartake.com.">Home</a></li>
 <li><a rel="nofollow" href="http://www.hartake.com/page1.html">Page 1</a></li>
 <li><a rel="nofollow" href="http://www.hartake.com/page2.html">Page 2</a></li>
 <li><a rel="nofollow" href="http://www.hartake.com/page3.html">Page 3</a></li>
 <li><a rel="nofollow" href="mailto:brkchk@hotmail.com">Email</a></li>
</ul>
</div>

In your CSS, you would have something like this -

#navigation ul {
 border-top:#fff 1px solid;
}

#navigation ul li {
 list-style:none;
 border-bottom:#fff 1px solid;
}

Note a couple of things -

1) Rather than a class="lebox" for the <div>, I added an id="navigation"
This <div> will have a constant place and constant content, and will only ever occur once per page - it should have an id rather than a class. Also, you want to pick your class and id names based on structural/content purposes rather than stylistic purposes. "navigation" (or 'nav') tells us the purpose of the element rather than the stylistic value of the box.

2) Again, you have a header up there: make sure to code it that way.

FWIW

DL 44

http://www.hartake.com/testx.html

This is a test page..Not linked into the main site
It is not linked to a separte style sheet to make it easier to read
The middle OL is a nasty SOB to format.. The light blue goes out further than the pictures and the paragraphs..I have tried various widths, margins, paddings and everything I can think of..It is better but not completely correct..
The top nav is better..I am leaving it as a separate (ul class= etc) because it is for two boxes. and the container box "lebox" is positioned relative. Floating boxes are hard to control. Also I might want to add pictures or other elements below the nav list..I think I am making sense here..
The color..I don't know..I want a high contrast without intrusion....the background should disappear ideally like a page in a book does..but online white is very glaring....so finding good colors is a trick..

I fixed the width problem I mentioned above ..now to work on the colors..
I think it is in somewhat better order...
Thank you very much
http://www.hartake.com/testx.html

(Edited by brake check on 01-14-2006 00:44)

this is a pretty nice color schemer.

I might suggest that for things like this:

<div class="tbox">
<p class="h">HARTAKE</p>

that you might use something

<div class="tbox">

<h3><span>HARTAKE</h3></span>

gives you a little more to work with. don't use your <p> tags to decorate the text. Later on when you get the basic layout down you can easily replace the h3 / span with an image if you choose also.

Later,

C:\

I changed the colors..I tried to make the page recede...just accented with color to define spaces
Thanks CPrompt
I will try that..
That OL is still a mess
But I like these colors..but then I liked the other ones also ...lol

http://www.hartake.com/testx.html

(Edited by brake check on 01-14-2006 06:27)

(Edited by brake check on 01-14-2006 06:29)

C Prompt "don't use your <p> tags to decorate the text."
Ok
I tried the span tag..both as defined
span: text align: center
and inline as
span style="text-align-center
Both commands written like it states on the web pages
Neither would center the text
The p hartake/p centers using auto margin in the p definition
I will do more research on span...

(Edited by brake check on 01-14-2006 08:07)

well I should have phrased that differently. Don't let the <p> tag (or the h3 or span) determine the layout. use the div's for that kind of thing. So if you wanted to make the text centered, make the text-align:center for the div, not the h3 or span.

I read a good article that analyzed the csszengarden site that explained that kind of thing better. I'll see if I can find it.

<edit> Actually it was the Zen of CSS Design book that had that in it. </edit>

Later,

C:\



(Edited by CPrompt on 01-14-2006 16:42)

CPrompt
Zen..exactly! Simplicity combined with pixel perfection
I would like to read the book or the link if you find it..
The more I view and make web pages..the more I appreciate how hard it is to achieve simplicity..
One thing I hear now from small business owners is "I paid for this whizbag web page but it doesn't work or I want to change it, will you fix?"
I want to write code that is easy to read..easy to add to..easy to fix..
Easy simplicity
Zen...or ...he Sears Catalogue approach
Post the link or reference if you find it..
Thanks again

I do think these colors work better- FWIW.

There are still a lot of code issues going on here. I've taken the liberty of restructuring the code, matching your style as closely as possible -
http://www.in-dented.com/temp/brakecheck.html

The key problems with your HTML are ones of structure/heirarchy. The markup exists to rpovide the document with a logical structure - the CSS exists to handle anything style related.

Headers - the <h1> - <h6> tags exist to help define the heirarchy of the page. Therefore you'll note in my code that the top most header (HARTAKE) is coded as an <h1>. The scoend most header, defining the partiuclar page within the site, is coded as an <h2>. It is debatable where the headers for the "pages" and "favorites" fall, semantically speaking. I have coded them here as <h3>'s. The headers within the main content area are coded as <h4>'s, and finally the headers for the lists beneath the images are yet one step further down the line, and are coded as <h5>'s.
The use of the <p> tag with a special class to define headers is very poor practice and should be avoided at all costs.
The use of an <li>to define the header for the list is also very bad practice. The header belongs before the list, and belongs within the proper tag type.

Overall document structure -
The use of ID's and Classes, and the names you give them, are important for the document structure. Names like tbox, seebox, lebox, rebox, etc, don't tell us anything about structure. Also, as I noted above, for boxes that are set elements, such as the header, the footer, the main content area, the navigation area, and the links area, should be defined by ID's. You'll note in my code, the top box is <div id="head">, the .tnavbox has been eliminated - it was totally unneccesary. The content area is <div id="content">, the nav box is <div id="nav">, the links box is <div id="links">, and the footer is <div id="foot">.

This gives us a logical structure to work within, and by making proper use of CSS, eliminates the need for a lot of repetitive classes later on. You'll note that many of the classes are no longer there - they aren't needed.

By making use of CSS and the parent/child relationship between the elements on the page, you can streamline your code a great deal.

Note the
#nav ul, #links ul { ... }
and the
#nav ul li, #links ul li { ... }

this bit defines how a list within the #nav and the #links will be displayed, and allows you to avoid using a class name for you <ul>.

If you look through the code, you will see a lot of this.

It is very important to look at the structure of your site, and to code it accordingly, keeping your structure, content, and style as seperate elements.

I hope this helps, and I hope you will ask for clarification on anything that does not make sense.

*please note, I have not done extensive browser testing on my example page, and have not tweaked the CSS to make a perfect match with your site - there is plenty of room to play around and clean things up further.

Thanks for all the time you took to code this..
One of the things that I wanted to do was streamline the code..it seemed that much of it was repetitive and unnecessary..but I learn it one command at a time..rather than as a whole hierarchy..
I will tweak it around and learn from it
I sincerely appreciate all the time and work..

DL-44
I haven't made any changes to the site yet..but I have spent several hours studying the differences between your coding and mine..and the differences between how each displays on screen..
I don't want to copy your code and say..Great Job...because I really want to know what the code is all about..what it does and why..so I can Do a Great Job..not just c/p your stuff.
I am taking each section apart and trying to lean the difference between class/id..for instance..
When I get it all lear-ned and put back together..I will change the main site accordingly..
Just wanted to paste a note assuring you, your work was not in vain..:)

Good to hear =)

To offer a little clarity (hopefully) on the issue of class vs. id -

When you look at the structure of your site, you want to isolate those elements that are the basic building blocks of your site. These are the elements that will be present on each page, but are unique within the page itself - navigation area, header, main content area, footer, etc. These are the types of elements you will generally give ID's to. This ID can only be assigned to one element on a given page (for instance, you cannot have 2 divs both having the id of 'header'. You cannot have a div and p both the id of 'head', etc...).

From there, you want to look at each of those areas and determine what structural elements you will use within them. Inevitably, you will find that you want to use certain elements in a given area, but you will want them styled differently when they are within that area than when they are in a different part of the page. That's when you use constructs like this in your CSS (exaxmple pulled from my version of your page) -

#nav ul, #links ul
	{
	margin:0;
	padding:0;
	border-top:#007473 2px solid;
	}

Rather than add more code to your markup, you tell the browser that when a <ul> appears within the element with an id of 'nav' or 'links', apply those styles instead of the default.

Using this method (as opposed to creating a seperate class for the ul element) will keep your mark-up cleaner, and make updating easier.

Then, of course, you will have elements that you will want to be styled the same no matter where they are. In this case you simply set the style for that element in your CSS.

And then, lastly, you will elements that you will want to treat differently at diffferent times, not dependent on the parent element. This is when you use a class. A class can be applied to any number of elements any number of times. For instance - you have a class specified in your CSS with styles related to font colors, borders, or whatever else. You can use that class on any element that you want to have those attributes - they will apply equally whether you are coding a list, a paragraph, a link, a div, a table, etc...

In the example I posted above, there are no classes used because they were not necessary to get the desired effect. You may certainly find need for them as you add or modify the design, however.

Hope that helps...



(Edited by DL-44 on 01-26-2006 01:30)

Ok..
That does clarify it..although it is hard to decide what would only be on one page or the same on all pages...Web Pages seem to require considerable forethought ..almost like writing and publishing a book..
Now I have to rewrite..deciding how I want to implement what I have learned about the various elements..Whether I want to add an image in the header..but I do have to fix the footer box soon. The way it is will not work with many listed linksand the navigation is too primitive for an expanding site..maybe I will add rollover images in some of the lists..now that I am rewriting and reorganizing..
But I am working on it...
Thanks again!