Hallo!

Ich dachte ich frag hier einfach mal nach.

Und zwar folgendes Problem.
Bisher habe ich immer Tabellen für das Layout verwendet, jetzt möchte ich aber gerne CSS einsetzen.

Das Problem:
Ich habe mit dem Standard HTML eine Tabellennavigation erstellt, die eine Breite von 100% hat und das der verfügbare Platz unabhängig vom Inhalt der Zellen auf alle Spalten gleichmäßig aufgeteilt wird. Das geht ja mit dem Befehl "table-layout:fixed"

Nur wie bekomme ich dies in CSS realisiert?

Ich hab da schon verschiedenes ausprobiert, aber irgendwie geht das nicht.

Und was auch wichtig ist:
Wie bekomme ich es hin, daß ein Div-Container browserunabhängig immer zentriert wird? (entspricht: align=center)

Der Internet Explorer in Version 7 zentiert die Objekte, während Firefox und Safari (aktuelle Version) dies nicht tun.


Es wäre sehr nett, wenn mir jemand ein Beispiel hier posten könnte.

Vielen Dank!

Hi dom_beta,

beide Anforderungen sind leicht zu lösen:

1. Dem (umschliessenden) DIV gibst du einfach eine Breite von 100% (width: 100%).
Den Spalten 'darin' beliebige Breiten in % (Summe sollte <=100% sein).


2. Browserunabhängige Zentrierung (horizontal/vertikal) geht mit negativen Seitenrändern.

Schaust du hier:

Hoffe das hilft dir weiter ...
Beste Grüsse, Sascha

Hallo,

danke für deine Hilfe aber das funktioniert nicht so wie ich mir das vorgestellt habe.

Im Prinzip soll CSS dies darstellen (wahrscheinlich klebe ich zu sehr am alten HTML):

Hi,

anbei ein weiteres Codebeispiel - das kommt zwar nah ran, aber erfüllt das automatische Aufteilen in 100%/x auch nicht. Diese Funktion könnte in CSS3 durch 'calc()' gelöst werden. Stand heute wollen das aber noch nicht alle Browser sauber darstellen.

Dein Code:

Mein Code:

Nicht 100% was du willst, aber vielleicht kannste du damit leben?!?

Beste Grüsse, Sascha

Wie wär's mit dem Naheliegenden und prima funktionierendem


?

Das habe ich auch schon ausprobiert. Leider ignoriert Safari und Firefox diese Angaben und es ist wieder linksbündig statt zentriert.

Aber das kann ich noch mal ausprobieren, morgen.

dom_beta:
Hier mal was um von den Tabellen weg zu kommen:

Allgemein lässt sich die Seite css4you.de für Anfänger und als Nachschlagewerk gut benutzen.

Und wenn du dein Tabellen-Feeling vermisst, benutze einfach ein Grid-System, bei dem sich die Geister allerdings scheiden. Mich würde dazu auch mal @@sierkbs Meinung interessieren!

960.gs

Die Richtung ist schon nicht schlecht, leider hat die letzte Spalte zuviel Platz.

Siehe Bild. Oben dein Beispiel, unten die Art & Weise mit HTML:

Ergänzung:

deine Idee war gar nicht verkehrt! Ich bin gerade am Basteln und komme meinem Ziel doch recht nahe.

Vielen Dank!

Dann ist irgendwas anderes in Deinem CSS oder HTML-Konstrukt falsch bei Dir, oder die CSS-Regeln, die Du da geschrieben hast, verfangen nicht oder verfangen an der falschen Stelle oder verpuffen wirkungslos, weil Du irgendwo einen kleinen Fehler oder Denkfehler noch hast. Oder sie werden an anderer Stelle überschrieben oder sonst was. Denn das, was ich Dir genannt habe mittels margin-left: auto und margin-right: auto, das klappt (wenn man's richtig macht) und ist eigentlich der richtige Weg. Bei ALLEN modernen Browsern. Seit Jahren. Ich habe das nicht nur einmal auf diese Weise erfolgreich gemacht (nicht nur bei meinen eigenen Projekten), und so wird's auch offiziell empfohlen.

Bin jetzt zu faul, mich näher mit dem hier geposteten Code auseinanderzusetzen. Aber diese kleine Hilfe (die garantiert und in allen modernen Browsern seit Jahren zuverlässig funktioniert, wenn sie sauber und richtig gemacht ist) wollte ich dann doch loswerden.

Dann schau Deinen Code nochmal genau und in Ruhe an im Hinblick auf irgendwelche Denkfehler Deinerseits oder ungenaue CSS-Regeln, die möglicherweise gar nicht verfangen KÖNNEN, weil Du in dem Umfeld entweder im CSS-Konstrukt oder im dazu passenden HTML-Konstrukt einen Fehler oder auch einen Denkfehler gemacht hast.
Dass CSS und HTML valide sind bzw. sauber validieren, sollte zur Fehlersuche und Fehlereingrenzung unbedingte notwendige Voraussetzung sein, sonst suchst Du Dich evtl. nach dem möglichen (Denk-)Fehler dumm und dusselig, wenn Du's nicht auf diese Weise schon mal eingrenzt und zumindest Syntax-Fehlerquellen minimierst.

Wie gesagt, morgen probiere ich das aus.

Nachtrag:

Ich habe mich immer noch nicht genau mit Deinem Code und den Code-Beispielen hier beschäftigt, aber noch ein kleiner Hinweis und Tipp bzgl. Navigation und semantischer Umsetzung in HTML:

Naviation und Navigations-elemente sind ja semantisch betrachtet eigentlich im Grunde nix weiter als eine Aufzählung. Und welche HTML-Elemente stehen bei HTML für Aufzählungen zur Verfügung? Richtig! Listen. Zum Beispiel eine unordered list <ul> mit den Listen-Elementen <li> und wenn diese Listen-Elemente anklickbare Links beinhalten sollen, dan beherbergen sie auch noch einen Anker <a>

Also grob:


Daraus, aus diesem simplen Basis-Konstrukt kann man viel machen, u.a. verschachtelte Menüs, Aufklapp-Menüs etc. pp.
Aussehen und Darstellung dann per CSS. Anzeigen/Verstecken/Transparente Menüs -- alles wunderbar auf dieser simplen Basis machbar.

Weitere Erklärungen und Beispiele u.a. auch seit Jahren von CSS-Koriphäe und CSS-Papst Eric Meyer (der per zwischenzeitlichem Hilferuf seitens Macromedia/Adobe dem Dreamweaver zu mehr Standardtreue und CSS-Fähigkeiten verhalf) u.a. hier: , , ,

In HTML5 wird's semantisch vielsagender und etwas leistungsfähiger u.a. eine Wiederbelebung des zwischenzeitlich gestrichenen <menu>-Elements und vor allem ein neues <nav>-Element geben bzw. gibt es, um auf einfache Weise Navigationen und Menus bauen bzw. in Markup-Sprache ausdrücken zu können.

Alles Weitere regelt dann CSS.

Hallo,

heute habe ich per Zufall etwas gutes bei SelfHTML gefunden.

Um das zu erreichen, was ich möchte, muß man im Prinzip auf ein Mischmasch zwischen HTML und CSS zurückgreifen.

So zumindest liest sich die Syntax.



Was allerdings merkwürdig ist, daß man die Datei nicht in Unicode (UTF-8) abspeichern kann, dann kann (zumindest der Internet Explorer) die Tabelle nicht mehr richtig anzeigen.


MfG

dom_beta:
Du hast meinen Post über Gridsysteme erfolgreich ignoriert, bravo.

Nicht wirklich.

Das liegt in der Pipeline

Aber nix, was Sinn hat oder Du gebrauchen kannst.
Das, was die da zeigen, ist nicht mehr als eine Konzeptstudie, dass sowas durchaus möglich ist. Ob's Sinn hat, ist eine ganze andere Frage. In Deinem fall und für Deinen Verwendungszweck ist's weitgehend sinnfrei. Wozu in Gottes Namen will man etwas als Tabelle darstellen, wenn man in HTML keine Tabelle MEINT? Und wenn man eine Tabelle MEINT, warum schreibt man dann nicht gleich eine? Und in Deinem Fall brauchst Du keine Tabelle bzw. auch die wäre semantisch gesehen sinnfrei. Denn das, was Du darstellen willst, hate keinen tabellarischen Charakter von der Semantik her gesehen. Das ist eine Aufzählung, egal wie diese auch visuell angeordnet sein und aussehen mag.

Da CSS universell einsetzbar ist für alle möglichen Markup-Sprachen, so auch für XML, kann man z.B. bei bestimmten frei wählbaren XML-Elementen sagen: Stelle mir das Element <autoteile> bitte als Tabelle dar, also per CSS dann display: table. Oder stelle mir das Element <chassis> bitte als Tabellenzeile dar, also per CSS dann: display:table-row. Mal als Beispiel hergenommen.

Um das zu erreichem was Du möchtest, möchtest Du bestimmt nicht sowas verwenden, wie SelfHTML in dem von Dir gewählten Beispiel da vorführt. Das wäre von hinten durch die Brust ins Auge. Und im Grunde völlig an dem vorbei, was bei Deinem Anwendungszweck da sinnvoll und geboten wäre.

Und bzgl. Mischmasch von HTMl und CSS: wie meinen? Zulässig ist viel. Die Frage ist, ob's sinnvoll und zielführend und letzendlich auch übersichtlich und einfach wartbar ist. Inline-CSS sollte i.d.R. eher nur in Ausnahme-Fällen angewendet werden, um z.B. irgendwas mal schnell zu testen oder vorübergehend zu korrigieren.
Besser ist es, CSS und HTML strikt zu trennen (schon allein der besseren Übersicht und Wartbarkeit wegen) und CSS entweder im <head> per <style> zu regeln oder im <head> per <link> oder @import von extern einzubinden.

Wo steht das? Kann man. Wenn man will, kann man.

>dann kann (zumindest der Internet Explorer) die Tabelle nicht mehr richtig >anzeigen.

Welcher Internet Explorer? Es gibt derer inzwischen 4 Stück, die in Umlauf sind, wenn man noch die alte Schrottmühle IE6 hinzuzählt und den kommenden IE9Beta.

Abgesehen davon wüsste ich nicht, warum IE7 bis IE9 mit UTF-8 Probleme haben sollten. Wenn der IE6 damit Probleme hat, wundert's mich nicht, der hat so mit ziemlich allem Probleme, weshalb er eigentlich auch ignoriert und abgeschossen gehört. Noch nichtmal eine Sekunde sollte man ihn noch irgendwie und irgendwo berüksichtigen. Entweder er kann's, oder kann's nicht. Und wenn er's nicht kann, dann ist's eben Pech. es gibt genügend Auswahl an anderen Browsern, und IE7 und IE8 die so Einiges besser machen und besser können, sind seit Jahren darußen und in Umlauf. Das sollte man langsam auch als Seitenersteller berücksichtigen und das auch mal mehr anerkennen, dass dem so ist, sonst bleibt uns der IE6 nämlich noch einige Jahre länger am Bein kleben, obwohl alle Welt ihn lieber tot unter der Erde sähe. Aber wenn man ihm dauernd hinterherhechelt und ihn streichelt, dann bleibt er weiter als nicht totzukriegender Zombie der Welt erhalten. Einfach mal in Ruhe lassen und in Ruhe sterben lassen das Teil und nicht dauernd mit Riechsalz wachhalten!

Hallo,

Das kann ich sehr wohl brauchen, weil ich das anders mit CSS nicht hinbekomme (es sei denn, jemand zeigt mir ein Beispiel mit meinen Vorgaben).


Ja sicher kann man das, aber dann werden die CSS-Befehle aus unerfindlichen Gründen anders interpretiert wenn man die Datie 1) als UTF-8 abspeichert und 2) den Meta-Tag <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

in den <head> einbaut.


Version 8.0

Die Betonung liegt darauf: Du bekommst es anders nicht hin. Also von hinten durch die Brust ins Auge... Man schon. Und ob das sinnvoll ist, was Du da tust, ist eine andere Sache...

Erstens sind's keine Befehle, sondern Regeln.
Und HTML wird auch nicht programmiert, sondern geschrieben bzw. Inhalte werden durch HTML-Elemente ausgezeichnet (umschrieben). Wenn Dir diese Unterschiede in der Bedeutung diese Begrifflichkeiten schon mal klar sind, dann ergibt sich damit schon mal ein ganz anderes Verstsändnis von CSS und HTML und der herangehensweise bei Problemen.

Diese Meta-Angabe wird im Zweifel eh ignoriert (wenn's z.B. als XHTML mit einem XML-Mimetype bzw. dem empfohlenen XHTML-Mimetype application/xhtml+xml ausgeliefert wird) oder überschrieben, wenn der Webserver z.B durch eine etwaige .htaccess-Konfiguration oder in der Konfigurationsdatei des Webservers anderes sagt...

Zudem: was für UTF-codierte Sonderzeichen oder Umlaute werden von Dir denn in Deinen CSS-Regeln bzw. in Deiner CSS-Datei benutzt, die über den ASCII-Zeichensatz hinausgehen? I.d.R. wirst Du da doch eh nur ASCII-Zeichen drinhaben, und die werden gleich dargestellt unter einem ISO-Zeichensatz wie unter einem UTF-8-Zeichensatz.

Und dann gibt es immer noch für die CSS-Regeln sowas wie diese Angabe:

@charset "utf-8";

die Du an den Anfang jeder CSS-Datei stellen kannst.
Und in Deiner .htaccess-Datei kannst Du Folgendes sicherstellen:

AddDefaultCharset UTF-8

Oder/und
AddType text/html;charset=UTF-8 .html
AddType application/xhtml+xml;charset=UTF-8 .xhtml .xht qs=0.999
AddType text/css;charset=UTF-8 .css

Gleiches bzgl. dem JavaScript Mimetype:

# Script Media Types lt. RFC 4329
AddType application/javascript;charset=UTF-8 .js
AddType application/ecmascript;charset=UTF-8 .ecma

Oder/und:
AddType text/javascript;charset=UTF-8 .js

Hallo,

offen gestand finde ich Webseitenerstellung mit CSS irgendwie als viel zu kompliziert.

Wie seht ihr das?

Hat wohl mehr mit Deinem (Un-)Wissen und Deiner fehlenden Erfahrung zu tun als dass Deine Einschätzung generell zutreffend wäre. Übung macht den Meister. Wie überall im Leben.

Und Du siehst an der Existenz von Mozilla-Browsern (deren GUI schon seit Jahren ganz wesentlich von CSS gestaltet wird) und anderer Software, der Existenz von WebApps aller Orten (ob sie nun iPhone Apps oder MacOSX Dashboard Widgets heißen), wie einfach und wirkungsvoll CSS ist bzw. sein kann. Wenn man mal das Grundprinzip verstanden hat. Und an diesem Grundverständnis scheint's Dir bisher wohl noch zu mangeln, und deshalb ist's für Dich nicht sehr verständlich und schwergängig.
In dem Moment, wo Du aber das Grundprinzip verstanden hast -- was meinst Du, wie leicht Dir dann alles von der Hand geht, was für Dich jetzt noch viel zu kompliziert erscheint. Vor allem scheint's oft genau den Leuten Kopfzerbrechen zu bereiten, die jahrelang diesbzgl. falsch gedacht bzw. von falschen Gedankengebäuden und falschen Vorstellungen ausgegangen sind bzw. sich davon haben beeinflussen lassen. Für die ist dann nicht selten ein Umdenken erforderlich, weil sie gewisse Grundlagen bis dahin eigentlich nie wirklich durchdrungen bzw. falsch interpretiert haben. Genau den Leuten fällt das dann nicht selten besonders schwer, von ihrem alten Trip und Gedankengebäude runterzukommen.

Einfach mal eintauchen in die CSS-Welt. Und vielleicht dazu auch mal die richtige Literatur und HowTos und Beispiele lesen. Dann kommt der Rest von selbst.
Und wenn Du dann "Eureka!" rufen kannst, dann wirst Du Dich selber fragen, wieso Du das nicht schon viel früher so verstanden und praktiziert hast...

Ich empfinde manche Kommandos in CSS als unsinnig bzw. unnötig verkompliziert dargestellt.
Aus welchen Gründen gibt es keinen einfachen Befehl, der den Abstand (in HTML ausgedrückt: align = center ) gibt?!

Das habe ich in CSS umständlich gelöst, indem ich die Befehle margin-left und right mit "auto" versehen habe inklusive Breitenangabe.

Ich fürchte, ich müßte mir dann doch entsprechende Bücher kaufen.

und wenn ich mir dann so manche Beiträge in Foren durchlese, wenn die da was mit PHP & Co. machen wollen, dann denke ich mir, warum programmiert ihr nicht gleich eine Applikation?

Ich find, der Aufwand steht meistens in keinem Verhältnis zum Nutzen.

Schon anhand Deiner Sprache merkt man, dass Du die Grundprinzipien immer noch nicht verstanden hast. Und deshalb wundert es mich auch nicht, dass Dir der Rest des Verstehens in der Folge ebenso schwerfällt...

Schon allein die Wahl der Worte "Kommandos" und "Befehl" drückt aus, dass Du von einem völlig falschen Bild ausgehst...

Es sind Regeln. Regeln, die auf Elemente angewendet werden. Und dort passgenau passen müssen. Passen ("matchen") sie nicht (entweder weil die Regel nicht zutreffen KANN oder weil die regel zu ungenau definiert wurde oder auch mal knapp am Ziel vorbeigeht), wird die Regel eben nicht angewendet, und Du wunderst Dich, dass irgendwas nicht hinhaut. Deshalb muss CSS im Zweifel sehr sehr genau und zielgerichtet eingesetzt werden -- entweder mehrere HTML-Elemente betreffend oder eben speziell nur eines. Keine Kommandos. Und keine Befehle. Und diese Regeln orientieren sich am DOM, am Document Object Model. Und bzgl. HTML sind's Elemente. Mit einem Start-Tag, dem Inhalt und einem End-Tag. Diese Elemente geben dem Inhalt eine Bedeutung, eine Struktur. Ergo müssen die gewählten Elemente von ihrer semantischen Bedeutung her sich an dem Inhalt orientieren und nicht umgekehrt der Inhalt an der Bedeutung der Elemente. Weder HTML noch CSS sind jeweils eine Programmiersprache.

Das was Du willst, geht doch!!! Mit einfachsten Mitteln! Es kommt aber drauf an, WO Du es willst, d.h., auf welches Element konkret angewendet, und was Du damit bezwecken willst!

Das habe ich in CSS umständlich gelöst, indem ich die Befehle margin-left und right mit "auto" versehen habe inklusive Breitenangabe.

Das solltest Du sowieso tun. Es gibt eine große Auswahl an guten Büchern, Online-Büchern, Tutorials etc. zu diesen Themen.

Ein guter möglicher Einstiegspunkt ist u.a. und beispielsweise Michel Jendryschiks Buch "Einführung in XHTML, CSS und Webdesign" [url]http://jendryschik.de/wsdev/einfuehrung/[url], erschienen im angesehenen Addison-Wesley Verlag, welches Du unter der angegebenen Adresse bestellen oder sogar auch online in Form von HTML-Seiten durchlesen oder auch bei Amazon unter bzw. . Als Co-Autor dieses Buches muss ich Dir das natürlich ans Herz legen. Es ist aber auch gut geschrieben und ist wirklich sehr empfehlenswert.

Kannst Dich ja mal durch die Online-Ausgabe durchklicken, und wenn Dir gefällt was Du liest bzw. es lieber in gedruckter und gebundener Form haben willst, dann kaufst Du eben das Ganze als Buch. Fang' von oben an, und lies Dir dann Kapitel für Kapitel durch. Auch und gerade die Begrifflichkeiten und den Aufbau von DOM und wie man es per CSS anspricht, erklärt Micahel Jendryschik selbst für den Laien sehr verständlich.

Ergänzend und/oder parallel dazu vielleicht auch mal die ins Deutsche übersetzten und von den Übersetzern über das Original hinausgehend kommentierten offiziellen Übersetzungen der jeweiligen W3C-Spezifikationen. Gerade die dort eingeflochtenen Erläuterungen und Kommentare heben diese offiziell vom W3C anerkannten Übersetzungen so heraus:

Natürlich gibt's auch noch andere Bücher und Tutorials von anderen Autoren zum Thema. Die will ich hier gar nicht schmälern oder unter den Tisch kehren.
Nur mit irgendwas muss man halt mal anfangen.

Hallo,

so ich hab das jetzt hinbekommen. Ich verwende eine Tabelle mit einer definierten festen Breite und das a Element wird als Block angezeigt.

Allerdings verstehe ich das nicht, warum das nur mit block funktioniert.

Die Tabelle wird als Block-Element angezeigt und die Verweise auch. Mmmh, klingt für mich ein wenig widersprüchlich.

Hallo,

hier mal ein fast Minimalbeispiel mit stärkerer Anlehnung an , wie das mit ULs und einer enstprechenden div-Klasse funktionieren kann. Das einzig unschöne sind noch die "inneren" Rahmen. Aber das bekommt man auch hin...

Jedenfalls, die Möglichkeit dieser horizontale Navigation mit CSS-only zu lösen wird im IE 7 untereinander angezeigt.

Ich befürchte, ich komme von meinem Table's nicht weg.

Das geht wunderbar, dom_beta. OHNE Tabellen. Man muss es nur RICHTIG machen. Einfach eine Aufzählung-Liste (<ul>) machen und die einzelnen Listen-Elemente (<li>) per float: left aneinanderreihen und dem <ul> die Aufzählungs-Bullets wegnehmen per list-style-type: none. Ich habe das unzählige Male gemacht, u.a. auch auf meiner eigenen Website (die ich dringend überarbeiten muss).

Hm,

sukerfish navigation

zumindest nicht im IE 7.0

wenn ich dies kopiere im Editor

http://de.selfhtml.org/css/eigenschaften/anzeige/display2.htm

und bei mir speichere und mit dem IE 7.0 aufrufe, zeigt er mir alles untereinander statt nebeneinander an.

Firefox hingegen zeigt es korrekt an.

Ich weiß nicht, was da schief läuft.

oder hier, meine Eigenentwicklung (ANMERKUNG: wird in Firefox korrekt angezeigt, der MS Internet Explorer Version 7.0 zeigt es hingegen NICHT korrekt an!!!!)

Äh, bitte besorg dir mal dringend "Firebug" für Firefox und berschäftige dich mit dem W3C Validator:
Dann findest Du heraus, daß z.B. jede id (id="zelle") nur einmal vergeben werden darf! Das muß hier also class="zelle" heißen.
Kann gut sein, daß der IE7 dann spinnt, wenn das CSS nicht valide ist!

1. Warum nimmst du <div>-Tags? Die sind semantisch nicht aussagekräftig, Leute mit ScreenReader oder Suchmaschinen kommen damit nicht gut zu recht. Nimm doch eine, wie von sierkb vorgeschlagene <ul>-<li>-Kombination. Dein Menü ist ja schlussendlich nichts anderes als eine Auflistung von Links, und für Auflistungen sind <ul>-<li>-Konstrukte vorgesehen.


2. Eine id darf nur einmal im Dokument vorkommen, darum heißt dieses Attribut auch id. Wenn du das gleiche Element mehrmals per CSS selektieren willst, musst du das Attribut "class" und den zugehörigen Selektor "." benutzen


3. Wieso versuchst du krampfhaft an display:table festzuhalten? Außer eine automatische Aufteilung der Breite nützt dir das wenig. Des Weiteren überschreibst du
durch

Ich würde folgendes CSS empfehlen:

Hallo,

mal eine andere Frage.

Wenn ich den Quellcode von http://de.selfhtml.org/css/eigenschaften/anzeige/display2.htm in den Windows-Editor kopiere und speichere und dies mit dem Internet Explorer 7 öffne, dann zeigt er mir die Sachen untereinander an.

Öffne ich das Dokument im WWW dann wird es normal angezeigt.

Woran liegt das?

siehe Bild:

Besorg dir bitte als erstes mal einen ordentlichen Texteditor (wegen Character-Coding) - am PC scheint Notepad++ ganz gut zu sein; am Mac TextWrangler oder BBEdit!

01Lucky,
iThinkDifferent:

+1

+1

Oder auch Smultron .
Oder den Smultron-Klon Fraise
Oder Aquamax Emacs .
Oder CarbonEmacs .
Oder MacVim .
Oder Kod .

Oder, wenn's ein größeres Projekt ist/werden soll:
Eclipse
Oder NetBeans .

… oder Coda.