2 Klassen in 1 integrieren (in CSS-Datei)

von **Blackside** » 25.07.2011, 14:57

Hallo,

Ich hab ein folgendes Problem:
Will 2 Klassen verbinden, da ich die "bigger"-Klasse in <div>'s nicht mehr verändern und mit anderen kombinieren darf.

.fetter {
font-style:italic;
}

Und suche eine Lösung, 2 Klassen in eine zu verbinden(nicht zu überschreiben):
z.B. Der Text soll 33px groß sein und gleichzeitig den "italic" Style haben.

.bigger .fetter {
font-size: 33px;
}

In HTML:

<div class="bigger">translate</div>

Würde mich über eure Antworten/Hilfe sehr freuen!

von **sejuma** » 25.07.2011, 16:12

Versuch's mal so:

Code: Alles auswählen: .fetter { font-style:italic; } .bigger { font-size: 33px; }

<

Code: Alles auswählen: div class="bigger fetter">translate</div>

von **Blackside** » 25.07.2011, 16:20

Danke, aber ich darf nur EINE Klasse im <div> verwenden ..

Code: Alles auswählen: div class="bigger">translate</div>

Wie kann ich das "fetter" hier zuweisen? In meinem Projekt muss ich alles in der CSS-Datei lösen.
Danke.

von **sejuma** » 25.07.2011, 16:39

Dann so:

Code: Alles auswählen: .bigger { font-size: 33px; font-style: italic; }

von **Blackside** » 25.07.2011, 16:46

Das wäre zu banal

Die Klasse "fetter" ist eine externe Klasse. Sie muss unbedingt zugewiesen werden, damit der HTML Element 2 Eigenschaften hat

Wollte mich interessieren, ob die realisierung überhaupt möglich ist

von **sejuma** » 25.07.2011, 18:16

Ich verstehe das Problem nicht.
Wenn du zwei Schrifteigenschaften brauchst, dann packst du beide sinnvollerweise in eine CSS-Klasse.
Ist das nicht möglich, kannst du zwei Klassen kombinieren wie in meinem ersten Beitrag.
Ansonsten kannst du dem div die Klasse .fetter und innerhalb des divs nochmal eine Klasse .bigger für einen span oder Absxatz usw. verwenden (oder umgekehrt).

Code: Alles auswählen: <div class="bigger"> <p class="fetter">translate>/p> </div>

Möglicherweise kochst du aber auch eine unnötige Div-Suppe.

von **Blackside** » 26.07.2011, 07:52

Das Problem ist, ich hab nur die Klasse "bigger" im HTML. Ich habe keine Möglichkeit auf den HTML zuzugreifen(und die Klasse "fetter" dazuzuschreiben) und suche eine Lösung mit CSS.

Ich möchte noch im CSS die "fetter" und "bigger" kombinieren damit die Klasse "bigger" dann den gemeinsamen Resultat im HTML ausgibt.

Ist sowas möglich? Ohne Überschreibung? Damit 2 Eigenschaften bleiben können?

Danke.)

von **sejuma** » 26.07.2011, 09:00

Das geht m.E. nicht.
Denn über HTML stellst du ja die Referenz zu CSS her.
Wenn HTML ausschließlich auf .bigger verweist, dann müssen in der CSS für .bigger auch die entsprechenden Eigenschaften insgesamt hinterlegt sein.

Falls der Div außer der Klasse noch einen ID hat, dann könntest du die zusätzliche Eigenschaft auch dem ID zuweisen. Schlägt dann aber auf den gesamten ID durch. Das geht darüber hinaus auch mit weiteren, übergeordneten Elementen.

von **Blackside** » 26.07.2011, 09:22

Verstehe

Danke für die Antworten!)

Dann werde ich halt gezwungen eine andere Lösung zu finden, ohne CSS

von **sejuma** » 26.07.2011, 09:27

Blackside hat geschrieben:Dann werde ich halt gezwungen eine andere Lösung zu finden, ohne CSS

... was wohl bedeutet, dass du doch auf HTML zugreifen musst.

von **Blackside** » 26.07.2011, 09:34

Auf das Javascript.

von **djheke** » 26.07.2011, 17:25

Also, wenn ich es richtig verstanden habe, soll deine Klasse bigger den Text einmal Fett und einmal fett und Kursiv darstellen ?
Da kommst du mit JS aber auch nicht viel weiter.

djheke

von **Blackside** » 27.07.2011, 08:18

djheke,

Der Text soll 2 Klassen haben. Bigger und Fetter. Im HTML soll er aber nur Bigger sein. Fetter muss ich irgendwie mit CSS/JS dazufügen.

Hab inzwischen eine Lösung mit JS gefunden. Mit dem einfachen "document.write" (Der Content wir mit JS generiert) schreibe ich ganz am Anfang "<body class='fetter'>".

Ich hab aber viele JS/Ajax Elemente, die bereits eine Klasse haben, aber noch "fetter" sein müssen :-D

Deswegen suchte ich ne Lösung mit CSS, Ich dachte man kann das ganze (.textclass.fetter/ fetter .textclass) - so kombinieren..

von **djheke** » 27.07.2011, 08:39

So ohne Quelltext ist es schwer das ganze nachzuvollziehen. Wichtig zu Wissen ist um vieviel bigger Klassen es sich pro Seite Handelt. Wenn es pro Seite nur eine Klasse ist, dann genügt die Angabe im Body.

Code: Alles auswählen: <body class="fetter"> ... <div class="bigger"> .... </div>

Code: Alles auswählen: .bigger { regel 1 } .fetter .bigger { Regel 2 }

Wenn es mehrere Div's sind, dann kommen Folgeselektoren in frage.

djheke

von **Blackside** » 27.07.2011, 08:53

Danke für die Antwort.

Jetzt werde ich mir die Selektoren anschauen, thx für den Tipp

Noch eine Frage:

Ich will den allen Elementen (<div><p> usw.) eine bestimmte Klasse zuweisen, damit aus denen (<div class="MeineKlasse"> und <p class="MeineKlasse">) entsteht.

Ist so etwas mit CSS und Selektoren möglich?

z.B:

Code: Alles auswählen: * { class: MeineKlasse; }

von **djheke** » 27.07.2011, 08:58

???????????

djheke

von **Azra** » 01.08.2011, 10:11

Ich verstehe das 1. Problem immer noch nicht.
Man darf mehrere Klassen für ein Element in HTML verwenden, was du meinst gilt für ID.
Du könntest versuchen über das Elternelement auf die Klasse bigger zuzugreifen dann gilt die Regel nur für das <div> wenn es auch im entsprechenden Elternelement liegt und nicht woanders.

So sähe es in HTML aus:

Code: Alles auswählen: <div id="drumherum"> <div class="bigger">bla</div> </div>

in CSS

Code: Alles auswählen: #drumherum div.bigger{bla:bla}

2 Klassen in 1 integrieren (in CSS-Datei)

2 Klassen in 1 integrieren (in CSS-Datei)

Re: 2 Klassen in 1 integrieren (in CSS-Datei)

Re: 2 Klassen in 1 integrieren (in CSS-Datei)

Re: 2 Klassen in 1 integrieren (in CSS-Datei)

Re: 2 Klassen in 1 integrieren (in CSS-Datei)

Re: 2 Klassen in 1 integrieren (in CSS-Datei)

Re: 2 Klassen in 1 integrieren (in CSS-Datei)

Re: 2 Klassen in 1 integrieren (in CSS-Datei)

Re: 2 Klassen in 1 integrieren (in CSS-Datei)

Re: 2 Klassen in 1 integrieren (in CSS-Datei)

Re: 2 Klassen in 1 integrieren (in CSS-Datei)

Re: 2 Klassen in 1 integrieren (in CSS-Datei)

Re: 2 Klassen in 1 integrieren (in CSS-Datei)

Re: 2 Klassen in 1 integrieren (in CSS-Datei)

Re: 2 Klassen in 1 integrieren (in CSS-Datei)

Re: 2 Klassen in 1 integrieren (in CSS-Datei)

Re: 2 Klassen in 1 integrieren (in CSS-Datei)

Ähnliche Beiträge zu "2 Klassen in 1 integrieren (in CSS-Datei)"

Wer ist online?