Ich habe versucht mein erstes kleines Layout mit Tabellen zu erstellen, und naja ich hatte da schon meine Mühe…
Also hier mal mein „Versuch“
[CODE]
Willkommen
Navigation
Tabelle
Fightus
Joinus
News
</table>
Text
News
[/CODE]
Ich habe versucht ein Bild in den Kopfbereich einzufügen (hat auch geklappt) aber es lässt sich nicht zentral positionieren (das macht man doch mit <align=„center“> oder ?)
Also ich weiß nicht, ob ich das so richtig verstanden habe:
Die 1. Tabelle ist eine Tabelle, die über das gesamte Bild läuft.
Und die Tabellen die dann darin verschachtelt sind, sind halt die roten Leisten links und rechts. Aber wie kann ich einstellen, dass die Leisten bis zum unteren Bildrand gehen?
Und wie füge ich jetzt noch einen Footer in Form einer Tabelle ein?
Oder würdet ihr mir generell ein anderes Prinzip für die Erstellung von Layouts empfehlen?
Oder würdet ihr mir generell ein anderes Prezip für die Erstellung von Layouts empfehlen?
Ja, unbedingt:
Tabellen sind nicht mehr zeitgemäß für ein Layout. Sie blähen den Quelltext unnötig auf, erhöhen damit die Fehlerquote und werden für’s Layout auch gar nicht benötigt.
Einige HTML-Grundkenntnisse hast du ja schon offensichtlich.
Eigne dir nun auch noch etwas CSS an: Damit definierst du das Erscheinungsbild deiner Seite. Hierzu gehören z.B. Schriften, Farben, Abstände, Positionierungen, Rahmen, Hintergrundbilder oder -farben u.v.m.
Vielleicht ist das ein erster Einstieg: Friedels Homepage - Anleitungen für HTML-Autoren und mehr
Tabellen fürs Layout zu verwenden, war ein Hack aus Zeiten, in denen es noch keine Layoutsprache - also CSS - gab. Damals (und das ist schon so lange her, dass einige der heutigen Webmaster, die es trotzdem immer noch mit Tabellen versuchen, damals noch nie einen Computer benutzt haben :-)) war das die einzige Möglichkeit, ansprechende Layouts zu erzeugen.
Heute trennt man Inhalt und Layout strikt voneinander, was einem die Arbeit ungemein erleichtert und zudem noch barrierefreie Websites erzeugt, die auf wirklich jedem Browser, sogar in jedem Client (also z.B. Suchmaschinen) einwandfrei funktionieren!
HTML ist nur eine Strukturbeschreibungssprache. Mit ihr gibt man dem Inhalt eine Bedeutung. HTML ist nicht für das Aussehen in irgendeiner Weise verantwortlich. Das macht man allein über CSS.
Also ich möchte ja gerne meine eigene Clanpage designen, also ein eigenes Template erstellen.
Als Skript benutze ich ilch.de , da sind schon alle Module wie Wars, Shoutbos usw vorhanden und in der index.htm des Designs muss dann nur an den Stellen, wo der Ilch Inhalt später stehen soll, ein entsprechender Code eingefügt werden. ilch.de :: Clanscript :: Dokumentation :: Design 1.1
Ich benutze im Moment ein vorgefertigtes Design (Meine Page: pWnD Zockergemeinschaft :: News)
und viele Designs benutzen noch die Layoutvariante mit den Tabellen, deswegen habe ich jetzt nicht wirklich einen Bezugspunkt, auf den ich aufbauen könnte um das Layout ohne Tabellen hinzukriegen.
Also wenn ich das Design z.B. so wie es jetzt ist ohne Tabellen und mit CSS erstellen möchte, was muss ich machen?
Muss ich einfach nur
;
{HMENU}*
usw in die index.htm schreiben und die Bilder und Positionen in der CSS datei definieren?
(#Header {
background-image: header.jpg;
font-size: 12px;
usw…
})
Was ist HTML?
HTML ist eine Strukturbeschreibungssprache.
Was bedeutet das?
Das bedeutet, dass man zunächst seinen Inhalt hat und diesem dann mit HTML eine Bedeutung gibt. Für jede Bedeutung gibt es ein bestimmtes Tag, da wäre z.B.
für eine Überschrift erster Ordnung. Textpassagen, die wichtig sein sollen, werden mit ausgezeichnet, Adressen kann man mit auszeichnen, usw.
Wo kommt da mein Layout/Design ins Spiel?
Gar nicht, mit sowas hat HTML nichts zu tun. Das übernimmt CSS.
Und wie wende ich CSS an?
Nachdem der Inhalt mit HTML komplett ausgezeichnet ist, kann man für jedes Element mit Hilfe von CSS bestimmen, wie es aussehen soll. Zu dem Zweck gibt es eine Unmenge an Eigenschaften.
und die Bilder und Positionen in der CSS datei definieren?
Positionen definiert man nur sehr selten. Jeder Browser ordnet die Elemente der HTML-Seite automatisch sinnvoll an. Da gibt es Block-Elemente und Inline-Elemente. Man sollte wissen, wo der Unterschied ist, und wie sie sich verhalten. In der Regel reicht es, hin und wieder „float“ zu verwenden, um ein Element aus dem normalen Textfluss zu nehmen, alles andere geschieht automatisch. Das hat den Vorteil, dass die Seite in jedem Browser, mit jeder Größe und auch bei unterschiedlichen Seitenverhältnissen gleich sinnvoll angeordnet wird. Bei absoluter/pixelgenauer Positionierung kann es passieren, dass man Elemente außerhalb des Viewports stellt.
Wie kriege ich z.B. so ein Design ohne Tabellen hin? (Nur mal ein kleiner Tipp, damit ich weiß wie ich anfangen muss…)
Zuerst brauchst Du eine semantisch sinnvolle Basis aus HTML.
Ich hoffe ich habe mich nicht zu undeutlich ausgedrückt - und meine Fragen sind nicht zu … naja „idiotisch“. :roll:
Idiotische Fragen gibts nicht. Du hast lediglich noch zu sehr in Tabellen gefragt, Du bist noch zu sehr darauf fixiert, dass Du Dein Layout mit HTML machst, wie die meisten Umsteiger hast Du wahrscheinlich noch nicht verinnerlicht, wozu HTML überhaupt da ist. Das ist eine Hürde, gegen die vor Dir schon etliche andere geknallt sind. Manche knallen da viele Male dagegen, aber wer es immer wieder versucht, bei dem macht es irgendwann Klick und er springt darüber. Von da an erscheint der Weg super einfach und völlig logisch.
Ich habe jetzt versucht ein einfaches Layout mit einer Spalte links und dem Hauptbereich in der Mitte zu erstellen - aber irgendwas ist da gründlich schief gelaufen!?
Hier stehen die News Hier stehen die News Hier stehen die News
Hier stehen die News Hier stehen die News Hier stehen die News
Hier stehen die News Hier stehen die News Hier stehen die News
Hier stehen die News Hier stehen die News Hier stehen die News
Hier stehen die News Hier stehen die News Hier stehen die News
Hier stehen die News Hier stehen die News Hier stehen die News
Ich habe in der CSS Datei noch überall einen Margin eingefügt, um zu sehen, wo welcher Bereich aufhört, aber das hat irgendwie auch nicht geklappt ;ugl
Naja irgendwas ist da noch gehörig falsch gelaufen, aber ich weiß nicht was
text-size: 3em;
text-family: "Times New Roman";
margin: 1px solid black;
gibt es auch nicht, font-size, font-family gibt es und margin hast du die werte für einen border gegeben.
Hier stehen dann hoffentlich bald mal die News Hier stehen dann hoffentlich bald mal die News
Hier stehen dann hoffentlich bald mal die News Hier stehen dann hoffentlich bald mal die News
Hier stehen dann hoffentlich bald mal die News Hier stehen dann hoffentlich bald mal die News
Hier stehen dann hoffentlich bald mal die News Hier stehen dann hoffentlich bald mal die News
Hier stehen dann hoffentlich bald mal die News Hier stehen dann hoffentlich bald mal die News
Ich habe in der CSS Datei für die Links ein Hintergrundbild eingefügt (nämlich einen Button) http://www.abload.de/img/mainbutton4yt.jpg
aber diese werden nicht ganz angezeigt, sondern nur um die Schrift herum. Wie kriege ich das richtig hin?
ul#Navigation a müsste noch display: block bekommen damit es ein Blockelement wird. Nur dann kannst Du auch ein Hintergrundbild richtig hinterm Link einsetzen. Statt Breitenangaben würde ich in dem Fall übrigens padding verwenden.
Tabelle für zeilenumbrüche nicht benutzen darf?
Denn nach dem Zeilenumbruch funktionieren irgendwie keine Links mehr.
(Auf der Page habe ich nach Guestbook einen Zeilenumbruch gemacht und die Links danach funktionieren nicht mehr!?)
Also dafür, dass ich mich mit HTML und CSS erst etwa einen Monat beschäftige, bin ich mächtig stolz auf mich ;ugl;ugl
dein stolz ist verständlich, dein standvermögen muss manch einer erst mal aufbringen, hut ab.
um so mehr tut es mir leid dir da jetzt mit einer uuups-meldung dazwischen zu fahren. bilder sagen mehr als 1000 worte (ich nutze linux, genauer debian iceweasel)
Oh ich habe ganz vergessen, den Code zu überprüfen.
Naja ich habe die Fehlerzahl schonmal von 145 auf 25 gesenkt.
Anscheinend werden einige Fehler laut W3C durch die PHP Tags von Webspell verursacht - und eigentlich kann ich mir das nicht wirklich vorstellen bzw ich könnte da auch nicht viel dran ändern (keine PHP Kenntnisse).
Ein Fehler ist ja auch, dass ich in
Tabellen nicht benutzen darf, aber wie kann ich sonst einen Zeilenumbruch erreichen? Und Bilder, die öfters benutzt werden, soll ich statt dem Tag id den tag class geben. Ist das nicht eigentlich egal? Denn mit id’s funktioniert es ja auch.
Ich gehe mal davon aus, dass die Listenelemente gefloatet sind, damit sie nebeneinander stehen, dann könntest du der Liste einen Kontainer geben, der so breit ist, dass gerade 3 Elemente nebeneinander passen, dann wird automatisch ein Umbruch erzeugt, oder du nimmst für jede Zeile eine eigene Liste, was etwas unschöner ist.
Id’s sind für jede Seite eindeutig und dürfen nur einmal vorkommen, klar funktioniert es, aber für Formatierungen, die öfter verwendet werden, sind trotzdem die Klassen vorgesehen. Sonst würde es z.B. bei Ankern zu Problemen kommen, weil die sich an der Id orientieren und dann nicht wissen, welche Id gemeint ist, wenn sie öfter auf einer Seite vorkommt.
Da PHP serverseitig abläuft und beim Client, also auch beim Validator, nicht mehr zu sehen ist, kann diese Aussage so nicht stimmen. Und das W3C würde sowas sicher nicht sagen.
Ein Fehler ist ja auch, dass ich in
Tabellen nicht benutzen darf
ist ein Listenelement, keine Tabelle. Und darin darfst Du natürlich benutzen.
Generell gibt es aber Leute, die im Zuge der Trennung von Inhalt und Layout sagen, dass ausgedient hat, weil es dem Layout dient. In den meisten Fällen stimme ich auch damit überein.
aber wie kann ich sonst einen Zeilenumbruch erreichen?
Gar nicht.
Gruß,
-Efchen
P.S.: Du solltest noch eine Hintergrundfarbe setzen, wenn Du das nicht machst, wird die im Browser eingestellte Hintergrundfarbe benutzt, das ist bei mir derzeit dreckig gelb, war aber auch schonmal rosa. Ich glaub, das ist nicht in Deinem Sinne
Bei hohen und niedrigen Auflösungen die Page richtig dargestellt wird? (Wenns sein muss, auch mit Scrollleiste)
Buchstaben und Texte sich bei Vergrößerung im Browser auch richtig verhalten? (Ich glaube statt px sollte man em nehmen oder? Gibt es auch einen Umrechner von px—>em ?)
Auch sonst alles vernünftig in verschiedenen Browsers dargestellt wird?
