[css-d] Displaying different submenus
I have read how to format the body tag and the links in a css nav menu so
that the current page button is highlighted as you travel throughout a site.
Example:
*body tag:*
body id=home
*menu:*
ul id=topNav
lia href=/index.html id=homelinkHome/a/li
lia href=/features/ id=featureslinkFeatures/a/li
lia href=/experts/ id=expertslinkExperts/a/li
lia href=/quiz/ id=quizlinkQuiz/a/li
lia href=/projects/ id=projectslinkProjects/a/li
lia href=/horoscopes/ id=horoscopeslinkHoroscopes/a/li
/ul
*css formatting:*
#home #homelink {
background-color: #ff;
*result:*
Home button would be highlighted white
Can this be further extended to also control when submenus appear
disappear automatically without using any scripts?
I am wanting to create a navigation menu that will have submenus
appearing automatically depending on the page you are viewing while any
other submenus not related to a given page remain invisible.
Didn't know if this could be done strictly using CSS only.
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Displaying different submenus
There shouldn't be an issue with that, but there is one thing to keep
in mind. You'll essentially be creating a list with nested lists for
the submenus. If you use CSS, anyone that views the site in plain HTML
without styles will see the entire list on every page. If you're fine
with that then you would really just need to use display:none and
display:block with unique ids to create the effect.
So you would be looking at something like this:
#home-sub {display:none;}
#home #home-sub {display:block;}
Where #home-sub would be the id for the list that contains the home
page submenu. If my brain is working correctly this morning this
should work, but you'll have to try it out.
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Deprecations in recent versions of HTML cause C SS problems
On 2010-02-12 Ann Randall wrote: And yes, you can read about the APA's return to two spaces at the end of sentences at http://www.apastyle.org/manual/whats-new.aspx Scroll down just below the Chapter 4 subheading. Do they really expect double-spaces between sentences to be emulated in HTML/CSS, or just to be present in the plaintext source? Seems a bit daft to me! There is of course the possibility that they aren't aware that HTML renderers squash horizontal whitespace and why they should do so. Good contemporary typographic practice is not to stuff extra spacing between sentences. See p. 28-30 of Bringhurst, Robert. The Elements of Typographic Style: Version 3.0. [Point Roberts Wash.]: Hartley Marks, Publishers, 2004. I hasten to add that I learned to apply the practice on the typewriter, and I still think it does add some clarity when reading text in a monowidth font, but in text set or rendered in a proportional font it's just disturbing. For most languages it was never used in printing. On-topically: the only way to emulate double spaces with CSS which I can think of would be to wrap every sentence in a span class=sentence and style that with a 2em right padding. Any other? In HTML you can put nbsp;nbsp; plus an ordinary space after each sentence, but that's awfully presentational markup. /BP 8^) -- Benct Philip Jonsson -- melroch atte melroch dotte se ~~ C'est en vain que nos Josués littéraires crient à la langue de s'arrêter; les langues ni le soleil ne s'arrêtent plus. Le jour où elles se *fixent*, c'est qu'elles meurent. (Victor Hugo) __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Deprecations in recent versions of HTML cause C SS problems
In HTML you can put nbsp;nbsp; plus an ordinary space after each sentence, but that's awfully presentational markup. Actually, that would be three spaces. Two would be nbsp; . ---Tim __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Deprecations in recent versions of HTML cause CSS problems?
At 4:23 PM +0100 2/17/10, Benct Philip Jonsson wrote:
On-topically: the only way to emulate double spaces with CSS
which I can think of would be to wrap every sentence in a
span class=sentence and style that with a 2em right padding.
Any other?
That would work, though I think 2em would probably be too wide in
proportional fonts. My guess is that something more like 1em or
1.25em would be closer to the intended effect.
In theory, you could make this happen without any extra markup by declaring:
body {white-space: pre-wrap;}
This would impose 'pre'-style whitespace honoring while also
wrapping lines of text at the element boundaries. The value 'pre'
means that lines don't ever wrap. See
http://www.w3.org/TR/CSS2/text.html#white-space-prop for more.
This would not have the intended effect in all browsers, since
many don't support 'pre-wrap', It would, however, enhance(*) the
presentation in those browsers that do understand 'pre-wrap', add
that enhancement to browsers that come to understand it in the
future, and not break anything in browsers that don't currently
understand it.
(*) I mean enhance in the progressive enhancement sense, meaning
that this CSS will create additional effects in advanced browsers
while not making the site inaccessible or broken in non-advanced
browsers. I'm not trying to editorialize about which number of
spaces after a sentence is better, even though I have my own fairly
strong opinions on the matter, as such editorials are way off topic.
--
Eric A. Meyer (http://meyerweb.com/eric/), List Chaperone
CSS is much too interesting and elegant to be not taken seriously.
-- Martina Kosloff (http://mako4css.com/)
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Deprecations in recent versions of HTML cause CSS problems
On-topically: the only way to emulate double spaces with CSS which I can
think of would be to wrap every sentence in a span class=sentence and
style that with a 2em right padding.
Any other?
I think 2em right padding would be the wrong way to do it. Em is the *height*
of a character, not the *width*. You'd end up with something like 5 spaces
between sentences that way. I think (if you were going to do this with CSS,
which I find a ridiculous premise to begin with) that it'd be better to do it
as:
.sentence:after {content: \A0 ;}
It's actually inserting the non-breaking space, but presentationally.
but that's awfully presentational markup.
I'm also going to argue that /characters/ cannot be mark-up or
presentational. The markup is tags. The stuff in the tags is /content/.
Just because it's a character that needs to be specially encoded in HTML does
not make it markup, any more than fianceacute;e would be markup.
$0.02
---Tim
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] Footer not sticking
http://copywritecolombia.com/index3.html Hi all, If I move the footer div outside the main wrapper then it collapses the main wrapper div-what should I do make #wrapper have a min-height? How can I get the footer to stay at the bootom? Thank you __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Footer not sticking
e...@copywritecolombia.com wrote: http://copywritecolombia.com/index3.html Hi all, If I move the footer div outside the main wrapper then it collapses the main wrapper div-what should I do make #wrapper have a min-height? How can I get the footer to stay at the bootom? Thank you The footer is at the bottom of your page in all my browsers. If you want the footer to be at the bottom of the viewport -- as in this example http://www.themaninblue.com/experiment/footerStickAlt/bad_example_short.htm -- see footerStickAlt here: http://www.themaninblue.com/writing/perspective/2005/08/29/ A word of caution: it ain't easy to pull that off cross-browser. Best, ~d -- desktop http://chelseacreekstudio.com/ mobile http://chelseacreekstudio.mobi/ __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
