Tabelle in FF anders als in IE und Chrome :-(

[Matse]

Hallo Leute!
Eine Frage!

Schaut Euch mal bitte die Seite von mir an:
Testseite

Ich habe die Positionierungen der einzelnen Elemente mit Tabellen gemacht. Dazu habe ich auch die Menüleiste in die einzelnen Segmente zerlegt und mit Hilfe von Hintergrundfarben und -bildern die Leiste erzeugt.

Wenn ich die Seite mit dem aktuellen Firefox 32.0.3 aufmache, sieht sie perfekt aus, genauso wie sie soll.

Mache ich sie aber mit dem Internet Explorer 11 oder auf einem Android-Smartphone mit dem Google Chrome auf, so stimmen die Arrangements an den Tabellenkanten immer auf eine Pixelhöhe nicht. Eigentlich sollten die Backgroundbilder bis an die Kanten heran die Hintergrundfarbe überdecken und so die Menüleiste spaltfrei bilden. Nur klappt das eben auf diesen beiden Browsern nicht.

Was kann ich machen, damit die Seite auf dem IE und dem Chrome genauso aussieht wie auf dem FF?

Danke und LG,
Matthias

[Matthias Apsel]

Om nah hoo pez nyeetz, Matse!

Ich habe die Positionierungen der einzelnen Elemente mit Tabellen gemacht.

Tabellen dienen zur Darstellung tabellarischer Daten. Verwende semantisch passende Elemente und lass die Ineinanderschachtlerei von Tabellen. Siehe http://blog.selfhtml.org/c/html/html5-serie/

Dann sieht die Seite in allen relevanten Browsern vernünftig aus. Darstellungsunterschiede wird es immer geben, aber sie fallen nicht so negativ auf.

Eigentlich sollten die Backgroundbilder bis an die Kanten heran die Hintergrundfarbe überdecken

Es gibt keinen Grund für die Verwendung von Hintergrundbildern; für Farbverläufe gibt es linear-gradient, alte Browser kriegen dann eben einen einfarbigen Hintergrund.

Was kann ich machen, damit die Seite auf dem IE und dem Chrome genauso aussieht wie auf dem FF?

Do websites need to look exactly the same in every browser?

Ich empfehle, das Tabellenlayout zu entsorgen und neu zu beginnen. Im verlinkten Blogartikel sowie im Wiki, etwa Anwendung und Praxis/Menüs findest du erste Hilfestellungen. Wenn du nicht weiter weißt, frag nach. Wir helfen gern.

Matthias

[Matse]

Hallo Namensvetter!
OK, eine Frage:
Das Design soll genau so sein wie es jetzt als Tabelle vorhanden ist. Ob die Realisierung nun schlecht ist oder nicht sei erst einmal dahin gestellt.

Ich habe allerdings das Problem dass ich in HTML nicht sehr fit bin und auch wenig Zeit habe mich intensiv damit zu befassen. Das will ich auch gar nicht weil das nicht meine Profession ist. Ich will aber gerne was dazu lernen.

Ich habe hier ein wenig gelesen:
http://wiki.selfhtml.org/wiki/CSS/Anwendung_und_Praxis/Men%C3%BCs

Wie müsste ich denn vorgehen, wenn die einzelnen Menüpunkte nicht einzelne Buttons sein sollen sondern sich das ganze in eben einem großen Menü-Button-Feld befinden soll so wie ich das realisiert habe?

Oder würde man quasi 8 Menüpunkte erstellen indem man die beiden äußeren an den Ecken außen rundet, an der gegenüberliegenden Seite jeweils keine Linie setzt, die Mittelstücke nur oben und unten mit Linien setzt und dann alle Punkte nebeneinander baut?

Ich habe das Beispiel 8 angesehen, das wäre schon ideal nur müsste das eben "ein" Button werden ...

Was hast Du da als ersten Satz geschrieben? Was soll das sein? Kisuaheli? Sanskrit?

LG,
Matthias

Om nah hoo pez nyeetz, Matse!

Ich habe die Positionierungen der einzelnen Elemente mit Tabellen gemacht.

Tabellen dienen zur Darstellung tabellarischer Daten. Verwende semantisch passende Elemente und lass die Ineinanderschachtlerei von Tabellen. Siehe http://blog.selfhtml.org/c/html/html5-serie/

Dann sieht die Seite in allen relevanten Browsern vernünftig aus. Darstellungsunterschiede wird es immer geben, aber sie fallen nicht so negativ auf.

Eigentlich sollten die Backgroundbilder bis an die Kanten heran die Hintergrundfarbe überdecken
Es gibt keinen Grund für die Verwendung von Hintergrundbildern; für Farbverläufe gibt es linear-gradient, alte Browser kriegen dann eben einen einfarbigen Hintergrund.

Was kann ich machen, damit die Seite auf dem IE und dem Chrome genauso aussieht wie auf dem FF?
Do websites need to look exactly the same in every browser?

Ich empfehle, das Tabellenlayout zu entsorgen und neu zu beginnen. Im verlinkten Blogartikel sowie im Wiki, etwa Anwendung und Praxis/Menüs findest du erste Hilfestellungen. Wenn du nicht weiter weißt, frag nach. Wir helfen gern.

Matthias

[Baba]

Wie müsste ich denn vorgehen, wenn die einzelnen Menüpunkte nicht einzelne Buttons sein sollen sondern sich das ganze in eben einem großen Menü-Button-Feld befinden soll so wie ich das realisiert habe?

Also erstmal finde ich das sehr gut, dass Du den Rat von Matthias annimmst. Es ist gut nachvollziehbar, dass Du wenig Zeit hast das alles neu zu stricken und es ist wahr: der Anfang dauert lange (vielleicht 2 Tage lesen) bevor überhaupt mal was zu sehen ist. Aber glaube mir: Du wirst dich freuen, mit wie viel Markup (html) und Formatierung (css) Zeilen das alles zu realisieren ist.

Zu deiner Frage: die einzelnen Links (Home, etc) sind die li. Bei der verlinkten Seite ist es etwas schlecht, dass man nicht gleich sieht, wie das am Ende aussieht. Daher am besten mal ein fiddle machen. Ich habe mal angefangen: Dein Fiddle. Das soll man ja eigentlich nicht alles vorkauen, aber ich bin gerade so froh, das ich gerade Hilfe zu einem meiner Probleme bekommen habe :)

Oder würde man quasi 8 Menüpunkte erstellen indem man die beiden äußeren an den Ecken außen rundet, an der gegenüberliegenden Seite jeweils keine Linie setzt, die Mittelstücke nur oben und unten mit Linien setzt und dann alle Punkte nebeneinander baut?

Fast: du erstellst 8 Menüpunkte. Die rundung gibts aber auf das nav oder ul element. Das sog. Elternelement.

Om nah hoo pez nyeetz, Matse!

Hat irgendwas mit Startrek zu tun, glaube...

[Matse]

Hallo Baba!
Auch Dir danke!

Wird berücksichtigt!

LG,
Matthias

[Matthias Apsel]

Om nah hoo pez nyeetz, Matse!

Bitte vermeide Vollzitate. Sie sind in diesem Forum weder notwendig noch erwünscht. Danke.

Oder würde man quasi 8 Menüpunkte erstellen indem man die beiden äußeren an den Ecken außen rundet, an der gegenüberliegenden Seite jeweils keine Linie setzt, die Mittelstücke nur oben und unten mit Linien setzt und dann alle Punkte nebeneinander baut?

Ich habe das Beispiel 8 angesehen, das wäre schon ideal nur müsste das eben "ein" Button werden

Ich habe dir einen Anfang gedabblettet. Wenn sich Fragen ergeben, scheue dich nicht, sie hier zu stellen.

Matthias

[Gunnar Bittersmann]

@@Matthias Apsel:

nuqneH

Ich habe dir einen Anfang gedabblettet.

Erst „roulettiert“[tm], jetzt auch noch das!!1elf Verbifying schwappt über.

Qapla'

[Matse]

Hallo Männers,
Ihr seid super! Vielen Dank! Ich glaube, damit lässt es sich hervorragend arbeiten und ich habe eine Vorstellung erhalten.

Der Tabellenkrempel kann ja wirklich völlig abgeschafft werden. Unglaublich. Ich komme noch aus einer Zeit wo das die einzige Möglichkeit war ...

Das biege ich mir aus Überzeugung bei und experimentiere damit. CSS hab ich ja schon benutzt, sollte also kein Problem sein.

Wenn mir jetzt noch einer ein How-to hinschreibt wie ich daraus dann ein Template-System wie SMARTY ableite und das mit Joomla verheirate bin ich glücklich ... Spaß beiseite, das kommt später *ggg* ...

LG und danke,
Matthias

[Matse]

Hallo Leute!
Dank Eurer Hilfe habe ich die Menüleiste schon genauso hinbekommen, wie ich das zum Einen wollte und wie es wohl zum Anderen technisch korrekt ist.

Jetzt scheitere ich aber noch an ein paar Dingen.

Ich habe doch mit Tabellen noch einmal eine Formatierung des Kopfsegmentes der Seite vorgenommen Das Segment selbst steckt in einem Div-Tag. Ich bekomme ein reines Aufzählen der drei Elemente Kreissymbol (Grafik), Text in der Mitte und kleine Linksammlung ganz rechts nicht hin.

Ich dachte, ich nehme wieder ein Listenelement dafür, mache die position:relative, sage display:inline und führe dann die Listen auf in der Hoffnung, nebeneinander stehende Listenelemente zu erhalten.

Aber irgendwie funktioniert das nicht so recht wie gedacht. Ich glaube, ich habe noch nicht ganz durchschaut wie ich die Selektoren in CSS benutze. Kann mir da noch einmal jemand helfen? Ich habe im weiteren schon gemerkt dass man mit den Definitionen genauestens penibel darauf achten muss, was Mutter- und was Kindelement ist.

Aber irgendwie durchsteige ich das hier nicht mehr!

Danke für Eure Antworten, wenn es schnell einer CSS-coden kann und ich den Code dann sehe, verstehe ich bestimmt mehr, war ja bei der Menüleiste auch so!

Danke!

LG,
Matthias

[Baba]

Benutze mal bitte so ein online tool wie jsfiddle oder das von Matthias um dein bisheriges Resultat zu demonstrieren.

Cheers,
Baba

[Baba]

Sorry, nicht auf Deiner Seite nachgesehen...

Cheers,
Baba

[Matthias Apsel]

Om nah hoo pez nyeetz, Matse!

Jetzt scheitere ich aber noch an ein paar Dingen.

Das sieht doch garnicht so schlecht aus. Folgende Hinweise möchte ich dir noch geben.

Die Pipes ‚|‘ dienen der Zierde, sie haben im Quelltext nichts verloren. Packe sie in die Pseudoelemente, wie ich es dir im dabblett gezeigt habe. Warum sollte ein Screenreader „Pipe Kontakt Pipe“ vorlesen? Warum sollte ein Menüpunkt „| Preise |“ heißen?

Setze Abstände nicht mithilfe von Leerzeichen. Dafür gibt es margin und padding.

Normalisiere nicht alle Abstände auf Null. Ändere nur die Abstände, die du auch tatsächlich ändern möchtest.

Wenn du XHTML schreibst, musst du inhaltsleere Elemente kennzeichnen (<img … />) Verwende besser den doctype html5. So sorgst du für ein valides Dokument, jetzt vs. dann

Das stylesheet muss innerhalb des head-Elements referenziert werden.

Zurre keine Breiten fest. Wenn ein Sehbehinderter eine größere Mindestschriftgröße eingestellt hat, bricht deine Navigation um, obwohl genügend Platz wäre.

Eine Liste dient im allgemeinen zur Auszeichnung *gleichartiger* Elemente. Für deinen header schlage ich folgende Struktur vor:

<header>  
  <h1><img …>Christiane Wehner<span>Yogalehrerein BDY</span></h1>  
  <ul>  
    <li>…  
    …  
  </ul>  
</header>

Matthias

[Matthias Apsel]

Om nah hoo pez nyeetz, Matthias Apsel!

Die Pipes ‚|‘ dienen der Zierde, sie haben im Quelltext nichts verloren. Packe sie in die Pseudoelemente, wie ich es dir im dabblett gezeigt habe. Warum sollte ein Screenreader „Pipe Kontakt Pipe“ vorlesen? Warum sollte ein Menüpunkt „| Preise |“ heißen?

Zurre keine Breiten fest. Wenn ein Sehbehinderter eine größere Mindestschriftgröße eingestellt hat, bricht deine Navigation um, obwohl genügend Platz wäre.

Bei mir gerade an einer Stelle, wo du es nicht möchtest.

                              | Person  
| | Kontakt |

Matthias

[Matse]

Hallo Matthias!
OK, sämtliche Punkte der Liste habe ich versucht abzuarbeiten und umzusetzen.

Es bleiben kleine Fragen:
1. alle Breiten entfernt
Ich habe alle Breitenangaben entfernt und wie Du es geraten hast mit padding und margin gearbeitet. So weit so gut. Nur habe ich jetzt eine Frage: Wir kann ich verhindern, dass beim Verkleinern des Browserfensters ab dem Moment die Elemente zusammengeschoben werden, ab dem die Mindestbreite des Fensters für die Darstellung nicht mehr ausreicht? Da wäre es lieber, die Leiste und der Header blieben in der Breite "ganz" und im Browser erscheinten Scrollleisten als dass er wie jetzt die Blöcke zusammenschiebt. Das hatte ich mit dem Festzurren der Breite versucht ... Wie geht das anders?

2. Abstand zwischen zwei Zeilen und Unterstrich
Zwischen Christ......hner und Yogalehr......DY würde ich gerne den Abstand vergrößern. Das gelingt mir aber nicht. Weiterhin wäre die Frage, ob man den Underline auch noch etwas nach rechts verlängern kann. Das habe ich mit padding-right versucht, klappt aber nicht. Dazu eine Idee?

3. Margin + Padding auf 0
Was meinst Du damit, nicht grundsätzlich padding und margin auf 0 zu setzen? Tue ich das nicht, zerfällt das Design :-( Was spricht dagegen?

Wäre der Rest so, wie es empfehlenswert ist? W3C sagt jetzt übrigens, dass der Code korrekt HTML5 ist. Danke dafür!

Und danke auch für die Antworten ...

LG,
Matthias

Om nah hoo pez nyeetz, Matthias Apsel!

Die Pipes ‚|‘ dienen der Zierde, sie haben im Quelltext nichts verloren. Packe sie in die Pseudoelemente, wie ich es dir im dabblett gezeigt habe. Warum sollte ein Screenreader „Pipe Kontakt Pipe“ vorlesen? Warum sollte ein Menüpunkt „| Preise |“ heißen?

.
.
.
.

[Matthias Apsel]

Om nah hoo pez nyeetz, Matse!

Ich habe alle Breitenangaben entfernt und wie Du es geraten hast mit padding und margin gearbeitet. So weit so gut. Nur habe ich jetzt eine Frage: Wir kann ich verhindern, dass beim Verkleinern des Browserfensters ab dem Moment die Elemente zusammengeschoben werden, ab dem die Mindestbreite des Fensters für die Darstellung nicht mehr ausreicht? Da wäre es lieber, die Leiste und der Header blieben in der Breite "ganz" und im Browser erscheinten Scrollleisten als dass er wie jetzt die Blöcke zusammenschiebt. Das hatte ich mit dem Festzurren der Breite versucht ... Wie geht das anders?

Indem du dem html-Element eine Mindestbreite verpasst. Etwa 50 oder 60 em.

Denke auch an die Leute, die dich mit dem Handy ansurfen. Da sollte man sich auch Gedanken machen. Das Stichwort dazu heißt media-queries.

2. Abstand zwischen zwei Zeilen und Unterstrich
   Zwischen Christ......hner und Yogalehr......DY würde ich gerne den Abstand vergrößern. Das gelingt mir aber nicht. Weiterhin wäre die Frage, ob man den Underline auch noch etwas nach rechts verlängern kann. Das habe ich mit padding-right versucht, klappt aber nicht. Dazu eine Idee?

Verwende div- statt span-Elemente, denn du möchtest genau dieses Verhalten, dann kannst du ganz normal mit margin und padding arbeiten.

3. Margin + Padding auf 0
   Was meinst Du damit, nicht grundsätzlich padding und margin auf 0 zu setzen? Tue ich das nicht, zerfällt das Design :-( Was spricht dagegen?

Alle Defaulteinstellungen der Browser sind sinnvoll. Verändere nur die, die du auch anders haben möchtest. Das mag im Moment nach mehr Schreibaufwand aussehen.

Matthias

[Matse]

Hallo Matthias!
Soweit alles abgearbeitet wie ich das denke und so bin ich zufrieden.

Danke für die vielen Antworten!

LG,
Matthias