Hey,
ich bin noch Anfänger im Bereich HTML, CSS etc.
Auf meiner Seite will ich nun in die Kopfzeile einen Grafik einbinden. Doch keiner der Befehle, welche meiner Meinung nach richtig sind, funktionieren. Auch Google kann mir nicht wirklich helfen. Die Grafik ist bereits hochgeladen. Mein Problem ist jetzt nur, das ich nicht weiß was ich in die index.htm und ggf. in die CSS-Datei schreiben muss:(.
Ob CSS oder (X)HTML, hängt davon ab, ob das Bild nur Dekoration
ist oder für den Inhalt der Seite relevant ist.
Bei Dekoration wird man das vermutlich als CSS-Hintergrundbild
angeben, sonst verwendet man in (X)HTML bevorzugt die
Elemente img oder object. img funktioniert ganz gut bei einfachen
Pixelgraphikformaten wie PNG, JPEG, GIF. Für andere Formate
eignet sich object besser. Wenn das Bild wichtigen Inhalt
repräsentiert, eignet sich auch bei den genannten Formaten
object besser, weil es dort möglich ist, strukturierten
Alternativtext bereitzustellen oder eben auch verschiedene
Bildformate als Alternativen.
Tut mir leid, aber ich kann mri dann noch immer nicht ganz vorstellen wie der Tag lautet.
Momentan ist es eher als Dekoration gedacht. Später soll es dann größeren Nutzen haben, aber das ist momentan ja nicht ganz so wichtig.
müsste das dann so aussehn?:
b[/b]
b[/b]
[quote]
#header {
header.jpg
oder
background-image:header.jpg;[/quote]
Dekoration bedeutet also, daß das Bild keinen Inhalt, keine
Information enthält - wenn es ein Ersatz für eine Überschrift ist,
muß man das etwas anders machen, sonst z.B. wie folgt:
#header
{
width: 300px;
height: 100px;
background: url(mein/Bild.png)
}‘mein/Bild.png’ steht hier für eine relative Pfadangabe zum
Bild relativ von dem Dokument aus, wo obige Angabe drinsteht
(sofern das nicht per PHP eingebunden wurde, dann relativ zum
aufgerufenen PHP-Skript). Von merkwürdigen Dateinamen ist
abzuraten, einiges kann man da auch mit Anführungszeichen um
die Pfadangabe retten.
Alternativ kann man auch die komplette URI des Bildes angeben.
Sollte das nicht bekannt sein - externe CSS-Dokumente
referenziert man in (X)HTML mit einem link-Element innerhalb
des head-Elementes. Das style-Element befindet sich im
head-Element.
http://demo.bplaced.de/header.png
so wuerde ich es machen, css is eigentlich an dieser stelle vollkommen ueberflüssig =)
Wie oben schon beschrieben, img oder object ist gut brauchbar,
wenn das Bild inhaltlich relevant ist.
CSS ist besser, wenn es rein dekorativ ist.
Zudem ist img ein inhaltsleeres Element, so wie aufgeschrieben
wird es also nicht funktionieren. Der Wert von alt ist zudem
nicht irgendein Text, sondern Text, der dem Bildinhalt
äquivalent ist ;o)
stimmt, in xhtml müsste man schreiben
selbstverständlich, der alt tag ist der Alternativtext, ich wusste mich aber nicht besser auszudrücken. 
[quote=“KaWie”]
selbstverständlich, der alt tag ist der Alternativtext, ich wusste mich aber nicht besser auszudrücken. 
[/quote]
Der “alt” Tag ist wie du richtig gesagt hast der Alternativtext der ausgegeben wird fals der Browser die Bild Datei an dem Pfad nicht finden kann der angegeben wurde. Die Angabe des “alt” Tags bei Bild Datein ist seit XHTML eine notwendige Angabe für Validatoren.
Dieser Befehl kommt zwischen und .
In diese “Datei.css” schreibst du dann z.B.
div.header{
width: 300px;
height: 200px;
background: url('Pfad/Zur/Datei.jpg');
}width ist hier die Breite des DIV Bereiches. Sie muss nicht gleich genau so groß sein wie die Bild datei. Lässt du den Befehl allerdings so, wiederhohlt sich das Background Bild bis der gesammte DIV Bereich ausgefüllt ist. Fügst du allerdings folgenden Code hinzu, wiederhohlt sich das Hintergrund Bild nicht.
Mit den Attributen
div.header{
width: 300px;
height: 200px;
background: url('Pfad/Zur/Datei.jpg');
position: relative;
top: 10px;
left: 300px;
}
Kannst du die Position des Bildes bestimmen. In diesem Beispiel ist der DIV Bereich nun 10px vom obigen Rand der Stelle entfernt, an der du den DIV Befehl einbindest und 300 px Links von der Position entfernt an der du den DIV Befehl einbindest.
Unter kommt dann z.B.
Gruß
Raider.
