Another Website! [Archive] - Webmaster Forums

Geforc3

11-17-2002, 02:55 PM

Here an other website of me that i made for school it's in dutch!

"Click here" (http://www.xs4all.nl/~thde/school)

What do you think?!?!?!

DCElliott

11-17-2002, 04:19 PM

Very nice crisp site. Semi-intelligent use of frames ;)

My gripes are again around what happens at different resolutions. If you follow Elliott's rules, you make your Banner and Nav in fixed font and content in variable font. The attached screenshot shows why. All the nav and titling stuff is optimized for a certain size since it is against a fixed size graphic background (a very nice background it is, too!) When the font size changes, it changes the relationships of those items. The way around it is to use a fixed font style.

.fixed {font:normal bold 12pt/12pt verdana, helvetica, arial, sans-serif; color:}
. . .
<a class="fixed" href="main2_blok.html" target="main2">Blokschema</a>
. . .
<a class="fixed" href="main2.html" target="main2">Project groep index</a>

When you are putting styles in the <head> </head> section they should be like this:<head>
<style type="text/css" media="screen">

</style>
</head> Note the comment tag that hides the style from older browsers and the type and media attributes. What you have would not validate.

You are using a far more complicated scheme for your nav than is needed. You are using a little bit of style for your absolute positioning - that is good. The thing is - you don't need to use a table cell at all. Just use the absolute positioning for the <a> tag and in the style declare it a block level element. <a> are usually inline but you can overrule that with a style. (Oh, but do I love CSS) All of this:<DIV ID="idElement1" style="position:absolute; top:20px; left:15px;">
<table>
<tr>
<td>
<font face="verdana" size="1">
<a href="main2_blok.html" target="main2"><b>Blokschema</b></a></font>
</td>
</tr>
</table>
</div>
can be reduced to:<a style=
"display:block; position:absolute; top:20px; left:15px;
font:normal bold 12pt/12pt verdana, helvetica, arial, sans-serif;"
href="main2_blok.html" target="main2">Blokschema</a> Don't make your life so hard! If you handle the font size , decoration etc. as a class, you only need to do the positioning with the style. (you can have a class="***" and style="***" in the same tag.

Keep working on it. Styles will make your code so much cleaner if you keep working on it.

Zero Angel

11-17-2002, 04:35 PM

Very nice.

Though, you shouldn't be using the same ID for each div! Use [class]es instead.

You can also use CSS 'contextual selectors' to apply a style to a specific group of links.

<style type="text/css">

</style>

<div id="linkarray">
<a href="#">Link 1</a><br>
<a href="#">Link 2</a><br>
<a href="#">Link 3</a>
</div>
Using an absolute font-size will prevent the font from being resized if the user uses IE.

DCElliott

11-17-2002, 04:44 PM

Further to the above. Here is the code for a nav using only CSS:

<DIV id="right">
<SPAN class="heading">Navigator</SPAN>
<HR>
<A class="link" href="ACU.html" title="Acute Care Resources">Acute Care</A>
<A class="link" href="ADD.html" title="Addictions Resources">Addictions</A>
<A class="link" href="CHY.html" title="Children and Youth Resources">Children/Youth</A>
<A class="link" href="CCA.html" title="Continuing Care Resources">Continuing Care</A>
<A class="link" href="EBM.html" title="Evidence Based Medicine Resources">Evidence</A>
<A class="link" href="HCF.html" title="Finance Resources">Finance</A>
<A class="link" href="HHR.html" title="Health Human Resources">Health HR</A>
<A class="link" href="HSR.html" title="Health Services Research and Policy Resources">Hlth. Serv.</A>
<A class="link" href="HTA.html" title="Health Technology Assessment and Treatment Guidelines Resources">HTA/Guidelines</A>
<A class="link" href="IMT.html" title="Information Management / Information Technology Resources">IM/IT</A>
<A class="link" href="LEX.html" title="Legislation Resources">Legislation</A>
<A class="link" href="MGM.html" title="Management and Leadership Resources">Management</A>
<A class="link" href="MED.html" title="Medicare-related Resources">Medicare</A>
<A class="link" href="MHC.html" title="Mental Health Resources">Mental Health</A>
<A class="link" href="OHS.html" title="Occupational Health and Safety Resources">Occ. Health</A>
<A class="link" href="RXS.html" title="Pharmaceutical Policy Resources">Pharmaceuticals</A>
<A class="link" href="POP.html" title="Policy and Planning Resources">Policy/Planning</A>
<A class="link" href="PCA.html" title="Primary Care Resources">Primary Care</A>
<A class="link" href="PHT.html" title="Public Health">Public Health</A>


<SCRIPT type="text/javascript">
document.write(holdW('right'))
</SCRIPT>
<A class="button" href="http://www.gov.ns.ca/health/erc" title="Connect to the Online Library Catalogue">Catalogue</A>
<A class="button" href="EJD.html" title="Connect to the Electronic Journals and Databases Resources">Journals</A>
<A class="button" href="PW.html" title="Back to Policy Watch Home">HOME</A>
</DIV>
and the relvant CSS:#right { position: absolute; top:130px; left: 80%; width: 19%; margin: 1% 0 2%; }

A.button
{ display:inline; width:auto; height: auto;
text-align: center;
text-decoration: none;
color: #3163CE;
background: #ffcc33;
font : bold 10pt courier;
vertical-align : middle;
padding : 2px;
margin: 3px 0.5% 3px 0;
border-top: 2px solid #ffff99;
border-left: 2px solid #ffff99;
border-right: 2px solid #cc9933;
border-bottom: 2px solid #cc9933;
}
A.button:hover, A.button:active
{ border-top: 2px solid #cc9933;
border-left: 2px solid #cc9933;
border-right: 2px solid #ffff99;
border-bottom: 2px solid #ffff99;
}

#right A.link {display:block; width:80%; margin-top :0px;}
#right A.button {display:block; width:60%; margin-top :5px }
#right A.link {border-bottom:thin dashed Lightgreen;}
The right div is defined using absolute positioning and is an id since it is unique. The links are all defined as blocks so that you can manipulate them as blocks with centering and spacing. Note also that a hovered link lights up the block, not just the text. The buttons that look like images are also just styled blocks. When you hover over one it "pushes" in by swapping to the hover style. Most importantly, though, there is absolutely no presentation information - no fonts, no positioning, NIKS! in the html and not a single table tag anywhere.

Zero Angel

11-17-2002, 06:19 PM

Only problem is that setting the block display is buggy with Netscape 6/4, and Internet Explorer 4. Same problem that I ran into when trying the block display attribute. Though I still do it, based on the fact that about +90% of my audience uses IE 5+, and also that NN users should be used to display errors by now.

DCElliott

11-18-2002, 07:37 AM

Originally posted by Zero Angel
Very nice.

Though, you shouldn't be using the same ID for each div! Use [class]es instead.I noticed the repeated, non-unique, use of ids as well. Since there was no style associated with the id, it didn't really make a difference. You could, in fact, have a unique id associated with each of the menu items and then put the positioning information in there:#menu1 {display:block; position:absolute; top:***px;left:15px;}
#menu2 {display:block; position:absolute; top:***px;left:15px;}
#menu3 {display:block; position:absolute; top:***px;left:15px;}
. . .
or
#menu1, #menu2, #menu3 {display:block; position:absolute; left:15px;}
#menu1 {top:***px;}
#menu2 {top:***px;}
#menu3 {top:***px;}
. . .See how in the second example you can create a style that applies across all the unique ids and then use individual ids only to do the top positioning.

Geforc3

11-18-2002, 08:29 AM

Thnx Guys!! :D

I learned some thing for my next websites :D

DCElliott

11-18-2002, 09:33 AM

Originally posted by Zero Angel
Only problem is that setting the block display is buggy with Netscape 6/4, and Internet Explorer 4. Same problem that I ran into when trying the block display attribute. Though I still do it, based on the fact that about +90% of my audience uses IE 5+, and also that NN users should be used to display errors by now. One of the reasons the block display is buggy is that with NN you have to specify a width or height measure for a div, even if it is only width:auto; height:auto. If you don't it will act like display:inline instead.

I always try to make sure styles degrade gracefully on older browsers and make sure I check both IE and NN displays at different resolutions and font sizes. It is a discipline all developers should cultivate.

DCElliott

11-18-2002, 09:36 AM

Originally posted by Geforc3
Thnx Guys!! :D

I learned some thing for my next websites :D Next, what is this NEXT?! Young man, you go right back and fix up the last one you did before doing a new one! These impetuous youth . . .

Geforc3

11-18-2002, 11:01 AM

Haha :D

The fisrt site was only a template that i gave to a friend!! That had a really Ugly website so i will point the litle faults in that site and he can fix them!!!

And the second one was for school and that one i do not need any more!! :p

I'm busy with my personal site and there for I use your comments, to make that one very very very NICE :D

Zero Angel

11-18-2002, 11:27 AM

Arigato, DCElliot-sensei.

I didn't know that you had to specify the width attributes. This should help out a lot with making my sites backward compatible.

~Zero Angel

DCElliott

11-18-2002, 12:19 PM

Originally posted by Geforc3
I'm busy with my personal site and there for I use your comments, to make that one very very very NICE :D Keep it up - pretty soon we'll upgrade you to Geforc4

Zero Angel

11-18-2002, 12:24 PM

Not MX I hope!

Geforc3

11-18-2002, 12:46 PM

HAHA you Guys are Fun :P

( then make it Geforc4 Ti4600 :D )