• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Tabelle für Layout benutzen

Status
Für weitere Antworten geschlossen.
V

VirusX

Neues Mitglied
HiHo,

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: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title></title>
<meta name="author" content="Marco">
<meta name="editor" content="html-editor phase 5">
</head>
<body text="#000000" bgcolor="#FFFFFF" link="#FF0000" alink="#FF0000" vlink="#FF0000">
<table border="0" cellspacing="0" cellpadding="0" width="100%" style="background-color:#e45a71">
 <tr>
  <td>
         <table border="0" cellspacing="0" cellpadding="10">
          <tr>
           <td><h1>Willkommen</h1>
           </td>
          </tr>
         </table>
  </td>
 </tr>
 <tr>
  <td width="200" valign="top">
         <table border="0" cellspacing="0" cellpadding="10">
          <tr>
           <td>
           <h3>Navigation</h3>
           <p>Tabelle</p>
           <p>Fightus</p>
           <p>Joinus</p>
           <h2>News</h2>
          </td>
          </tr>
         </table>
  </td>
  <td valign="top" bgcolor="#FFFFFF" >
         <table border="0" cellspacing="0" cellpadding="10">
                 <tr>
                         <td>
                                 <p>Text</p>
                         </td>
                 </tr>

         </table>
  </td>
   <td width="200">
   <table border="0" cellspacing="0" cellpadding="10" style="background-color:#e45a71">
         <tr>
                 <td>
                         <h4>News</h4>
                 </td>
         </tr>
   </table>
   </td>
 </tr>




</table>
</body>
</html>

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?

Jo danke schonmal :D
 
Zuletzt bearbeitet:
Oder würdet ihr mir generell ein anderes Prezip für die Erstellung von Layouts empfehlen?
Zum Vergrößern anklicken....
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
 
prm schrieb:
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
Zum Vergrößern anklicken....

Ok dann weiß ich schonmal in welche Richtung ich mich orientieren muss :D

CSS ist ja nicht wirklich kompliziert ;)
 
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.

Hilfe zur Selbsthilfe kriegst Du hier!

Grüße,
-Efchen
 
HiHo,

Ich hätte noch mal einige Fragen 8-)

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 <div id="Header"></div> ; <div id="hmenu">{HMENU}*</div> 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...
})

(* = Code für den Ilch-inhalt)

So sieht die index.htm des Standartdesigns aus:

(Habe die Codes bei nopaste.com hochgeladen)

nopaste.com (beta)

Und so die style.css:

nopaste.com (beta)

Wie kriege ich z.B. so ein Design ohne Tabellen hin? (Nur mal ein kleiner Tipp, damit ich weiß wie ich anfangen muss...)

Ich hoffe ich habe mich nicht zu undeutlich ausgedrückt - und meine Fragen sind nicht zu ... naja "idiotisch". :roll:
 
Zuletzt bearbeitet:
VirusX schrieb:
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 <div id="Header"></div> ; <div id="hmenu">{HMENU}*</div> usw in die index.htm schreiben
Zum Vergrößern anklicken....
Nein, anstelle von <table> <div> zu benutzen, ist genauso sinnfrei.

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. <h1> für eine Überschrift erster Ordnung. Textpassagen, die wichtig sein sollen, werden mit <em> ausgezeichnet, Adressen kann man mit <address> 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?
Zum Vergrößern anklicken....
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...)
Zum Vergrößern anklicken....
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:
Zum Vergrößern anklicken....
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.

Viel Erfolg dabei,
-Efchen
 
Ich denke mal den "Klick" hat es schon gemacht.

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!?

Also hier erstmal die Codes:

Code: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="style.css" />
<meta name="author" content="Marco">
<meta name="editor" content="html-editor phase 5">
</head>
<body>
<div id="Seite">
     <h1>pWnD Clanpage</h1>
          <ul id="Navigation">
               <li><a href="http://www.pwnd.de.tf">Home</a></li>
               <li><a href="http://www.pwnd.de.tf">Kalender</a></li>
               <li><a href="http://www.pwnd.de.tf">Joinus</a></li>
               <li><a href="http://www.pwnd.de.tf">Fightus</a></li>
          </ul>
     <div id="Content">
          <h2>News</h2>
               <p>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
               </p>
               <p>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
               </p>

          <p id="Footer">Fußleiste</p>
          </div>
</div>
</body>
</html>

und

Code: 
body {
          color: black;
          background-color: white;
          font-family: Arial; san-serif;
          font-size: 100.01%;
}

div#Seite {
          text-align: left;
          margin: 0 auto;
          width: 1000px;
          padding: 0;
          border: 1px inline silver;
}

h1 {
          text-align: center;
          font-size: 3em;
          font-family: "Times New Roman";
          padding: 1em;
          margin: 1px solid black;
}

ul#Navigation {
          float: left; width: 20em;
          list-style: none;
          padding: 1em;
          margin: 1px solid black;
}

ul#Navigation a {
          background-image: url("../../mainbutton.jpg");
          color: white;
          text-align: center;
          font-size: 10px;
          margin: 1px solid black;
}

ul#Navigation a:hover {
          background-image: url("../../mainbutton-over.jpg");
          color: grey;
          text-align: center;
          font-size: 10px;
}

div#Content {
     margin: 1em 1em 1em 1em ;
     padding: 1em 1em 1em 1em;
}

div#Content h2 {
          font-size: 1.5em;
          text-align: center;
}

div#Content p {
          font-size: 0.8em;
          text-align: left;
          margin: 0;
          padding: 1em;
}

p#Footer {
          clear: both;
          font-size: 0.8em;
}

Und so sieht das im Moment aus:



Ich habe auch schon einen Button erstellt, der sieht normal so aus aber auf der Seite werden die Buttons extrem verkleinert. :(

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 :(
 
Zuletzt bearbeitet:
Zwischen den verschiedenen Schriftarten darf kein Semikolon stehen, da muss ein Komma hin und die Schriftart heißt sans-serif

Code: 
border: 1px inline silver;
inline ist kein gültiger Wert für den Rahmen. Hier findest du fast alles über Rahmen Rahmen: Übersicht: CSS-Referenz auf CSS 4 You - The Finest in Stylesheets

Code: 
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.
 
So ich hab alles nochmal komplett neu erstellt und ich bin mit den Positionen der Boxen schon (fast) zufrieden:

Code: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title></title>
<meta name="author" content="Marco">
<meta name="editor" content="html-editor phase 5">
<link rel="stylesheet" type="text/css" href="style2.css" />
</head>
<body>
<h1>--Versuch Nummer 2--</h1>
     <ul id="Navigation">
          <li><a href="http://www.blabla.de">News</a></li>
          <li><a href="http://www.blabla.de">Kalender</a></li>
          <li><a href="http://www.blabla.de">Wars</a></li>
          <li><a href="http://www.blabla.de">Joinus</a></li>
          <li><a href="http://www.blabla.de">Fightus</a></li>
          <li><a href="http://www.blabla.de">Imprint</a></li>
     </ul>
<div id="Content">
     <h2>News</h2>
     <p>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</p>
</div>
</body>
</html>

und

Code: 
body {
          color: black;
          background-color: #80FFFF;
          font-family: Arial, sans-serif;
          margin: 0;
          padding: 0.5em;
    }

h1 {
          font-size: 3em;
          text-align: center;
          border: 2px dashed black;
   }

ul#Navigation {
          float: left;
          padding: 0;
          margin: 0;
   }

ul#Navigation li {
          list-style: none;
          margin: 0;
          padding: 0.5em;
    }

ul#Navigation a {
          background-image: url("../mainbutton.jpg");
   }

ul#Navigation a:hover {
          background-image: url("../mainbutton-over.jpg");
          font-weight: bold;
   }

div#Content {
          padding: 1em;
    }

div#Content h2 {
          font-size: 1.5em;
          text-align: center;
}

div#Inhalt p {
          font-size: 1em;
          clear: both;
}

so siehts aus



1 Problem hab ich noch:

Ich habe in der CSS Datei für die Links ein Hintergrundbild eingefügt (nämlich einen Button)

aber diese werden nicht ganz angezeigt, sondern nur um die Schrift herum. Wie kriege ich das richtig hin?
 
Zuletzt bearbeitet:
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.
 
SOO ich hab jetzt meinen ersten Designentwurf programmiert und an Webspell angepasst (naja schon ein bisschen ;))

Also hier könnt ihr sie sehen:

webSPELL v4.0

Jetzt hätte ich noch eine Frage:

Kann es sein, dass man <br /> in einer <li></li> 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)
 

Anhänge

  • css_seite.jpg
    css_seite.jpg
    93,9 KB · Aufrufe: 12
Mhm bei mir mit Vista und Opera siehts so aus:



Anscheinend ist der Code noch nicht ganz passend für andere Browser...
 
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 <li> Tabellen nicht <br /> 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.
 
VirusX schrieb:
Anscheinend werden einige Fehler laut W3C durch die PHP Tags von Webspell verursacht
Zum Vergrößern anklicken....
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 <li> Tabellen nicht <br /> benutzen darf
Zum Vergrößern anklicken....
1. <li> ist ein Listenelement, keine Tabelle. Und darin darfst Du natürlich <br /> benutzen.
Generell gibt es aber Leute, die im Zuge der Trennung von Inhalt und Layout sagen, dass <br /> 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?
Zum Vergrößern anklicken....
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 :-)
 
Noch ne Frage:

Wie wird die Homepage jetzt so flexibel, dass:

1. Bei hohen und niedrigen Auflösungen die Page richtig dargestellt wird? (Wenns sein muss, auch mit Scrollleiste)

2. 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 ?)

3. Auch sonst alles vernünftig in verschiedenen Browsers dargestellt wird?
 
Status
Für weitere Antworten geschlossen.

Neueste Beiträge

Zurück
Oben