selfhtml.de - Alles für den Webmaster!

 

Empfehlung:

wix.com

Kostenlose Homepage

Besuchen Sie auch:

Jobs:

Problem mit text-transform

Autor: gaby [Beiträge: 6016]
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>


Beiträge

Antwort schreiben

Username: Usernamen registrieren
Passwort: Passwort vergessen?
Thema:
  Bitte benutze für deinen Beitrag die Groß-/Kleinschreibung!
Beitrag:
Link (URL):
Titel für Link:
Grafik (URL):
  Die Breite der Grafik darf 468 Pixel nicht überschreiten.
 
E-Mail-Benachrichtigung:



Zum Abschicken deines Beitrags bitte die Schaltfläche "Abschicken" nur einmal anklicken und warten. Der Server braucht manchmal einige Zeit, bis er den Beitrag in die Datenbank übernommen hat. Wenn du die Schaltfläche mehrmals drückst, erscheint dein Beitrag auch mehrmals im Forum.

Bewerten Sie Ihren Webhosting-Provider

Webhosting Provider bewerten und Apple iPad gewinnenWie zufrieden sind Sie mit Ihrem Webhosting-Provider? Gibt es Probleme beim Service, mit der Performance oder der Abrechnung?

Teilen Sie jetzt Ihre Erfahrungen mit anderen Webmastern und schreiben Sie eine Provider-Bewertung. Mit etwas Glück können Sie ein Apple iPad gewinnen!

Weitere Informationen und Teilnahme...