Anfänger, CSS und Tabellen

tompa

Hallo,

hier kommt eine Frage von einem HTML und CSS - naja, ich könnte mir vorstellen in den Augen einiger - vollhonk
Aber egal - ich habe eine bestimmte Vorstellung von "unserer" Seite - und würde das gern irgendwie realisieren. Es wär toll, wenn mir jemand von Euch helfen könnte.
Ich mache Figrentheater und habe eine Seite für unser kleines Figurentheater gebastelt. Das funktioniert in Firefox und IE auch ganz gut - in Chrome und Safari aber so gar nicht. Meine Idee bei der Seite ist, dass die Bilder in Prozent-Größe angegeben werden und die Seite somit auf jedem Monitor gleich aus sieht. Die Adresse unserer Seite ist: http://www.theater-papaya.de.
Ich habe jetzt schon so einige Seiten zu css und html "durchgegoogelt", aber bislang keinen Ansatz finden können, der mir als "Nichtprorammierer" einen Ansatz geboten hätte.
Die Bilder werden in chrome uns safari an den Rand gequetscht oder verzerrt. Hat jemand einen Tip, was ich tun könnte um diesen Effekt aufzuheben (zu einem gehen, der sich damit auskennt fällt leider aus:)).

Beste Grüße,
tom

efwe

versuchs mit: width 100% height auto .

tompa

Hallo efwe,

danke für Deinen Tipp, habe ich gleich mal getestet. Aber ich befürchte, ich komme nicht drum herum, tiefer in die Thematik einzusteigen
Die Darstellung ist, trotz height= "auto", jedes mal anders (in Chrome und Safari). Ich tüfftele weiter.

Beste Grüße,
Tom

Pelix

Wenn du sowieso neu in dem Bereich bist, schau dir doch direkt mal HTML5 an.

Es gibt extra Funktionen die Inhalte in % anhand der Auflösung vom Monitor
bzw. größe vom Browserfenster darstellen.

http://html5demos.com/

Da müsste eine Demo dabei sein.

Um eine Seite in jedem Browser gleich aussehen zu lassen, musst du entweder
einen perfekten Quelltext erstellen oder mit IF-Abfragen arbeiten. Du kannst
in deinem Quelltext definieren wie etwas dargestellt werden soll wenn ein
bestimmter Browser verwendet wird.

Beispiel:

Code

<!--[B][if IE][/B]>
    <style type="text/css">@import url(ie.css);</style>
  <![endif]-->


  <!--[B][if IE 6][/B]> 
<style type="text/css">@import url(ie6.css);</style> 
<![endif]--> 


<!--[B][if lt IE 7][/B]>
    <style type="text/css">@import url(ie5-6.css);</style>
  <![endif]-->


  <!--[B][if lte IE 5.5999][/B]>
    <style type="text/css">@import url(ie55-.css);</style>
  <![endif]-->


  <!--[B][if gte IE 5.5][/B]>
    <style type="text/css">@import url(ie55+.css);</style>
  <![endif]-->

Alles anzeigen

tompa

Hallo Pelix,
danke für Deine Tips! Mein Problem ist allerdings, dass ich nicht weiß, aus welchem Grund die Ansicht in Chrome und Safari anders ist als in Firefox...
In Chrome ist es so, dass die Ansicht erst "falsch" ist, wenn ich auf einen Link klicke, dann wird die Seite richtig dargestellt.
Im Firefox funktioniert das alles zu vollster Zufriedenheit... Weil die Seite ja eigentlich so simpel aufgebaut ist, finde ich auch keine Vergleiche oder Anhaltspunkte über Googel. Ich habe geschaut, ob ich den Seitenaufbau vollständig über css machen kann. Da bin ich aber auch noch nicht weiter (Container???).
Beste Grüße,
tom

Unregistriert

Mal so nebenbei:
Das Impressum als Bild geht gar nicht, ist sogar abmahnfähig.

MrMurphy

Hallo,

Zitat

finde ich auch keine Vergleiche oder Anhaltspunkte über Googel

Na ja, erst kannst du damit beginnen die Fehler, die in der Validation angezeigt werden, für jede Seite entfernen:

http://validator.w3.org/check?verbose=…er-papaya.de%2F

Gruss

MrMurphy

Unregistriert

Und immer wieder: Keine Tabellen für's Seitenlayout!!!

Vielleicht hilft dieser Link http://www.alistapart.com/articles/responsive-web-design/

lukasn

OT: Finde es witzig, bei A list apart einen Beitrag zu responsive Webdesign zu lesen, wenn doch ihre eigene Webseite, so hübsch sie auch sein mag, in jeder Situation die selbe fixe breite hat (Und nein: ne Mobile umleitung ist *kein* responsive Webdesign )

tompa

Zitat

Na ja, erst kannst du damit beginnen die Fehler, die in der Validation angezeigt werden, für jede Seite entfernen

Hallo MrMurphy,

das habe ich jetzt mal gemacht:)
Fühlt sich gleich viel besser an.

Zitat

Und immer wieder: Keine Tabellen für's Seitenlayout!!!

Tja, ich weiß immer noch nicht so recht, aus welchem Grunde die Tabellen so geschmäht sind. Das kann aber durchaus daran liegen,
das ich so ein überschaubares Häuflein Ahnung von der Materie habe. Aber hey, wenn ich wüsste wie, dann würde ich die Tabellen weglassen;)

Ich bleibe dran. Beste Grüße,
Tom

lukasn

Ganz einfach: Es ist nicht die Aufgabe von Tabellen, das Layout der Seite zu beschreiben. Tabellen sind für die Anzeige von Tabellarisch angeordneten Daten. Alles andere ist Blödsinn und sollte seit mindestens 6 Jahren von wirklich niemandem mehr praktiziert werden. Das HTML sollte ausserdem nicht durch die Darstellung beeinflusst werden. HTML "beschreibt" den Inhalt der Seite, für die Darstellung ist CSS verantwortlich.

Was das Wie angeht, dafür gibt es im Internet genügende Tutorials, da wirst du bestimmt eines finden das dir passt.

styleshiet

Hallo Tompa,
auf Seitenlayout mit Tabellen sollte u.a. aus folgenden Gründen verzichtet werden: unattraktiv für Suchmaschinen, längere Ladezeiten, schlecht zu pflegen u.a. Dafür hat man heute mit CSS ein wesentlich flexiblerers Gestaltungsmittel mit (leider) einem höheren Lernaufwand am Anfang.
Ein sehr gutes Lehrmaterial ist http://de.selfhtml.org (Auch als Download zum Offlinestudium)
Auch gut ist http://css4you.de

tompa

OK, das heißt erst mal wieder von vorne anfangen Aber egal - ich hatte gehofft, mich durchwurschteln zu können, aber das Ergebnis (die Darstellung der Seite) ist nicht wirklich zufrieden stellend. Ich danke Euch für Eure Anregungen und Tipps und werde jetzt erstmal selfhtml studieren.

Viele Grüße,
Tom

Tags