[CSS] div padding problem

[Aiun]

de Fakto hat dein Beispiel nicht funktioniert

werde das gleich nochmal prüfen und dann einen Screenshot irgendwo hochladen, damit du siehst was ich meine, und was dabei herauskommt.

bzgl. Formulare in Tabellen:

Ich packe ja Feldbeschreibung und Feldinhalt in eigene Spalten.

Somit bleibt das Formular übersichtlich.

Und es kommt nunmal oft vor, das in einem Design gefordert ist, das "eine Spalte so hoch ist, wie der inhalt einer anderen" Wunderbares beispiel sind auch hier im Forum die Spalten, in denen Benutzername unsw. drinsteht. Das Feld ist so hoch wie der Beitrag den du geschrieben hast.

bzgl. rel Fenster & rel Body

wenn ich rel Fenster mit Javascript machen muss, ist das für mich eine Lücke im CSS. Denn mit einer Tabelle ist derartiges ohne Probleme möglich.

Es geht ja darum das Medium optimal auszunutzen (welches auch immer es sein mag) OHNE Pixelgenau zu definieren.

Ich habe jetzt die große Ehre im nächsten Jahr ein Referat über Barrierefreiheit im internet in der Berufsschule zu halten. Mal sehen was noch alles bei den Recherchen herauskommt.

Meine Arbeit an meiner eigenen Seite haben rel. früh gezeigt, das es größte Problem bei CSS ist, das es nicht sowas wie

<table style="layout:fixed; height:100%">

<tr>

<td style="height: 150px">Header</td>

</tr>

<tr>

<td>Content</td>

</tr>

</table>

(rel zur Fenstergröße)

kann

zum Beispiel Auto zurück:

der TÜV erlaubt gar kein Auto das nicht den Regeln entspricht.

Die Regeln die uns auferlegt sind, sind aber nunmal nicht: nutzt keien Tabellen für Layout.

sondern:

es gibt: <a> (das ist ein Link), <table>,<tr>,<td>,<div> etz.

unsere Regeln sind allein der HTML standard.

Wäre alles andere wirklich Gesetz (international) wäre das etwas anderes, ist es aber nicht. Und wenn es Gesetz wäre, würden die macher des Gesetzes dafür sorgen, das die gegebenen Möglichkeiten ausgeschöpft werden. Also eine Balance aus Sicherheit und Nutzen. Was du vorschlägst führt vielleicht zu 'mehr' Barrierefreiheit. Aber es schränkt die andere seite der Waage zu sehr ein.

Ich muss mich mal mit Screenreadern beschäftigen. Aber ich verstehe immer noch nich ganz, wo nun der Sinn sein soll, ob ich in Tabelle oder Div einteile. Die Struktur (je nachdem "was" ich mache) ist die gleiche. Er ließt es in einer bestimmten reihenfolge vor (wie gesagt, kann mehr dazu sagen sobald ichs ausprobiert habe)

Ich weis das ich mich in diesem punkt wiederhole:

ein XML an sich, ist da erheblich sinnvoller. Da dort auch der "Name" bzw. die "Art" der information angegeben ist. und nicht nur <div>Hallo</div> sondern <begrüßung>Hallo</begrüßung> stehen kann .... oder gibt es da ein HTML-Äquivalent zu um die Art der Information anzugeben ?

[geloescht_JesterDay]

de Fakto hat dein Beispiel nicht funktioniert

werde das gleich nochmal prüfen und dann einen Screenshot irgendwo hochladen, damit du siehst was ich meine, und was dabei herauskommt.

Also bei mir hat es funktioniert (in allen 3 getesteten Browsern). Weiss halt nicht, was genau du dir vorgestellt hast.

[Aiun]

was du vorschlägst, bzgl. des Formulars wäre etwa so ?:

<div>

<div>feld1</div>

<div>feld2</div>

<div>feld3</div>

</div>

<div>

<div><input name="feld1"></div>

<div><input name="feld2"></div>

<div><input name="feld3"></div>

</div>

das würde jedoch bedeuten, das der Zusammenhang zwischen Titel und Inhalt "nur noch" durch den <label> tag gegeben wäre. Und das ist für mich der zwanghafte versuch einen fall, wo immernoch eine Tabelle sinnvoll ist, in CSS umzusetzen.

zu http://wordpress.org/

ich mag seiten absolut nicht, die nur 50% (Abhängig von der Auflösung, hier 1024) der Seitenbreite nutzen. Ok, wenn das Design aus einem Festen "Bild" besteht / stark grafiklastig ist, kann ich das teilwese verstehen. Aber Bei sehr vielen Seiten ist das nicht der fall.

dann stört mich, wenn mir die Navigation einer Seite wegscrollt, so das ich bei langen beiträgen bis oben Scrollen muss.

Im wesentlichen teile ich eine Seite beim Entwurf in drei bereiche.

- Design

- Navigation

- Inhalt

Wobei unter design hier 'nur' Bilder, Titelschriften unsw. zu verstehen sind

Navigation und Design sollten auf der Seite fest verankert sein. Allein der Inhalt verändert sich. (inhalt der Navigation kann auch veränderlich sein, aber will jetzt nicht zu detailiert werden) Design kann auch heißen, das eine fußleiste vorhanden ist, in der steht wer eingeloggt ist / Impressum. Wenn noch bilder dahinter liegen, dann gehört es zum Design und steht fix.

Aber das Thema sieht ja jeder anders.

Früher habe ich das mit Frames gemacht. Heute bin ich froh über einige Eigenschaften von divs/css die das ganze flexibler machen.

Nur, bin ich oft auf Javascript angewiesen, weil CSS allein mir bisher keine 'brauchbare' möglichkeit gegeben hat, den Platz den weder Design noch Navigation brauchen, für den Inhalt zu nutzen. - werde vielleicht heute mal die alternativen zusammenstellen die ich bisher ausprobiert habe.

Zum sinn und zweck: Ich habe mehrfach mit Designern gesprochen / gearbeitet, die Webseiten allein im Photoshop erstellen. vom Entwickler dann erwarten, das dies Pixelgenau umgesetzt wird.

Im Print-Design, also Entwurf von gedrucktem, wird auch 'für das Medium' gearbeitet. Also wenn ich ein A4 Blatt mit einem Briefkopf / einer fußleiste versehe, ist das für den sichtbaren Bereich. Bei mehreren Seiten wäre das ganze auf jeder Seite gleich.

Ich entwerfe also Das "Design" nicht für die länge des Textes. Sondern für den Platz der mir auf dem Medium jeweils zur Verfügung steht.

Zum Auto-Beispiel: Ein Auto das gegen Tüv-Gesetz verstößt, wird nicht auf die Straße gelassen. Eine Tabelle als Design-element, wird von den Browsern aber unterstützt. Du kannst davon ausgehen das, was unterstützt wird, auch benutzt wird - wobei auch "was benutzt wird, wird unterstützt", leider oft der fall ist.

Zur Barrierefreiheit:

ich würde eher eigene Seiten für verschiedene Medien realisieren, als die selbe Seite mit CSS für verschiedene Medien zu verdrehen. Habe auch kürzlich etwas derartiges gesehen. Das ist kein Ausstoßen von Behinderten oder Blinden, sondern etwas ganz normales: das anpassen von Design & Inhalt auf eine Bestimmte 'Kundengruppe' In zeiten von JSP, ASP, XML/XSLT, PHP & Co, glaube ich, zählt auch nicht das man es mit HTML machen 'muss'

[geloescht_JesterDay]

was du vorschlägst, bzgl. des Formulars wäre etwa so ?:

<div>

<div>feld1</div>

<div>feld2</div>

<div>feld3</div>

</div>

<div>

<div><input name="feld1"></div>

<div><input name="feld2"></div>

<div><input name="feld3"></div>

</div>

das würde jedoch bedeuten, das der Zusammenhang zwischen Titel und Inhalt "nur noch" durch den <label> tag gegeben wäre. Und das ist für mich der zwanghafte versuch einen fall, wo immernoch eine Tabelle sinnvoll ist, in CSS umzusetzen.

<tr>

<td>Feld1</td>

<td>input Feld1</td>

</tr>

Wo bitte ist da groß die Verbindung (ausser, dass es im Quelltext direkt untereinander steht)? Du siehst es als Verbindung an, weil es im Text aufeinanderfolgt. Wichtig: Du siehst es an. Es besteht aber keinerlei Verbindung zwischen dem Text in der ersten Zelle und dem Input in der zweiten.

Sieh dir mein Beispiel oben nochmal an, und du wirst sehen, dass eine Tabelle hier absolut sinnlos ist.

Nein, ich habe das Beispiel oben doch gebracht. Dein Beispiel ist der Versuch eine Tabelle zwanghaft mit Divs nachzubauen. Du brauchst in dem Fall nur je ein label und ein input. Und ein Label ist genau dazu da, eine Verbindung zu einem anderen Element herzustellen, weil es den Text innerhalb der Label-Tags zu einem Label des anderen Elements geklariert.

[forTeesSake]

hallo Aiun,

mal vorab: das soll überhaupt nichts persönliches sein. aber nach einigem lesen anderer artikel von dir und vor allem deiner beiträge in diesem thread möchte ich dir gerne folgendes sagen:

ob du selbst tabellen oder pures css persönlich benutzt oder das ganze mixt ist hier glaube ich hier jedem relativ egal. es will dir keiner deine tabellen nehmen.

aber deine art dich hier hinzustellen und immer wieder irgendwelche beispiele rauszuhauen die mit css "unmöglich" seien ohne dich vorher auch einmal damit beschäftigt zu haben finde ich etwas vermessen.

ich kenne das problem von mir selbst. vor ca 2 jahren war ich auch gegen jegliche programmiertechnische innovation, da ich auf meinem gebiet ja der champ war. neues musste erst aufwendig durchstöbert und getestet werden.

ausserdem dauerte die entwicklung dann erstmal länger und war fehleranfälliger.

das gesamte arbeiten war einfach aufwendiger.

heute sehe ich neue, frische techniken eher als herausforderungen. und die meisten die sich durchsetzen haben auch ihre berechtigung. bei css war es bei mir das selbe.

auch heute noch kämpfe ich manchmal mit den tücken von css. aber es lässt sich nahezu alles so relisieren (und das pixelgenau wenn nötig) wie man sich das vorgestellt hat.

wenn ich da an die zeiten denke in denen ich manchmal bis zu 10 ineinander verschachtelte tabellen zwecks layoutzwecken hatte. und in jeden browser sah es ganz schlimm anders aus (ausser im IE da hab ich ja entwickelt )

und als der kunde nach fertigstellung des enwurfes auf einmal änderungen am layout hatte.....goodness....da wird mir heute noch schlecht.

aber wie gesagt: keiner will dir die tabellen nehmen und ich möchte dich nicht im geringsten persönlich angreifen. aber recherchiere doch ein bisschen bevor du solche behauptungen wie "das geht aber ja sicher nicht mit css..." rasuhaust.

@JesterDay

immer wieder grossen respekt vor deinem wissen. in diesem thread sind schon wieder soooo viele kleine snippets für probleme auf die jeder irgendwann mal stösst der mit css zu tun hat, und die eine lösung dafür bieten, drin, dass man dafür wohl viel zeit mit googlen und tutorials welzen hätte verbringen müssen.

vielen dank dafür

[Aiun]

@TeeSake

ich habe irgendwann zwischendurch mal ein Smilie eingeschmissen um zu verdeutlichen, so schrecklich sich das Thema hier anhört, es geht eben darum die Meinungen mal auszutauschen. Also nehme ich erstmal nix persönlich.

Ich habe auch mal zurückgeblättert und festgestellt das sich vieles wiederholt. Ich denke mal: na und ?

Das Thema ist bei mir in der Berufsschule hochaktuell, wie angesprochen 'darf' ich ein Referat dazu machen. Dementsprechend ziehe ich mir hier aus dem Thema auch die Argumentation für / gegen CSS etz.

Viele aus meiner Klasse, und *spekulation* 80% aller Seite im Internet, arbeiten mit Tabellen-basierten Layouts.

Also geht es mir auch darum, festzustellen ob / wann dies nicht mehr möglich sein wird.

Jeder kann nur Entwickeln nach seinem eigenen Kenntnisstand. Kollegen von mir haben seiten die zu großteilen aus <font> tags bestehen und nichteinmal HTML 3.2 valide sind. Ich für meinen Teil habe erst gestern abend wieder mit Problemen zwischen den Browsern, HTML Versionen unsw. gekämpft.

Was nicht heist das ich generell dagegen bin, sondern eben darüber diskutieren will.

Die Beispiele die ich angegeben habe, sind nunmal dinge, die 'ich' mit CSS nicht umsetzen konnte, und keiner der Kollegen/Klassenkameraden...

Und es ist nunmal für mich Tatsache, das einiges in CSS 'nicht' möglich ist. Ob es sinn macht ist eine andere Frage, über die wohl jeder selbst entscheiden muss. Tatsache ist, das es benutzer und designer in meinem fall haben wollen.

"meine Tabellen" das nehme ich deiner Formulierung nach dann doch als Angriff.

Denn um "meine Tabellen" gehts nicht, wenn nur ich Tabellen benutzen würde, würde ich deinen Einwand verstehen. Aber die Mehrheit *vermutung* nutzt sie, also stellt sich die Frage wie man dagegen argumentieren soll. und das geht nicht mit "es war nie so vorgesehen" oder "du musst von dem tabellen-denken weg". Da wird dir jeder sagen der es nicht will "nee muss ich nicht, funktioniert ja auch so". Nem Kollegen den ich auf die nicht-validitität seiner Seite hingewiesen habe, war das schlicht egal.

Ein großes Problem bleibt die "Mentalität".

Leider sind Beispiele für gutes Layout mit CSS *soweit ich weis* nur selten Teil von HTML/Webseiten-Grundkursen/Tutorials, oder man müsste explizit danach suchen.

Und das Forum hier, so invalide und 'blöd' es sein mag, wird benutzt, ist optisch nicht hässlich unsw.

Die Aussage, das ich selbst CSS benutze, sollte vermeiden das mich wer als Anti-CSSler versteht. Allerdings wirken einige Antworten auf mich auch so, das sie CSS einfach durchpressen wollen, egal was dabei auf der Strecke bleibt.

Doch wenn das Thema stört, dann sollten wir es schließen. Ich bin sicher die Debatte kommt bei bestimmten beispielen dann in festerem Rahmen auf.

Aber da richte ich die Frage eher an Jester, ob ihn meine erneuten Problemstellungen unsw. stören ?

[forTeesSake]

ich bin nicht der meinung dass dieser thread geschlossen werden sollte. schon gar nicht wenn jester solche tipps zum besten gibt

und Aiun: sorry, ich wusste nicht, dass es darum geht dass du das alles für ein referat brauchst. evtl. hab ich das überlesen. tut mir leid.

ansonsten möchte ich noch sagen dass ich feststelle dass immer mehr meiner/unserer kunden ahnung von webprogrammierung haben. sei es weil sie sich selbst dafür interessieren, in irgendeiner computer-abo-zeitschrift darüber lesen oder neffen bzw. enkel ihnen neue trends aufzeigen.

und diese kunden kommen immer öfter mit web standards, css, validatoren usw. auf uns zu und überprüfen unsere arbeit. schon allein deswegen ist es nötig auf dem neuesten stand zu sein und zu bleiben. und css ist (für manche leider) nunmal schwer im kommen.

von mir nun auch mal ein

[Aiun]

dann sei das geklärt ^^

Jester, du hast oben http://dean.edwards.name/IE7/ gepostet, leider finde ich da keine erklärung "wie" das funktioniert...vielleicht erblinde ich langsam aus den javascripts die in den Beispielen verlinkt sind, werde ich nicht wirklich schlau..

@TeeSake

das mit dem Referat ist kürzlich dazu gekommen. Das steht zum Referat an, und da ich mich dank des Themas schon ein wenig damit auseinandergesetzt habe habsch natürlich das Thema gegriffen.

[geloescht_JesterDay]

Aber da richte ich die Frage eher an Jester, ob ihn meine erneuten Problemstellungen unsw. stören ?

Nein, sonst hätte ich das schon längst gesagt

Es ist mir auch klar, dass 80% der Seiten bzw. der Leute die sie machen Tabellen benutzen. Das ist aber kein Grund für mich, das auch zu tun.

Wie Tee das sagte "Es funktioniert und wieso sollte ich mich auf neues einlassen, da mussa ich mich ja erstmal einarbeiten". Hab dasselbe Problem mit Kollegen hier, wobei das "Webdesign" hier eh nur der kleinere Teil der Arbeit ist. Ich mache nciht den ganzen Tag Webseiten, nur ab und zu mal.

Meine Seite waren früher auch mit Frames und Tabellen, es war halt nunmal so und man hat es benutzt. Wobei ich sagen muss, dass ich Tabellen erst "spät" genommen habe, weiss gar nicht mehr, wie es davor war. Hab privat paar Seiten gemacht und einige davon mit WYSIWYG-Editoren. Damit war ich dann irgendwann nicht mehr zufrieden, weil es eben doch nie so wurde, wie es sollte und ich musste von Hand nacharbeiten (das war gegen Ende der 90er, WYSIWYG war damals auch noch jung fürs Web), daher hab ich mir ein HTML-Buch gekauft und bin auf den Texteditor umgestiegen. Aber auch da waren mit Tabellen zu aufwendig, mit den ganzen Zeilen und Zellen. Erst recht spät hab ich dann bewusst Tabellen fürs Layout genutzt.

Nachdem ich dann aber was über CSS gelesen hab und mir csszengarden angesehen hatte, war mir klar, dass das der Weg ist. Es geht vorallem um sauberes und semantisch korrektes HTML. Das kann dann mit CSS gelayoutet werden. Genauso wie ich in meinen Programmen die Variablen und Funktionen sinnvoll benenne um zu erkennen, wozu sie da sind, genauso geht es auch in HTML. Jeder Text hat bestimmte Abschnitte und Teile, und die werden mit den richtigen Tags erkenntlich. Eine Tabelle, die nur zum "strukturieren" da ist, hat im Text nichts verloren. Das ist sauberer, eindeutiger Text. eine Überschrift ist eben nicht nur deshalb eine Überschrift, weil sie groß und fett ist. eine Überschrift wird mit den Tags entspr. gekennzeichnet und wenn sie dann irgendwie besonders aussehen soll, kann man das nachträglich tun.

Mmir ist schon klar, dass viele das (noch?) anders sehen und nur das kennen, was sie auf ihrem Bildschirm sehen. Das hindert mich aber nicht daran, es richtig zu machen und zu versuchen, andere "aufzuklären".

@forTeesSake

Danke für das Lob, aber wie schon gerade gesagt, HTML-Design ist eher ein Nebenjob von mir. Den versuche ich aber korrekt zu machen und hab deshalb auch schon viel probiert und gesucht. bis jetzt ging eigentlich fast immer alles auch mit CSS. Klar gibt es manches was nicht so einfach umzusetzen ist, eine browserfüllende Tabelle z.B., aber das sind auch Dinge, die IMHO eh überholt sind (wie oben schonmal beschrieben). Vielleicht teilweise aus dem "Zwang" zu CSS heraus, kann schon sein, man sollte aber nciht so sehr an altem kleben und auch im Design für neues offen sein. Das sowas auf einem großen Bildschrim (die werden immer größer, gehe mal in spät. 2 Jahren davon aus, dass 1280x1024 standard sind, nicht mehr 1024x768) immer schlechter aussieht, kann ja jeder nachvollziehen.

Um nochmal auf Aiuns Zeitungslayout zurückzukommen: Klar wird eine Seite für das entspr. format gelayuotet, da kann ich aber auch sicher davon ausgehen, dass jeder, der die Zeitung in der Hand hat, das gleiche Format und die gleiche Zeitung hat. Schon wenn du eine Seite nur für den Webbrowser am Bildschirm machst ist die Auflösung bei fast jeden anders. Von daher sind dinge wie eine ÜBerschrift oder ein Logo oben ja ok, die linke obere Ecke ist ja quasi fix. Damit sind die X- und Y-Achse ja als linker bzw. oberer Rand im Browserfenster fest definiert. Die kann man auch benutzen, da sie sich nie ändern. Rdchts bzw. unten ist aber schlicht undefiniert und darauf kann und sollte man sich nicht verlassen.

eine maximale Breite ist ok, weil quer scrollen einfach schlecht und ungewohnt ist. Nach unten hat man aber nie einen Rand und es geht soweit, wie Text da ist (Minimumhöhe von Design kann man auch grad noch durchgehen lassen).

Eine Tabelle über den ganzen Schirm, nur damit ich unten oder rechts oder rechts-unten einen besonderen Inhalt anzeigen kann ist aber einfach etwas, was bäh ist

Bei CSS und Barrierefreiheit geht es vorallem um den Text bzw. das HTML-Dokument. dieser Text soll klar strukturiert, sauber und semantisch korrekt ausgezeichnet sein. Designelemente (von evtl. <imgs mal abgesehen) haben darin nichts verloren.

Template Engines, CMS u.ä. sind ja auch dafür da, den Code vom Inhalt zu trennen. Eine PHP-Seite, bei der der php-Code mit den HTML ausgaben vermischt ist, ist ja auch etwas, was sehr viele Leute machen. Dennoch ist es schöner und einfacher zu verwalten, wenn der Code von der Ausgabe getrennt ist. Wobei ich selber auch keine Template-Engine o.ä. verwende. Ich trenne meinen Code dadurch, dass ich den Code am Anfang des Dokuments in Funktionen u.ä. schreibe und unten im HTML-Teil dann nur noch Funktionsaufrufe drin habe. Ist auch nur so ein Mittelding, aber Nobody's perfect

Aber egal, der ganze Sinn hinter CSS ist halt genau das, Trennung von (sauberem) Inhalt und dem Layout.

[geloescht_JesterDay]

Jester, du hast oben http://dean.edwards.name/IE7/ gepostet, leider finde ich da keine erklärung "wie" das funktioniert...vielleicht erblinde ich langsam aus den javascripts die in den Beispielen verlinkt sind, werde ich nicht wirklich schlau..

Wenn du das runterlädst, ist da irgendwo ne Readme-Datei. Einbinden ist eigentlich ganz einfach:

<!--[if lt IE 7]>

<script src="/ie7/ie7-standard-p.js" type="text/javascript"></script>

<![endif]-->

dazu müssen die Dateien aus dem Archiv halt im Ordner /IE7 liegen (oder du passt das an). Ansonsten musst du nichts mehr tun und der IE kann jetzt einiges, was er vorher nicht oder falsch konnte.

[bmg4ever2]

@JesterDay:

Als sehr aufmerksamer Leser dieses Threads muss ich nur kurz sagen, dass dieser JavaScript-Fix wohl kaum praktikabel ist, womit man position:fixed schlicht und ergreifend erstmal vergessen kann.

Für mich zumindest steht die Vorgabe kein JavaScript zum Layouten zu benutzen meist vor der Vorgabe keine Tabellen zum Layouten zu nehmen, obwohl ich mich mittlerweile auch redlich bemühe keine Tabellen zu verwenden (wahrlich nicht einfach manchmal).

[geloescht_JesterDay]

@JesterDay:

Als sehr aufmerksamer Leser dieses Threads muss ich nur kurz sagen, dass dieser JavaScript-Fix wohl kaum praktikabel ist, womit man position:fixed schlicht und ergreifend erstmal vergessen kann.

Für mich zumindest steht die Vorgabe kein JavaScript zum Layouten zu benutzen meist vor der Vorgabe keine Tabellen zum Layouten zu nehmen).

Naja.. die Navigation ist ja dadurch nicht von Javascript abhängig. Wenn der Besucher kein Javascript aktiviert hat und den IE benutzt, hat er halt keine fixe Navigation.

Hier in dem Forum könnt ich mir z.B. vorstellen, dass der obere Abschnitt bis zum Kontrollzentrum mit Position:fixed festgeklebt wäre. Hätte ich den IE und kein Scripting, dann wäre es halt wie jetzt, die Nav würde aus dem Bild scrollen. Kaputt gehen würde dadurch nichts. Alle anderen hätten aber einen Bonus.

Natürlich sollte man das nciht so anwenden, dass es unbedingt notwendig ist, aber um einen weiteren "Bonuseffekt" zu haben ist es doch ok.

Der IE wird schon noch nachziehen und durch die bedingte Kommentierung ist es ja auch dann noch "sicher".

[Aiun]

hab das vorhin mal ausprobiert.

Nav und "Design" als fixed.

beim Content-Div ein padding eingerichtet, das es nicht unter die fixen elemente kommt.

Leider sieht das ganze schrecklich aus, bei IE Javascript: off.

Weil dann oben das Header-Div, darunter das Content div 'mit' freier padding-fläche und dann erst der Contentdiv-Inhalt.

fällt euch da was zu ein ?

mein bisheriges Resize-Javascript sieht auch ohne JS zumindest noch human aus

[geloescht_JesterDay]

Leider sieht das ganze schrecklich aus, bei IE Javascript: off.

Weil dann oben das Header-Div, darunter das Content div 'mit' freier padding-fläche und dann erst der Contentdiv-Inhalt.

fällt euch da was zu ein ?

Über conditional comments für den IE ein Extra CSS einbinden, indem du die Positionen speziell für den IE drinhast (also die nicht fixed, weil die ja vom IE ignoriert werden). Dieses CSS musst du aber nach dem eigentlichen einbinden (und über den cond. comment nur für den IE), damit die Angaben da die des vorhergehenden überschreiben. Es reichen da drin nur die Angaben, die du überschreiben willst.

(Cond. comment findest du z.B. auch bei IE7 bzw. in meinem Beitrag zum einbinden

EDIT:

Alternativ fällt mir dazu noch ein, im CSS erstmal die Positionen ohne fixed (also relative oder absolute) und erst danach dann die Position fixed. In alles Browser, die das verstehen, würde das die Position überschreiben, in anderen würde dies ignoriert werden.

Hab das aber noch nicht so probiert, ist nur ne Idee.

(und mit dem Extra CSS ist es besser zu steuern)

[geloescht_JesterDay]

oder ich 'relativ' zur Bildschirmgröße arbeiten kann bin ich bereit da mehr auf Divs umzusteigen.

Hab da letztens was gefunden und eine kleine Beispielseite gemacht. Wenn du auf jeden Fall die volle Seitengröße nutzen willst, könnte das vielleicht interessant sein:

<?xml version="1.0"?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

 "http://www.w3.org/TR/xhtml1/DTD/transitional.dtd">

<html>

  <head>

    <title>Test</title>

    <meta http-equiv="content-type" content="text/html; 

      charset=iso-8859-1" />

<style type="text/css">

<!--

#box1{ position: absolute;

        top: 0px;

        left: 40%;

        width: 20%;

        height: 20%;

        border: 1px solid #000000;

        text-align: center; }


#box2{ position: absolute;

        left: 0px;

        top: 40%;

        height: 20%;

        width: 20%;

        border: 1px solid #000000;

        text-align: center; }


#box3{ position: absolute;

        right: 0px;

        top: 40%;

        height: 20%;

        width: 20%;

        border: 1px solid #000000;

        text-align: center; }


#box4{ position: absolute;

        bottom: 0px;

        left: 40%;

        width: 20%;

        height: 20%;

        border: 1px solid #000000;

        text-align: center; }


#box5{ position: absolute;

        top: 30%;

        left: 30%;

        width: 40%;

        height: 40%;

        border: 1px solid #000000;

        text-align: center; }


.content { position: absolute;

           top: 45%;

           left: 5%;

           width: 90%;

           text-align: center;  }

//-->

</style>

  </head>

  <body>

<div id="box1"><div class="content">Box 1</div></div>

<div id="box2"><div class="content">Box 2</div></div>

<div id="box3"><div class="content">Box 3</div></div>

<div id="box4"><div class="content">Box 4</div></div>

<div id="box5"><div class="content">Box 5</div></div>

  </body>

</html>

[Aiun]

hab jetzt auch ein interessantes CSS-Attribut gefunden.

Style: Display: table

bzw. Display: table-cell

wobei ich noch ausprobieren muss ob / wie das SInnvoll ist, für Layouting auf diese Weise eine Tabelle zu simulieren.

[kills]

Hi zusammen,

hab jetzt auch ein interessantes CSS-Attribut gefunden.

Style: Display: table

bzw. Display: table-cell

hab dazu ein Bsp bei selfhtml gefunden:

http://de.selfhtml.org/css/eigenschaften/positionierung.htm#display

funzt leider im IE nicht.

geht in:

FF 1.0.7

Opera 8.0

Opera 8.5

NS 7.1

Mozilla 1.7.8

Gruß,

Markus

[geloescht_JesterDay]

hab jetzt auch ein interessantes CSS-Attribut gefunden.

Style: Display: table

bzw. Display: table-cell

wobei ich noch ausprobieren muss ob / wie das SInnvoll ist, für Layouting auf diese Weise eine Tabelle zu simulieren.

http://css4you.de/display.html

IE unterstützt gar nichts davon.

Aber was daran sinnvoll sein soll? Laut SelfHTML ist es dazu da, um in XML Tabellen darzustellen, weil es in XML sonst keine Tabellen gibt. Also ist es dazu sinnvoll, Tabellen anzuzeigen

In HTML ist es ja nur der zwanghafte Versuch, eine Tabelle mit CSS nachzubauen, also auch vom Aufbau her (siehe Beispiel in SelfHTML).

<div class="table">

<div class="tr">

<div class="td">ich</div>

<div class="td">bin</div>

<div class="td">eine</div>

<div class="td">Tabelle</div>

</div>

</div>

[Aiun]

jep, aber der CSS-Logik nach, benutze ich keine Tabelle für Layout.

Mit einem anderen CSS kann ich den gleichen HTML Code ganz anders darstellen.

Ich habe mit dem Beispiel experimentiert das du da geschickt hast.

Was mir da fehlt ist soetwas wie "benutze 100% - 200px"

Was in tabellen mittels table-layout: fixed wunderbar möglich ist.

hmm...frage, wie sollen sich nach Standard Div-Layer verhalten die Absolut und auf der gleichen Ebene Positioniert sind ? bemerken die sich gegenseitig ?

[geloescht_JesterDay]

jep, aber der CSS-Logik nach, benutze ich keine Tabelle für Layout.

Mit einem anderen CSS kann ich den gleichen HTML Code ganz anders darstellen.

...

hmm...frage, wie sollen sich nach Standard Div-Layer verhalten die Absolut und auf der gleichen Ebene Positioniert sind ? bemerken die sich gegenseitig ?

Das stimmt schon, aber dennoch ist der Inhalt in "Zellen" aufgeteilt, nach dem Tabellenlayout-Prinzip. Ausserdem geht ja mit CSS eben nicht alles genauso, wie mit Tabellen.

Die Layer sollten übereinander liegen einfach, zumindest sind das meine Erfahrungen. Absolute Positionierung nimmt die Layer ja aus dem Textfluss, ein "Bemerken" ist also von daher schon ausgeschlossen, da sie auf anderen Inhalt nicht reagieren sollen bzw. umgekehrt.

[Aiun]

du schaffts es mich zu verwirren !

egal welches Design ich benutze, ich muss meine Daten einzeln in "Zellen" (Div Layer) aufteilen. Teile ich sie nicht auf, kann ich nur noch stark eingeschränkt bestimmen wie sie sich verhalten.

Verbleibt die Frage ob mit einem display: table auch eine Einteilung in zeilen vorgeschrieben ist, ich glaube nähmlich nicht. Wenn ich das richtig sehe kann ich dem Div das du als tr beschrieben hast, sagen ob es eine Zeile oder eine Spalte ist.

[geloescht_JesterDay]

du schaffts es mich zu verwirren !

egal welches Design ich benutze, ich muss meine Daten einzeln in "Zellen" (Div Layer) aufteilen.

Nein, das mit dem aufteilen müssen kommt nur in Tabellen vor. Bestes Beispiel dafür ist das Label/Input-Beispiel weiter oben. Du bestimmst mit CSS, wie es aussehen soll ohne auch nur ein einziges DIV. Wenn du das ganze noch in einen eigenen Absatz packst, kannst du noch viel mehr damit machen. Dabei hast du nix anderes gemacht, als im Text gesagt, dass hier inhaltlich ein neuer Teil kommt. Du hast keine Zelle oder sonst irgendwas benutzt.

Klar werden öfter Divs als Hilfsmittel fürs Layout benutzt, aber müssen tust du das nicht, im Gegensatz zum Tabellenlayout.

Teile ich sie nicht auf, kann ich nur noch stark eingeschränkt bestimmen wie sie sich verhalten.

Verbleibt die Frage ob mit einem display: table auch eine Einteilung in zeilen vorgeschrieben ist, ich glaube nähmlich nicht. Wenn ich das richtig sehe kann ich dem Div das du als tr beschrieben hast, sagen ob es eine Zeile oder eine Spalte ist.

Das kommt auf deine Aufteilung an. Inhaltlich zusammengehöriger Text gehört zusammen und wird eh irgendwie zusammengefasst, und sei es nur in einem eigenen Absatz.

mit Display: table hab ich mich nicht beschäftigt, aber eine Spalte (eigentlich Zelle) ist ja etwas ganz anderes, als eine Zeile (welche Zellen beinhaltet, aber am Ende eine neue Zeile anfängt).

Ich verstehe das nur als Umsetzung des <table><tr><td> Konstrukts und damit genauso nicht fürs Layout gedacht. Das ganze wurde ja nur für XML erdacht, weil da dieses Ursprungskonstrukt fehlt.

Und egal in wieviele Divs du deinen Inhalt aufteilst, ein Div ist im Gegensatz zu einer Tabelle kein optisches/inhaltliches Element, sondern ansich ja "Nichts". Einfach nur eine Hilfslinie, die zum (optischen) Aufbau der Seite (im Browser) gebraucht wird, ansonsten hat ein Div keinerlei andere Bedeutung.

Eine Tabelle hingegen hat eine andere Bedeutung und ist zum Layout ja nur zweckentfremdet. Daher sollte sie eben nur zweckgemäß eingesetzt werden.

EDIT:

Mmit Tabellen reisst du deinen Inhalt ja durch andere Inhaltselemente auseinander, und das ist eben nicht gewollt. Der Inhalt hat nur der Inhalt zu sein und wenn da mal ne Tabelle drin vorkommt ok, aber dann nur, um Daten tabellarisch anzuzeigen. Wenn du deine Daten nur zu Layoutzwecken in eine Tabelle packst (und den eigentlichen Inhalt ja damit änderst), zerstörst du praktisch die saubere Inhaltsstruktur.

Es geht einzig und allein darum , einen sauberen Inhalt zu haben, der nicht mit Layout durchsetzt ist.

[Aiun]

warum zerstöre ich damit meine Inhaltsstruktur ?

Wenn ich eine Tabelle zum Layouten benutze, dann Teile ich damit die Seite in Navigation und Inhalt.

Oder einen Forums-Post in Info- und Textbereich.

Worin besteht da der unterschied ob ich es mit einer Tabelle mache, oder mit einem Div-Layer ?

wenn du sagst, ein Div-Layer ist "nichts", dann kann ich sehr wohl ein Table-Layout über verschachtelte Divs (.table .tr .td oder ähnlich) machen, denn wie gesagt, es ist "nichts". erst mit dem CSS entscheide ich, wie es verwendet wird.

ein

<div class="table" id="site">

<div class="tr" id="horizontale einteilung">

<div class="td" id="nav">

</div>

<div class="td" id="content">

</div>

</div>

</div>

ist da von der Logik nicht viel anders als ein

<ul>

<li></li>

</ul>

hmm, was mir gerade eingefallen ist, gibt es in xhtml eine möglichkeit, eigene tags zu definieren und diese dann 'irgendwie' (Dtd ?) für den Browser zu normalen HTML-Elementen zu mappen ?

ich meine damit jetzt kein XML/XSLT, denn ich habe normalerweise noch PHP/mysql dahinter stehen, das dann mit XML/XSLT nochmal zu transformieren sind mir noch zu weit verteilte Aufgaben.

[geloescht_JesterDay]

wenn du sagst, ein Div-Layer ist "nichts", dann kann ich sehr wohl ein Table-Layout über verschachtelte Divs (.table .tr .td oder ähnlich) machen, denn wie gesagt, es ist "nichts". erst mit dem CSS entscheide ich, wie es verwendet wird.

Ja, von der Logik stimmt das schon, und es wird wohl so schon besser sein, als eine HTML-Tabelle zu nutzen. Ich persönlich finde halt nichts an Tabellenlayouts, ist aber Geschmackssache.

also ein guter Kompromiss wird das schon sein.