Tags mit CSS einbinden

[TruMAn]

Hallo, das hier ist mein erster Beitrag hier, die Regeln sollten sich allerdings nicht sonderlich von denen andere Boards unterschieden!

Also zu meinem Problem:

Ich habe nach einer Möglichkeit gesucht, mithilfe von CSS einen Schlagschatten (Süd-Ost) an ein Bild zu hängen. Ich habe im gesammten Internet 2 Möglichkeiten gefunden:

1. Mit einem Filter, das ganze soll aber nicht in jedem Browser funktionieren und kommt deswegen nicht in Frage!
2. Mit mehreren Div-Boxen, die jeweils einen Pixel über die darüber liegende hinausragen und als Hintergrundfarbe grauabstufungen haben!

also Lösung 2 sieht vor, dass ich dann wirklich bei jedem einzelnen Bild mehrere Div-Boxen drumlegen muss, das ganze ist mir aber zu umständlich! (viele Bilder)

Anordnen tu ich die Bilder mithilfe einer Tabelle (in den Zellen befinden sich wirklich NUR die Bilder!) Und da dachte ich mir, könnte ich etwas mit den Pseudoklassen :before und :after und mit "content" machen. Meine Frage an euch jetzt: WIE?

mit freundlichen Grüßen
Trµ

 

[_Thor_]

Mit den Pseudoklassen wirst du hier nicht viel anfangen können, sonst hättest du dafür schon eine Lösung bei deiner Suche gefunden.

Damit in allen Browsern ein Schatten angezeigt wird, brauchst du momentan noch Grafiken und zusätzliches Markup.

Es wird in CSS3 eine Möglichkeit geben, das per CSS zu machen, mittels box-shadow. Einige Browser können das schon jetzt, aber nicht alle. Schönes neues CSS: box-shadow ? Peter Kröner, Webdesigner & Frontendentwickler

Trotzdem würde ich die CSS-Variante wählen, denn sie ist die sauberste und wird auch in den anderen Browsern funktionieren, sobald sie diese Funktionalität implementiert haben.

 

[TruMAn]

Ok vielen dank für die schnelle Antwort!

Also muss ich doch noch um jedes Bild die DIV-Boxen setzen. Das ist einerseits schade, aber andererseits gut zu wissen, dass ich es mit dem richtigen ausprobiert habe und trotzdem zu keinem Ergebniss kam.

Also mal nur um zu gucken ob ich WIRKLICH das richtige ausprobiert habe:

td:before {
    content: '<div style=" ">' ;
}

td:after {
    content: '</div>' ;
}

 

[_Thor_]

Wenn du das probiert hast, dürfte dir aufgefallen sein, dass der content als String ausgegeben wird und nicht als HTML verarbeitet wird. So kann man also keine Tags einfügen, ausserdem ist ein <div> um eine <td> nicht erlaubt und deine Bilder sind als Tabelle auch falsch ausgezeichnet. Eine Liste wäre hier richtig, denn deine Bilder sind keine tabellarischen Daten.

 

[prm]

Sieh dir mal diese Beispiele, besonders Nr. 3 an.

 

[TruMAn]

Wenn du das probiert hast, dürfte dir aufgefallen sein, dass der content als String ausgegeben wird und nicht als HTML verarbeitet wird.

genau, ich hab es mal ohne anführungszeichen probiert, oder indem ich die <, > und / escape

So kann man also keine Tags einfügen, ausserdem ist ein <div> um eine <td> nicht erlaubt

dann hab ich da wohl eine falsche Auffassung von :before und :after?

ich dachte das, wass man dafür einträgt wird vor bzw. hinter den INHALT des Elements geschrieben? So das also die <div> innerhalb des <td> liegt

und deine Bilder sind als Tabelle auch falsch ausgezeichnet. Eine Liste wäre hier richtig, denn deine Bilder sind keine tabellarischen Daten.

bei einer Tabelle lässt sich die anordnung leichter ändern, als bei einer Liste

@ prm: dir wird aufgefallen sein, dass der Schatten, der dabei erzeugt wird, sehr sehr Hart ist! Ich hätte gerne einen weicheren! Im grunde habe ich ja genau diese Lösung benutzt und dafür dann ganz viele <div> boxen mit verschiedenen Hintergrundfarben (Grauabstufungen) und kleinem Margin rechts und unten benutzt, diese möchte ich nur nicht alle einzeln einfügen müssen!

 

[NetzSchleicher]

Im grunde habe ich ja genau diese Lösung benutzt und dafür dann ganz viele <div> boxen mit verschiedenen Hintergrundfarben (Grauabstufungen) und kleinem Margin rechts und unten benutzt, diese möchte ich nur nicht alle einzeln einfügen müssen!

Ich sage jetzt mal ganz stupide: Solange noch CSS3 noch nicht von allen Browsern unterstützt wird wirste halt die Vorgehensweise mit den divs machen MÜSSEN, wenn du es unbedingt so haben willst.

Um die Sachen zu erleichtern, warum schreibst du die ganzen divs nich in eine Datei die du dann immer wieder per PHP includen kannst? Dann gibste einmal die ganzen Divs ein und wenn dann nen Bild kommt includest du die Divs halt. Das spart viel Zeit und Arbeit.

 

[Efchen]

bei einer Tabelle lässt sich die anordnung leichter ändern, als bei einer Liste

Dann hast Du aber HTML nicht verstanden. Eine Tabelle wird nur verwendet bei tabellarischen Daten. Ein Tag aufgrund des gewünschten Aussehens zu verwenden, ist sinnfrei. HTML-Tags vergibt man aufgrund der semantischen Bedeutung, wegen nichts anderem. Wenn Du mehrere Bilder hast, dann ist das eine Liste und noch keine Tabelle. Es geht nicht darum, was dem ein oder anderen "einfacher" erscheint, sondern darum, wie es richtig ist.

 

[_Thor_]

genau, ich hab es mal ohne anführungszeichen probiert, oder indem ich die <, > und / escape

Und, hat es geklappt? In meinen kurzen Tests nicht.

dann hab ich da wohl eine falsche Auffassung von :before und :after?

Nein, ist schon richtig, :before und :after fügen den content in das jeweilige Element ein.

ich dachte das, wass man dafür einträgt wird vor bzw. hinter den INHALT des Elements geschrieben? So das also die <div> innerhalb des <td> liegt

Der content wird jedoch nicht mit in den Quellcode geschrieben und kann somit auch nicht als HTML interpretiert werden.

bei einer Tabelle lässt sich die anordnung leichter ändern, als bei einer Liste

Man wählt die Tags aber nicht nach der Bequemlichkeit oder dem Verhalten im Browser, sondern nach der Bedeutung und da ist eine Liste das richtige Element.

Ist die Seite eine Auftragsarbeit, oder warum kommt box-shadow nicht in Frage?

 

[Bernhard]

bei einer Tabelle lässt sich die anordnung leichter ändern, als bei einer Liste

Hallo Truman,

stell Dir mal vor, Du hast zwanzig Seiten, auf denen Du Bilder in der gleichen
Anordnung hast, z.B. drei Bilder nebeneinander, in vier Reihen übereinander...

Nun kommst Du eines Tages auf die Idee, dass da jeweils vier Bilder nebeneinander
in drei Reihen übereinander sein sollen...

Im einen Fall veränderst Du nur Dein Stylesheet (im Idealfall nur die Angabe für
die Breite der Liste), im anderen Fall bearbeitest Du Tabellen auf zwanzig Seiten...
- was ist einfacher?
- wo ist die Gefahr größer, dass sich irgendwo ein Fehler einschleicht?

Grüße
Bernhard

 

[TruMAn]

Ist die Seite eine Auftragsarbeit, oder warum kommt box-shadow nicht in Frage?

Ich habe das nur mal kurz ausprobiert, habe aber weder im IE noch im FF etwas davon bemerkt.

Zum Thema Liste/Tabelle:
Es wird nur eine Seite, mit einer Tabelle geben die einmal erstellt wird! Ich werde mir das ganze nochmal mit den Listen angucken!

Da ich aber nicht viel ahnung davon habe, werde ich das wohl erstmal mit der Tabelle machen (es ist zwar nicht richtig, funktioniert aber, bei Gelegenheit änder ich das dann)

 

[Efchen]

Da ich aber nicht viel ahnung davon habe, werde ich das wohl erstmal mit der Tabelle machen (es ist zwar nicht richtig, funktioniert aber, bei Gelegenheit änder ich das dann)

Wenn jeder in jeder Lebenslage so denken würde, würde man mehr 16-jährige, die noch keinen Führerschein haben, mit BobbyCars über die Autobahn fahren sehen!

SCNR (aber ohne Smiley),
-Efchen

 

[_Thor_]

Ich habe das nur mal kurz ausprobiert, habe aber weder im IE noch im FF etwas davon bemerkt.

Der IE kann es auch garnicht, FF ab Version 3.5 mit der Eigenschaft -moz-box-shadow, das steht aber in dem Artikel ziemlich am Ende und funktioniert sehr gut, ich spiele damit auch gerade etwas rum und werde es von nun ab nutzen, da es sehr viel besser ist, als mit Grafiken.