Onderscheid maken tussen hoofdletters en kleine letters met css

[killer4all2]

Is het mogenlijk onderscheid van style te maken voor hoofdletters en kleine letters met css? bijvoorbeeld als ik een hoofdletter doe dat de kleur wit word en kleine letters grijs?

edit:

net iets gevonden kan het zoiets zijn?

ul:uppercase { color:grey; }

ul:small-caps { color:white; } or ul:lowercase { color:white; }

[U]
wat ik gevonden heb[/U]

<style type="text/css">
th:first-letter { text-transform: uppercase }
th {color:#0000ff;font-variant:small-caps}
</style>
<TABLE>
<TH ALIGN="left" VALIGN="bottom" COLSPAN="2" ROWSPAN="1" BGCOLOR="#00FFFF" NOWRAP>table header</TH>
<TR>
<TD>row1 col1</TD><TD>row1 col2</TD>
</TR>
</TABLE>

bron:[URL="http://css-tricks.com/forums/viewtopic.php?f=2&t=514"] http://css-tricks.com/forums/viewtopic.php?f=2&t=514[/URL]

 

[Goeroeboeroe]

Dat zou ik niet doen, tenzij je echt van 'n opwindend, spannend leven vol wilde verrassingen houdt.
text-transform: uppercase; heeft geen enkele invloed op je css, het ís css. Het verandert de tekst in de selector waar het bij staat in hoofdletters:

p#test {text-transform: uppercase;}

Nu wordt alle tekst in de paragraaf met id="test" weergegeven als hoofdletters, ongeacht wat er in de html staat.

ul:uppercase kan niet, want :uppercase bestaat niet. Wat wel kan:

ul {text-transform: uppercase;}

Dat kun je dan eventueel combineren met color: grey;

ul {text-transform: uppercase; color: grey;}

Nu wordt dus in <ul> alles in grijze hoofdletters weergegeven.
(Overigens is grey geen goedgekeurde naam, dat zijn er maar 'n paar, beter kun je in plaats van color: grey; iets als color: #999; gebruiken.)

Bij namen van id's en classen laat de specificatie het aan de browsermakers e.d. over. Als je dus verschil maakt tussen id="Test" en id="test", heb je grote kans dat 't op Linux niet en op Windows wel werkt, of in Firefox niet en in IE wel, enz.
Bij namen van tags (<p>, <div>, enz.) is er in html geen verschil tussen hoofd- en kleine letters, in xhtml wel.

In het algemeen is het het best om gewoon helemaal nooit hoofdletters te gebruiken, ook niet in namen van bestanden e.d. Daarmee omzeil je alle verschillen tussen browsers, besturingssystemen, enz.

 

[killer4all2]

Nu is het idee om van mijn html een e107 theme te maken en daarvoor is het nodig dat de naam van de sidebar heads in bijv <p>Latest posts</p> worden weergeven en niet <p>Latest</p><p>Posts</p> Omdat er natuurlijk 1 regel voor gebruikt worden voor de head en niet 2 verschillende stukken om de titel in te voeren. mijn idee van dit al is het volgende.

In de sidebar top 'waar de titel komt' moet er dit gebeuren.

latestsPOSTS

en niet

latestsPOSTS

Om dit voor elkaar te krijgen heb ik dus een css code of w/e nodig dat grote letters onderscheid van kleine letters en ze een andere kleur vind.

Als je nog enig idee heeft of iemand andere reacties heeft dan zal ik dat zeer op prijs stellen. (als dit onmogenlijk is en je bent daar 100% zeker van wil ik dit ook graag horen!)

Groetjes,
Rowan

 

[Goeroeboeroe]

Nee, dat is met css onmogelijk. Misschien komen daar in css 3 mogelijkheden voor, maar dat staat nog niet vast.

Volgens mij kun je dat wel met JavaScript doen. Zoeken of er 'n hoofdletter in de string staat en afhankelijk daarvan de opmaak aanpassen. Maar aan adviezen over JavaScript waag ik me niet. Misschien iemand anders, en anders kun je je vraag nog 'ns stellen in het JavaScript-forum hier.

Is het trouwens geen mogelijkheid om niet twee <p>'s te gebruiken, maar iets als

<p><span id="eerste-helft">latest</span><span id="tweede-helft">POSTS</span></p>

Ik roep maar wat, want ik zie niet helemaal voor me hoe 't moet worden.

 

[killer4all2]

Nou kijk e107 die zal zelf gewoon de titel ertussen gooien en houdt en kan geen 2 woorden splijten. Het volgende zou gebeuren.


je wilt dit:

<p><span id="eerste-helft">latest</span><span id="tweede-helft">POSTS</span></p>

dit gebeurt:

<p><span id="eerste-helft">latestPOSTS</span><span id="tweede-helft"></span></p>

een cms houdt geen rekening me met een linker helft of een rechter en daarom moet de css dus in één regel geplaatst worden en niet in twee. Toch bedankt voor je reactie als je nog ergens achter bent gekomen hoor ik het graag! alvast bedankt !

Groetjes,
Rowan