Text an beliebiger stelle positionieren

Mr.Tom1976 · 14 Januar 2012

Hallo Leute. Gerade mal zwei Tage im Forum und schon die zweite Frage :-/

Ich möchte gerne einen Text in den Editor (Phase 5) eingeben. Dieser Text soll
aber an einer von mir gewählten Position erscheinen. Habe schon bei selfhtml geschaut und
mich auch versucht mich hier im Forum mal schlau zu machen. Aber leider ohne Erfolg.
Ich habe das Thema mal hier ins html Forum gesetzt, da ich hoffe dass es ohne CSS geht.

mein Quellcode sieht so aus:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Testseite1</title>
<meta name="description" content="testseite 1 mit zusatzbutton">
<meta name="author" content="xarxas">
<meta name="editor" content="html-editor phase 5">
</head>
<body background="hintergrund.gif" text="#000000" link="#ff0000" alink="#660000" vlink="#00ff00"> 
 
 
 

<center><img src="bg.gif" /></center>
<a href="http://www.google.de"><img style="border-style:none;" src="zusatzbutton.gif"></a> 
</body>
</html>

geht das evtl. mit dem Befehl ?

LG

Tom

Wustersoss · 14 Januar 2012

Schauen wir uns mal deinen Code im Details an:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
Das ist die Dokumententypdefinition.
Ich empfehle wie das W3C hier auf HTML5 zu wechseln, zu <!doctype html>

<html>
<head>
<title>Testseite1</title>
Der Titel ist notwendig. Ein Zeichensatz fehlt an dieser Stelle. <meta charset=UTF-8> kommt gleich nach dem <head>.

<meta name="description" content="testseite 1 mit zusatzbutton">
Kann auch weggelassen werden.

<meta name="author" content="xarxas">
Keine Bedeutung und kann weggelassen werden.

<meta name="editor" content="html-editor phase 5">
Keine Bedeutung und kann weggelassen werden.

</head>
Beendet den Kopfbereich, notwendig. Verweiss auf das Stylesheet fehlt im Head-Teil.

<body background="hintergrund.gif" text="#000000" link="#ff0000" alink="#660000" vlink="#00ff00"> 
Der sichtbare Bereich beginnt mit dem Body-Element. Die nachfolgenden Attribute snid aus der Steinzeit und haben da nichts verloren.
Der Kommentar sagt schon was es ist, nämlich ein Designmerkmal und somit gehört es ins CSS.

 
 
 
Br-Elemente sollen Zeilenumbrüche hervorrufen wenn nichts anderes geht. Hier gibt es keinen Text der umgebrochen werden müsste, also sind sie überflüssig wie ein Kropf.

<center><img src="bg.gif" /></center>
Noch ein Relikt aus der Kreidezeit, das Center-Element. Es ist mittlerweile verboten, da es die Positon und damit das Aussehen beeinflusst. Das muss seit Jahren schon mit CSS gemacht werden.
Das Bild deutet auf ein Hintergrundbild hin, gehört somit ins CSS.


< a href="http://www.google.de"><img style="border-style:none;" src="zusatzbutton.gif"></a>

Das ergibt in seiner Gesamtheit keinen Sinn. Span ist ein Inline-Element. Dem Img-Element fehlt das Alt-Attribut. Du kannst das a-Element direkt verwenden ohne Span drumherum und die Angaben im CSS festlegen und zwar nicht als Inlinestyles sondern in einer extra CSS-Datei. Dann hast du eine Datei die für alle deine Seiten deiner Webpräsenz Gültigkeit hat. Du hast dann nur eine Stelle für Änderungen und musst nicht zig Webseiten ändern, nur weil du die Schrift anders ahben willst.

</body>
</html>
Die schliessenden Tags am Ende sind hier wohl das Einzige was du richtig gemacht hast.

Fazit: Beschäftige dich ausgiebig mit CSS und den HTML-Elementen.

Man fängt überdies mit einer Idee an, mit einer Vision. Das heisst, dass du eine Vorstellung davon haben musst wie deine Seite in etwas auszusehen hat. Wo du Elemente wie Texte, Überschriften, Bilder, Navigation, etc. plazierst. Du musst dir auch Gedanken machen, wie sich deine Seite bei unterschiedlich grossen Viewports verhält. Ein Smartphone ist halt nicht mit einem 22 Zoll Monitor vergleichbar.
Das kannst du alles erst mal grob auf einem Blatt Papier skizzieren, mit Abstandsangeben und so fort.
Wenn du dann weisst, was du willst, suchst du im Internet nach dem passenden Layout, es ist nämlich alles schon hundertfach(oder waren es tausendfach) erstellt worden.
Zum Beispiel hier: The Left Menu 2 column Liquid Layout. Pixel widths. Cross-Browser. Equal Height Columns.

Danach, also wenn du dein Layout hast, dann passt du es an und fügst eine Navigation hinzu und veränderst das CSS nach deinen Vorstellungen.

Text an beliebiger stelle positionieren

Mr.Tom1976

Neues Mitglied

Wustersoss

Guest

Neueste Beiträge