nicht angemeldet johny7
Felix Riesterer
Felix Riesterer
Felix Riesterer
Felix Riesterer
Patrick Andrieu
Felix Riesterer
Hallo, ich versuche ein Suchfeld in meine Seite zu implementieren.
Allerdings verzieht es mir das Design und ich weiß nicht, was ich falsch gemacht habe.
http://www.sediar.de/test/suchemich.html
Quelltext:
<html>
<head>
<title>Unbenannt-1</title>
<style type="text/css">
<!--
.feld{width:152px; height:23px}
#Tabelle_01 img {
}
-->
</style>
</head>
<body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<table width="188" height="81" border="0" align="center" cellpadding="0" cellspacing="0" id="Tabelle_01">
<tr>
<td colspan="3" valign="top">
<img src="Bilder/suchemich_01.jpg" alt="" width="188" height="24" align="top"></td>
</tr>
<tr>
<td rowspan="2" valign="top">
<img src="Bilder/suchemich_02.jpg" alt="" width="18" height="57" align="top"></td>
<td width="152" height="48" valign="top"><form name="Suche" method="post" action="planetsearch.php">
<input type="text" name="textfield" class="feld" align="top"><br>
<input type="image" src="Bilder/suchmich_05.jpg" alt="Absenden" align="top">
</form>
</td>
<td rowspan="2" valign="top">
<img src="Bilder/suchemich_04.jpg" alt="" width="18" height="57" align="middle"></td>
</tr>
<tr>
<td valign="top">
<img src="Bilder/suchemich_05.jpg" alt="" width="152" height="9" vspace="0" align="top"></td>
</tr>
</table>
<!-- End ImageReady Slices -->
</body>
</html>
Wäre für Hilfe dankbar.
Liebe Grüße
Moin allerseits,
da scheint irgend etwas nicht ganz zu stimmen. Analysier doch einmal dein Script mit FireBug. Auf deiner Website hast du irgendwo die Höhe 47 o.ä. angegeben.
Mein Tipp: Lass die Atributte weg und mach den Style mit CSS. Den Rest kannst du dann noch manuel bestimmen. Und bei deinem Beispiel würde ich alle paddings und margins weglassen.
Gruß, JN
Liebe(r) Unterwegs,
<body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<table width="188" height="81" border="0" align="center" cellpadding="0" cellspacing="0" id="Tabelle_01">
gibt es auf Deiner Seite ausschließlich tabellarische Daten, sodass Du nur diese Tabelle (ohne Überschrift und erklärenden Textabsatz) auf Deiner Seite hast?
<http://de.selfhtml.org/css/layouts/einfuehrung.htm@title=Einführung in CSS-basierte Layouts>
Liebe Grüße,
Felix Riesterer.
Liebe(r) Unterwegs,
»» <body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
»» <table width="188" height="81" border="0" align="center" cellpadding="0" cellspacing="0" id="Tabelle_01">gibt es auf Deiner Seite ausschließlich tabellarische Daten, sodass Du nur diese Tabelle (ohne Überschrift und erklärenden Textabsatz) auf Deiner Seite hast?
<http://de.selfhtml.org/css/layouts/einfuehrung.htm@title=Einführung in CSS-basierte Layouts>
Liebe Grüße,
Felix Riesterer.
Nein leider nicht.
So sieht die ganze Seite aus:
http://www.gewerbeportal-worms.de/
Liebe(r) Unterwegs,
So sieht die ganze Seite aus:
http://www.gewerbeportal-worms.de/
möchtest Du Murks made with Dreamweaver, oder möchtest Du eine vernünftige Seite?
Liebe Grüße,
Felix Riesterer.
Liebe(r) Unterwegs,
»» So sieht die ganze Seite aus:
»»
»» http://www.gewerbeportal-worms.de/möchtest Du Murks made with Dreamweaver, oder möchtest Du eine vernünftige Seite?
Liebe Grüße,
Felix Riesterer.
Zuallererst möchte ich, dass der Darstellungsfehler im Thread entfernt wird.
Aber es wäre ebenfalls nett von dir, wenn du mich über den Murks aufklärst.
Liebe Grüße
Mahlzeit Unterwegs,
Zuallererst möchte ich, dass der Darstellungsfehler im Thread entfernt wird.
Sorge für sauberes, valides HTML. Probleme, die dann noch auftreten, kannst Du in 99% aller Fälle auf einen nicht standardkonformen Browser zurückführen.
Aber es wäre ebenfalls nett von dir, wenn du mich über den Murks aufklärst.
Das tut der Validator gern für Dich ...
MfG,
EKKi
Liebe(r) Unterwegs,
Zuallererst möchte ich, dass der Darstellungsfehler im Thread entfernt wird.
glaube mir, das ist ein _sekundäres_ Problem!
Aber es wäre ebenfalls nett von dir, wenn du mich über den Murks aufklärst.
Aber gerne! Das ist nämlich Dein primäres Problem!
Sind wir doch einmal ganz naiv und fragen wir uns, wie denn die grundlegende Struktur Deiner Seite aussieht. Und da trifft mich dann schon der erste Schlag:
1.) Kein http://de.selfhtml.org/html/allgemein/grundgeruest.htm#dokumenttyp@title=Doctype - das Dokument soll also nach Belieben geparst und interpretiert werden. Keine Regeln, keine Fehler - damit ist die Anzeige dann sicher auch beliebig...?
2.) Im Kopf der Datei findet sich dann jede Menge JavaScript-Code (der mit den berühmten MM_...-Funktionsnamen, also der übliche Dreamweaver-Dreck), der niemandem nützt, der aber das Dokument gehörig aufbläht - und das auf jeder weiteren (Unter-?)Seite. Wozu?
3.) Desweiteren finden wir im Kopf Deines Dokumentes einen <style>-Bereich, in dem gewisse CSS-Eigenschaften (sprich: Layoutanweisungen) enthalten sind. Aber immer wieder und auf jeder (Unter-)Seite, anstatt das in _eine_ _zentrale_ Datei auszulagern und von dort aus <http://de.selfhtml.org/css/formate/einbinden.htm#separat@title=zentral für die gesamte Webpräsenz zu verwalten>. Der Code bläht Deine Dokumente auch unnötig auf, und muss dazu zigfach vom Browser neu geladen werden - wozu?
4.) Dann beginnt also der <body> Deines Dokumentes - doch da wird es mir schon gleich mulmig: Jede Menge Attribute, die die Darstellung betreffen. Hatten wir nicht CSS zu diesem Zweck eingesetzt? Wollten wir nicht <http://de.selfhtml.org/css/layouts/einfuehrung.htm@title=das Aussehen klar vom Inhaltlichen trennen>, um beides schön einfach und übersichtlich getrennt verwalten zu können und Code einzusparen? Das kann man mit dem Dreamweaver nur, wenn man es auch ohne ihn könnte - ein Fakt, der gegen diese Software spricht, trotz des "professionell" auf der Verpackung und des astronomischen Preises.
5.) Schauen wir doch nun endlich in die Seite hinein! Was finden wir als _Inhalte_ in Deinem <body>? Eine riesige Tabelle! Na, dann schauen wir doch einmal, was da an Daten tabellarisch aufgelistet wird:
<table id="Tabelle_01" width="1024" border="0" cellpadding="0" cellspacing="0" align="center">
<tr>
<td colspan="4" valign="top"> </td>
</tr>
<tr>
<td rowspan="2" valign="top"><table width="87" border="0">
<tr>
<td width="81"> </td>
</tr>
</table></td>
<td colspan="2" valign="top">
Wir sehen eine Tabelle in einer Tabelle in einer Tabelle... ist das der Inhalt? Naja, es steht im <body> Deiner Seite, also müsste es eigentlich der Inhalt sein. Aber welche tabellarischen Inhalte müssen denn in so tief verschachtelte Tabellenkonstrukte gezwängt werden, damit sie korrekt präsentiert werden können?
Die Antwort ist längst offensichtlich: Die Tabelle dient lediglich der visuellen Unterteilung der Seite, keinesfalls jedoch ihrer inneren inhaltlichen Struktur. Eine Vorgehensweise, die spätestens seit 1999 nicht mehr notwendig, seit der ausreichenden CSS-Unterstützung der Browser jedoch seit mindestens 2004 absolut nicht mehr wirklich vertretbar ist.
Fußnote1: Ich habe bis jetzt noch kein Zeichen an Inhalten gesehen, wohl aber schon jede Menge Zeug, das irreführenderweise als solchen missverstanden werden könnte. Aber machen wir weiter.
6.) In der ersten Tabellenzelle, in der keine weitere Tabelle zwecks Verschachtelung geöffnet wird, begegnet mir plötzlich ein Doctype, mitsamt allem, was zu einem vollständigen HTML-Dokument gehört - quasi ein HTML-Dokument in einem HTML-Dokument. Das ist absolut unzulässiger Code. Es darf in einem HTML-Dokument nur einen <head> und einen <body> geben, und der <head> muss vor dem <body> stehen, und beide zusammen müssen in einem <html>-Element stehen, von dem es auch nur dieses eine in einem HTML-Dokument geben darf. Vor diesem <html>-Element steht der Doctype, und nur dort, und nur einmal. Hier steht nicht nur Murks, hier steht granatenmäßiger Müll!
Fußnote2: Ich habe noch immer keinen Inhalt zu Gesicht bekommen.
7.) Auch in diesem "dokumentinternen HTML-Dokument" geschieht wieder genau dasselbe: Es öffnet sich eine Layouttabelle, die das gesamte Dokument umfasst. Schauen wir einmal in sie hinein... In der ersten Zelle (<td>-Element) finden wir das hier:
<td><img src="Bilder/rechtenavi_01.jpg" width="148" height="16" alt=""></td>
Aha, ein Bild! Was denn für ein Bild? Was kann man darauf sehen? Hmm. Im Dokument steht kein Hinweis darauf, <http://de.selfhtml.org/html/grafiken/einbinden.htm#referenz@title=welchen Inhalt das Bild transportiert>. Ich habe es überprüft und herausgefunden, dass es sich um ein kleines, schwarzes Rechteck handelt. Offensichtlich benutzt Du diese Grafik, um Deine Seite zu gestalten - aber Grafiken, die keinen Inhalt transportieren, bindet man nicht als <img>-Elemente in sein Dokument ein! Dazu benutzt man CSS und darin Hintergrundbild-Eigenschaften!
Na, kannst Du noch?
8.) Ich gebe nicht auf. Es kommt bestimmt noch Inhalt. Also in die folgende Tabellenzelle geschaut: Und siehe da, dort steht ein Verweis. Der Code dazu:
<td><a href="impressum.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Impressum','','Bilder/navirechtsov_02.jpg',1)"><img src="Bilder/rechtenavi_02.jpg" name="Impressum" width="148" height="20" border="0"></a></td>
Dieses Code-Ungetüm zerlege ich Dir, damit man es besser verstehen kann.
<td>
<a href="impressum.html">
<img src="Bilder/rechtenavi_02.jpg">
</a>
</td>
Wir sehen eine Tabellenzelle, in der ein Hyperlink steht. Dieser Hyperlink enthält als anklickbares Etwas eine Grafik. Wieder fehlt im Dokument ein Alternativtext, der Hinweise geben könnte, was sich inhaltlich hinter der Grafik verbirgt.
Was ich in meiner "Aufbereitung" weggelassen habe, sind jede Menge JavaScript-Anweisungen, die Dein Dreamweaver eingebaut hat, und die dazu dienen, dass beim Überfahren mit der Maus die Grafik durch eine "Aktiv-Grafik" ersetzt wird. Das hat mit dem Aussehen zu tun, und sollte mit CSS gemacht werden, sodass der dazu notwendige Code (also CSS-Code) nicht hier im HTML-Dokument steht, sondern in der externen CSS-Datei, die ja nur einmal geladen werden muss.
Fußnote3: Das Einzige an Inhalt, was ich bisher gesehen habe, war ein schwarzer kurzer Streifen und eine anklickbare Grafik. Von beiden Grafiken ist aus der Dokumentstruktur heraus micht klar, wofür sie stehen, bzw. welche Inhalte sie transportieren.
------------------------------------
Mein Posting wird jetzt ziemlich lang, sodass mir die Forensoftware bald "Geschwätzigkeit" vorwerfen wird - sodass ich hier einmal aufhöre, denn Dir wird vielleicht einiges inzwischen klar geworden sein, was ich wohl mit "Murks" gemeint haben könnte.
Wenn es Dich interessiert, dann mache ich in einem nächsten Posting mit meiner Zerlegung weiter. Soll ich?
Liebe Grüße,
Felix Riesterer.
Liebe(r) Unterwegs,
....
...
Wenn es Dich interessiert, dann mache ich in einem nächsten Posting mit meiner Zerlegung weiter. Soll ich?
Liebe Grüße,
Felix Riesterer.
Das wäre sehr nett von dir.
Ich bin, was den Code anbelangt absoluter Anfänger.
Ich erstelle Grafiken mit Photoshop zerlege diese und bringe diese in tabellarischer Form wieder im Internet auf den Bildschirm. Wenn dass dann genauso aussieht, wie die Vorlage (in PS oder auf dem Papier) dann bin ich zufrieden. Und da das auch meist trotz dem von dir beschriebenen Murks der Fall ist, habe ich mich nie großartig mit dem code befasst.
Deswegen bin ich für jede erläuterung und hilfe dankbar.
Liebe Grüße
Liebe(r) Unterwegs,
| Wenn es Dich interessiert, dann mache ich in einem nächsten Posting mit meiner Zerlegung weiter. Soll ich?
Das wäre sehr nett von dir.
dann frage ich aber vorher, was Du damit anzufangen gedenkst. Immerhin kostet es mich Zeit und Energie, Deine Seite so zu zerlegen. Das mache ich natürlich nur, wenn es einen Sinn hat.
Ich bin, was den Code anbelangt absoluter Anfänger.
Was Du nicht sagst.
Ich erstelle Grafiken mit Photoshop zerlege diese und bringe diese in tabellarischer Form wieder im Internet auf den Bildschirm.
Das war offensichtlich. Und das war bis zur Jahrtausendwende eine weitverbreitete Praxis. In vielen Fällen wird auch heute noch so gearbeitet. Für viele Menschen zählt eben allein das Aussehen, egal wie es technisch realisiert wurde. Und ich bin eben der Meinung, dass das alles andere als egal ist - eine Meinung, die absolut nicht alle teilen.
Wenn dass dann genauso aussieht, wie die Vorlage (in PS oder auf dem Papier) dann bin ich zufrieden.
Tja, mir würde das nichteinmal im Ansatz genügen. Wie ist das mit Suchmaschinenoptimierung und Barrierefreiheit? Wie ist das mit semantischem Code? Das alles ist in Deiner Vorgehensweise völlig egal! Und wie gesagt, je nach Auftraggeber ist das auch das einzige, was verlangt ist, nämlich dass die Seite sowohl auf dem Bildschirm, wie auch später auf Papier exakt so aussieht, wie in Photoshop.
Und da das auch meist trotz dem von dir beschriebenen Murks der Fall ist, habe ich mich nie großartig mit dem code befasst.
Das musst Du auch nicht. Wenn Dir das Visuelle alleine genügt, dann bist Du doch zufrieden! Was interessiert Dich dann noch der Code dahinter?
Deswegen bin ich für jede erläuterung und hilfe dankbar.
Warum? Was hast Du damit vor? Wie wirst Du die Erläuterungen nutzen? Und was stellst Du Dir unter "Hilfe" vor? Oder anders formuliert: Was willst Du? Einfach nur zu wissen, dass (und warum) Deine Seite technischer Murks ist, hilft Dir ja nicht weiter...
Liebe Grüße,
Felix Riesterer.
»» Ich erstelle Grafiken mit Photoshop zerlege diese und bringe diese in tabellarischer Form wieder im Internet auf den Bildschirm.
Das war offensichtlich. Und das war bis zur Jahrtausendwende eine weitverbreitete Praxis. In vielen Fällen wird auch heute noch so gearbeitet. Für viele Menschen zählt eben allein das Aussehen, egal wie es technisch realisiert wurde. Und ich bin eben der Meinung, dass das alles andere als egal ist - eine Meinung, die absolut nicht alle teilen.
Dann hier mal die Frage: Wieso diese Praxis abgelöst wurde?
Die Browser scheinen das Code Geschwür ja trotzdem (anscheinend aus Tolleranz) so zu verbildlichen, wie es beabsichtigt wurde.
Die wichtigsten Vorteile, die ich deinem Post gestern entnommen habe, sind:
Tja, mir würde das nichteinmal im Ansatz genügen. Wie ist das mit Suchmaschinenoptimierung und Barrierefreiheit?
Was meinst du mit Barrierefreiheit? In deinen Links wird darüber geschrieben, dass Seiten, wie die meine, stur in Tabellen aufgeteilt sind und deswegen sehr beschränkt. Meinst du das?
Das musst Du auch nicht. Wenn Dir das Visuelle alleine genügt, dann bist Du doch zufrieden! Was interessiert Dich dann noch der Code dahinter?
Gegenfrage: Wieso hast du dich denn so mit den Code befasst. Bzw wieso wurden die auf CSS basierenden Layouts durchgesetzt (eingeführt).
Irgendeinen Sinn, musste das doch haben.
Warum? Was hast Du damit vor? Wie wirst Du die Erläuterungen nutzen? Und was stellst Du Dir unter "Hilfe" vor? Oder anders formuliert: Was willst Du? Einfach nur zu wissen, dass (und warum) Deine Seite technischer Murks ist, hilft Dir ja nicht weiter...
Weil ich nie mit diesem unübersichtlichen Code Wirr-Warr zufrieden gewesen bin. Ich profitiere von einen sauberen Code in zweiermaßen.
1. Fällt es mir leichter mich im Quelltext zurechtzufinden und Anpassungen vorzunehmen.
2. Bekomme ich dadurch einfach eine feste Grundlage in Sachen Webdesign und muss mich damit später nicht mehr zieren meine Seiten hier zu zeigen.
Liebe Grüße
und schönes Wochenende
Sascha Adrian
Hallo Unterwegs!
Dann hier mal die Frage: Wieso diese Praxis abgelöst wurde?
Das Böse™ ist zwar immer und überall, aber manchmal gewinnt das Gute ;)
Die Praxis ist leider nicht abgelöst worden. Es gibt leider noch viel zu viele Ignoranten, die nichts dazu gelernt haben.
Die Browser interpretieren Tabellencode deswegen, weil Tabellen an sich nicht das Böse™ sind: für tabellarische Daten gibt es nichts Besseres. Für die Darstellung waren sie aber nie erfunden worden. Doch als Netscape anno dazumal zum ersten Mal die Möglichkeit der Tabellen implementierte, kam das im noch tristen Web der ersten Jahren, wo es bisher außer Text und und Hyperlinks nicht viel zu sehen war, einer Revolution gleich. Die Tabellen wurden zum Zwecke der Darstellung missbraucht - bis heute.
Irgenjemand hier im Forum postete letztens diesen Link (auf Englisch, ich habe hier die deutsche Übersetzung herausgesucht): Warum Layout mit Tabellen dumm ist.
Die wichtigsten Vorteile, die ich deinem Post gestern entnommen habe, sind:
- Schnellere Ladezeiten
- ein sauberer (übersichtlicher Code)
vorallem dank Auslagerung des CSS - die ab dann komplett für das Aussehen der Seite verantwortlich ist, sodass die HTML Datei ansich, nur noch für den Inhalt zuständig ist.
Genau. HTML ist eine Auszeichnungssprache. Damit gibst Du einem Dokument eine Struktur. CSS ist dann für die Darstellung zuständig. Aber das wichtigste ist natürlich die Struktur, somit das HTML: Die Elemente sollten ihrem Zweck entsprechend eingesetzt werden! Beispiel: Hast Du eine Liste von Links, pack sie in einer Liste (<ul>,<li>) und schreib nicht <a><br><a><br>.
Gegenfrage: Wieso hast du dich denn so mit den Code befasst. Bzw wieso wurden die auf CSS basierenden Layouts durchgesetzt (eingeführt).
Irgendeinen Sinn, musste das doch haben.
Das sind ja zwei Fragen! Wieso Felix sich mit Deinem Code befasst hat, wird er wohl selber beantworten. Aber andererseits, wer hier eine Frage stellt, muss damit rechnen, dass man ihm Fehler unter die Nase reibt.
»Eigeführt« wurden die Layouts nicht. Sie setzen sich deswegen durch, weil es die einzige Möglichkeit ist, einen gut überschaubaren Code zu erhalten, einen Layout schnell auszutauschen, in dem man nur am CSS schraubt, ohne die Dokumentstruktur (das HTML) zu ändern. Ein Beispiel ist der CSS-Zen-Garden.
Weil ich nie mit diesem unübersichtlichen Code Wirr-Warr zufrieden gewesen bin.
Dann ist Zeit, es richtig™ zu machen.
Viele Grüße aus Frankfurt/Main,
Patrick
Mahlzeit Unterwegs,
Dann hier mal die Frage: Wieso diese Praxis abgelöst wurde?
Ergänzend zu <http://de.selfhtml.org/http://forum.de.selfhtml.org/?t=183820&m=1218249@title=Patricks Antwort>: abgelöst - wie gesagt - nicht, es hat sich nur u.a. die Erkenntnis durchgesetzt, dass unsemantische Tabellenwüsten nicht unbedingt hilfreich dabei sind, wenn bei von Suchmaschinen gut gefunden und relativ weit oben gelistet werden will. Suchmaschinen suchen nämlich zunehmend nach wirklich vorhandenen Inhalten. Dabei werden z.B. Überschriften stärker gewichtet als "normaler" Inhalt, "versteckter" Inhalt wird ignoriert bzw. Seiten, die solchen enthalten, "abgestraft" usw.
Insofern sollte es eines der Hauptinteressen eines jeden Seitenbetreibers sein, dass seine Seiten aus validem und semantischem Code bestehen und vernünftige Inhalte bieten.
MfG,
EKKi
Lieber Sascha,
Die Browser scheinen das Code Geschwür ja trotzdem (anscheinend aus Tolleranz) so zu verbildlichen, wie es beabsichtigt wurde.
Gegenbeispiel: Nur weil in Deinem Word Deine Überschrift groß, fett und unterstrichen ist, muss sie für Word noch lange keine solche sein, sondern läuft auch gerne unter "Standard", nur halt eben mit der entsprechenden Schriftgröße, -dicke und Unterstreichung.
Wenn ich nun Deine Website nehme, alles markiere und mittels copy&paste in Word (oder in meinem Falle OpenOffice) in ein Dokument einfüge, dann rate einmal, was ich dann erhalte. Besser noch: Probiere es selbst aus! Nimm dann vergleichenderweise auch noch die Startseite der Schulwebsite, die ich betreue, und verfahre damit ebenso.
Du wirst den Unterschied ganz schnell sehen. Dahinter versteckt sich einfach der Grundsatz des "semantic markup"s, der die Textbestandteile mit den passenden Elementen zur Textauszeichnung versieht, die der Natur der Textinhalte am ehesten entsprechen.
Die wichtigsten Vorteile, die ich deinem Post gestern entnommen habe, sind:
- Schnellere Ladezeiten
- ein sauberer (übersichtlicher Code)
vorallem dank Auslagerung des CSS - die ab dann komplett für das Aussehen der Seite verantwortlich ist, sodass die HTML Datei ansich, nur noch für den Inhalt zuständig ist.
Das sind alles positive Nebeneffekte, die sich dabei automatisch ergeben.
Das Auslagern des Layout-Codes, und das strikte Trennen von Struktur und visueller Präsentation hat aber noch einen anderen Vorteil. Das "Re-Design" einer umfangreichen Website geschieht zentral, ohne dass einzelne Seiten deshalb geändert werden müssten. Man arbeitet also nur an der CSS-Datei (oder an den CSS-Dateien, wenn es auf mehrere aufgeteilt wird), sowie an den notwendigen Grafiken - die HTML-Dateien werden nicht angefasst.
Was meinst du mit Barrierefreiheit? In deinen Links wird darüber geschrieben, dass Seiten, wie die meine, stur in Tabellen aufgeteilt sind und deswegen sehr beschränkt. Meinst du das?
Eine eindrucksvolle Testmöglichkeit wäre, wenn Du Dir Deine Seiten einfach einmal von einem Screenreader vorlesen lassen würdest. Mach' die Augen zu und navigiere mit diesem Programm! Was glaubst Du, wirst Du von den JavaScript-getriebenen Hovergrafiken haben, wenn Du Dir Deine Seite vorlesen lässt?
Du darfst auch den Firefox zum Testen so einstellen, dass er keine Grafiken lädt, kein JavaScript ausführt, und dass er die Seite ohne Style (Ansicht->Webseiten-Stil->keinStil) anzeigt. Das, was Du dann sinnvoll nutzen kannst, das ist auch das, was Suchmaschinen im Wesentlichen nutzen können. Und im Vergleich zu Deiner Seite darfst Du dann auch unsere Schulwebsite unter diesen Bedingungen besuchen und testen.
Gegenfrage: Wieso hast du dich denn so mit den Code befasst. Bzw wieso wurden die auf CSS basierenden Layouts durchgesetzt (eingeführt).
Irgendeinen Sinn, musste das doch haben.
Na, klar! Trennung von Inhalt und Layout. Das Drei-Schichten-Modell, bei dem Inhalt (HTML), visuelle Darstellung (CSS) und Interaktion mit dem User (JavaScript) technisch getrennt realisiert werden, wobei die technische Verfügbarkeit der Zusatztechnologien eben nicht unter allen Umständen vorausgesetzt werden darf. Das macht es möglich, dass Webdokumente (sprich: Internetseiten) nicht nur von Menschen mittels eines Browsers verarbeitet werden können, sondern dass auch andere (zukünftige?) Nutzungsmöglichkeiten, eben auch automatisierte, sinnvoll die Inhalte verarbeiten können.
Das vorhin vorgeschlagene copy&paste in eine Textverarbeitung ist nur ein Beispiel für eine solche "andere" Nutzung, bei der aber schon sehr schnell offensichtlich wird, wo da mögliche Barrieren liegen.
Weil ich nie mit diesem unübersichtlichen Code Wirr-Warr zufrieden gewesen bin. Ich profitiere von einen sauberen Code in zweiermaßen.
- Fällt es mir leichter mich im Quelltext zurechtzufinden und Anpassungen vorzunehmen.
- Bekomme ich dadurch einfach eine feste Grundlage in Sachen Webdesign und muss mich damit später nicht mehr zieren meine Seiten hier zu zeigen.
Gut. Dann beginne am Besten mit dem Tutorial aus SELFHTML 9 (Preview), auch wenn vieles darin Dir nicht mehr fremd ist. Die Perspektive auf Dir bereits Vertrautes ist das Wesentliche dieses Tutorials. Anschließend steht Dir das Kapitel zu CSS offen, um Dich tiefer in die Materie einzuarbeiten. Und an dieser Stelle nocheinmal der Link zur <http://de.selfhtml.org/css/layouts/einfuehrung.htm@title=Einführung in CSS-basierte Layouts>.
Am Ende wirst Du Deine Photoshop-Vorlagen nicht mehr in handliche Stücke (Slices) zerschneiden und tabellarisch wieder zusammensetzen, sondern die visuelle Struktur auf andere und flexiblere Art umsetzen. Dazu wirst Du sicherlich auch wieder Deine PS-Grafik nehmen, aber nicht mehr stupide zerschneiden, sondern Elemente daraus mit Hilfe von CSS und Hintergrundgrafiken wieder zusammenbauen, streckenweise vielleicht sogar Grafiken durch Hintergrundfarben ersetzen usw.
Liebe Grüße,
Felix Riesterer.
Hallo Leute,
ich werde mir eure Links über das Wochenende durchlesen.
Vorallem css zen Garden macht richtig Lust darauf eine auf css basierende Seite zu erstellen.
Eine Frage hätte ich allerdings noch:
Da ihr ja nicht so begeistert von Dreamweaver und Co seid, würde ich gerne wissen, welche Programme ihr zum designen und Programmieren benutzt.
Wichtig ist es mir, dass ich jederzeit zwischen Code und Browservorschau hin und herswitchen kann.
Liebe Grüße
und schönes Wochenende
Sascha
Lieber Sascha,
Vorallem css zen Garden macht richtig Lust darauf eine auf css basierende Seite zu erstellen.
stimmt!
Da ihr ja nicht so begeistert von Dreamweaver und Co seid, würde ich gerne wissen, welche Programme ihr zum designen und Programmieren benutzt.
Designen kann ich nicht. Das überlasse ich anderen. Aber Du darfst das logischerweise weiterhin in Deinem Photoshop tun.
Was das "Programmieren" angeht, so ist das Schreiben von HTML keinesfalls mit Programmieren zu verwechseln! In HTML werden Dinge _ausgezeichnet_, wie die Waren im Supermarkt ausgezeichnet werden. Im Supermarkt tragen sie Preisschilder (pricing tags) und in HTML... eben auch Tags.
Wichtig ist es mir, dass ich jederzeit zwischen Code und Browservorschau hin und herswitchen kann.
Das löse ich so: Ich habe die aktuell zu bearbeitende Seite in einem Firefox-Fenster geöffnet, und in einem anderen Fenster mein Notepad++ mit den Quelltexten dazu (kann mehrere Dateien mit Tabs geöffnet haben), sodass ich nach einer Quelltext-Änderung (und anschließendem Speichern) mittels [STRG]+[F5] im Browser die Änderungen sofort sehen kann. Und beim Ermitteln diverser Werte für bestimmte CSS-Eigenschaften ist mir der Firebug eine unschätzbare Hilfe.
Welche Darstellungssoftware benutzt denn der Dreamweaver intern? Die des Internet-Explorers etwa? Das wäre fatal...
Liebe Grüße,
Felix Riesterer.
Hallo Felix!
Das löse ich so: Ich habe die aktuell zu bearbeitende Seite in einem Firefox-Fenster geöffnet, und in einem anderen Fenster mein Notepad++ mit den Quelltexten dazu (kann mehrere Dateien mit Tabs geöffnet haben), sodass ich nach einer Quelltext-Änderung (und anschließendem Speichern) mittels [STRG]+[F5] im Browser die Änderungen sofort sehen kann.
Notepad++ bietet mMn[1] ein Menü, aus deren Optionen man wählen kann, in welchem Browser die Seite betrachtet werden soll...
[1] Ich habe ihn nicht wieder installiert, seit ich im Dezember alle meine Rechner neu aufgesetzt habe... Muss ich mal nachholen ;)
Viele Grüße aus Frankfurt/Main,
Patrick
Welche Darstellungssoftware benutzt denn der Dreamweaver intern? Die des Internet-Explorers etwa? Das wäre fatal...
Ja, er benutzt die IE Darstellung.
Geht mir sowieso schon wieder auf die Nerven, dass meine Testseite, in beiden Browsern unterschiedlich dargestellt wird:
http://www.sediar.de/csstest/index.html
Ich wollte eigentlich 2 Elemente, deren Position sich nicht verändert. Die Navigation und den Inhalt auf der rechten Seite. Ich denke mal, da fahre ich mit position:absolute am besten.
Im IE wird der Text aber um ein paar Zeilen nach unten verschoben?
danke für den Hinweis mit firebug.
Im IE wird der Text aber um ein paar Zeilen nach unten verschoben?
Meinte im Firefox - nicht im IE - da die Darstellung mit IE und Dreamweaver ja identisch sind.
Aber kannst du mir bestimmt erklären.
Liebe Grüße
sascha
Lieber Sascha,
Aber kannst du mir bestimmt erklären.
nein! Ich wiederhole meine ursprüngliche Frage: Willst Du Deine Seite vernünftig gestalten, oder weiterhin Dreamweaver-Murks fabrizieren?
Dass der Dreamweaver die Rendering-Engine des IE nutzt, disqualifiziert ihn in meinen Augen auf ganzer Linie, da auf der Verpackung "professionell" steht, Profis aber eine standardkonforme Darstellung benötigen, die der IE bekanntermaßen aber noch immer nicht liefert. Aber Amateure und Unwissende meinen teuer=gut, vor allem, wenn da auch "professionell" draufsteht und die Software mit Photoshop und allen anderen Adobe-Produkten so wunderbar interagiert...
Also nocheinmal: Willst Du "schnelle Hilfe" (bekommst Du von mir nicht)? Oder willst Du Deine Seiten endlich vernünftig erstellen?
Liebe Grüße,
Felix Riesterer.
Lieber Sascha,
»» Aber kannst du mir bestimmt erklären.
nein! Ich wiederhole meine ursprüngliche Frage: Willst Du Deine Seite vernünftig gestalten, oder weiterhin Dreamweaver-Murks fabrizieren?
Dass der Dreamweaver die Rendering-Engine des IE nutzt, disqualifiziert ihn in meinen Augen auf ganzer Linie, da auf der Verpackung "professionell" steht, Profis aber eine standardkonforme Darstellung benötigen, die der IE bekanntermaßen aber noch immer nicht liefert. Aber Amateure und Unwissende meinen teuer=gut, vor allem, wenn da auch "professionell" draufsteht und die Software mit Photoshop und allen anderen Adobe-Produkten so wunderbar interagiert...
Also nocheinmal: Willst Du "schnelle Hilfe" (bekommst Du von mir nicht)? Oder willst Du Deine Seiten endlich vernünftig erstellen?
Liebe Grüße,
Felix Riesterer.
Hä?
Worauf beziehst du denn das jetzt?
Sind die Seiten denn nicht vernünftig erstellt?
Firebug ist bereits installiert und der Dreamweaver ausrangiert.
Die css und die html Datei der seite http://www.sediar.de/csstest/index.html
wurden von mir per Hand mit Vorlage der selfhtml Informationen erstellt.
Wenn der IE nach wie vor keine Standardkonforme Darstellung liefert: Hat man dann nicht als Webdesigner dann das Problem, für eine Breite Masse (IE Nutzer) zu designen oder sich gegen den IE zu entscheiden und dann Darstellungsfehler bei vielen Besuchern in Kauf zu nehmen?
Liebe Grüße
Hallo Unterwegs!
Hä?
Worauf beziehst du denn das jetzt?
Sind die Seiten denn nicht vernünftig erstellt?
Manchmal hat Felix einen schlechten Tag ;)
Firebug ist bereits installiert und der Dreamweaver ausrangiert.
Sehr gut.
Die css und die html Datei der seite http://www.sediar.de/csstest/index.html
wurden von mir per Hand mit Vorlage der selfhtml Informationen erstellt.
Sehr gut. Fehlt nur noch, dass Du die Informationen der Forumshilfe beherzigst (u.A.: Verweise einbinden).
Wenn der IE nach wie vor keine Standardkonforme Darstellung liefert: Hat man dann nicht als Webdesigner dann das Problem, für eine Breite Masse (IE Nutzer) zu designen oder sich gegen den IE zu entscheiden und dann Darstellungsfehler bei vielen Besuchern in Kauf zu nehmen?
Als Webdesigner hat man die Aufgabe, nach den Standards des W3C zu arbeiten und möglichst barrierearm zu coden. Dass wegen des einen oder anderen Browsers Zusatzaufgaben anfallen, gehört leider zum Job. Gegen die Darstellungsfehler (die nicht immer welche sind, weil das W3C zum Beispiel den Herstellern viel Freiraum läßt) gibt es fast immer Workarounds oder Möglichkeiten.
Viele Grüße aus Frankfurt/Main,
Patrick
Lieber Sascha,
Die css und die html Datei der seite http://www.sediar.de/csstest/index.html
wurden von mir per Hand mit Vorlage der selfhtml Informationen erstellt.
ich hatte in Deinem letzten Posting die neue URL übersehen, sorry - unter diesen neuen Umständen ist Dir natürlich Erfolg zu bescheinigen. Die neue Seite hat einen vernünftigen Aufbau.
Allerdings...
Ich finde zweimal ein <h3>-Element. Warum nutzt Du Unterunterüberschriften? Hat Deine Seite keine Hauptüberschrift?
Und diese Aufzählung am Anfang, das ist doch die Navi. Warum steht das dann nicht dabei? Und warum hat das letzte <li>-Element ein <span> zum Inhalt? Und noch viel schlimmer, was sucht dieses <br>-Element darin?
Ich möchte Dir folgendes Grundgerüst empfehlen, da ich der Meinung bin, dass zuerst der Inhalt stehen sollte, und erst dann feststehende Seiteninhalte, wie etwa die Navi.
<body>
<div id="inhalt">
<h1>Überschrift</h1>
<p>... </p>
</div>
<div id="navi">
<h2>Navigation</h2>
<ul>...</ul>
</div>
</body>
Außerdem möchte ich Dir zu einem stricten Doctype raten, da Du darin wesentlich strengere Regeln befolgen musst, die Dein Dokument syntaktisch besser werden lassen (Du vergisst dann nicht, das letzte <li>-Element wieder zu schließen!). Außerdem wäre es meiner Meinung nach sinnvoll, gleich einen XHTML1.0-strict-Doctype zu wählen und valides XHTML zu schreiben. Das ist wirklich später einfacher zu pflegen!
Wenn der IE nach wie vor keine Standardkonforme Darstellung liefert: [...] Breite Masse (IE Nutzer)
Ja, das kann man mit zusätzlichen CSS-Dateien lösen, die über <http://de.selfhtml.org/css/layouts/browserweichen.htm#alternative@title=Conditional Comments> eingebunden werden, sodass sie nur von IEs und auch nur in der passenden IE-Version überhaupt geladen werden. Das mache ich zumindest so.
Liebe Grüße,
Felix Riesterer.
[Ergänzung]
Die Klassenattribute in den <li>-Elementen Deiner Navi kannst Du ersatzlos streichen - die brauchst Du nicht.
Überhaupt ist "Stil1" keine gute Idee für einen Klassennamen. "externer_link" wäre dagegen eine sinnbehaftete und von daher wesentlich bessere Idee.
Wenn Du die Listenpunkte Deiner Navi mit CSS stylen willst, dann tue das mit dem http://de.selfhtml.org/css/formate/zentrale.htm#verschachtelte_elemente@title=Nachfahrenselektor!
Liebe Grüße,
Felix Riesterer.
Hallo Unterwegs!
Bitte siehe in der Hilfe nach, wie man Verweise einbindet.
Es ist schon der richtige Weg, UTF-8 als Charset zu nutzen, warum dann die Sonderzeichen als Entities schreiben (ü). Gerade UTF-8 ist dazu da, dass jeder überall auf der Welt die Sonderzeichen seiner Sprache so eintippen kann, wie er's sonst kennt. Du kannst also ganz normal Deine ä,ü,ö und ß eingeben!
Im IE wird der Text aber um ein paar Zeilen nach unten verschoben?
Du hast korrigiert und FF gemeint. Meinst Du, das die Oberkante der Überschrift (dazu kommen wir später) auf gleicher Höhe ist, wie die Oberkante der Hintergrundgraphik der Navi? Mal mit margin-Angaben gespielt?
Überschriften: Kommen noch weitere dazu oder bleibt es so? Wenn ja, ist h3 als erste Überschrift im Dokument schlecht gewählt. Du kannst jede Überschrift mit CSS formatieren, wenn es Dir um die Darstellungsgröße geht. Aber die erste sollte eine h1 sein, dann geht es der Reihenfolge nach. Für Suchmaschinen ist es wichtig.
Viele Grüße aus Frankfurt/Main,
Patrick
Mahlzeit Unterwegs,
http://www.gewerbeportal-worms.de/
350 Errors, 56 warning(s) ... von einem öffentlich zugänglichen Portal, in dem sich Unternehmen einer Region vorstellen, potentielle Kunden informieren und vor allem aber zuerst einmal von diesen (per Suchmaschinen) gefunden werden wollen, hätte ich erheblich mehr erwartet - erheblich mehr.
MfG,
EKKi