selfhtml.de - Alles für den Webmaster!

 

Empfehlung:

wix.com

Kostenlose Homepage

Besuchen Sie auch:

Jobs:

Problem mit text-transform

Autor: gaby
Datum: 24.10.2013 19:36:46

Moin moin ;-)

Die Linktexte in meiner Breadcrumb-Zeile stehen im markup in Kleinbuchstaben, sollen aber im Browser natürlich mit Großbuchstaben beginnend angezeigt werden.

Seltsamerweise funktioniert folgendes nicht:

.breadcrumb li a:first-letter {
    text-transform: uppercase;
    }

Das habe ich umgangen, indem ich dem LI statt dem A diese Regel gab, da 'text-transform' ja vererbt wird.

So funktioniert es also:

.breadcrumb li first-letter {
    text-transform: uppercase;
    }

Jetzt kommt aber ein neues Problem:

Ich hatte zuvor die LIs gefloatet, jetzt aber möchte ich sie im Blocksatz darstellen.
Hab also 'text-align: justify' für UL,
und 'display: inline' für LI deklariert.

Und jetzt kommts:
Die Linktexte sind auf einmal wieder _klein_ geschrieben!
Wasn da los?

Es sieht so aus, als könne man Inline-Elementen kein 'text-transform' geben?
Irgendwie finde ich das total unsinnig.

Die LIs _müssen_ aber inline sein, weil sonst das 'justify' im UL nicht angewendet werden kann.
Hat jemand eine Idee, wie ich das Problem lösen kann?


Grüße
gaby
  
  
--------

<!Doctype html>
<html>
<head>
  <meta charset="iso-8859-1">

<title>text-transform</title>

<meta name="editor" content="html-editor phase 5">

<style type="text/css">

.breadcrumb {
    margin-top: 2em;
    border: 2px dashed red;
}

.breadcrumb ul {
    text-align: justify;
  }

.breadcrumb li {
    display: inline;
    flooooat: left;
    border: 1px solid;
    }

.breadcrumb li a,
.breadcrumb li.hier {
    padding-left: 1em;
    padding-right: 1em;
    font-weight: bold;
    background-image: url(bg/arrow2.gif);
    background-repeat: no-repeat;
    background-position: left center;
    color: grey;
    border: 1px dashed;
    }

.breadcrumb li.hier {
    color: red;
    }

.breadcrumb li:first-letter {
    text-transform: uppercase;
    color: blue,
    }

.top-navi li.last,
.breadcrumb li.last {
    width: 1px;
    height: 1px;
    background-color: yellow;
    padding-right: 95%;
}

.breadcrumb a:hover {
    color: black;
    }

</style>
</head>


<body>

<div class="breadcrumb">

    <h5 style="margin-bottom: 2em">Sie sind hier:    </h5>

    <ul>
        <li><a href="../index.html">Startseite</a></li>

        <li><a href=galerie.html>galerie</a></li>

        <li><a href=deutschland.html>deutschland</a></li>

        <li class="hier">wiesbaden</li>

        <li class="last"></li>
    </ul>

    <br style="cleeear: both">

    </div><!--ende-breadcrumb-->

</body>
</html>



Re: Problem mit text-transform

Autor: Freddy
Datum: 24.10.2013 20:47:08

Hallo,

lt. http://stackoverflow.com/questions/7631722/css-first-letter-not-working (en) funktioniert das nur auf Blockelemente. Meine (kurzen) Tests (mit aktuellen Browsern) ergaben das Gleiche.

http://reference.sitepoint.com/css/pseudoelement-firstletter (en)
http://stackoverflow.com/questions/7631722/css-first-letter-not-working (en)

Ich hoffe, das war jetzt nicht total am Thema daneben. :-S


Gruß,
Freddy



Re: Problem mit text-transform

Autor: gaby
Datum: 24.10.2013 23:10:02

> lt.
> http://stackoverflow.com/questions/7631722/css-first-letter-not-working
> (en) funktioniert das nur auf Blockelemente.

Ahh, 'first-letter' ist also der Übeltäter, an dem es hängt, hab mich die ganze Zeit auf 'text-transform'  versteift und konnte natürlich nicht einsehen, warum eine Eigenschaft, die _Text_ formatiert, nicht auf Inline-Elemente angewendet werden kann. ;-)

Aber nichtsdestoweniger finde ich es immer noch unsinnig, daß diesmal 'first-letter' nur für Block-Elemente gelten soll.
Wie der Name schon sagt, formatiert man mit 'first-letter' ja _Buchstaben_, also ebenfalls *Text*, demzufolge natürlich auch Inline-Elemente.
Wieder so ein nicht nachvollziehbarer Klops des W3Cs!  :-(
In _deutschen_ Artikeln konnte ich auch keine Erklärung dazu finden.
Man muß es wohl leider einfach (kopfschüttelnd) so hinnehmen.


> Meine (kurzen) Tests (mit aktuellen Browsern)
> ergaben das Gleiche.

Meine Tests (mit nicht ganz so aktuellen Browsern, IE-8, Firefox-21, Opera-12.6) ergaben das ebenfalls. ;-)


> Ich hoffe, das war jetzt nicht total am Thema
> daneben. :-S

Nein, war es nicht.
Danke Freddy!  :-)

Okay, 'first-letter' funktioniert also nur bei Block-Elementen. Aber wenn ich die LIs mit 'float' zu Block-Elementen mache, kann ich 'text-align:justify' nicht mehr anwenden, denn das funktioniert nur für _Inline-Elemente_'.

Ich glaube, ich schlafe erstmal drüber, vielleicht fällt mir morgen etwas dazu ein.


Grüße und Gute Nacht
gaby



Re: Problem mit text-transform

Autor: Netinja
Datum: 25.10.2013 00:26:20


> Die Linktexte in meiner Breadcrumb-Zeile stehen
> im markup in Kleinbuchstaben, sollen aber im
> Browser natürlich mit Großbuchstaben beginnend
> angezeigt werden.

Hallo,
Mal eine blöde Frage:
Wäre es nicht am einfachsten, wenn du die Linktexte im Quellcode gleich in Grossbuchstaben schreiben würdest?

LG
Netinja



Re: Problem mit text-transform

Autor: gaby
Datum: 25.10.2013 09:05:57


> Mal eine blöde Frage:
> Wäre es nicht am einfachsten, wenn du die
> Linktexte im Quellcode gleich in Grossbuchstaben
> schreiben würdest?


Die Linknamen in der breadcrumb-Zeile extrahiere ich mit php aus dem Dateinamen. Ich könnte jetzt also entweder die Dateien umbenennen in Groß-Schreibweise, oder nach dem Extrahieren vielleicht mit PHP den ersten Buchstaben groß machen oder die breadcrumb-Zeile manuell in jedes Dokument schreiben.

3 Alternativen, aber keine davon gefällt mir wirklich. :-/


Grüße
gaby



Re: Problem mit text-transform

Autor: T.Jung
Datum: 26.10.2013 01:18:16

> Aber nichtsdestoweniger finde ich es immer noch
> unsinnig, daß diesmal 'first-letter' nur für
> Block-Elemente gelten soll.
> Wie der Name schon sagt, formatiert man mit
> 'first-letter' ja _Buchstaben_, also ebenfalls
> *Text*, demzufolge natürlich auch
> Inline-Elemente.
> Wieder so ein nicht nachvollziehbarer Klops des
> W3Cs!  :-(

hab noch nie drüber nachgedacht, aber spontan fällt mir eine Vermutung ein:
Ich denke, 'first-letter' wurde dazu geschaffen, um ein altehrwürdiges Element der Druck-Typografie nachzuahmen, nämlich die Initiale:
http://de.wikipedia.org/wiki/Initiale
Wenn Du Dir die Beispiele aus den alten Büchern anguckst, ist klar, warum das auch nur für Blockelemente gelten kann. Ob es jetzt wirklich weise ist, eine Eigenheit der Drucktypografie ins Web zu übernehmen, ist natürlich eine andere Frage... ;-)



> Okay, 'first-letter' funktioniert also nur bei
> Block-Elementen. Aber wenn ich die LIs mit
> 'float' zu Block-Elementen mache, kann ich
> 'text-align:justify' nicht mehr anwenden, denn
> das funktioniert nur für _Inline-Elemente_'.

Öhm, nö:
http://www.w3.org/TR/CSS21/text.html#propdef-text-align
Da steht ganz deutlich
| Applies to:   block containers

Allerdings verstehe ich nicht, wie Du ein Element, das nur aus _einem_einzigen_Wort_ besteht, überhaupt im Blocksatz setzen willst...

Gruß,
Tobias



Re: Problem mit text-transform

Autor: Netinja
Datum: 26.10.2013 08:51:57

Hallo
Hast du es mal mit display:table-cell für li und display:table für ul probiert? Bei mir klappt es so. :-)
Dann brauchst du auch das text-align:justify nicht mehr.

Für was ist denn das padding-right:95% bei li.last und warum soll das nur 1px x 1px gross sein? Ist das so ein Dummy-li? ;-)

LG
Netinja



Re: Problem mit first-letter

Autor: gaby
Datum: 26.10.2013 14:31:15

> hab noch nie drüber nachgedacht, aber spontan
> fällt mir eine Vermutung ein:
> Ich denke, 'first-letter' wurde dazu geschaffen,
> um ein altehrwürdiges Element der
> Druck-Typografie nachzuahmen, nämlich die
> Initiale:
> http://de.wikipedia.org/wiki/Initiale
> Wenn Du Dir die Beispiele aus den alten Büchern
> anguckst, ist klar, warum das auch nur für
> Blockelemente gelten kann.


moin moin ;-)

Hab es mir angeguckt und festgestellt, daß es für _diese_ Beispiele sinnvoll ist, 'first-letter' auf ein Block-Element anzuwenden. Das heißt aber IMO nicht zwangsläufig, daß man 'first-letter' *nur* auf Block-Elemente anwenden können sollte.

Es sollte dem Anwender überlassen werden, wie und wo er es einsetzt.
Wenn der Anwender 'first-letter' auf ein Inline-Element anwenden wollte, sollte eben die Formatierung (im Gegensatz zu bei einem Block-Element) _innerhalb_ der betreffenden Zeilenbox stattfindendet, genau wie das auch der Fall wäre, wenn man die Initiale in ein SPAN setzte und _dieses_  dann formatierte.
Ich sehe darin überhaupt kein Problem, und deswegen auch keinen nachvollziehbaren Grund des W3Cs, die Anwendung auf ein Inline-Element auszuschließen.


> Ob es jetzt wirklich
> weise ist, eine Eigenheit der Drucktypografie ins
> Web zu übernehmen, ist natürlich eine andere Frage... ;-)

Da sage ich jetzt mal ganz eindeutig: "Nö, is nicht weise". ;-)

  
> > Aber wenn ich die LIs mit
> > 'float' zu Block-Elementen mache, kann ich
> > 'text-align:justify' nicht mehr anwenden, denn
> > das funktioniert nur für _Inline-Elemente_'.
>
> Öhm, nö:


Sorry, ich sollte mich künftig besser genauer ausdrücken, also:

"Aber wenn ich die LIs mit  'float' zu Block-Elementen mache, kann ich 'text-align:justify'  
_im Elternelement_
nicht mehr anwenden, ..."
... (den Rest des Satzes muß ich weglassen, sonst ist der Bezug kaputt)  ;-))


Grüße
gaby

Hier nochmal meine Ausgangs-Datei aus dem Thread-Start.
(bitte JS deaktivieren)

http://gaby77.ga.funpic.de/forum/fr/first-letter/dat-0.html


PS
Danke für den Begriff "Initiale", der war mir entfallen. *bg*



Problem mit first-letter und justify (was:Re: Problem mit text-transform)

Autor: gaby
Datum: 26.10.2013 19:37:17

> Hast du es mal mit display:table-cell für li und
> display:table für ul probiert? Bei mir klappt es
> so. :-)


moin ;-)

Danke für deinen Vorschlag, und ja, das hatte ich schon probiert. ;-)
Dabei werden zwar die Initialen groß geschrieben, wenn ich zusätzlich noch das A-Element zu einem Block-Element mache, aber die Links werden nicht gleichmäßig über die vorhandene Breite verteilt.
'table-cell' berechnet das padding immer analog zur Länge des jeweiligen Linktextes. Das wird deutlich, wenn man sehr unterschiedlich lange Linktexte verwendet, zb so:

(JS wg Werbung deaktivieren)
http://gaby77.ga.funpic.de/forum/fr/first-letter/dat-2.html


> Für was ist denn das padding-right:95% bei
> li.last und warum soll das nur 1px x 1px gross
> sein? Ist das so ein Dummy-li? ;-)

Ja, das ist ein Dummy-LI. ;-)
'text-align: justify' erzeugt ja einen Blocksatz; nur eben nicht bei der letzten Zeile.
Wenn man also nur eine einzige Zeile hat, deren Elemente man gleichmäßig verteilen möchte, hat man Pech gehabt. ;-)
Alternativ kann man dafür sorgen, daß noch eine zweite Zeile entsteht. Das erreiche ich mit diesem "Dummy-LI", und durch das große padding (ich hätte auch 99% als Wert geben können), bin ich sicher, daß für diesen Dummy-LI auch tatsächlich eine neue Zeile angefangen wird.
Somit stehen meine Links dann nicht mehr in der letzten Zeile, und 'text-align: justify' findet Anwendung.

(JS wg Werbung deaktivieren)
http://gaby77.ga.funpic.de/forum/fr/first-letter/dat-0.html

Problem ist jetzt nur die ungewollte Kleinschreibung.
*soifz*  


Grüße
gaby



Re: Problem mit first-letter und justify

Autor: T.Jung
Datum: 26.10.2013 20:43:00

> Problem ist jetzt nur die ungewollte
> Kleinschreibung.
> *soifz*  

Ööööörrrmmmhhhh, was mir auch gerade jetzt erst so richtig auffällt...
Warum versuchst Du, dem li:first-letter ein text-transform:uppecase zuzuweisen, wenn ein
li {
text-transform: capitalize;
}
doch eigentlich reichen sollte?

Gruß,
Tobias



Re: Problem mit first-letter und justify

Autor: gaby
Datum: 26.10.2013 22:15:08

> Ööööörrrmmmhhhh, was mir auch gerade jetzt erst
> so richtig auffällt...
> Warum versuchst Du, dem li:first-letter ein
> text-transform:uppecase zuzuweisen, wenn ein
> li {
> text-transform: capitalize;
> }
> doch eigentlich reichen sollte?


... weil ich mich auf 'first-letter' und 'text-transform:uppercase' eingeschossen hatte und in keine andere Richtung mehr gedacht habe. ;-)
  
  
> li { text-transform: capitalize; }

Bingo! Das wars!  :-)))
Muchos Gracias, Tobias, oder wie das heißt! ;-)


Grüße
gaby




Re: Problem mit text-transform

Autor: Freddy
Datum: 27.10.2013 13:27:38

Hallo,

> Die Linknamen in der breadcrumb-Zeile extrahiere
> ich mit php aus dem Dateinamen. Ich könnte jetzt
> also entweder die Dateien umbenennen in
> Groß-Schreibweise, oder nach dem Extrahieren
> vielleicht mit PHP den ersten Buchstaben groß
> machen oder die breadcrumb-Zeile manuell in jedes
> Dokument schreiben.

Du kennst "ucfirst()"?

http://php.net/manual/de/function.ucfirst.php


Gruß,
Freddy



[OT] (was: Problem mit text-transform)

Autor: gaby
Datum: 27.10.2013 19:58:55

moin moin;-)

> Du kennst "ucfirst()"?


jetzt ja ;-)
Danke Freddy!


btw:
Die Funktionsnamen sind für mich sehr oft nichtssagend und demnach auch schwer zu merken. Für was steht hier "uc"?
"c" vielleicht für "charakter"?
und das "u"?
"first" ist klar. ;-)

Kennt oder hat jemand eine Liste aller Funktionsnamen und deren "Langschreibweise"? Ich habe bei Google nix gefunden, aber das heißt ja nix. ;-)


Grüße
gaby



Re: [OT]

Autor: T.Jung
Datum: 27.10.2013 20:36:08

> Für was steht hier "uc"?
> "c" vielleicht für "charakter"?
> und das "u"?

Ich weiß es auch nicht, aber ich vermute, dass u steht für »uppercase«, bei dem c stimme ich Deiner Vermutung zu.


> Kennt oder hat jemand eine Liste aller
> Funktionsnamen und deren "Langschreibweise"?

Ich nicht.
Gruß,
Tobias



Re: [OT]

Autor: gaby
Datum: 27.10.2013 21:03:22

> > Für was steht hier "uc"?
> > "c" vielleicht für "charakter"?
> > und das "u"?
>
> Ich weiß es auch nicht, aber ich vermute, dass u
> steht für »uppercase«,


Ja, klingt logisch. :-)
Danke Tobias!


Grüße
gaby