HTML ? FAQ

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!
 

Gamemaster1883

Bekanntes Gesicht
Mitglied seit
14.03.2008
Beiträge
3.971
Reaktionspunkte
453
Website
www.gamesaktuell.de
Ganz,ganz grosse Leistung von dir kann ich dazu nur sagen.Das hilft ungemein.

Da gibt es 5 Sterne ohne mit der Wimper zu zucken und wenn es gehen würde,würde ich sogar noch einen sechsten Stern geben.

Danke dir.
 

mayaku

Bekanntes Gesicht
Mitglied seit
22.03.2008
Beiträge
553
Reaktionspunkte
0
Sehr hilfreich und auch noch sehr übersichtlich geschrieben :D

*Schmeißt mit Sternen nach Dir* *+*+*+*+....::..::..

Muss ich das jetzt aber echt mit diesem -Kram machen, wenn ich will, dass mein Hintergrund weiß wird? bgcolor="#FFFFFF" im body geht hier nicht.
 
TE
balthier9999

balthier9999

Bekanntes Gesicht
Mitglied seit
26.02.2007
Beiträge
7.598
Reaktionspunkte
0
Vorsicht, ohne Entitäten wird HTML-Code im Community-Bereich nicht dargestellt ? in den Kommentaren sind noch nicht mal Entitäten erlaubt, deswegen benutze ich mal franz. Guillemets. Schau dir deinen Kommentar an, da fehlt was, nicht? Aber ich weiß schon, was du meinst.

Ja, du musst immer ein DIV für das Hintergrundbild verwenden. Möchtest du nur Hintergrundfarbe ändern, geht das noch einfacher:

?div style="background:#FFFFFF;"? Profilinhalt ?/div?

Statt #FFFFFF kommt eine Farbe deiner Wahl rein.
Das BODY wird beim Upload gelöscht. Was auch logisch ist, denn dein Profil befindet sich ja bereits im BODY von Cynamite.

Und danke für die Lobe :D
 

Sanchez85

Bekanntes Gesicht
Mitglied seit
15.01.2009
Beiträge
3.606
Reaktionspunkte
53
Da ich ja auch gerade dabei bin mein profil zu bearbeiten kommt mir der Blog sehr gelegen. So hab ich das wichtigste auf einen Blick.
5 Sterne von mir dafür.
 

d.night

Bekanntes Gesicht
Mitglied seit
09.11.2008
Beiträge
11.928
Reaktionspunkte
77
Copy and Past Blogkommie:

Superblogs und ich hab sie echt auch gelesen nur ich hab im Moment keinen Bock auf Blogkommies. Bei euch zwei muss ich aber trotzdem zumindest sagen: Geile Blogs (wie immer), habs gelesen, 5 Sterne.

LOL, erst jetzt merk ichs Paste, net Past...sorry.^^
 
Oben Unten