html problem

125 · Beitrag von **125** » 28.03.2005 18:04

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<font face="Comic Sans MS">
<title>My Charakter collection</title>
</head>
<body>
<body text="#FFFFFF" bgcolor="#000000" link="#00FF00">
<center>
<p><div align="center">
  <img src="http://endy.en.funpic.de/RedSpellwand-rechts" alt" width="32" height="32">
My Char collection:<img src="http://endy.en.funpic.de/RedSpellwand-links" alt" width="32" height="32"></div></p>
</center>
<br><br><br><br><br><br>
<p><div align="left">
  <img src="http://endy.en.funpic.de/Endy.PNG" alt="" width="190" height="178">

<br><br><br><br>
  <table border="0" cellpadding="0" cellspacing="0" style="border-collapse: collapse" width="100%" id="AutoNumber1">
    <tr>
      <td width="33%">
<font face="Comic Sans MS">
&nbsp;<p>&nbsp;</td>
      <td width="33%">
      <p align="center">
<font face="Comic Sans MS">
<img src="http://endy.en.funpic.de/metzbildhintergrund.png" align="center" width="168" height="154"></td>
      <td width="34%">
      <p align="center">
<font face="Comic Sans MS">
<img src="http://endy.en.funpic.de/metz.PNG" align="right" width="168" height="154"></td>
    </tr>
  </table>
<br><br><br><br><br><br>
<div align="left">
  <img src="http://endy.en.funpic.de/Xiyus.PNG" alt="" width="184" height="175">
<br><br><br><br><br><br>
<div align="right">
  <img src="http://endy.en.funpic.de/Froxus.PNG" alt="" width="154" height="154">
<br><br><br><br><br><br>
</body>
</html>

so siehts genauso aus wie er es haben wollte. Und ich finde die Lösung nicht falsch.... Will jetzt hier auch keine HTML-Glaubenskriege auslösen....

mfg
125

Rubiko · Beitrag von **Rubiko** » 28.03.2005 18:09

ui danke^^

btw: hardware forum ist mir grad aufgefallen

freedimension · Beitrag von **freedimension** » 28.03.2005 18:13

125 hat geschrieben:er wollte das Bild mit dem Text Zentriert und den Char Linksbündig wenn er nun eine 1*3 Tabelle genommen hätte ohne Border hättest so ausgesehen. Außerdem Tables werden selbst bei vielen Großwebpages dazu verwendet die Bilder in die richtige posi zu bewegen.
Und wenn HTML dies erlaubt ist es definitiv nicht falsch da der Syntax korrekt ist. Wofür man was verwendet ist dem Programmierer überlassen wenn du meinst man darf nur alles einsetzen wofürs gemacht worden ist dann ist dies dein Problem aber meine Lösung ist nicht Falsch!

Oh doch, ist sie, und wie (und nein, ich will dich damit nicht kränken oder vor den Kopf stoßen, aber für eine gute Sache lohnt es sich immer zu kämpfen, und wenn es standardkonformes Webdesign ist).

Nur weil etwas danach so aussieht wie es aussehen soll, heißt das noch lange nicht, dass es so richtig gemacht wurde. Kennst du die Werbung in welcher ein Inder sein (Schrott-)Auto mit Hilfe eines Elefanten und anderen Methoden in die Form seines Traumautos bringt? Sieht nachher fast so aus wie das Original, auf die Frage ob ich darin fahren würde müsste ich trotzdem mit Nein antworten. Ähnlich verhält es sich mit schlechtem Tabellenlayout.

Der einzige Grund, warum viele Firmen noch diese Layoutform wählen ist die Abwärtskompatibilität. Entscheider tendieren leider dazu, alles und jeden Browser berücksichtigen zu wollen anstatt aktiv an der Entwicklung des Internets mitzuwirken. Wehe hier oder dort ist ein Pixel zuviel/zuwenig. Das geht teilweise runter auf Netscape 4 und IE3. War übrigens auch damals schon falsch so mit Tabellen zu designen, nur hatte man da noch keine andere Wahl, heute allerdings schon. Das Übel ist, dass Webdesigner in den Anfangstagen aus einem Heer Printdesignern rekrutiert wurden, welche nur statische Maßeinheiten und ihre Rastersysteme im Kopf hatten und versuchten diese mit den dürftigen Mitteln umzusetzen die sie hatten. Anstatt sich an das Medium anzupassen, musste das Medium sich an die Bedürfnisse der Designer anpassen, oft mit brachialen Mitteln.

Daraus resultiert leider die Browserlandschaft wie wir sie heute haben. Microsoft hat für den IE7 immer noch keine vollständige Implementierung von CSS2.0 angekündigt. Würden sich mehr Entscheider und Designer für schönes schlankes tabellenloses Design entscheiden, so würde sich Microsoft diesen Schritt sicherlich zweimal überlegen. So ist es ja eh egal wie das implementiert ist, interessiert ja sowieso keinen. Das Nachsehen hat daher mal wieder der Designer (welcher sich zwischen Engelchen und Teufelchen auf seiner Schulter entscheiden muss) und der Benutzer (Ladezeiten, Bandbreite, schlecht zugängliches Design [man denke an die vielen behinderten Benutzer] usw.).

bluejoke · Beitrag von **bluejoke** » 28.03.2005 18:22

Nun, nur dass etwas Syntaktisch korrekt ist, heißt noch lange nicht, dass es richtig ist. Und nur weil etwas das richtige Ergebnis liefert, heißt es auch noch lange nicht, dass es der richtige Weg war. Das lernt man doch in Mathe schon ganz am Anfang.

Das W3C-Konsortium legt nun mal fest, was richtig ist und was falsch, und <table> zur Gestaltung zu nutzen ist nun mal _falsch_
Das heißt nicht, dass es nicht möglich ist. Und das heißt auch nicht, das es niemand macht, sondern das heißt einfach, das es falsch ist, und man das verhindern sollte wenn man standardkonform und auf der sicheren Seite bleiben will.

Mein Lösung ist übrigens natürlich falsch, ich hab mich verlesen und dachte, er will ein Teil das links ist, und ein Teil das rechts ist.

übrigens ist vertical-align falsch, wenn ich nicht die Frage wieder missverstehe. text-align ist auf jeden Fall die Ausrichtung auf horizontaler Ebene.

Rob · Beitrag von **Rob** » 28.03.2005 19:59

> Und ich finde die Lösung nicht falsch....

Ist sie aber. Der W3C Validator meldet allein 25 Fehler.
Du schließt keine Tags, machst Attributsalat (was heisst alt" ?) und bringst so ziemlich jeden Browser zur Verzweiflung

> Will jetzt hier auch keine HTML-Glaubenskriege auslösen....

Da muss man nix glauben, falsch ist falsch.

freedimension hat ja schon viel dazu geschrieben.
Code wie diesen hat man im letzten Jahrhundert geschrieben. Jetzt sind die großen Browser alle soweit, dass man sich an die Webstandards halten und somit aufgeräumte, zugängliche und gut wartbare Seiten schreiben kann.
Stichwort XHTML+CSS.

Deine kleine Seite von oben sieht mit XHTML und CSS so aus:

Code: Alles auswählen

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="de">

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
  <title>My Charakter collection</title>
	<style type="text/css">
  <!--
      body {color: white; background: black; font-family: "Comic Sans MS";}
		a {color: #00ff00;}
		h1 {text-align: center; font-size: 16px; font-weight: normal; margin-bottom: 100px; }
		#beschreibung {margin: 50px 0 0 168px; text-align: center; font-size: 22px; font-weight: bold;}
		img.right {float: right;margin-top: 50px;}
		img.blockright {float: right; display: block; margin-top: 150px;}
		img.blockleft  {display: block; margin-top: 150px;}
  -->
  </style>		 
</head> 
<body> 

<h1>
  <img src="http://endy.en.funpic.de/RedSpellwand-rechts" alt="Stab" width="32" height="32" /> 
  My Char collection:
  <img src="http://endy.en.funpic.de/RedSpellwand-links" alt="Stab" width="32" height="32" /> 
</h1>

<img src="http://endy.en.funpic.de/Endy.PNG" alt="Endymion" width="190" height="178" />

<img class="right" src="http://endy.en.funpic.de/metz.PNG" alt="Metzger" align="right" width="168" height="154" />
<div id="beschreibung"> 
  Der<br />
  Metzgermeister<br />
  <br />
  Master<br />
  Sorcerer
</div>

<img class="blockleft" src="http://endy.en.funpic.de/Xiyus.PNG" alt="Xyius" width="184" height="175" />
<img class="blockright" src="http://endy.en.funpic.de/Froxus.PNG" alt="Froxus" width="154" height="154" /> 

</body> 
</html>

- Sieht genauso aus
- Läd schneller, da "Der Metzgermeister / Master Sorcerer" nun Text ist (warum war das überhaupt ein Bild?)
- Validiert, wird also von allen Browsern richtig angezeigt, die sich an den Standard halten.
- Design und Inhalt sind getrennt. Alles, was das aussehen betrifft, kannst du bequem im Stylesheet ändern.

Ich empfehle die Lektüre von Designing with Web Standards von Jeffrey Zeldman und Cascading Stylesheets von Eric A. Meyer.

125 · Beitrag von **125** » 28.03.2005 20:01

ich hab den Code so übernommen wie er war und nur die Table eingesetzt.....

Rob · Beitrag von **Rob** » 28.03.2005 20:05

Achso, dann hat Rubiko halt falschen Code geschrieben. Shame on you

Rubiko · Beitrag von **Rubiko** » 28.03.2005 20:28

kann mal passieren...
aber dann muss ich mich wohl ans werk machen, denn die lösung von rob scheint wirklich besser zu sein....

freedimension · Beitrag von **freedimension** » 28.03.2005 21:12

Ich hoffe, es ist mir gestattet diesen Thread einmal zu entführen

Ich denke, dies ist ein schönes Beispiel dafür, wie ein Thread sich positiv entwickeln kann. Es wurde eine Frage gestellt, diese wurde "teils" falsch beantwortet, es wurde sachlich und fair korrigiert und der "Falschbeantworter" hat sich einsichtlich gezeigt und sogar angekündigt mehr über die richtige Lösung erfahren zu wollen. Letzten Endes hat nicht nur der Fragesteller etwas gelernt, sondern auch der "Falschbeantworter". Also ist auch dieser mit mehr aus diesem Thread herausgegangen als er hereingekommen ist. Warum? Einfach weil er nicht schnippisch oder gar beleidigt reagiert hat.

bluejoke · Beitrag von **bluejoke** » 28.03.2005 21:25

Das ist ja schön. Wäre mir gar nicht aufgefallen.
Man könnte glatt einen Link hierdrauf setzen, als Beispiel wie ein Thread verlaufen soll.