Topic: Scroll Bar Color for scrollable DIV Pages that link to <a href="https://ozoneasylum.com/backlink?for=28197" title="Pages that link to Topic: Scroll Bar Color for scrollable DIV" rel="nofollow" >Topic: Scroll Bar Color for scrollable DIV\

 
Author Thread
Karl
Bipolar (III) Inmate

From: Phoenix
Insane since: Jul 2001

IP logged posted posted 07-11-2006 06:56 Edit Quote

How do I color the scroll bar for a scrollable div element?
Have a look at this page:
http://meetscoresonline.com/ah/?page=MeetInformation

Also, interested in anchoring the background image, do I layer that, or is there a backround css property that fixes it's position?

Thanks!

JKMabry
Maniac (V) Inmate

From: raht cheah
Insane since: Aug 2000

IP logged posted posted 07-11-2006 07:17 Edit Quote

colored scrollbars only work in IE, and then probably dependant on the doctype declaration (I'd hope anyway ). same way as with the body element where it (used to be) most commonly used... see the gurusnetwork colored scrollbar generator widget thingie, which is no longer findable apparently, so hows about this then :http://www.maketemplate.com/scrollbar/

Q2: background-attachment : fixed;

Karl
Bipolar (III) Inmate

From: Phoenix
Insane since: Jul 2001

IP logged posted posted 07-11-2006 07:23 Edit Quote

Thanks for the tips! (and link)

Karl..

reisio
Paranoid (IV) Inmate

From: Florida
Insane since: Mar 2005

IP logged posted posted 07-11-2006 07:54 Edit Quote
code:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" >


That's going to cause you trouble.

Grab an official one from w3.org/QA/2002/04/valid-dtd-list.html.

Karl
Bipolar (III) Inmate

From: Phoenix
Insane since: Jul 2001

IP logged posted posted 07-11-2006 08:54 Edit Quote

Really? Thanks, I'll check it out.
Say, I am having more troubles with the following selector(s)...

A DIV, a DIV within this DIV. Outer DIV ID = HEADER. Inner DIV class = bg_image1. The bg_image1 class is not effective. Here is this HTML followed by the CSS:

<div id="HEADER">
<div class="bg_image1"></div>
</div>

Reason for the DIV within DIV, is HEADER is defined with a background and so is DIV with class of bg_image1 (i'm creating layers). The following selector does not work for class bg_image1 (no background appears)

#HEADER div.bgimage1 { ...my bg def... }

Any ideas?

Karl
Bipolar (III) Inmate

From: Phoenix
Insane since: Jul 2001

IP logged posted posted 07-11-2006 09:10 Edit Quote

Ok... using thic doctype:

HTML 4.01 Strict, Transitional, Frameset
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">


Found here:
http://www.alistapart.com/stories/doctype/

(although still weird output in dev).

Karl..

reisio
Paranoid (IV) Inmate

From: Florida
Insane since: Mar 2005

IP logged posted posted 07-11-2006 09:23 Edit Quote
quote:
Karl said:

code:
class="bg_image1"


quote:
Karl said:

code:
div.bgimage1


reisio
Paranoid (IV) Inmate

From: Florida
Insane since: Mar 2005

IP logged posted posted 07-11-2006 09:25 Edit Quote
quote:
Karl said:

Found here:
http://www.alistapart.com/stories/doctype/


...something wrong with the link I gave?

Karl
Bipolar (III) Inmate

From: Phoenix
Insane since: Jul 2001

IP logged posted posted 07-12-2006 03:50 Edit Quote

No, your link was great! I needed more information, and I'm still not sure which is the correct one to use, but I wandered over there for more information. I think I linked there from the W3C site...

I don't understand your previous message, quoting my code... Is that a solution of some sort?

Karl..

Karl
Bipolar (III) Inmate

From: Phoenix
Insane since: Jul 2001

IP logged posted posted 07-12-2006 04:15 Edit Quote

Hmm... so this works:

code:
div .bg_Image1


but this:

code:
#HEADER .bg_Image1



does not work.

Where I have the following HTML:

code:
<div id="HEADER">
      <div class="bg_Image1"></div>
    </div>



Karl..
<edit name="correction">underline between "bg" and "Image" lost in Code blocks above. this is a code block issue</edit>

(Edited by Karl on 07-12-2006 04:16)

reisio
Paranoid (IV) Inmate

From: Florida
Insane since: Mar 2005

IP logged posted posted 07-12-2006 04:47 Edit Quote
quote:
Karl said:

I don't understand your previous message, quoting my code... Is that a solution of some sort?


I was hoping you would notice that they don't match (second hasn't an underscore).

quote:
Karl said:

Hmm... so this works:

code:
div .bg_Image1


but this:

code:
#HEADER .bg_Image1


does not work.

Where I have the following HTML:

code:
<div id="HEADER">
      <div class="bg_Image1"></div>
    </div>



That looks fine - you probably have something else interfering.

How about a link?

(Edited by reisio on 07-12-2006 04:48)

Karl
Bipolar (III) Inmate

From: Phoenix
Insane since: Jul 2001

IP logged posted posted 07-12-2006 06:02 Edit Quote

..Inner Div was sqwashed, it needed height definition! (problem solved).

New Problem:

How do you select a div element who's ID is "MIDDLE" with a class of "bg_Image1"?

Reason? CSS has 2 definitions for #MIDDLE, first definition when #MIDDLE has class of "bg_Image1" and second definition when #MIDDLE has class of "bg_Image2".
I am dynamically setting the class for this element, the consistent part is that the element's ID is #MIDDLE.

Is this possible?

reisio
Paranoid (IV) Inmate

From: Florida
Insane since: Mar 2005

IP logged posted posted 07-12-2006 06:43 Edit Quote
code:
#MIDDLE.bg_Image1

reisio
Paranoid (IV) Inmate

From: Florida
Insane since: Mar 2005

IP logged posted posted 07-12-2006 06:43 Edit Quote

instead of having this dupe post go to waste:




(Edited by reisio on 07-12-2006 06:46)

poi
Paranoid (IV) Inmate

From: Norway
Insane since: Jun 2002

IP logged posted posted 07-12-2006 09:19 Edit Quote

Why don't you simply put the header and footer parts in position:fixed; and add the margin-top and margin-bottom of the content area accordingly ? then add a few lines of JavaScript for the browsers that fail to support that 8yo standard.

FWIW Opera apply IE's proprietary scrollbar styling.

I just tried your page in O9, the footer is at the bottom of the page, not at the bottom of the window. In FF 1.5.0.4 there's a small gap after the footer, which makes the page have 2 vertical scrollbars : 1 for the whole page and 1 for the content area .... teh horror.

Your XHTML markup could be much simpler.

DL-44
Lunatic (VI) Inmate

From: under the bed
Insane since: Feb 2000

IP logged posted posted 07-12-2006 18:00 Edit Quote
quote:

Karl said:
How do you select a div element who's ID is "MIDDLE" with a class of "bg_Image1"?

Reason? CSS has 2 definitions for #MIDDLE, first definition when #MIDDLE has class of "bg_Image1" and second definition when #MIDDLE has class of "bg_Image2".
I am dynamically setting the class for this element, the consistent part is that the element's ID is #MIDDLE.



Let's clarify: There are *not* 2 definitions for #middle; there is one definition for #middle, and also a definition for .bg_Image1 and one for .bg_Image2.

#middle in the CSS defines the attributes for anything with id="middle" in the HTML.

.bg_Image1 in the CSS defines the attributes for anything with class="bg_Image1" in the HTML. And so on.

So define the basic attributes for #middle in the CSS - the things that won't need to change depending on the class.

Then define the things specific to the classes using the .bg_Image1 and .bg_Image2, making sure they are listed after the definition of #middle in your CSS.

You don't actually determine in the CSS that the element will have both an ID and class, or that it will have multiple classes. You define each separately, and if both are declared in the HTML, then both sets of attributes will be applied (with those listed last in the CSS superceding any conflicting setting which precede them).

For the record: those are terrbile id and classnames. They offer no meaningful hint as to their purpose, and the combination of underscores and capital letters is just begging for typo's

Karl
Bipolar (III) Inmate

From: Phoenix
Insane since: Jul 2001

IP logged posted posted 07-13-2006 06:04 Edit Quote

OK... the latest and greatest is online, including: simplified XHTML!

2 things I am extremely interested in:

1) simplifying the XHTML
2) naming conventions!!!! (my biggest weakness).

Is it "semantically" incorrect to name div areas "HEADER" "MIDDLE" "FOOTER"?

Hack, but no workaround? The following div arrangement is a hack:

code:
<div id="HACK"><div class="A">my content</div></div>



Why? So I can do this is my CSS:

#HACK div.A { ...style ... }

Why the class "A"? so that the above definition does not mess up a 2nd DIV element within #HACK or the "A" class div itself.

What I couldn't figure out! How to have multiple definitions for a single ID'd element. So I never got the following CSS to work:

code:
#HACK.bgImage1
#HACK.bgImage2

(edited this)

The above selector just never worked. Should it? Did I do something wrong? Which means I was never able to wire up the following:

code:
<div id="HACK" class="bgImage2"/>



...again, help with the semantic naming conventions! and help with the simplified XHTML!

Thanks,

Forever Greatful, Karl in Phoenix.

(Edited by Karl on 07-13-2006 06:05)

poi
Paranoid (IV) Inmate

From: Norway
Insane since: Jun 2002

IP logged posted posted 07-13-2006 10:02 Edit Quote

I'll give a go at re-creating the page tonight.

As for the semantic names, that's simple : If an ID/className does not make sense or say where the content is instead of what it is, it is wrong, wrong, wrong.

I've seen an ID used several times in your markup. ID are unique.
You should download the specifications of HTML or XHTML, and CSS. They all are available in HTML, and PDF. Having them within hand range proved to be usefull.

DL-44
Lunatic (VI) Inmate

From: under the bed
Insane since: Feb 2000

IP logged posted posted 07-13-2006 13:56 Edit Quote
quote:

Karl said:

#HACK div.A { ...style ... }

Why the class "A"? so that the above definition does not mess up a 2nd DIV element within #HACK or the "A" class div itself.

What I couldn't figure out! How to have multiple definitions for a
single ID'd element. So I never got the following CSS to work:

code:#HACK.bgImage1
#HACK.bgImage2 (edited this)

The above selector just never worked. Should it? Did I do something
wrong? Which means I was never able to wire up the following:

code:&lt;div id="HACK" class="bgImage2"/&gt;



This is what I explained in my previous ost, Karl. You don't define in the CSS the fact that the element will have both the id and the class.

First you define the id. Then you define the class.

More later...

DL-44
Lunatic (VI) Inmate

From: under the bed
Insane since: Feb 2000

IP logged posted posted 07-13-2006 15:52 Edit Quote

To expand slightly: the less mark-up you have, the better off you are. Adding an extra div for the sake of specifying addtional styles is pretty inefficient.
To make sure I'm being clear: in your markup, you would have soemthing like:

code:
<div id="myId" class="myClass">content...</div>



in your CSS, you would have:

code:
#myId {
styles...
}

.myClass {
styles...
}



Ok, as far as class and id names -

#head/#header, #foot/#footer, are IMO perfectly suitable. Though they do imply position, they are also standard terminology which communicates prupose. In this particular case, something more like #logo and #navigation might be more suitable though.

#middle is no good. It tells you nothing of purpose or structure, only position. This is bad because the goal of having HTML and CSS is to separate your style and your content. "middle" in this context is meaningless. A name of #content would be far more suitable.

.bg_Image1 is totally useless. It tells us nothing at all. What is the purpose of the two separate background images? Take that purpose and incorporate it into the class name.

Following these kind of guidelines will help ensure that 1) your markup makes sense and 2) in the future, your markup will remain valid even if the styling needs to change drastically.

kuckus
Paranoid (IV) Mad Librarian

From: Glieberlermany
Insane since: Dec 2001

IP logged posted posted 07-14-2006 00:45 Edit Quote

Sorry for getting back to scrollbars when everyone's long done with them, but I thought I'd give the missing link to this fwiw:

quote:

JKMabry said:

colored scrollbars only work in IE, and then probably dependant on the doctype declaration (I'd hope anyway ). same way as with the body element where it (used to be) most commonly used... see the gurusnetwork colored scrollbar generator widget thingie, which is no longer findable apparently



--> http://gurusnetwork.com/utilities/colored_scrollbars/

Karl
Bipolar (III) Inmate

From: Phoenix
Insane since: Jul 2001

IP logged posted posted 07-14-2006 06:24 Edit Quote

Thank POI! Looking forward to your example...

DL-44: I was hoping to reuse the class .bg_Image1 and .bg_Image2 names (not the actual image). And based on the ID'd element they were grouped with, the class would be different - in this case, I'd have a different background image for the class. So (example):

code:
<div id="HEADER" class="bg_Image1">
</div>
<div id="CONTENT" class="bg_Image1">
</div>
<div id="FOOTER" class="bg_Image1">
</div>



The CSS markup for each would define a different background. And then (the magic) based on the state of the web application, the next time the user views the page each of the above element are defined with "bg_Image2"... (this is what is currently happening on the site listed).

However, what I am hearing is that my class names should be named better, so how about for bg_Image1 we call it "Bright_Background", and then for bg_Image2 we call it "Dull_Background" for this is exactly the purpose of these two, a bright "vivid" display and then a very dull display....
EXAMPLES: (page is a bit whacked)
bright bg
dull bg

Semantic Naming Conventions: I kinda get it... there needs to some sort of a semantic name validator! I'm big on reuse, so the names I chose above stem from the intent to "reuse" the background name. I will continue to work on these naming conventions, there are some great tips here!
DLL, taking your advice and nameing the MIDDLE region to MAIN_CONTENT. How's that sound? I'll rename the backround images to bright_background and faded_backround.

Kuckus... I think I gave up on coloring the scrollbar... next I'll be looking for the javascript to wire this up!
Karl..

divinechaos
Nervous Wreck (II) Inmate

From:
Insane since: Dec 2001

IP logged posted posted 07-14-2006 07:43 Edit Quote

Not for me, but found this ages ago and thought it was rather cool:
http://www.hesido.com/web.php?page=customscrollbar

Cheers,
DC

kuckus
Paranoid (IV) Mad Librarian

From: Glieberlermany
Insane since: Dec 2001

IP logged posted posted 07-14-2006 09:58 Edit Quote

Karl, have you tried setting all the scrollbar styles for the <html> tag instead of the <body>?

Certain doctypes seem to prevent it from working with <body>, but not with <html> -- I know I had to do this on a "XHTML transitional"-doctyped site of mine.

Karl
Bipolar (III) Inmate

From: Phoenix
Insane since: Jul 2001

IP logged posted posted 07-14-2006 21:50 Edit Quote

Kuckus, I did have success with previous scrollbar coloring, but chose to not persue this, since it is IE only. Instead, I'm not worrying about the color, but eventually will dig up the code (javascript) necessary to write my own.

Thanks!
Karl..

Karl
Bipolar (III) Inmate

From: Phoenix
Insane since: Jul 2001

IP logged posted posted 07-15-2006 09:38 Edit Quote

Update:

I gave up on the attempt to "reuse" class names... and I'm happier for it! (but was fond of the idea)... have a look at the page(s) now and let me know what you think!

Karl..
AH!

(Edited by Karl on 07-15-2006 09:39)

poi
Paranoid (IV) Inmate

From: Norway
Insane since: Jun 2002

IP logged posted posted 07-16-2006 14:39 Edit Quote

Sorry it took longer than expected to get started but here is my take at the AH! website.

Notice, that all the transparent images are in 32bits PNG thus they'll look like poop in the user agents that don't support the 10 years old PNG open standard.

Hope it'll be helpfull.

Karl
Bipolar (III) Inmate

From: Phoenix
Insane since: Jul 2001

IP logged posted posted 07-17-2006 06:32 Edit Quote

Wow, thanks POI! Much to look at here. I like your navigation.naming.convention[.png] "duhh!"
The use of [alt='AH!'] is that CSS2 standards?

(I'll have more questions)

poi
Paranoid (IV) Inmate

From: Norway
Insane since: Jun 2002

IP logged posted posted 07-17-2006 09:44 Edit Quote

yep, pattern matching is absolutely valid CSS2.0+

Using a pattern matching selector eliminates the need for a class. Add to that that the alt attribute is mandatory and used in case images are disabled in the user agent, so why not using it ?

I haven't added any quircks for non standards browsers, except the attribute:value !important; attributetherValue; trick to fix the IE6- broken box model.

Also, I've not used any Image Replacement technique. I didn't see any real need for it in this very case. But normally it should have been used on the AH! images and the navigation, to make sure the markup is proof to any alteration of the design/visual identity. I haven't found yet a technique that doesn't require extra markup to remain accessible with CSS on and Images off. There must be one.


If you haven't yet, I encourage you to download the specs of CSS2 and XHTML. They are really really really useful. They, as well as the specs of ECMAScript and JavaScript are ALWAYS on my desktop. ... heck and if I still miss something I can ask the developers/QA people who have worked on their implementation in Opera



Post Reply
 
Your User Name:
Your Password:
Login Options:
 
Your Text:
Loading...
Options:


« BackwardsOnwards »

Show Forum Drop Down Menu