Darstellungsproblem die 100000x :D

    Hi.
    Hab folgendes Prob.

    Also wenn man diese Site im Internet Explorer ansieht passt alles.
    http://www.team-dod.net
    NUr öffnet man die Site mit dem Firefox kann man rechts erkennen, wenn man weiter runter scrollt, dass er die Bilder nicht weiter nach unten übenimmt.

    Hier hab ich mal den Code, falls euch das was hilft.

    Man muss die Site teilen.
    Also hier Layout1 (Oben und Links)

    Layout2 (Rechts und Unten)

    Ich hoffe, ihr könnt mir helfen.

    Hi toooml,

    laut W3C-Validation befinden sich 141 Fehler auf der Seite.
    Ist also kein Wunder des der FF nicht alles korrekt darstellt.

    siehe hier

    Die Seite scheint bewusst auf den IE abgestimmt worden zu sein
    und nicht auf die allg. gültigen Standarts.

    ....:AOD:....

    HP Chromebook 15a-nb0225ng, i3N-305, 8 GB LPDDR5-4800 MHz RAM (integriert), 256GB UFS, - chromeOS 135 (Stable Channel) - Linux Debian Bookworm: Firefox Nightly, Beta und Main Release (Mozilla PPA), Android 13: Firefox Nightly und Firefox (Main Release)

    Smartphone - Firefox Main Release, Firefox Nightly

    Einfach den Webmaster der Seite bescheid geben, er möchte sich bitte
    an die gültigen Standarts halten.

    Mehr kannst du nicht machen, ausser du bist der Webmaster :)
    Dann solltest du dich mal unter der Seite von W3C umschauen und dir dort Infos
    abholen :)

    ...:AOD:...

    HP Chromebook 15a-nb0225ng, i3N-305, 8 GB LPDDR5-4800 MHz RAM (integriert), 256GB UFS, - chromeOS 135 (Stable Channel) - Linux Debian Bookworm: Firefox Nightly, Beta und Main Release (Mozilla PPA), Android 13: Firefox Nightly und Firefox (Main Release)

    Smartphone - Firefox Main Release, Firefox Nightly

    Scheiss auf die W3C Fehler. Eine Seite die in möglichst vielen Browsern laufen soll und standard kompatibel sein soll gibts nicht. dank ms & internet exploder.
    Ich hab mich jetzt mal der Seite rechts unten angenommen. Ich gehe einfach mal davon aus, dass diese Zeile
    <td background="../images/gfx/nav_right.jpg">&nbsp;</td>
    den Hintergrund des Menüs bis unten darstellen soll.
    Deswegen steht die entsprechende Tabelle auf 100%.
    So. Jetzt müssen wir gucken ob die vorige Tabelle auch entsprechend groß ist...
    Da nicht schlüssig eingerückt ist hab ich mich jetzt dem Dom Inspector bedient und dieses Element gesucht. Dann siehe eine Ebene höher.
    Ein td tag mit folgenden Attributen:
    width=200
    valign=top
    align=left
    geht man noch ein paar ebenen weiter hoch (man überspringe tr und tbody) entdeckt man einen table tag. Aber ohne höhenangabe (mit cellspacing, borde rund cellpadding=0)
    Die nächste Ebene ist wieder ein TD Tag ohne attribute.

    Also zeigt der Fx die Seite richtig an und der IE falsch. Denn: Eine untergeordete Tabelle richtet sich bei der Höhenangabe height=100% immer danach wieviel Platz in der Tabelle (bzw. in dem höher gelegenen Element) noch übrig ist (müsste doch oder? wenn sie sich nach der gesamten tabellen höhe richtet ists auch nicht schlimm da td dem table tag untergeordnet ist und sich daraus die maximale höhe ergibt...)
    D.h. Wenn du nur eine einfache Tabelle ohne Höhenangabe hast, dann nimmt er den verbleibenden Platz - nämlich 0. Dass diese Zelle doch eine Höhe hat liegt am &nbsp; innendrin.

    Problemlösung: Den vorhergehenden Tags auch eine Höhe von 100% verpassen.

    Noch Fragen?

    height 100%
    gibts net
    wenn dann musses height="100%" heissen.
    Aber durch den Quelltext wühl ich mich net. Das musst du schon selbst machen.
    Einfach mal seite Aufrufen, dann Tools -> Dom Inspector -> dann die Suche "by Attr" auswählen, oben "background" eintragen und unten "../images/gfx/bottom.jpg" dann suchen lassen und einmal f3 drücken. Dann gehst du Element für Element nach oben und trägst eben im Quelltext zu jedem Element height="100%" ein. Natürlich nur wos erlaubt ist, bei nem <tr> tag z.b. nicht. Einfach bis ganz nach oben durch (beim body tag kannstes dir auch sparen bzw. beim html tag)

    Warum ich dir das nicht mache? Erstens ist der Quelltext nicht gescheit eingerückt und zweitens ist es bei so viel Quelltext ein langwieriges und Zeitaufwendiges Unterfangen das richtig hinzubekommen wenn man den quelltext nicht kennt. Leider kann der dom inspector nicht direkt zum quelltext springen sonst hätte ich es dir gemacht (oder gibt's irgendwo eine funktion und ich find sie bloß net? (oder halt ne funktion die mir den ganzen tag kopiert sodass ich nach suchen kann...)

    als ich den dominspektor ausgepackt habe, bekam ich einen krampf. bis ich erstmal in die nähe des entsprechenden elements gekommen in, hatte ich schon so viele unzählige verschachtelungen hinter mir, dass ich meinen dominspektor hab vergrössern müssen. grausam.

    Die Rechte Seite hab ich jetzt gschafft.
    Ich schaff nur die Linke Seite nicht.

    Hier nochmal der Code.

    Naja. Sagen wirs mal so: In diesem Forum geht der Tree auch schon sehr stark "nach rechts". Wenn man dann ein bisschen komplizierteres Design hat (3-spaltig) dann ergeben sich locker so viele tabellen. eine seite mit vielen tabellen ist nicht zwangsläufig schlecht. vorallem weil tabellen immer noch besser als container sind...

    ich psote einfach mal die tags wo ich vermute das da ein height=100% reinmuss.
    ich fange von unten an und arbeite mich nach oben. d.h. du solltest bei meiner liste auch unten anfangen zu lesen und einzufügen und überprüfen obs probleme gibt.

    td background="http://www.team-dod.net/extern/images/gfx/nav_left.jpg">
    <table width="598" border="0" cellspacing="0" cellpadding="0">
    <td align="center" valign="top">
    <table width="598" border="0" cellspacing="0" cellpadding="0">
    <td align="center" valign="top" width="596" bgcolor="#080F17">

    hmm jetzt habe ich den überblick komplett verloren...
    gibts nen tool das den gescheit einrückt?


    edit: so wie ich das sehe gehts jetzt doch?!
    ansonsten stimmt nur die grafik url net:
    http://www.team-dod.net/extern/images/gfx/nav_left.jpg

    Ordentlich gemacht ist tabellenfreies Design auch nicht sehrviel schlechter. auch wenn beim tabellendesign besser mit relativen höhen zu arbeiten ist.

    Aber bei dem ding hier hätten 2 oder 3 verschachtelungen im allerschlimmsten fall völlig gereicht.

    hmm... kennst du eine möglichkeit 2 container nebeneinander zusetzen sodass sie sich trotzdem dem drüberliegenden container unterordnen?
    und unter den einen container soll noch einer
    im endeffekt sollte das in etwa so aussehen wie ext.germany - der rahmen außenrum (als "drüberliegender" container) , das menü (als linker container) der inhalt (als rechter container). unter den rechten container soll nochmal einer, aber dieser soll halt nicht raustehen (in diesem fall die vor/zurück navi)
    Dafür habe ich bis heute keine Lösung gefunden - float:right; sorgt dafür dass die sich dem oberen container nicht mehr unterordnen... eine verzwickte sache...
    Macht man ein sehr Tabellenstarkes Design (also auch kleinere Sachen mit Tabellen) kommt schnell ein großer Haufen zusammen. Einige kann man durch CSS einsparen...

    Für ein simples 3 spalten system mit header braucht man eigentlich nur eine Tabelle, aber die meisten designer solcher sites machen einem da einen Strich durch die Rechnung sodass es mehr werden. Oder verschiedene Probleme gewisser Internet Exploder.
    Wenn der Exploder endlich mal CSS gescheit unterstützen würde und position:relative mal gescheit gefixt wird bzw. genauer beschrieben, dann wäre die Tabelle wirklich ade. Aber wie gesagt, ich kenne keine Lösung für das beschriebene Problem: 2 Container nebeneinander die sich dem höher gelegenen Elemnt unterordnen...

    So?
    Richtig angestellt lassen sich sehr sehr viele Tabellen sparen. Auch wenn man die ein oder anderen einschränkungen schon in kauf nehmen muss. Ein table ist natürlich auch robuster. aber tabellenfreies design zugänglicher. ich baue lieber tabellenfrei. und wenn man die richtigen tricks kennt, kommt man auch damit klar.
    Little Boxes
    Nachteil ist natürlich nach wie vor, die relativen angaben bei der höhe. warum das so unsinnig geregelt wurde, ist mir nicht klar. vor allem, warum es keinen style-sheet gibt um die realtion an das gesammtdocument oder an das elterelement zu knüpfen. ebenso fehlt natürlich auch die option 2 elemente miteibander in abhängigkeit zu stellen.

    allerdinsg gibts auch das hier: http://de.selfhtml.org/css/eigenschaf…ung.htm#display
    -->
    http://de.selfhtml.org/css/eigenschaf…ge/display2.htm

    Nur raten wir mal welcher Browser das nicht kann.......

    ob jetzt tabellen oder ohne... ist eigendlich mehr eine zielgruppen-frage. wenns eh nur desktop-user sind, kann man auch ruhig tabellen benutzen. aber auch nicht wegen jedem kleinen driss, der mit css viel eleganter zu lösen wäre.

    @ bugcatcher: fast
    Also die Litte Boxes seite wandert erstmal eine meine Favs, das ist nen gutes Lookup, das mit Selfhtml kenn ich, aber man will seine Seite ja möglichst kompatibel präsentieren und dank modernster Technik im IE ist das ja auch möglich. Die Seite hatte ich auch besucht bei selfhtml, aber wie gesagt, auch wenn es sich um ext.germany handelt will man ja die Seite nicht absichtlich IE-feindlich bauen.
    Mit der Zielgruppe stimme ich dir zu - wenn man weiß das die Seite nur von Browser benutztern angesurft wird, kann man sich ruhig an den Standard halten und moderneres CSS verwenden, hat man dagegen eine Seite wo auch IE Nutzer draufkommen hat man schon wieder ein Problem.

    hm... ich frag mich nur wieso das bei dir klappt und bei mir net.. ich glaube das lag daran, dass ich für den äußeren rahmen bottom:10px; top:10; verwendet habe... obs position relative oder absolute war... ich glaub relative, weil gibt man keine Position an klappts glaub ich nicht. Aber irgendwie ist manchmal der Wurm drin und man weiß nicht wieso... Weil ich verstehe immo grad net wiesos bei dir geht und bei mir nicht, obwohl der Code ähnlich war...

    Weil ich gut bin und Du nicht? : )

    Will man 2 elemente nebeneinander haben benutzt man einfach 2 container mit float:left (oder right, hauptsache beide gleich). und keinen "normalen" container. damit das ganze nach unten hin einen abschluss findet, setzt man einen 3. normalen container darunter, der clear:both hat. damit werden die floats aufgehoben und es geht "normal" weiter. bei dingen wie oben in meinem beispiel ist es natürlich einfacher mit absoluten breiten zu arbeiten. relative machen spätestens bei border, margin und padding-werten probleme (beim IE nicht, wegen des anderen box-models. hat also auch vorteile.). da muss man dann tricksen. um einen container zu zentrieren benutze ich normalerweise "width:xxx; margin: 0px auto opx auto;". eine 100%-höhen-ausdehnung für hintergründe erreicht man durch elterelemente, die die beiden nebenenanderliegenden elemente umschliesst und dort einen passenden hintergrund einbaut. ist also alles viel mehr trickerrei. aber mit den grundregeln lassen sich eigendlich viele arten von designs schaffen. man muss sich nur von anfang an im klaren sein, was man will und wie man hinkommt.

    mit relativen height-angaben kann man bei dem tabellenlosen-design aber komplett verzichten. das ist nahezu unbrauchbar gelösst. es gibt echt dinge, die kann man mit tabellen wirklich besser und vor allem robuster lösen. Aber ehrlich gesagt. wirklich brauchen tut man dies nur selten.

    das mit dem tabellenlosen design hat vor allem einen vorteil. die sturktur im quelltext ist sauber. somit lassen sich die seite problemlos von DPA-, Schlopphone- & Blindenbrowsern darstellen. Die unterstützen nämlich selten auflösungen von 800+ pixeln. daher werden tabellen dort nicht unterstützt. und sobald die tabletags ausgelassen werden, bleiben unzählige designelemente (rahmengrafiken, spacer, usw) übrig die überall in der seite verstreut als vermeindlicher inhalt liegen bleiben.

    daher meinte ich mit desktop-browsern auch IE. IE, Mozilla, Opera, Konqueror. Damit ist table-design für 800+-auflösungen problemlos möglich. aber das internet ist nicht auf desktop-browser beschränkt. bzw. ist es leider schon, weil die leute eben so gerne standards und empfehlungen (tabellenloses design) ignorieren und nur für ihren browser bauen und andere aussperren. wer sich als mozilla-user über IE-Seiten aufregt, muss sich beim bauen von seiten auch an die eigene nase fassen: sperre ich wen aus? und bei tabellen/frame-design ist die antwort immer: ja.

    Frage ist halt: ist mein inhalt für die anderen desktop-fremden browser/medien überhaupt nützlich/interessant/brauchbar. falls nicht (und da sollte man sich die frage mehrfach stellen), ist ein desktop-browser-design auch nicht verwerflich.

    hmm das beide floats gleich sein müssen is glaube ich nicht so wichtig. also ich hatte es mit float:left für links und right für rechts auch gelöst, nebeneinander waren die teile auf jeden fall... aber auf clear:both bin ich auch nciht gekommen... naja, ich werde mal ein weniger rumprobieren vielleicht schnall ich dann auch wieso es so geht wie es geht ;)
    Weil ich verstehe immer noch nicht wieso ich clear:both; anwenden muss damit sich die kinder container dem eltern element unterordnen...
    Zugegeben, ich habe mich nie wirklich richtig mit CSS beschäftigt und ich kenne auch kein gutes Tutorial für den Umgang mit Containern. Auf selfhtml finde ich nichts wirklich nützliches, das erste halbwegsgute Tutorial das ich gelesen habe war "in die tonne mit der tabelle" oder so auf drweb.de
    Kennst du vielleicht ein gutes? Also diese Seite mit den verschiedenen Lösungen da ist auch schon sehr hilfreich, learning by doing :)