After being told to redo my site in CSS, I decided to do it. And now, here (http://www.jdm71488.com) is my site done in CSS. It may not be correct, but I did it. You probably wont be able to tell the difference in it, seeing is how I wanted it to look the same as my old site done in tables...
As for validating, and correcting my HTML mistakes, Im working on that right now... Thanks to all that got me here...
Oh! Feel free to critique again :)
JDM
DaveSW
07-04-2003, 11:44 AM
is that link working??
DaveSW
07-04-2003, 01:32 PM
Ah - it works now.
Congrats - nice to see proper use of the header tags. and all positioning under the @import rule. neat.
Maybe you should go for some sort of slightly pastel color background to improve it slightly? or put your url watermarked in the background?
carry on with the validating too -it needs a little more work there. Looks like you need a different charset.
nkaisare
07-04-2003, 01:51 PM
The site looks good. Nice job!!
A few comments (I just never seem to stop, don't I? :))
1. All sites are ALWAYS under construction. So that sentence at the top is redundant.
2. For your navigation, you have a table. Currently, you have
<div id="navbar">...
<table class="tablenav">
<tr><th class="thnav">Shout Outs</th></tr>
<tr><td class="tdnav"><a href="/shoutouts/family.html">Family</a><br /><a href="/shoutouts/05.html">Class Of 2005</a><br /><a href="/shoutouts/06.html">Class Of 2006</a>...
</div>
Hopefully, you'll replace that with h# and div. See an example at http://www.rickbull.co.uk/
3. In relation to above, there are a couple more points, besides the use of tables for navigation:
- You should have something other than a space or <br> to separate links (eg "|", ",")
- You can use <ul> here. See tutorial on how to use this at http://www.alistapart.com/stories/taminglists/
4. At the top of the site, you used
<h3>www.JDM71488.com - Under Construction</h3>
Within the page, you have
<h2>Nine Principles of Baseball and Life</h2>
<h6>by Raymond Angelo Belliotti</h6>
<h5>1. NO EXCUSES.</h5>
The reason why this isn't correct is because they are not h3, h6 and h5. The page heading (www.JDM71488.com) is h1. You SHOULD use <h1> and (not h3) for this to make it sematically correct. If your design requires h1 to be smaller size than h2, so be it. Use CSS to get that right.
Hence, for the above, I'll have
<h1>www.JDM71488.com</h1>
<h2>Nine Principles of Baseball and Life</h2>
<p class="author">by Raymond Angelo Belliotti</p>
<h3>1. NO EXCUSES.</h3>
nkaisare
07-04-2003, 02:06 PM
May be I didn't say this enough in my previous reply:
TRUELY A GREAT START. Its really nice to see you making a whole-hearted effort... and a good one at that.
Also, I mean all this as constructive criticism. More elaboration on above points:
Instead of
<h5>1. NO EXCUSES.</h5>
I'll probably use (second line goes in your css file)
<h3>1. No excuses.</h3>
h3 {text-transform: uppercase; text-align: center...}
----------------
Your navigation:
<div id="navbar">
<!-- "Navigation" will be h2. Since you dont have that,
we will start our navigation with h3 -->
<a class="hide" href="#page">Skip to the contents</a>
<h3>Main Menu</h3>
<ul><li><a ...>Home</a></li></ul>
<h3>Shout Outs</h3>
<ul>
<li><a ...>Family</a></li>
<li><a...>Class Of 2005</a></li>
<li><a...>Class Of 2006</a></li>
<li><a...>Class Of 2007</a></li>
<li><a...>Thanks To:</a></li></ul>
...
Hope this helps
Niket
text-align: center; font-family...}
JDM71488
07-04-2003, 02:08 PM
I'll jump right on that, thank you... Also does can anyone help me with the size of the document? Because when you minimize your screen smaller, the page goes under the navbar, becuase it is too big in width...
JDM
nkaisare
07-04-2003, 02:16 PM
The problem is caused because of this style for #page:
float:left;
width:75%;
What happens is that when you decrease browser size, the navigation area becomes smaller and smaller (18% of total width). But beyond a point, it cant get smaller (because it has to fit the longest word). So if your width becomes so small that the longest word in navigation takes more than 25% of the width, you have a problem. You have one floated block with 25+ %width and other with 75% width. What happens? The block with 75% width (#page) gets displayed below!!
Solution? Simple. Don't float the #page. Instead use this:
#page { background:white;
/* float:left; width:75%; --- NO FLOATING */
margin-left: 25%;
padding:20px 10px 10px 10px;
}
JDM71488
07-04-2003, 02:31 PM
WOW! I see, thank you very much, the headings will be corrected in a few minutes...
JDM
Jonathan
07-05-2003, 08:09 PM
great job... the only mistake is my name :) look at the spelling. :) lol...
another thing/
this page didn't look like it was right
"http://www.jdm71488.com/shoutouts/family.html"
it didn't come up like the navbar you have on the cover...
PeOfEo
07-05-2003, 08:24 PM
Thats nice, I like how you centered it. Did you use auto width margins or something?
JDM71488
07-05-2003, 09:47 PM
Right now, since I changed the menus to a unordered list, not all pages are up to date, I keep making changes on one, then I have to add the change to all the others...
I have corrected the spelling of "Jonathon" sorry :)
And yes I used margins to center the menu and page content. It took me awhile to figure that out, it is probably wrong, but if it is let me know so I can fix it.
Thank You,
JDM
PeOfEo
07-05-2003, 11:39 PM
Well I just started using css for layouts myself and there are only two ways right now that I know how to center with, so you are probably right I dont know how many ways you can go about doing it.
Jonathon, with your hover style, it adds an extra space under my link when hovering over it. Why is this?
Jonathan
07-06-2003, 03:12 PM
I think it is because you are doing the links in a list type thing... You should just do the links plain, with the <br> or in a table... might work then..
JDM71488
07-06-2003, 03:46 PM
I mess around with it, thanks for your input :)
nkaisare
07-06-2003, 10:10 PM
What was the problem with the example I showed? No, you shouldn't do {display: block} for <a> while keeping other things same.
Jonathan, while your intentions were good, you do not seem to have understood why display: block was used (whereever you saw it being used).
You should just do the links plain, with the <br> or in a table... might work then..
Thats exactly what JDM had, we were trying to do it another way - using lists - which is sematically more accurate.
I mess around with it, thanks for your input
In my previous reply, I gave you two sites to look at:
http://www.rickbull.co.uk/
http://www.alistapart.com/stories/taminglists/
I strongly suggest you take a look at them, to understand things better. Former one is an excellent example of valid, crisp and accessible HTML/CSS site. Neglect the rest, just concentrate on what Rick Bull has done for his links. An alternate way is <ul>, and the ALA article on Taming List is an excellent source.
Jonathan, I also suggest that you read the ALA article. The extra space problem is easily soved by using
ul, li {display: inline}
Don't take my word for it... try to understand the ALA article, its really helpful to know such tricks.
Hope this helps
Niket
JDM71488
07-07-2003, 01:22 AM
Well I read the ALA article, and took a look at Rick Bull's site. I now understand...
When Jonathon proposed the idea of changing my hover color for my nav links, I tried it. But as stated it added the extra line break underneath for some reason, so I took the display block off, and just changed the color of the background for the link text. So atleast the background color of the words could change when hovered to give it more "life" (which it does, I like it :)). And from reading the ALA article, it turns out all I had to do was specify the width of the link. :(
It's things like this which really make me feel dumb.:confused:
But this also opens many new doors to what else could be possible. :rolleyes:
Thank you all...
JDM71488
07-07-2003, 01:36 AM
Will my site display right in different browsers? Just a thought, but I doubt it.
nkaisare
07-07-2003, 10:45 AM
It's things like this which really make me feel dumb.
If it helps you, most (probably all) of the experts have gone through this phase... something this simple may actually be needed to make the site work. This happened even in those days when people used tables and spacer gifs to get perfect layouts. The technology matured and it became second nature to web developers. So also when this technology matures, things will become second nature to us, and we will be able to accomplish a lot more with a lot less.
Take a look at how your site will display in lynx browser (and how google robots will "see" it)
http://www.delorie.com/web/lynxview.cgi?url=http%3A%2F%2Fwww.jdm71488.com%2F
You may want to download Opera Browser (www.opera.com), which gives you various user style sheets to emulate various scenarios. You can press [shift]-[F-11] in Opera to see how your site will display on a portable device (PDA, cell phone...).
I have checked it in Opera7.1, NS7, IE6... looks great in all of them. Didn't get to check on a Mac.
Final (hopefully) suggestion: In 9 principles page, you have <font class="author">. Since <font> tag is invalid in HTML 4.01 Strict, you may use <span class="author"> instead.
JDM71488
07-07-2003, 10:59 AM
I understand, I sometimes forgot to close a table row or cell and it distorted my whole site. So I will try to get a better understanding of CSS, and more importantly HTML...
As far as the google robots, and lynx view goes. How could I fix that?
The whole idea is to create a page that "transitions well". On a non-graphical or legacy graphical browser the menu should be along the bottom of the page. One of the problems with using TABLEs for layout is that with the standard "nav bar on the left" layout the links end up at the top on a non-graphical browser. If you are a sighted person imagine listening to the site and having to review the same list of links with each new page. And if an appeal to compassion doesn't move you, search engines rank your page according to what comes first.
This was once said to me, after I asked the question of why designers put their menu at the bottom of the page, because in my layout the navbar comes first... I still do not understand...
nkaisare
07-07-2003, 11:19 AM
As far as the google robots, and lynx view goes. How could I fix that?
It actually looks good in lynx. Your site is largely accessible. What exactly do you need to fix?
Regarding your quote: a page that "transitions well"
In my opinion, the page does transition well. Of course it has some way to go before conforming to WCAG standards, but thats not what we are discussing here (and I am not the right person anyway).
Look at the lynx view again. A screen reader will probably read the page from top to down as it appers on lynx. It would read:
[strong voice]www. JDM71488. com
[normal voice] Link - Skip to the contents
[strong voice] Main Menu
[normal voice] Link - Home
... and so on.
A disabled reader has a choice to skip navigation and go to contents using the link you provided at the top.
Alternatively, you can use position: absolute instead of float: left to obtain your layout.
You can read about CSS vs. Float layout at CSS-discuss Wiki: http://css-discuss.incutio.com/?page=AbsoluteOrFloatLayout
HTH
Niket
webdeveloper.com
Copyright WebMediaBrands Inc., All Rights Reserved.