Tabelle im Header zentrieren

Hi,
ich möchte die Tabelle im Header zentrieren wie auf dem screenshot:
klassevanofen.de/sceent.PNG

Problem ist, dass die Tabelle zwar zentriert ist, aber zwischen der linken Seite der Headerbox und dem Anfang der Infobox.

Wie bekomm ich das zentriert? Hier der HTML code:
http://klassevanofen.de/template.htm

Danke

Moin,

ich möchte die Tabelle im Header zentrieren wie auf dem

Da ist keine Tabelle auf dem Screenshot. Sieht eher aus wie eine Überschrift. Wenn Du dazu eine Tabelle benutzt, machst Du etwas grundlegendes falsch.

Nichtsdestotrotz ist eine Tabelle aber ein Block-Element und wird daher wie alle anderen Block-Elemente (auch wie Überschriften) zentriert.

Zuerst solltest Du Deine ganzen HTML-Fehler ausbauen, denn dann erübrigt sich das Problem möglicherweise schon.

Bedenke, dass
a) HTML nicht dafür da ist, das Aussehen der Website zu bestimmen.
b) man mit Tabellen kein Layout macht, auch nicht mit HTML allgemein.
c) man auch nicht mit div Layout macht, sondern mit CSS.

Du scheinst noch ganz am Anfang zu stehen, solltest Dich daher gleich richtig mit der Materie auseinander setzen, denn sonst rennst Du in eine Richtung, inder das Erstellen von Webseiten keinen Spaß macht, weil Du Dir da künstlich Barrieren einbaust, die Du hinterher nicht mehr einreißen kannst.

Eine Möglichkeit ist die in FAQ:1161 verlinkte Einführung, eine andere ist es, hier Deine Fragen zu stellen.

Tipps:

  • Inhalt immer komplett von Layout trennen, daher auch CSS in ein externes Stylesheet auslagern
  • Keine festen Pixelbreiten für das Layout, mit kleineren Viewports gibts Scrollbalken, bei großen ist es Platzverschwendung
  • Schriftgröße immer in Abhängigkeit der voreingestelölten Schriftgröße setzen, niemals absolut in px
  • Inline-Elemente werden mit text-align:center im Elternelement zentriert, dazu wandelt man sie nicht in Block-Elemente um
  • div nur zum Gruppieren mehrerer Elemente verwenden. Auf die Semantik achten!
  • Keine Tags oder Attribute verwenden, die physische Auszeichnung sind. In HTML nur logische Auszeichnung verwenden (=> Semantik!)
  • Keinen Transitional-Doctype verwenden, der gilt - wie der Name schon sagt - für den Übergang! Und zwar für alte Seiten der 190er Jahre, die ohne Doctype erstellt wurden.

Es gibt viel zu tun für Dich, aber noch kannst Du das Steuer rumreißen.

Liebe Grüße,
-Efchen

P.S.: Über die Farbwahl sage ich jetzt mal nichts, da hab ich zu wenig Ahnung von. Ich weiß aber das die derzeitigen Farben mir weh tun ;-/

Hi Efchen,
danke für die ausführliche Antwort. Ich habe die Kritik befürchtet.
Ich habe wenig Ahnung und wenig Zeit, wollte die Hompeage aber unbedingt selber machen. Hat auch ganz gut funktioniert, sieht in den gängigsten Auflösungen passable aus, auch wenn der Code sehr provisorisch aussieht.

Ich dachte div und css gehören zusammen. Damit steuert man sozusagen die CSS Eigenschaften an?
Ich seh schon du hilfst mir ungern bei meiner Pfuscherei, aber ne vorrübergehende Lösung um die Tabelle zu zentrieren fällt dir nicht ein? :wink:

Moin,

Ich habe wenig Ahnung und wenig Zeit, wollte die Hompeage aber
unbedingt selber machen.

Das passt definitiv nicht zusammen.

Hat auch ganz gut funktioniert

Nein, das habe ich ja schon widerlegt. Das Ergebnis ist nix. Weder technisch (wo ist die Semantik? div-Suppe?) noch vom Aussehen her.

sieht in den gängigsten Auflösungen passable aus

Was hat das Ausehen einer Website mit der Auflösung zu tun? Nichts.
Auch bei großer Auflösung kann der Viewport klein sein. Und in kleinen Viewports gibts bei Dir halt unnötige horizontale Scrollbalken.

auch wenn der Code
sehr provisorisch aussieht.

Wie der Code *aussieht*, ist eigentlich egal. Er muss syntaktisch richtig sein und er sollte semantisch sinnvoll sein, weil sonst das Ziel von HTML nicht erreicht wird und Du damit Barrieren aufbaust, die nicht von allen Clients (ob Mensch oder Maschine, ob Sehend oder Blind) nicht richtig verarbeitet werden können - und die zudem unnötig sind, weil man HTML ja richtig anwenden kann! Man muss es eben nur auch tun.

Ich dachte div und css gehören zusammen.

Erstmal ist div ein HTML-Tag und nicht CSS und gehört somit nicht zusammen. Und da man Inhalt und Layout am besten strikt voneinander trennt, gehört das erst recht nicht zusammen.

Insofern gehören HTML und CSS natürlich doch zusammen, als dass man mit CSS die Elemente, die man mit HTML erzeugt, formatieren kann.

Aber es ist nicht so, dass man nur div-Elemente formatieren kann. Was Du mit einem div in CSS machen kannst, kannst Du auch mit einem ul oder einem h1 machen, denn alle verhalten sich gleich, denn sie sind alle Block-Elemente. Nur in eher seltenen Fällen fügt man ein semantisch nutzloses div ein, was aber semantisch nicht das Problem ist, weil div ja nur das „allgemeine Block-Element“ ist. Ansonsten dient es aber nur, Gruppen auszuzeichnen, weswegen es unsinnig, überflüssig und unübersichtlich ist, wenn man da nur ein einziges Element rein legt.

Damit steuert man
sozusagen die CSS Eigenschaften an?

Das ist definitiv falsch. Die CSS-Eigenschaften kann man prinzipiell *JEDEM* HTML-Element zuweisen, nicht nur dem div! Anders wäre es ja auch unlogisch. Du kannst auch eine Liste absolut positionieren oder eine Überschrift zentrieren. Um das Aussehen eines HTML-Elements festzulegen, braucht man nicht noch ein zusätzliches Element. Das ist der größte Fehler, den HTML-Anfänger machen - sie glauben, das div wäre irgend ein Zauber-Tag.
Versuch es mal. Lass das div weg, wo es nur geht, nur wenn Du mehrere Elemente gruppieren willst, um ihnen eine gemeinsame Formatierung zu geben, nur dann brauchst Du das div (in HTML5 sieht das dann wieder ganz anders aus, aber das möchte ich hier mal noch weglassen).

Ich seh schon du hilfst mir ungern bei meiner Pfuscherei, aber
ne vorrübergehende Lösung um die Tabelle zu zentrieren fällt
dir nicht ein? :wink:

Ich schrieb, dass man Tabellen zentriert, wie alle anderen Block-Elemente auch.
Aber warum denn die Tabelle? Lass sie halt einfach mal weg. Soll das Ganze eigentlich ein Menü werden? Dann zeichne es auch korrekt aus, nämlich als Liste. Dann sieht Deine Frage womöglich ganz anders aus, warum also Zeit auf Deinen Tabellenmurcks verschwenden, wenn man dazu gar keine Lösung braucht, weil das HTML schon falsch ist?

Liebe Grüße,
-Efchen

1 Like

Harte Worte ,aber trotzdem bedankt für deine ausführliche/informative Antwort.

Moin,

„Hart“ ist so unfreundlich und negativ. Wie wäre es eher mit „Ehrlich“?

Und, hast Du die Tabelle rausgeschmissen? Wie siehts jetzt aus? Hat sich das Problem schon verändert? Oder willst Du so weiter machen wie bisher, im Bewusstsein, dass Du schnell wieder an Deine Grenzen stößt und Workarounds erarbeiten musst für Dinge, die man anders leichter, schneller und sinnvoller machen kann?

Geh es an! Trau Dich! Du willst ja nicht an der Stelle Deine Web-Entwickler-„Karriere“ schon beenden, oder? :smile:

Liebe Grüße,
-Efchen