zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Bilder mit Schatten, aber nicht alle!

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 28.01.2010, 20:05
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 13.12.2009
Beiträge: 28
Berlinizer befindet sich auf einem aufstrebenden Ast
Standard Bilder mit Schatten, aber nicht alle!

Hallöchen! An meinen Threads merkt ihr schnell:was CSS betrifft bin ich totaler Anfänger. Gut, hier und da habe ich schon Erfolge erzielt, aber ich glaube, mir fehlt noch ein wenig das grundlegende Verständnis.

Zur eigentlichen Herausforderung: Ich möchte bestimmten Bildern einen Schatten verpassen. Ich könnte den Bildern natürlich mit Photoshop einen verpassen und einbauen (mühsam), aber es soll auch über ein Stylesheet viel einfacher gehen. Ich erstelle eine Seite mit dem CMS Joomla und dort sollen erstmal alle Bilder - wie in diesem Blog - einen dezenten Schatten bekommen:

CES 2010: Sony Bravia LX900 Serie mit 3D und WLAN :: TV Facts

Erstens: In welche CSS muss ich den Code optimaler Weise eingeben? Es gibt eine template.css und dort kann ich auch eine eigene erstellen. Denkbar wäre doch - da es auch nicht unbedingt alle Bilder sein sollten - eine Style.css anzulegen extra für Bilder und die Bilder dann darauf zu verweisen, oder? Wie müsste ich das anstellen? Eine "schatten.gif"-Grafi existiert auch bereits.

Wäre super, wenn mir dabei jemand weiter helfen könnte. Danke!

P.S. das ist eon Code, den ich bekommen habe, aber egal, wo ich es für logisch hielt, ihn einzubauen, zeigte er keine Wirkung:

.entry p img, .entry p a img
{
background: #fff url(images/shadow.gif) right bottom no-repeat;
border-top: #f2f2f2 1px solid;
border-left: #f2f2f2 1px solid;
padding: 4px 10px 10px 4px;
}
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 28.01.2010, 20:45
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 28.01.2005
Beiträge: 11.775
fricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz sein
Standard

Zitat:
Zitat von Berlinizer Beitrag anzeigen
Hallöchen! An meinen Threads merkt ihr schnell:was CSS betrifft bin ich totaler Anfänger. Gut, hier und da habe ich schon Erfolge erzielt, aber ich glaube, mir fehlt noch ein wenig das grundlegende Verständnis.
Hiermit kannst du das ändern:
Teil 1 kostenlos online lesen - Little Boxes - Webseiten gestalten mit HTML und CSS

Zitat:
Denkbar wäre doch - da es auch nicht unbedingt alle Bilder sein sollten - eine Style.css anzulegen extra für Bilder und die Bilder dann darauf zu verweisen, oder?
Nein, das wäre nicht möglich. Du kannst nicht "Bilder auf ein Stylesheet" verweisen.
Selektoren selektieren, welche Elemente von welchen Regeln betroffen sind. Dabei ist es relativ egal, ob das aus einem oder mehreren Stylesheets kommt.

Zitat:
P.S. das ist eon Code, den ich bekommen habe,
Woher bekommen?
Zitat:
aber egal, wo ich es für logisch hielt, ihn einzubauen, zeigte er keine Wirkung:
Dann zeig doch bitte deinen Versuch. Poste einen Link zu deinem Code.
Mit einem CSS-Schnipsel ohne Zusammenhang kann dir niemand helfen.
Lies bitte die Hinweise für Fragende.
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 28.01.2010, 22:50
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 13.12.2009
Beiträge: 28
Berlinizer befindet sich auf einem aufstrebenden Ast
Standard Bilder mit Schatten

Danke Dir schonmal dafür, das sieht sehr interessant aus, führe ich mir gleich mal zu Gemüte.!!

Woher bekommen?
Dann zeig doch bitte deinen Versuch. Poste einen Link zu deinem Code.


???wie kann ich denn ein komplettes template.css verlinken!?? dort habe ich in dem Block, der sich meinem Empfinden nach auf die Bilder im Allgemeinen bezieht, den genannten Code eingefügt:

Code:
/* Start images */
a img
{
        border: 0;
}

.art-article img, img.art-article
{
        border: solid 1px #CED1B8;
        margin: 1em;
}

.entry p img, .entry p a img
{
background: #fff url(images/shadow.gif) right bottom no-repeat;
border-top: #f2f2f2 1px solid;
border-left: #f2f2f2 1px solid;
padding: 4px 10px 10px 4px;
} 

.art-metadata-icons img
{
        border: none;
        vertical-align: middle;
        margin: 2px;
}
/* Finish images */
Ansonsten will ich hier ja nicht die gesamte template.css reinkopieren.......
Mit Zitat antworten
  #4 (permalink)  
Alt 28.01.2010, 23:03
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 28.01.2005
Beiträge: 11.775
fricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz sein
Standard

Zitat:
Zitat von Berlinizer Beitrag anzeigen
???wie kann ich denn ein komplettes template.css verlinken!??
Wie bitte?
Du sollst hier einen Link zu deiner Website einstellen. So dass wir das Problem sehen können.
CSS ohne HTML ist völlig nutzlos.

Zitat:
dort habe ich in dem Block, der sich meinem Empfinden nach auf die Bilder im Allgemeinen bezieht, den genannten Code eingefügt:
Du kannst nicht einfach irgendwelche CSS-Schnipsel von irgendwoher rumkopieren. Das Stichwort Selektoren ist ja bereits gefallen. Selektoren irgendeines Blogs selektieren auf deiner Website sehr wahrscheilich gar nichts.
Sorry, aber so hat das keinen Sinn. Arbeite bitte Little Boxes durch, damit du ein Grundverständnis für das erhältst, was du tust.
Mit Zitat antworten
  #5 (permalink)  
Alt 29.01.2010, 00:34
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 13.12.2009
Beiträge: 28
Berlinizer befindet sich auf einem aufstrebenden Ast
Standard

Ok, anbei (kennst Du fricca ja schon aus nem anderen Thread) der Link:

http://www.tierarztpraxis-sörensen.de/Joomla/
Mit Zitat antworten
  #6 (permalink)  
Alt 29.01.2010, 01:00
Benutzerbild von Thielo
Web Ninja
XHTMLforum-Kenner
 
Registriert seit: 17.09.2009
Ort: Stuttgart oder so
Beiträge: 3.372
Thielo ist ein LichtblickThielo ist ein LichtblickThielo ist ein LichtblickThielo ist ein LichtblickThielo ist ein LichtblickThielo ist ein Lichtblick
Standard

liegts vielleicht daran das in deinem image verzeichnis keine shadow.gif Grafik liegt? so mal ganz weit aus dem fenster gelehnt?!
__________________
Hier ein immer gültiges Statement: Überarbeite deine Code, lerne die Grundlagen, widersprich mir nicht, wehre dich nicht, ich habe Recht, wir sind Lolgion, wir sind viele.. potato...
All meine Angaben sind ohne Gewähr, es könnte also trotz meiner Unfehlbarkeit dazu kommen dass ich falsch liege

www.richard-thiel.de | Müssen Websiten überall gleich ausschauen?
Mit Zitat antworten
  #7 (permalink)  
Alt 29.01.2010, 07:57
Benutzerbild von hubspe
Eisen 7 ole....
XHTMLforum-Kenner
 
Registriert seit: 22.06.2007
Ort: Passau
Beiträge: 7.086
hubspe ist ein wunderbarer Anblickhubspe ist ein wunderbarer Anblickhubspe ist ein wunderbarer Anblickhubspe ist ein wunderbarer Anblickhubspe ist ein wunderbarer Anblickhubspe ist ein wunderbarer Anblickhubspe ist ein wunderbarer Anblick
Standard

Zitat:
Zitat von Berlinizer Beitrag anzeigen
Ich könnte den Bildern natürlich mit Photoshop einen verpassen und einbauen (mühsam), aber es soll auch über ein Stylesheet viel einfacher gehen.
nö, eigentlich nicht.

Mit PS ist das Minutenssache.
__________________
Ein mehrfacher Gruß aus dem Südosten
Klaus
Mit Zitat antworten
  #8 (permalink)  
Alt 29.01.2010, 08:02
EvT EvT ist offline
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 11.09.2006
Ort: Bad Wildungen
Beiträge: 2.220
EvT ist jedem bekanntEvT ist jedem bekanntEvT ist jedem bekanntEvT ist jedem bekanntEvT ist jedem bekanntEvT ist jedem bekannt
Standard

Zitat:
<link rel="stylesheet" href="http://www.xn--tierarztpraxis-srensen-9hc.de/Joomla/plugins/content/wd/wd.css" type="text/css" />
Das steht bei mir im Quelltext der verlinkten Seite (Opera 10.2).


edit: Ich bin davon ausgegangen, dass die Adresse, so wie sie da steht, falsch ist. Ist sie aber doch nicht, http://de.wikipedia.org/wiki/Interna...n_Applications. Aber warum wird sie so umgewandelt?

Geändert von EvT (29.01.2010 um 08:34 Uhr)
Mit Zitat antworten
  #9 (permalink)  
Alt 29.01.2010, 11:55
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 13.12.2009
Beiträge: 28
Berlinizer befindet sich auf einem aufstrebenden Ast
Standard

Zitat:
Zitat von Thielo Beitrag anzeigen
liegts vielleicht daran das in deinem image verzeichnis keine shadow.gif Grafik liegt? so mal ganz weit aus dem fenster gelehnt?!
Gerne, manchmal hat man ja das Einfachste übersehen, aber in dem Fall ist es nicht so. Die entsprechende Gif und der Pfad stimmen.

@ fricca: Ich bin für gute Links immer zu haben und ich lese SEHR viel und gerne. Sicher brauche ich auch mehr Grundkenntnisse. Aber ich lerne an konkreten Beispielen wie diesen am Besten. Und ich denke, Foren sind dafür da, geholfen zu bekommen und so kann nicht nur ich davon lernen. Wenn Du keine Lust hast, ist das Dein gutes Recht .... ich werde weiter mein Glück versuchen um eine Lösung für das "Problem" zu finden. Für einen Profi ist das sicher ein Kinderspiel, Bildern über CSS einen Schatten zu verpassen - ob mit dem von mir angegebenen Code oder ganz anders.

@ hupspe: für mich ist das keine Sekundensache und was über CSS geht, würde ich gerne auch darüber machen, daher der Post.

@EvT: Du hast VÖLLIG recht. Manchmal denke ich, ich werde für völlig dämlich gehalten. Je nach Browser wird die URL so umgewandelt, wie von Dir angezeigt, am Liebsten auch von InternetExplorer und der Link lässt sich dann nicht öffnen (bisher sicher nur im IE8 gelungen). Dies hat mir auch mein Hoster bestätigt, ob das nun an seinem Server, am Browser oder zu Teilen an Beiden liegt möchte ich nicht beurteilen. Selbst Google hat damit ein Problem, als ich einen API-Key mit der Umlaut-URL generieren wollte! Erst mit der "umgewandelten" URL ist es mir gelungen, kein Hinweis auf das Problem bei Google, woran es liegen könnte. Selbstversuch. Ich mache es mir SICHER nicht einfach, bevor ich hier im Forum was poste! Ist doch auch alles völlig normal. Ein Umlaut ist eben ein Sonderzeichen, wie es ihn nicht überall und vor allem im Englischen nicht gibt. URLs mit Umlauten können auch noch nicht sehr lange registriert werden. Dass noch viele Nachholbedarf in Sachen Umstellung haben finde ich da verständlich.

Geändert von Berlinizer (29.01.2010 um 11:58 Uhr)
Mit Zitat antworten
Sponsored Links
  #10 (permalink)  
Alt 29.01.2010, 12:18
Benutzerbild von Cocoon
position: relative;
XHTMLforum-Mitglied
 
Registriert seit: 12.06.2009
Ort: Berlin
Beiträge: 156
Cocoon wird schon bald berühmt werden
Standard

Zitat:
Zitat von Berlinizer Beitrag anzeigen
@ hupspe: für mich ist das keine Sekundensache und was über CSS geht, würde ich gerne auch darüber machen, daher der Post.
Du kennst die Stapelverarbeitung in Photoshop?

Wenn dir alte Browser egal sind, kannst du auch box-shadow verwenden:

Schönes neues CSS: box-shadow

Oder du liest dir diesen Artikel durch:

A List Apart: Onion Skinned Drop Shadows

Der Nachteil ist leider unsemantisches Markup durch haufenweise leere Div's. Aber du siehst, Möglichkeiten gibt es viele.
Mit Zitat antworten
Sponsored Links
Antwort

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ähnliche Themen
Thema Autor Forum Antworten Letzter Beitrag
Schatten für Bilder Flunder CSS 7 11.02.2009 21:30
bilder in div container unten anordnen diegaby CSS 12 17.11.2008 15:08
Bildergalerie mit Variablen fledermaus Serveradministration und serverseitige Scripte 1 08.04.2008 09:57
Mehrere Content-<div>s mit Schatten drum herum Deever CSS 2 06.12.2006 16:40
automatischen rahmen mit schatten um bilder newbie2004 CSS 2 20.10.2005 17:19


Alle Zeitangaben in WEZ +2. Es ist jetzt 12:48 Uhr.