E-mail List Archives

Search E-mail List Archives for

Number of posts in this thread: 3 (In chronological order)

From: smithj7
Date: Thu, Apr 20 2006 5:10PM
Subject: Drop down list, css, and xhtml
No previous message | Next message →

don't laugh... but I was happy to discover that I can even set up a css
style for drop down boxes which I use more or less to assist users to
get quickly from one item to another on a page. For example, I have a
page on "observances" I use an option box to let people jump to a
specific month. Here are some questions I have:

* Is it better set up my style sheet to use a division called
options in the html or just use a special paragraph class?
* Also is there a special way to set up a style for a submit
button? The parent organization uses a graphic which was sent to me to
use and I just changed the style on the button itself to make it look
like the required graphic because graphics as submit buttons have caused
problems for our users in the past.
* If you can add a button style to the css style sheet, how do I
put the button class in the html? This button style would be used
everywhere on the site so it could be a class of its own, but to me
there isn't anything to tag a class to a button. I don't see how it is
the same as <h1 class = something>

This is a sample of the html side. (note the css for the paragraph is
basic - bold and centered and required DOE font family)

<p class="option"><label for="menu">Select a Month</label><select
name="getLink" id="menu">

<option
value="http://dbs.myflorida.com/observe.shtml#January">January</option>

<!--will add more here -->
</select>

<input type="submit" style="font-size: 10px; font-weight: bold;
font-family: ariel; background: ffedca" value="Go"></p>

While this is a specific question, I'm not quite sure if I fully grasp
when it is better in the css style sheet to use the class that sets a
division verses the class that sets an individual item. (the pound
symbol verses the dot symbol and/or genric H1, H2...).

However, I have made all kind of little style sheets to see what would
happen and I can get the visual result. But I want to have a "clean
code" for the css style sheet. Having looked at several style sheets, I
am seeing what seems to be redunancy. My understanding from programming
CLASSES (c++ and java) is that inheritancy is the rule in a style sheet.
So I think you could set up a p class with many values, then within a
division class only change something that would differ from this p
class. The other items would default to the p class description.

Note I understand inheriancy as it relates to the iimported style sheet,
the page style sheet, the style added to an item on a page - just
confused how the division style in a css style sheet effects the whole.
I'm hoping that I never again have a imported style sheet, a page style
sheet, and a special style sheet. Currently, that is what I use on my
site. I didn't use the the html <div> text <div> at all. He..he.. I'm
also changing my site to comply with xhtml and have been reading about
it as well as xml. I'm going through the slow process of conversion
now.

While I gravely underextimated the time it would take for me to convert
the site to a tableless format using css and xhtml, my little practice
pages unless I'm going crazy seem to make the page display more quickly
and if I get the css style sheet right the first time, I will spend less
time making individual pages. (e.g. the library for the blind sends me a
newsletter that has books. I never thought about setting up a "cite
class". Four times a year I made the text "look" like a book cite. Live
and learn and you guys are teaching me! I promise, as I learn more, I
will share this knowledge with other web people in Florida!

From: Tim Beadle
Date: Fri, Apr 21 2006 2:30AM
Subject: Re: Drop down list, css, and xhtml
← Previous message | Next message →

On 21/04/06, smithj7 < = EMAIL ADDRESS REMOVED = > wrote:
> don't laugh... but I was happy to discover that I can even set up a css
> style for drop down boxes which I use more or less to assist users to get
> quickly from one item to another on a page. For example, I have a page on
> "observances" I use an option box to let people jump to a specific month.
> Here are some questions I have:

Bear in mind that these questions might be better answered at a
CSS-specific resource like CSS-Discuss - http://www.css-discuss.org/

I will try to answer your questions, however.

> Is it better set up my style sheet to use a division called options in the
> html or just use a special paragraph class?

Technically, the <p> element is for paragraphs of text, so you're
better off using the generic <div> or the specific-for-forms
<fieldset>.

> Also is there a special way to set up a style for a submit button? The
> parent organization uses a graphic which was sent to me to use and I just
> changed the style on the button itself to make it look like the required
> graphic because graphics as submit buttons have caused problems for our
> users in the past.

You can use the <button> element instead of <input type="submit">,
which allows you to target it in your stylesheet in a more reliable
way. (Note that you could use input[type="submit"] { /* styles */ }
but IE wouldn't recognize this syntax).

> If you can add a button style to the css style sheet, how do I put the
> button class in the html? This button style would be used everywhere on the
> site so it could be a class of its own, but to me there isn't anything to
> tag a class to a button. I don't see how it is the same as <h1 class > something>

It's fine to use <input type="submit" class="button" /> but I would
suggest looking into the <button> approach. See here:
http://www.w3.org/TR/html4/interact/forms.html#h-17.5

> This is a sample of the html side. (note the css for the paragraph is basic
> - bold and centered and required DOE font family)
>
> <p class="option"><label for="menu">Select a Month</label><select
> name="getLink" id="menu">
>
> <option
> value="http://dbs.myflorida.com/observe.shtml#January">January</option>
>
> <!--will add more here -->
> </select>
>
> <input type="submit" style="font-size: 10px; font-weight: bold;
> font-family: ariel; background: ffedca" value="Go"></p>

It's normally best (if you're going to use the style in more than one
place) to define your styles in a CSS class and use that, rather than
the inline styles you have here.

> While this is a specific question, I'm not quite sure if I fully grasp when
> it is better in the css style sheet to use the class that sets a division
> verses the class that sets an individual item. (the pound symbol verses the
> dot symbol and/or genric H1, H2...).

I'm not sure I understand what you mean by "a class that sets a division".

There are several types of CSS selectors:

* element selectors, e.g. p
* class selectors, e.g. .warning (your "dot symbol")
* id selectors, e.g. #header (your "pound symbol")
* descendant selectors, e.g. #header h2 - this means "apply this style
to any h2 elements that are descendants of the element with the id of
'header'".
* parent-child selectors, e.g. #content>h1 - this means "apply this
style to any h1 element that is a direct child of the element with the
id of 'content'".

Can I suggest looking at this tutorial? It's all covered here:
http://css.maxdesign.com.au/selectutorial/

> However, I have made all kind of little style sheets to see what would
> happen and I can get the visual result. But I want to have a "clean code"
> for the css style sheet. Having looked at several style sheets, I am seeing
> what seems to be redunancy. My understanding from programming CLASSES (c++
> and java) is that inheritancy is the rule in a style sheet. So I think you
> could set up a p class with many values, then within a division class only
> change something that would differ from this p class. The other items would
> default to the p class description.

I still don't get what you mean by "division class". Again, the
tutorial I linked to above may help your understanding of CSS
inheritance and the cascade.

> Note I understand inheriancy as it relates to the iimported style sheet, the
> page style sheet, the style added to an item on a page - just confused how
> the division style in a css style sheet effects the whole. I'm hoping that
> I never again have a imported style sheet, a page style sheet, and a special
> style sheet. Currently, that is what I use on my site. I didn't use the
> the html <div> text <div> at all. He..he.. I'm also changing my site to
> comply with xhtml and have been reading about it as well as xml. I'm going
> through the slow process of conversion now.

It's a good idea - valid markup (whether that's HTML 4.01 or XHTML 1.1
doesn't really matter, as long as you choose one and stick to it) is
the best foundation for any CSS-based layout. Invalid markup makes
debugging layout problems so much harder.

> While I gravely underextimated the time it would take for me to convert the
> site to a tableless format using css and xhtml, my little practice pages
> unless I'm going crazy seem to make the page display more quickly and if I
> get the css style sheet right the first time, I will spend less time making
> individual pages. (e.g. the library for the blind sends me a newsletter that
> has books. I never thought about setting up a "cite class". Four times a
> year I made the text "look" like a book cite. Live and learn and you guys
> are teaching me! I promise, as I learn more, I will share this knowledge
> with other web people in Florida!

Well done for biting the bullet and making the switch. It's a widely
accepted truth that ditching tables for layout, while being the right
thing to do from a HTML purity perspective, is also a very good thing
to do from an accessibility perspective.

You may find the following resources helpful:
www.alistapart.com
www.bitesizestandards.com
www.thinkvitamin.com

Best regards,

Tim

From: Trusz, Andrew
Date: Mon, Apr 24 2006 7:50AM
Subject: RE: Drop down list, css, and xhtml
← Previous message | No next message

_____

From: smithj7 Sent: Thursday, April 20, 2006 7:09 PM
To: = EMAIL ADDRESS REMOVED =
Subject: [WebAIM] Drop down list, css, and xhtml



don't laugh... but I was happy to discover that I can even set up a css
style for drop down boxes which I use more or less to assist users to
get quickly from one item to ...



While this is a specific question, I'm not quite sure if I fully grasp
when it is better in the css style sheet to use the class that sets a
division verses the class that sets an individual item. (the pound
symbol verses the dot symbol and/or genric H1, H2...). ...



My understanding from programming CLASSES (c++ and java) is that
inheritancy is the rule in a style sheet. So I think you could set up a
p class with many values, then within a division class only change
something that would differ from this p class. The other items would
default to the p class description. ...





He..he.. I'm also changing my site to comply with xhtml and have been
reading about it as well as xml. I'm going through the slow process of
conversion now.



As a digest reader I tend to be far enough behind that comments aren't
usually worth making but in this case a few additions seem warranted.



Id's and classes differ in a couple of ways. The most obvious is that
id's can be used only once per page while classes can be repeated. Id's
can also be used as an anchor. An h1 with an id can therefore be used as
an anchor to refer users to a particular section or page.



Divs were developed as a flexible container. They are often used for
visual effects - positioning. Often this involves using id's such as
#logo, #header, #nav, #main and #footer. The content divs can hold runs
the gamut of elements. Raw text (no other containing element) can be
dumped in a div. Certainly images, lists, forms and even tables can be
contained in div. In fact a div can contain nothing, being used to clear
other elements. Divs are the building blocks.



Cascading (inheritance) takes some getting used to. How rules are
applied depends upon a very specific algorithm for calculating
specificity. This included counting the number of id's, classes and tags
involved. Last applied rules mean you'll see some intricate
constructions to achieve a specific effect.



In working your way through all of this, you might want to look at these
sources:

http://www.w3.org/TR/CSS1



While css1 has been superseded by css2.1, it is subsumed in 2.1 and
since it is a shorter, less complex version of css it's easier to sort
through. It introduces the underlying principles without be so extensive
it makes your head hurt.



When you get to wrestling with positioning, two possible aids would be

http://www.brainjar.com/css/positioning/



It's an older document but it still illustrates the basics. For more
complicated issues of how to do layouts, the "layout demos" at

http://www.positioniseverything.net
<http://www.positioniseverything.net/>; are very good. The site can
also introduce you to some of the "issues" raised by IE.



It's an often frustrating conversion process but well worth in the end
for the reasons you've already discovered and more.



drew