Syntax bei CSS

[Mo3bius]

Hi,
ich habe hier ein div mit der id="inhalt". Darin befinden simg Bilder (img). Diese möchte ich nun mit CSS Eigenschaften übergeben. Wie mach ich das am Besten?
Also img {} würde ja alle img betreffen. Natürlich könnte ich ein class erstellen und das bei jedem img reinschreiben. Gehts aber vielleicht besser?

Mfg Mo3bius

[Robert Kabinger]

http://de.selfhtml.org/navigation/css.htm#zentrale_formate@title=http://de.selfhtml.org/navigation/css.htm#zentrale_formate

#inhalt > img
Damit formatierst du alle Bilder die dem div DIREKT untergeordnet sind.

[suit]

#inhalt > img
Damit formatierst du alle Bilder die dem div DIREKT untergeordnet sind.

du hast vergessen, zu sagen, in welchem browser ;)

[Mo3bius]

Also wirklich schlauer als vorher bin ich nicht.

Ween ich den Kind-Selektor verwende mit : div > img werden doch alle img angesprochen!

Ich bräuchte in etwa sowas :

div#inhalt > img

So funktioniert das halt nicht. Auch #inhalt > img liefert kein Ergebnis. Ich verwende Firefox 3. Das ganze muss aber noch bis zum IE6 funktionieren, sonst nützt mir das nichts.

Mfg Mo3bius

[Thomas Luethi]

Hallo,

Ich bräuchte in etwa sowas :

div#inhalt > img

Lass die spitze Klammer weg:

div#inhalt img

Diesen einfachen Nachkommen-Selektor verstehen AFAIK alle CSS-fähigen
Browser, inklusive die älteren Versionen von MS IE.

Damit sprichst Du alle img an, die im <div class="inhalt"> drin sind,
egal, ob sie direkte Nachkommen sind oder ob sie z.B. noch in
einem P-Element oder so eingepackt sind.

HTH, mfg
Thomas

[Thomas Luethi]

Hallo nochmal,

div#inhalt img

Diesen einfachen Nachkommen-Selektor verstehen AFAIK alle CSS-fähigen
Browser, inklusive die älteren Versionen von MS IE.

Da kommt mir noch in den Sinn: Der Steinzeit-Browser Netscape 4 verstand die Schreibweise
div#inhalt
nicht. Für ihn hätte man nur #inhalt schreiben dürfen, im Beispiel also:
#inhalt img

mfg
Thomas
  der sämtliches CSS vor Netscape 4 versteckt mit media="screen,projection":
  <link href='screen.css' rel='stylesheet' type='text/css' media='screen, projection'>

[suit]

Da kommt mir noch in den Sinn: Der Steinzeit-Browser Netscape 4 verstand die Schreibweise
div#inhalt
nicht.

der verbreitungsgrad dieses browsers tendiert gegen null - sogar der navigator 9 hat eine verbreitung die gegen 0 tendiert

kümmere dich nicht um diese browser, macht nur unnötig arbeit
relevant sind ie6 aufwärts, firefox 2 aufwärts, safari 3 aufwärts und opera 8 aufwärts - notfalls noch ie 5.5, firefox 1.5, safari 2 und opera 7

[Mo3bius]

Danke für eure Antworten !

Die blödsten Fehler sind ja bekanntlich die einfachen, ich hab Groß/Kleinschreibung nicht beachtet....

Jetzt funktioniert alles :)

Mfg Mo3bius

[Daniel unreg]

Hallo,

der sämtliches CSS vor Netscape 4 versteckt mit media="screen,projection":
  <link href='screen.css' rel='stylesheet' type='text/css' media='screen, projection'>

Das erkennt aber der IE 4, weshalb ich
<style type="text/css" media="screen, projection">@import('screen.css');</style>
verwende ;)

Zuletzt musste ich auch IE 5.0 ausschließen, was ich dann aber mit Conditional Comments erledigt habe :)

Gruß, Daniel

... der sich freut, dass man irgendwann IE6 und 7 mit
<style type="text/css">@import('screen.css') screen, projection;</style>
ausschließen kann.

[MudGuard]

Hi,

div#inhalt img
Damit sprichst Du alle img an, die im <div class="inhalt"> drin sind,

Nein, dazu wäre div.inhalt img der richtige Selektor.
div#inhalt img selektiert alle img im div mit der id "inhalt".

cu,
Andreas

[Thomas Luethi]

div#inhalt img
Damit sprichst Du alle img an, die im <div class="inhalt"> drin sind,

Nein, dazu wäre div.inhalt img der richtige Selektor.
div#inhalt img selektiert alle img im div mit der id "inhalt".

Ups, danke für die Korrektur dieses Flüchtigkeitsfehlers!
Ich meinte natürlich <div id="inhalt">, aber die Finger
haben beim Tippen so ihre Gewohnheiten... ;-)

mfg Thomas

[Thorsten Schleppi]

Hallo!

Ich bräuchte in etwa sowas :

div#inhalt > img

So funktioniert das halt nicht. Auch #inhalt > img liefert kein Ergebnis. Ich verwende Firefox 3. Das ganze muss aber noch bis zum IE6 funktionieren, sonst nützt mir das nichts.

Wenn du lediglich die img-Elemente _direkt_ unter deinem div#inhalt ansprechen willst, dann wäre div#inhalt > img korrekt.
Meine Vermutung ist, dass du uns noch ein Element dazwischen verheimlichst (z. B. ein a) und es deshalb nicht funktioniert. Am besten verlinkst du mal eine Beispielseite.
Imho kommst du ans Ziel indem du den div#inhalt img verwendest. Falls es noch weitere Bilder in deinem div#inhalt gibt, die du anders formatieren möchtest, musst du für diese die Formatierungen natürlich überschreiben.

Viele Grüße
Thorsten

[suit]

Also img {} würde ja alle img betreffen. Natürlich könnte ich ein class erstellen und das bei jedem img reinschreiben. Gehts aber vielleicht besser?

mit dem kind-selektor ">" oder dem nachfahren-selektor " " - anzumerken ist, dass der internet exploder 6 den kind-selektor nicht versteht

[Gunnar Bittersmann]

@@Mo3bius:

Natürlich könnte ich ein class erstellen und das bei jedem img reinschreiben.

Um Himmels Willen, tu’s nicht!

Gehts aber vielleicht besser?

Ja, mit dem Selektor für Nachfahren.[CSS2 §5.1, CSS2 §5.5, http://de.selfhtml.org/css/formate/zentrale.htm#verschachtelte_elemente@title=SELFHTML]

Live long and prosper,
Gunnar

[Thomas Luethi]

Hallo Gunnar,

Ja, mit dem Selektor für Nachfahren.[CSS2 §5.1, CSS2 §5.5]

Diese von Dir geposteten Links funktionieren bei mir im Firefox 3.0 nicht.
(Weiss der Geier, warum die Leute von edition-w3c.de so problematische
Anker mit %C2%A0 am Ende basteln ...
Aber für mich ein Grund mehr, diese Übersetzung zu meiden und
nur das englische Original der Specification weiterzuempfehlen.)

Diese Links funktionieren bei mir im Firefox:
http://edition-w3c.de/TR/1998/REC-CSS2-19980512/kap05.html#heading-5.1 
http://edition-w3c.de/TR/1998/REC-CSS2-19980512/kap05.html#heading-5.5 

Und hier noch die Links zur aktuellen englischen Version CSS 2.1:
5.1 Pattern matching     http://www.w3.org/TR/CSS21/selector.html#pattern-matching
5.5 Descendant Selectors http://www.w3.org/TR/CSS21/selector.html#descendant-selectors

mfg Thomas