[gelöst] CSS Basics
Eingetragen von 1kubik (903)am 08.02.2010 - 00:43 Uhr in
Hallo Liebe CSS Spezies
Ich muss mich gerade mit CSS beschäftigen aber komme irgenwie nicht weiter
und finde auch keine Lösung im Netz.. (hab gesucht..ehrlich:))
Ich möchte ein Menue bzw deren Elemente per CSS ansprechen.
Das Menue besteht aus einer verschachtelten Liste die vom ZEN Theme
erzeugt wurde
<?php
<div class="block block-menu region-even even region-count-2 count-2 with-block-editing" id="block-menu-menu-my-block">
<div class="block-inner">
<h2 class="title">Blockhead</h2>
<div class="content">
<ul class="menu">
<li class="expanded first">
<a title="Construction" href="/bm2/taxonomy/term/1">Haustiere</a>
<ul class="menu">
<li class="leaf first">
<a title="Hund" href="/bm2/taxonomy/term/1">Hund</a>
</li>
<li class="leaf">
<a title="Minikamel" href="/bm2/taxonomy/term/3">Minikamel</a>
</li>
</ul>
</li>
<li class="expanded last">
<a title="transport_vehicles" href="/bm2/taxonomy/term/">Wassertiere</a>
<ul class="menu">
<li class="leaf first">
<a title="Seekuh" href="/bm2/taxonomy/term/17">Seekuh</a>
</li>
<li class="leaf">
<a title="Kaulquappe" href="/bm2/taxonomy/term/18">Kaulquappe</a>
</li>
</ul>
</li>
</ul>
</div>
</div>
</div>
?>uff.. also wie spreche ich jetzt zum beispiel das erste Element (über die KLasse und nicht über die ID) an:
<?php
<div class="block block-menu region-even even region-count-2 count-2 with-block-editing" ..
?>so zumindest ja nicht:
//css
.block block-menu region-even even region-count-2 count-2 with-block-editing{
}und zu guter letzt, wie spreche ich den ersten Menupunkt an
bzw Hund:
<?php
<ul class="menu">
<li class="expanded first">
<a title="Construction" href="/bm2/taxonomy/term/1">Haustiere</a>
<ul class="menu">
<li class="leaf first">
<a title="Hund" href="/bm2/taxonomy/term/1">Hund</a>
</li>
?>Das funktioniert ja leider nicht
.menu li.expanded first li.leaf first :firstChild{
}ja ich weiss das ist totaler quatsch so (bitte nich
meckern :)) .. aber irgendwie
muss das doch so ähnlich gehen..oder?
Vielen Dank vorab für eure Hilfe
Gruss
Stef
- Anmelden oder Registrieren um Kommentare zu schreiben
bullsh..
am 08.02.2010 - 01:07 Uhr
//css
.block block-menu region-even even region-count-2 count-2 with-block-editing{
}
Sorry, aber das ist kompletter bullsh..
Wenn Du das so tun willst dann so:
.block.block-menu.region-even.even.region-count-2.count-2.with-block-editing {/* foobar */
}
Aber das ist ebenfalls bullsh..
Dringender Rat.
Beschaeftige Dich mit dem Firefox Addon Firebug. Es gibt dutzende HowTow's im Netz wie man mit dem Firebug umgeht um erfolgreich mit CSS HTML zu formatieren. Lerne mit dem Firebug umzugehen!
Wenn Du dies getan hast dann kannst Du mit derartigen Fragen, ich meine Thema CSS Formatierung, hier posten.
PS
Ich will nicht meckern oder Dir an den Kragen oder so sondern Dir nur helfen und ich hoffe Du kannst meinen Post verstehen.
------------------------
Quiptime Group
CSS Klassen identifizieren
am 08.02.2010 - 02:40 Uhr
Das erste Menu-Element (des übergeordneten Menus) könntest Du so ansprechen:
#block-menu-menu-my-block ul li.first {}
Die ganzen Klassen kannst Du als eine Art Auswahlliste verstehen, wo Du nur das ansprichst, was Deinem Fall am spezifischsten entspricht. Du brauchst für das erste Listenelement also genau die Klasse unter
li, die nur dem ersten Menu-Element vergeben wird, und das ist.first. Einidist immer eindeutig, damit kannst Du also genau den einen Block auf der Seite ansprechen, den Du brauchst, und keinen anderen. Deshalb ist es bei CSS-Zuordnungen, die eindeutig sein sollen, sinnvoll, als hierarchisch oberstes Element eineidzu suchen.Die Notation oben bedeutet gesprochen: das
limit der Klassefirstinnerhalb einerulinnerhalb des Blocksblock-menu-menu-my-block. Ob Du dieulmit reinschreiben willst oder nicht, ist im Grunde Geschmackssache - logisch ist es nicht nötig, aber ich find's übersichtlicher.Beim "Hund" handelt es sich um das Untermenu. Du musst also entweder das Menu genau fassen, was hier nicht möglich ist - beide haben die Klasse
menu- oderulundliin der Notation zweimal aufführen:#block-menu-menu-my-block ul li ul li.first {]
Ich hoffe, das hilft ein Stückchen weiter.
CSS ganz spezifisch
am 08.02.2010 - 02:54 Uhr
Nachtrag:
Wenn du nur für den Hund einen besonderen Style willst, musst Du sogar schreiben:
#block-menu-menu-my-block ul li.first ul li.first {}
Grundlegende CSS-Kenntisse
am 08.02.2010 - 08:00 Uhr
Beschaeftige Dich mit dem Firefox Addon Firebug. Es gibt dutzende HowTow's im Netz wie man mit dem Firebug umgeht um erfolgreich mit CSS HTML zu formatieren. Lerne mit dem Firebug umzugehen!
Wenn Du dies getan hast dann kannst Du mit derartigen Fragen, ich meine Thema CSS Formatierung, hier posten.
Sorry Quiptime aber das wird nicht reichen! Wenn ich mir die CSS-Formulierungen so ansehe, und ich bin beileibe kein CSS-Könner, dann sollte der Kollege sich zuerstmal grundlegende Kenntnisse in CSS aneignen.
@kissmedve
Ich will dir ja nicht den Spass am Helfen nehmen, aber ich glaube nicht, dass ein Post im DC der richtige Ort ist um jemandem einen Einführungskurs in CSS zu geben.
@phpberlin
Bei HTML-Attributen (class) werden Werte mit Leerstellen voneinander getrennt. Mach dich auf CSS 4 You und ähnlich Plattformen ein wenig schlau über CSS.
Gruss Roger
Gelöste Forenbeiträge mit [gelöst] im Titel ergänzen (1. Posting vom Thema) <==> das erleichtert das finden von Lösungen
CSS
am 08.02.2010 - 08:22 Uhr
@Rabbit69
Da hab ich wohl die DC-Etikette verletzt? Sorry!
Oder doch eher schade ...
Nein, nicht so schlimm
am 08.02.2010 - 08:37 Uhr
Denke nicht, dass Du die Etikette verletzt hast, aber wenn ich die Anfrage durchlese, so glaube ich, dass hier doch noch einiges an Grunwissen fehlt und ich weiss nicht, ob Dir bewusst ist, wieviel Zeit Du mit einem CSS-Crash-Kurs investieren musst.
Gruss Roger
Gelöste Forenbeiträge mit [gelöst] im Titel ergänzen (1. Posting vom Thema) <==> das erleichtert das finden von Lösungen
Was da fehlt, habe ich sehr
am 08.02.2010 - 08:58 Uhr
Was da fehlt, habe ich sehr wohl gesehen. Manchmal sind Lücken aber auch gravierend und doch begrenzt. Weiß man nicht immer.
Mit "Bullsh.."-Kommentaren allein ist @phpberlin auf keinen Fall geholfen und der Firebug-Tipp war auch nicht auf den Punkt. Das wollte ich (auch) ein bisschen ausgleichen.
kissmedve
am 08.02.2010 - 13:00 Uhr
Nachtrag:
Wenn du nur für den Hund einen besonderen Style willst, musst Du sogar schreiben:
#block-menu-menu-my-block ul li.first ul li.first {}
Hi kissmedve
Hey, Danke Deine Antwort! Genau die Info hatte ich gesucht.
Mir war letztlich 'nur' die genaue Notation nicht klar.
Jetzt weiss ich es (wieder)
Und danke auch für Dein 'in Schutz nehmen' und
Deinen Ausgleich!
Auch wenn ich 'den Ton' in den Kommentaren von quiptime und rabbit
irgendwie verstehen kann,die sind ja auch garnicht persönlich gemeint,
trifft einen das schon n bisschen, montagsmorgens :)
Es tut dem Forum aufjeden Fall gut wenn da eine(r) ist die
dafür Antennen hat!
Viele Grüße
Stef
Hi quiptime Danke für deine
am 08.02.2010 - 13:00 Uhr
Hi quiptime
Danke für deine schnelle Antwort!!
Wenn Du das so tun willst dann so:
.block.block-menu.region-even.even.region-count-2.count-2.with-block-editing {/* foobar */
}
Genau das hatte ich auch versucht aber weil ich
mich verschrieben hatte, hats nicht funktioniert.
Daher dachte ich ich sei komplett falsch. und hatte den Überblick verloren
(war auch schon recht spät)
Beschaeftige Dich mit dem Firefox Addon Firebug. Es gibt dutzende HowTow's im Netz wie man mit dem Firebug umgeht um erfolgreich mit CSS HTML zu formatieren. Lerne mit dem Firebug umzugehen!
Den verwende ich schon seit Jahren, zusammen mit dem Drupal for Firebug Modul. Und auch das WebdeveloperTool Plugin.
Aber wie heisst es so schön:
A Fool with a Tool is juat a Fool :)
Meine HTML/CSS Kenntnisse haben bisher völlig ausgereicht. Das was mir
an Input Fehlte (verschachtelte Klassen 'ansprechen') wurde hier jetzt auch dank Deiner Hilfe
vervollständigt!
Hi Roger Danke auch Dir für
am 08.02.2010 - 13:05 Uhr
Hi Roger
Danke auch Dir für Deine Tips!
Mir ist schon klar was ein # oder ein . ist, dass kam nicht so rüber.
Ich habe bei HTML/CSS aber Dateien selten mit so 'extrem' verschachtelten
Dateien zu tuen.
Diese Struktur von meinem Beispiel hat Drupal + ZEN so rausgehauen.
Meine eigenen, absichtlich völlig falschen
'Lösungsbeispiele' hatte ich ja selbst als solche vorab kommentiert
und nicht als Maßstabs meines CSS Wissens gesehen.
Ok, ich war n bisschen faul beim Beitrag schreiben...
Schönen Gruss
Stef