balthier9999
Bekanntes Gesicht
- Mitglied seit
- 26.02.2007
- Beiträge
- 7.598
- Reaktionspunkte
- 0
FAQ
Dieser Blog beantwortet die meisten Fragen bezüglich des HTML-Profils und anderen Problemen. Wer generell ein Tutorial braucht, der schaut sich diesen Blog an.
Hinweis: Die meisten Fragen beziehen sich auf die Verwendung des HTML-Editors. Beim Standard-Editor bleiben alle Möglichkeiten auf die verfügbaren BB-Codes begrenzt.
[/quote]
Inhalt:
1. Wie erstelle ich ein Hintergrundbild?
2. Wie bekomme ich Bilder auf mein Profil/ins Forum?
3. Warum werden meine Links in falscher Größe/Farbe dargestellt?
4. Wie breit ist ein Profil?
5. Wie erzeuge ich Links, die die User per Klick in andere Bereiche des Profils navigieren?
6. Wie vermeide ich es, dass der Text an den Rand aneckt?[/SIZE]
[/quote]
1. Wie erstelle ich ein Hintergrundbild?
Zunächst brauchst du ein Bild, welches bei einem Hoster hochgeladen werden muss. Wenn du nicht weißt, wie das geht, schau dir Frage 2 an. Die Grafikadresse kopierst du schließlich. Dann baust du folgendes um dein Profil:
Profilinhalt
Oben ersetzt du grafikadresse.jpg durch die Grafikadresse deines hochgeladenen Bilds. Die Klammern bleiben! Achte darauf, dass die Dateiendung vorhanden ist! Erlaubt sind .gif, .jpg und .png. Wie das Wort Profilinhalt vermuten lässt, gehört an diese Stelle dein bisheriges Profil. Heißt also, dass du den oberen Teil des Codes ganz oben in dein Profil kopierst und den unteren an das Ende. Dadurch umhüllst du dein Profil mit einem -Container, dem du verschiedene Eigenschaften zuweisen kannst ? in diesem Fall ist es eben das Hintergrundbild.
Neben den Klammern, in denen die Grafikadresse steht, findest du noch weiteren Code. Dieser beeinflusst das Verhalten und die Position des Hintergrundbilds.
> no-repeat bewirkt, dass das Bild nur einmal im Hintergrund vorkommt. Ersetze no-repeat durch repeat und dein Hintergrundbild wird gekachelt, also wiederholt.
> scroll bewirkt, dass dein Bild mit dem Scrollen ebenfalls mitscrollt. Das Gegenstück ist fixed. Hier würde das Hintergrundbild stehen bleiben beim Scrollen.
> left top bestimmt die Position, in diesem Fall links oben. Der erste Wert gibt die Horizontale an und hat die Variablen: left, right, center. Der zweite Wert steht für die Vertikale, die Variablen sind: top, center, bottom. Alternativ zu den Wörtern kann man auch Zahlen angeben. 40px 0px beispielsweise würde das Bild 40 Pixel vom linken Rand positionieren, während es oben um null Pixel verschoben ist, also im Prinzip die Wirkung von top hat.
Die Angaben können frei geändert werden. Hier ein Beispiel für ein Hintergrundbild mit feststehenden, gekachelten Hintergrund, der auf beiden Achsen mittig platziert ist:
Übrigens: Soll der Hintergrund einfarbig sein, brauchst du nur folgenden Code zu benutzen:
Anstelle des #000000, welches hier für die Farbe Schwarz steht, gibst du deine gewünschte Farbe an. Dies erfolgt entweder über einen Farbnamen oder über eine Hexa-Zahl (hier gibt es eine praktische Seite).
2. Wie bekomme ich Bilder auf mein Profil/ins Forum?
Dazu benötigst du einen Bilderhoster. Bilder müssen erst im Web gespeichert werden, damit andere sie sehen können. Beim Upload bekommt dein Bild eine Adresse, die du brauchst, um es in dein Profil oder ins Forum zu verlinken.
Hier sind ein paar Bildhoster: ImageShack, Imagehost, Image Hosting?
Lade auf einer dieser Seiten dein Bild hoch (i.d.R. Durchsuchen ? Datei finden ? Upload). Nach dem Upload folgt meistens ein neues Fenster mit diversen Links. Du brauchst für dein Profil einen Direktlink. Diesen erkennst du an der Dateiendung. Beispielsweise image_001.jpg. Wenn dieses Anhängsel (oder .gif bzw. .png) am Ende des Links zu finden ist, kopierst du den Link. Für gewöhnlich heißen diese Links bei den Bildhostern Direktlinks.
Der Link ist die Grafikadresse, die du nun einbinden kannst. Wie du das machst, ist deine Sache. Du kannst das Bild in den Hintergrund deines Profils einbauen (siehe Frage 1), oder du benutzt es als normales Bild ( siehe HTML-Tutorial). Im Forum gibt es einen Image-Button, wo du die Adresse einfügen kannst, um das Bild in einem Post zu verwenden.
Möchtest du ein Bild von GamesAktuell.de verwenden, kannst du dir den Umweg über den Hoster ersparen. Rechtsklicke einfach auf das entsprechende Bild und wähle »Grafikadresse kopieren« (Windows Firefox). Nun hast du die Adresse des Bilds im Zwischenspeicher und kannst sie nach Belieben überall einfügen. Vorsicht mit Adressen von Hintergrundbildern: Die lassen sich nicht so einfach kopieren. Die Galerien auf GamesAktuell.de bestehen beispielsweise aus Hintergrundbildern. An die zu kommen, ist schwieriger: Wähle im Menü: Extras ? Seiteninformationen ? Medien (Windows Firefox). Hier findest du sämtliche Bilder der angezeigten Seite. Mit einem Klick auf den »Speichern unter«-Button kannst du sie downloaden.
Hinweis: Bilder nur in .gif, .jpg oder .png-Format erlaubt!
3. Warum werden meine Links in falscher Größe/Farbe dargestellt?
GamesAktuell.de benutzt für die Links eigene Styles. Diese Styles kann man nur aushebeln, wenn man selbst Styles verwendet. Proprietäre -Tags haben keine Wirkung und sollten sowieso gemieden werden. Folgender Code ändert die Farbe des Links in Schwarz, macht den Text 12px groß, definiert als Schriftart die Arial und beseitigt den Unterstrich:
Hier klicken!
Nun eine genaue Beschreibung des Codes:
color: manipuliert die Farbe des Textes. Als Farbangabe benutzt man entweder einen Farbnamen oder die Hexa-Zahlangabe (hier gibt es eine praktische Seite). Bei letzterem nicht das # vergessen!
font-family: bestimmt die Schriftfamilie, also die Schriftart. Beachte, dass du nur Schriften benutzen solltest, die auf den meisten Rechnern installiert sind! Das sind im Regelfall nur: Arial, Georgia, Times New Roman, Trebuchet MS, Verdana, Tahoma, Segoe UI, Impact, Courier New. Da aber nicht gesichert ist, dass diese Schriften auf dem Rechner eines Users installiert sind, muss man Alternativen angeben. Als erstes gibt man die Schrift an, die immer angezeigt werden soll. Danach folgt ein einfaches Komma, wonach man eine Schrift angibt, die angezeigt werden soll, falls die erste Schrift NICHT auf dem Rechner des Users vorhanden ist.
Im Beispiel verzichte ich aber darauf und schreibe stattdessen sans-serif. Dieser Ausdruck bedeutet, dass der Browser automatisch eine Schrift aussucht, die keine Serifen hat, also keine Füsschen. Soll er eine Schrift aussuchen, die Serifen besitzt, wählt man serif. Möchte man eine Schreibmaschinenschrift wie die Courier New gibt man monospace an.
In der Regel sind die oben genannten Schriftarten aber immer vorhanden, die Zweitangabe dient nur der Sicherheit.
font-size: Damit gibst du die Schriftgröße an. Die Größe sollte in Pixel angegeben werden. 12px sind generell Standard.
text-decoration: beseitigt die Unterlinie bei Links. Dies geschieht durch die Angabe none.
Hinter allen Angaben kommt ein ; Semikolon. Beachtet beim Schreiben, dass ihr alles korrekt angebt! Das Schema für Styles lautet:
style:variable; style:variable;
Im Quellcode sieht es so aus:
Die Styles müssen bei jeden Link erneut angegeben werden! Weitere Styles findest du hier.
4. Wie breit ist ein Profil?
Exakt 671 Pixel.
5. Wie erzeuge ich Links, die die User per Klick in andere Bereiche des Profils navigieren?
Solche Links nennt man Ankerlinks. Dazu braucht man einmal einen normalen Link, und schließlich einen Anker, der an die Position gestellt werden muss, zu der der Link führen soll.
Der Anker sieht so aus:
Im Feld für name kommt ein von dir ausgewählter Name rein. Keine Sonderzeichen! Auf Groß- und Kleinschreibung achten! Namen dürfen sich nicht wiederholen!
Den Namen fügst du nun im Link statt einer Adresse ein, und ergänzt ihn um eine # Raute. So sieht es für das Beispiel aus:
Zum Anker
6. Wie vermeide ich es, dass der Text an den Rand aneckt?
Dies erreichst du durch die Style-Eigenschaft Padding. Beachte jedoch, dass dies die Breite eines Objekts ändert. Falls du also Objekte mit z.B. width-Angaben hast, musst du diese Angaben um die Padding-Größe x 2 verringern. Hört sich kompliziert an, ist es aber nicht.^^
Diejenigen, die keine Breiten- oder Höhenangaben einstellen, haben es einfacher:
Euer Text sollte, wenn ihr korrekt gearbeitet habt, in einem liegen.
Diesem geben wir einen Style:
Text
Der Code erzeugt einen 10 Pixel breiten, unsichtbaren Rahmen. Somit wäre das Problem des Aneckens einfach gelöst. Die 10 Pixel können natürlich variiert werden. Es ist auch möglich, den Rahmen nur auf eine Seite zu beschränken. So sieht das für die linke Seite aus:
Text
Jetzt hast du nur links den Rahmen. Für die rechte Seite benutzt du statt -left das -right. Für oben -top und für unten -bottom. Du kannst alle Seiten verschieden definieren:
Text
Übrigens: Das -Element hat ohne dein Zutun automatisch ein Padding! Dieses kannst du aber einfach beseitigen, indem du mit denselben Code von oben statt 10px einfach 0px angibst. Empfehlenswert für alle Elemente! (CSS-Reset nennt man das)
Ums abzurunden: margin:0px; beseitigt zusätzlich Außenabstände. Weiteres dazu findest du hier.
Du hast noch Fragen? Dann wende dich an mich! Oder besuche das Webdesign-Forum!
