Skip navigation.
Home

Next Version of AU Templates in Web Standards XHTML/CSS

Hi,

I'm working on a version 2 of the AU web templates that are web standards XHTML/CSS complient for those AU webmasters that are interested. I started with the large header, but moved to working on the small header first, so it's the only one I've posted.

http://www.auburn.edu/includes/version2/ 

The largest issue that I ran into was getting the orange toolbar links to span the entire 565 pixel width.  I tried using an unordered list, but found no successful way to have a variable width for each item and fill the total width of the toolbar. I don't want to have a set pixel width for each toolbar item so that it's expandable for other webmasters to put whatever length text links (or images) in it.  Thus, I used a table for the toolbar.  The orange underglow on the hover event should extend as wide as possible.  FireFox handles making the entire block of each toolbar link clickable, but IE only works for the when the mouse is over the text.

The top links padding are also hacked for IE. 

Also, the favorite's icon AU is not approved yet, so don't use it.

Have a glance and tell me what you think. Looks like others are also working on web standards versions of the templates (https://ssl.acesag.auburn.edu/ammug/drupal/node/54).

-Daniel 


Looks good

The new page looks good in both Firefox 1.5 and IE 6. Being able to get rid of the table would be nice, but probably not critical since it only affects a small portion of the page. -- Richard


CSS Page

The webpage looks great. I haven't been able to figure out a way to make the widths variable either.

t


Updated Small Header

I have updated the Small Header template, fixing the header to be expandable for visitors with their text set larger.  This version doesn't try to make the orange line of the Auburn University wordmark match up with the orange line under the toolbar.  CSS might deserve a little bit more cleaning (still not an official version).  Tested in IE 6 (with hacks) and FireFox 1.5 (will look at it on my Mac at home). 

I'm working to create one general CSS file that all include and then one CSS file for each header type that overrides certain area to change the header. This seems to be the best structure.

The Auburn University wordmark also isn't clickable because it includes them as a background image (this is next).

Test it out and give me suggestions.  The Medium Header will be next. 

--------------------------

Daniel Dixon

Disclaimer: Though I may talk about my work for OIT, nothing I say should be taken as an official view of OIT. 


Added Medium and Large Headers

I've got large, medium, and small header templates that are XHTML and CSS validated (minus one hack for IE), expandable for people with the text set larger, have a clickable DIV for the AU emblem, and decompose well for printing.  They work in IE 6 and FireFox 1.5 (Mac and Windows).  Have not done total Safari testing (still don't know if IE 5/Mac will be supported).

AU Templates Version 2

NOTE: These templates are still my concepts and are still being tested.  They have not been approved by OIT and are posted only for community-testing purposes, or to supplement your own web standards compliant version of the AU templates. 

--------------------------

Daniel Dixon

Disclaimer: Though I may talk about my work for OIT, nothing I say should be taken as an official view of OIT. 


Daniel Your work is

Daniel  Your work is amazing! I love your templates!  Good luck wit hthe CSS it can be a real pain I know! 

 

~~Do not meddle in the affairs of dragons for you are crunchy and go well with ketchup!!~~


QuickLinks/Search Box drop dow

I'm playing with different implementations for the QuickLinks/Search Box drop down.  This one is Javascript heavy but has some pros:

http://www.auburn.edu/includes/version2/xhtml_large_quicklinks.html

This one uses an implementation of SuckerFish from A List Apart and is simplier and easier (still sucks in IE right now):

http://www.auburn.edu/includes/version2/xhtml_large_quicklinks2.html

Thoughts, comments, suggestions?

--------------------------

Daniel Dixon

Disclaimer: Though I may talk about my work for OIT, nothing I say should be taken as an official view of OIT.