[tobor]

Trying to do this:


here:
http://www2.allaboard.ca/

[stealthcow]

in css you can use "overflow: auto" on a div which automatically gives horizontal/vertical scrollbars if any of the content doesnt fit in the div (u need to give it a specific width and size)

you cant give a scrollbar custom graphics/colours, to do that you'll either have to use a mixture of CSS and javascript or do it in flash

[tobor]

Sorry, I wasn't be specific enough. I actually was wondering how to have elements broken up horizontally. Each news item would have it's own div, followed by a giant french-bracket. Any ideas how?

[stealthcow]

off the top of my head...

<div style="float: left">fdsafdfdsfdsfd</div><div style="float: left">image of the bracket</div>

etc etc, obviously it would be better to create a class with that in... spans would be better, as theyre for inline items, but if u want to contain things like <p></p> in the sections, divs would have to be used as your not allowed to use block elements within inline elements

[tobor]

Nice one,

#news_area div {
 float:left;
}

Worked like a charm. Cheers for that!

[pgo]

How about not creating more divs than necessary?

How about:

<div class="newsItem">
<h4>New Heading</h4>
<p>Other Content</p>
</div>

.newsItem {
background: url(path/to/bracket-image.gif) no-repeat top right transparent;
padding-right: 50px;
}

Voila!

[tobor]

Yeah, I probably will tone it down on the div's, but the problem of the divs wrapping (breaking) to the next line still exists.

[pgo]

Just so you know, that scrollbar is horribly ugly on Windows. Not too attractive on OSX either, but at least it's not offensive and distracting. Perhaps use a JavaScript bit of trickery to create "scrolling"?

 scrollbar-face-color:#88D14D;
 scrollbar-arrow-color:#DFEED3;
 scrollbar-track-color:#DFEED3;
 scrollbar-shadow-color:#5DA225;
 scrollbar-highlight-color:#88D14D;
 scrollbar-3dlight-color:#88D14D;
 scrollbar-darkshadow-Color:#88D14D;

That ain't valid CSS, by the way. It's a Microsoft proprietary set of rules.

[tobor]

The MS code doesn't interfere with anything, so I'll just leave that. The colors are fine. I'm more interested in getting the div content to span fully horizontal with-out breaking. Can anyone help?

[pgo]

Originally Posted by tobor

The MS code doesn't interfere with anything, so I'll just leave that.

The only reason I mentioned it is that if you're going to use standardized code, then you shouldn't use proprietary code. Unless you're trying to bring back the browser wars of the 90s that caused all the problems with web code today. It goes back to the days of "We're sorry, you must use Microsoft Internet Explorer to visit this website."

Might as well just go back to using nested tables, spacer gifs and font tags while you're at it.

It also interferes with your code being valid...

Originally Posted by Validation Errors

• Line: 153 Context : #news_area
  Property overflow-x doesn't exist : scroll
• Line: 154 Context : #news_area
  Property overflow-y doesn't exist : hidden
• Line: 162 Context : #news_area
  Property scrollbar-face-color doesn't exist : #88d14d
• Line: 163 Context : #news_area
  Property scrollbar-arrow-color doesn't exist : #dfeed3
• Line: 164 Context : #news_area
  Property scrollbar-track-color doesn't exist : #dfeed3
• Line: 165 Context : #news_area
  Property scrollbar-shadow-color doesn't exist : #5da225
• Line: 166 Context : #news_area
  Property scrollbar-highlight-color doesn't exist : #88d14d
• Line: 167 Context : #news_area
  Property scrollbar-3dlight-color doesn't exist : #88d14d
• Line: 168 Context : #news_area
  Property scrollbar-darkshadow-color doesn't exist : #88d14d

At least put those rules in an IE-only stylesheet if you must use them.

Also, the fact that you're floating elements within the overflowed div means that when the width of the floated element reaches the width of the scrolling container, they'll automatically jump down below. Not stay to the side.

If I were you, I'd find another way to do this or use some fancy JavaScript or use Flash.

Do you have any examples of this sort of thing being done on other sites?