Navagation ideas

Browni said:
http://www.adambrowndesigns.co.uk/dev/content/veiwer/

Im stuck, i don't know what to do for a navigation interface for my new portfolio site. I had thought about a Google X'ish Dock like thing but im not sure.

Ideas.

How do i specify multi-able style-sheets? Does Safari support the function to change them? (if i wanted to change the back image)

I think it would be ideal to keep the navigation at the top of the page (or down the side). Of course it is a personal portfolio site and the fixed height is fairly small; so keeping it at the bottom might work.

Just for the record. XHTML must be served as application/xhtml+xml, not text/html. Also, tables are not meant for layout (It looks like you attempted to use div elements but fell back to tables.).
 
oops! yea, i used tables to set it all out and the divs to serve the content/navigation via a php snippet, how do i change how the file is served? im using dreamwever
 
Nummi_G4 said:
Just for the record. XHTML must be served as application/xhtml+xml, not text/html.

It's not a must...more of a should be type of thing. Until IE plays ball, serving pages as xhtml+xml isn't the best of ideas.
 
mdnky said:
It's not a must...more of a should be type of thing. Until IE plays ball, serving pages as xhtml+xml isn't the best of ideas.

My bad. I meant to say XHTML 1.1 served as application/xhtml+xml. The red background color on the w3c site says it all. Content-types

I don't think there are any good reasons for him to use XHTML in the first place. HTML 4.0 strict is good enough for most. So many sites use xhtml with no benefits at all. *cough* macosx.com *cough*. Hell, even my own personal site does not need to be XHTML. The main reason I use it and serve as application/xhtml+xml is so I can get XML parse errors (to fix the errors).

what u think?

That's quite an attractive navigation. Are you going to support people that have image loading turned off, use text only browsers, or screen readers?
 
I would use images completely declared in CSS so that text-only and screen readers can simply disable/ignore styles... and other clients who are style-switching aware can ignore them at will. I'm a huge fan of using divs and spans with classes and IDs and doing the majority of the formatting heavy lifting in CSS.
 
chobine - what do you mean? just leaning CSS at the moment so im not sure what you mean.

btw thanks all v much for your help! :)
 
Browni, one way is to use image replacement for a specific tag. I do it on some sites for, say, the header image.

Example: Adam Brown Designs site

You decide to create a nifty PNG (or jpg, gif, etc.) that's 200px wide and 90px tall for your site name/title. A way to display it for people using newer browsers, while still being accessible (display large text instead) for text-readers and text-based browsers, would be with a tag. Say as the background for a h1 tag in your header div. ((see link at bottom of post for this in action))


HTML
Code:
<div id="header">
     <h1>Adam Brown Designs</h1>
</div>

CSS
Code:
#header h1 {
     width: 200px;
     height: 90px;
     font-size: 1px;
     color: transparent;
     background: transparent url("images/logo.png") no-repeat top left;
     }

As far as multiple stylesheets, using a PHP script would allow the most usability across platforms. JS scripts are out there, but some people do turn off JS support in their browsers. IE and Safari don't have a style switcher built-in like Firefox does.

The following site (very rough, was a test mockup for a friend) has an example of a PHP style switcher on it. You can use a form or a standard link to initiate the switch...I choose a form on this on. I didn't write it, but I can't seem to find where I got it from either. I'll have to look around through my list of links (HUGE of course). Oh, this site also uses a H1 replacement for the title as described above.

http://test.designs4efx.com/gunlawnews/
 
#header h1 {
...
font-size: 1px;
...
}


There is one issue with that. If the image does not load / the user has image downloading turned off, they will not see the text.

Another solution would be:

HTML:
Code:
<h1 class="title">Adam Brown Designs<span></span></h1>

CSS:
Code:
h1.title {
  position:relative;
  width:200px; height:90px;
  font-size:12px;
}
h1.title span {
  position:absolute;
  top:0; left:0;
  width:100%; height:100%;
  background:url(images/logo.png) no-repeat;
}

There are a couple downsides to my solution.
  1. Extra markup in the HTML. span elements have no semantic value.
  2. IE 5/Mac has major issues with positioning.

With a normal browser setup, the image will display on top of the text. If the image does not load, the title can still be seen.

Style sheet switching: There are two solutions on the A List Apart webpage. But, as mentioned above, some people turn off JS. I also resorted to using PHP (The link goes to a PHP script, a cookie is set on the users machine, and the PHP script re-directs before the user knows what happened) There was a working version of a PHP style switcher on my personal site (for some odd reason it is not functioning now).
 
Back
Top