I know just enough CSS to be able to coble stuff together and get myself into the type of mess I'm in right now...

I'm working on the help files for a small project and they're intended to be read by Mac OS' Help Viewer which uses the same rendering engine as Safari (which I suppose is Web Kit built into the the OS).

I've created a navigation trail (like a breadcrumb trail or path) along the top of all my pages. It's put together with DIVs, Anchors and SPANs with the required style bits to get it to look the way I want. It works reasonably well except for one side effect I don't like....

If I shrink the window, the trail/path will wrap. I'd like the whole thing not to wrap and instead be occluded by the right window edge.

If anyone thinks they'd be able to take a look at the CSS/XHTML and give me some help, it'd be much appreciated. Currently the whole thing only renders this well in Help Viewer and Safari. Camino/Firefox/Mozilla make a mess of it and I don't know why (since the files aren't intended to be read in those browsers, I haven't bothered trying to make it work universally). So I think you'd have to have a Mac to be able to see the issue that I first mentioned.

This is what it looks like before it wraps:



The wrapped image after squeezing the window so it touches the last block/item:

And the wrapped image attached here.

Damn... Solved the problem about 10 seconds after posting. Obviously I have no idea how much of a hack this is, but it seems to work.

I added "min-width: 1000px;" into the class I'm using on the div that encompases the whole top bar.

Now the bar will not wrap when I make the window smaller.

Bruno

I'm not a CSS expert, but until someone comes along who is, I believe you might be able to put a <div> around those images with a "white-space: nowrap" in the style.

That was the first thing I tried... Didn't work.

Bruno

Cybjorg's a CSS expert (although he usually works with Firefox). He's on vacation at the moment, but I'll point him at this thread upon his return and see if he has any different solution.

As with many programming problems, I suspect the right (not necessarily the best) answer is whatever actually works.

Weird. I've been looking and that's what people say you should do. Maybe <span> instead of <div>?

I just tested it with Safari. Works the way you want with either <span> or <div>. (I just put a <span style="white-space: nowrap"> around all the images and it changed from wrapping to scrolling.) Maybe something else in your CSS is taking precedence somehow? Maybe check HTML and CSS validity?

The whole navigation bar is made up of a bunch of div and spans. Essentially the main bar which goes accross the whole screen is the parent div. Each of the lighter grey pill shapes is an anchor surrounding a div which specifies the body of the pill, then a span for the left rounded cap, then the text, then a span for the right, etc... The last pill is essentially the same without the outside anchor. I had to do a little "cheating" by including a non-breaking space inside each span for the end caps.

That's a lot of nested properties, but I tried setting all kinds of combinations of no-wrap with no effect. My first thought was that I'd only need it on the top-level div as long as I didn't override it within a child. I suppose I can post the relevant HTML and CSS (I can't upload the files in their entirety to the board as the software hasn't been released yet.

Remember, what's below now works because of the MIN-WIDTH:1000px in the crumbTrail definition. Remove that entry to see the wrapping behavior (and regardless, a total mess in Firefox, etc...)

Code:

---

<div id="crumbTrail">

	<a href="../../mira Help.html" ><div id="crumbPrevious"><span id="crumbLeft">&nbsp;</span>mira Help<span id="crumbRight">&nbsp;</span></div></a>

	<a href="../discover.html" ><div id="crumbPrevious"><span id="crumbLeft">&nbsp;</span>Discover mira<span id="crumbRight">&nbsp;</span></div></a>

	<a href="../discover.html#OptionsTab" ><div id="crumbPrevious"><span id="crumbLeft">&nbsp;</span>Options<span id="crumbRight">&nbsp;</span></div></a>

	<div id="crumbCurrent"><span id="crumbLeft">&nbsp;</span>Unique Settings<span id="crumbRight">&nbsp;</span></div>

</div>

---

And the CSS...

Code:

---

#crumbTrail      { color: #444444; font-size: 12px; font-weight: bold; background: url(../images/crumbtrailbackground.png) repeat-x; position: fixed; top: 0; left: 0; width: 100%; height: 27px ; min-width: 1000px; cursor: default; }

#crumbTrail a  {  color: #f0f0f0; text-decoration: none;  text-shadow: #444444  0px -1px; }

#crumbTrail a:hover { color: white; text-decoration: none; text-shadow: #666666 0px -1px ; }

#crumbPrevious       { background-image: url(../images/crumbPrevious.png); background-repeat: repeat-x; background-attachment: scroll; background-position: 0 0; float: left; padding-top: 5px; padding-bottom: 27px; }

#crumbCurrent       { color: #f0f0f0; background-image: url(../images/crumbCurrent.png); background-repeat: repeat-x; background-attachment: scroll; background-position: 0 0; float: left; padding-top: 5px; padding-bottom: 27px; text-shadow: #444444  0px -1px; }

#crumbLeft      { background: url(../images/crumbLeft.png) no-repeat; position: relative; top: -5px; float: left; padding-left: 11px; padding-bottom: inherit; }

#crumbRight    { background: url(../images/crumbRight.png) no-repeat; position: relative; top: -5px; float: right; padding-right: 6px; padding-bottom: inherit; }

---

The referenced graphics are all attached to this post in a zip file.

I should probably change all those internal divs to spans... I notice they produce an error when checking syntax. OOops. Doesn't help to fix things for Gecko (FF, Camino, etc.) though as I just tried it on a sample page. Of course I also get errors for re-using the same ID multiple times.


EDIT: I got rid of the divs nested within the anchors. I just moved all its style into the anchor element. I also changed all re-used ids to classes. Gets rid of the errors and less junk to look at in the source making it cleaner. Now none of the files have any errors for XHTML transitional.

Bruno

Running a bit late on this one, but here is an alternative to your code:

Code:

---

  
<div id="crumbTrail">
  <ul>
    <li><a href="#" title="mira Help">mira Help</a></li>
    <li><a href="#" title="Discover mira">Discover mira</a></li>
    <li><a href="#" title="Options">Options</a></li>
    <li class="current"><a href="#" title="Unique Settings">Unique Settings</a></li>
  </ul>
</div>

---

While it adds an extra 2 lines, it trims up the code considerably, removing extraneous spans, divs, classes, and spaces. It also looks orderly when not styled.

The CSS:
Code:

---

body { margin: 0; padding: 0; } /* Necessary for IE to display the bar at the absolute top left of the page */
#crumbTrail { color: #444444; font-size: 12px; font-weight: bold; background: url(crumbtrailbackground.png) repeat-x; position: fixed; top: 0; left: 0; width: 100%; height: 27px; }
#crumbTrail ul { min-width: 1000px; margin: 0; padding: 0; list-style-type: none; }
#crumbTrail li { line-height: 26px; background-image: url(crumbLeft.jpg); background-repeat: no-repeat; background-position: 0 0; height: 26px; float: left; }
#crumbTrail a:link, #crumbTrail2 a:visited { color: #f0f0f0; font-family: Verdana, sans-serif; text-decoration: none; text-shadow: #444444  0px -1px; background-image: url(crumbRight.jpg); background-repeat: no-repeat; background-position: right 0; padding-right: 15px; padding-left: 15px; cursor: pointer; display: block; }
#crumbTrail a:hover { color: #fff; text-decoration: none; text-shadow: #666666 0px -1px ; }
#crumbTrail li.current { background-image: url(crumbLeftCurrent.jpg); }
#crumbTrail li.current a { background-image: url(crumbRightCurrent.jpg) !important; } /* the !important is crucial for IE to display correctly */

---

As you can see, I have reduced the amount of images from 6 to 4 (attached). I have also converted them to .jpgs rather than .png, since IE doesn't support .png transparency.

Concerning IE, I had to add a couple bits of extra code in order to make it obey (hacks are commented). IE also doesn't support min-width, but there's not an easy way around that in this situation.

A couple of suggestions: you may want to define font styles and sizes. Safari substitutes a nice looking font at a decent size, but Windows-based browsers default to Times Roman. Also, in order to be compliant, you should add titles to your a tags (as seen above).

Thanks for the reply. I've also noticed a lot of web pages using lists for horizontal layouts lately. The one thing I notice your example won't support is clicking on the left side of the pill shape - it sits outside the anchor tag.

How would you suggest changing the above to get the entire pill to be clickable?

Bruno

Whoops, worked in Firefox but not Safari and IE. Replace the following lines:

Code:

---

#crumbTrail li { line-height: 26px; background-image: url(crumbLeft.jpg); background-repeat: no-repeat; background-position: 0 0; height: 26px; float: left; display: inline; }
#crumbTrail a:link, #crumbTrail a:visited { color: #f0f0f0; font-family: Verdana, sans-serif; text-decoration: none; text-shadow: #444444  0px -1px; background-image: url(crumbRight.jpg); background-repeat: no-repeat; background-position: right 0; float: left; padding-right: 15px; padding-left: 15px; cursor: pointer; display: block; }

---