Adrian: Überprüfung: Boxmodell

Hallo!

Kann sich jemand mal kurz Zeit nehmen und prüfen:

[link href=http://oeftiger.germanclanzone.de/oeftiger-new/index.php]

Ich habe das Problem, dass er die Inhaltsbox in der Mitte über die beiden Menüseiten stellt. (erstmal für Mozilla am testen)
ich möchte die box aber in der mitte haben.

Folgender CSS Code:

  
  body {  
    color: #000000;  
    background-color: #D2A74C;  
    background: url("../pictures/gfx/layout_yellow/bg.gif") repeat;  
    font-size: 12pt;  
    font-family: Helvetica, Arial, sans-serif;  
    margin: 0px;  
    padding: 0px;  
    text-align: center;  
    vertical-align: middle;  
  }  
  
  div#page {  
    text-align: left;  
    vertical-align: top;  
    margin: 10px;  
    padding: 0px;  
    width: 760px;  
    border-width: 0px;  
  }  
  
  h1 {  
    font-size: 18pt;  
    margin-top: 0px;  
    margin-left: 0px;  
    margin-right: 0px;  
    margin-bottom: 10px;  
    padding-top: 0px;  
    padding-left: 0px;  
    padding-right: 0px;  
    padding-bottom: 5px;  
    text-align: center;  
    vertical-align: bottom;  
    background: url("../pictures/gfx/layout_yellow/header.gif") no-repeat #D2A74C;  
    border-width: 1px;  
    border-style: solid;  
    border-color: #9F601C;  
  }  
  
  ul.navi {  
    width: 200px;  
    margin-top: 0px;  
    margin-bottom: 10px;  
    padding: 0px;  
    border-width: 1px;  
    border-style: solid;  
    border-color: #9F601C;  
    background: #D2A74C;  
    vertical-align:middle;  
  }  
  ul#leftnavi {  
    text-align:left;  
    float: left;  
    margin-left: 0px;  
    margin-right: 10px;  
  }  
  ul#rightnavi {  
    text-align:right;  
    float: right;  
    margin-left: 10px;  
    margin-right: 0px;  
  }  
  ul.navi li {  
    list-style: none;  
    margin-top: 10px;  
    margin-bottom: 0px;  
    padding: 0px;  
  }  
  ul#leftnavi li {  
    margin-left: 20px;  
    margin-right: 0px;  
  }  
  ul#rightnavi li {  
    margin-left: 0px;  
    margin-right: 20px;  
  }  
  ul.navi a {  
    display: block;  
    font-weight: bold;  
    text-decoration: none;  
  }  
  ul.navi a:link {  
    color: #000000;  
  }  
  ul.navi a:visited {  
    color: #000000;  
  }  
  ul.navi a:hover {  
    color: #9F601C;  
  }  
  ul#.navi a:active {  
    color: #9F601C;  
  }  
  
  div#content {  
    margin-top: 0px;  
    margin-left: 0px;  
    margin-right: 0px;  
    margin-bottom: 10px;  
    padding: 10px;  
    background: #D2A74C;  
    border-width: 1px;  
    border-style: solid;  
    border-color: #9F601C;  
  }  
  
  p#footer {  
    clear: both;  
    font-size: 8pt;  
    margin: 0px;  
    padding: 4px;  
    text-align: center;  
    vertical-align: middle;  
    background-color: #D2A74C;  
    border-width: 1px;  
    border-style: solid;  
    border-color: #9F601C;  
  }  
  

Auf div-content kommts an.

MfG, Adrian

  1. Bitte antwortet... :(

    1. Hallo Adrian,

      grenze Dein Problem bitte ein auf das Problem.

      Gruß, Frankx

      Ps. und nimm auch die richtige Linkfunktion eckigeklammerauf, link, doppelpunkt, nix href...;

      1. Hi!

        Wenn ich den margin setze, dann ist das ja nicht wie im beispiel unter css gemacht... ^^

        siehe http://de.selfhtml.org/css/layouts/anzeige/kopfundfuss.htm

        ich habe versucht, es wie in dem bsp von selfhtml zu organisieren...

        MfG, Adrian

        1. Ja, hast die Floats vergessen, im SelfHtml-Beispiel ist das damit gemacht, also bei
          div#navi noch { float:left } ergänzen und bei
          div#info { float:right [...]}

          1. Hallo!

            Ja, hast die Floats vergessen, im SelfHtml-Beispiel ist das damit gemacht, also bei
            div#navi noch { float:left } ergänzen und bei
            div#info { float:right [...]}

            Aber da ist doch kein div?
            weder im bsp, noch in meiner datei? ...
            ich steig nich mehr durch.
            in dem bsp wurde weder eine margineinrückung gemacht, noch
            divs um die navis gemacht... :?

            Mit freundlichen Grüßen,
            Adrian

            1. Aber da ist doch kein div?
              weder im bsp, noch in meiner datei? ...
              ich steig nich mehr durch.
              in dem bsp wurde weder eine margineinrückung gemacht, noch
              divs um die navis gemacht... :?

              Mit freundlichen Grüßen,
              Adrian

              Ja, tut mir leid, mein Fehler.
              Wobei ich sonst den Fehler nicht sehe, aber du hast einfach das Layout von der Beispielseite kopiert und nur angepasst? Dann versteh ich nicht, wie der Fehler kommen kann.

            2. Hi,

              Aber da ist doch kein div?
              weder im bsp, noch in meiner datei? ...

              Aber sicher doch: <div id="Info"> und <div id="Inhalt"> - weil hier mehrere Block-Elemente gruppiert werden. Die Navigation ist lediglich eine <ul id="Navigation">.

              in dem bsp wurde weder eine margineinrückung gemacht, noch
              divs um die navis gemacht... :?

              schau mal genau hin:
              ul#Navigation { float: left; width: 18em; font-size: 0.83em; }
              div#Info { float: right; width: 12em; font-size: 0.9em; }
              div#Inhalt { margin: 0 12em 1em 16em; font-size: 100.01%; }
              Einzig der Inhalt floatet nicht und hat margin nach links (16em) und rechts (12em), passend zu den Breiten der seitlichen Boxen.

              Deinem div#content fehlen diese seitlichen margins.

              freundliche Grüße
              Ingo

              1. Hi!

                Alles klar, jetzt hab ich verstanden... ;)
                mein gehirn hatte sich verstellt gegen margins... ^^

                Naja, vielen Dank nochmal.

                Mit freundlichen Grüßen,
                Adrian

  2. Hi Adrian,

    Kann sich jemand mal kurz Zeit nehmen und prüfen:

    http://oeftiger.germanclanzone.de/oeftiger-new/index.php

    Ich habe das Problem, dass er die Inhaltsbox in der Mitte über die beiden Menüseiten stellt. (erstmal für Mozilla am testen)
    ich möchte die box aber in der mitte haben.

    Dann musst du dem Browser sagen, wie weit es vom linken und rechten Rand weg sein soll. (Tipp: es fängt an wie mein Name)

    Gruß, Marian

    1. Hi!

      Dann musst du dem Browser sagen, wie weit es vom linken und rechten Rand weg sein soll. (Tipp: es fängt an wie mein Name)

      ich wollte gezielt nicht mit margin arbeiten... ;)

      ich habe versucht es nach http://de.selfhtml.org/css/layouts/anzeige/kopfundfuss.htm zu organisieren...

      MfG, Adrian

      1. Hi Adrian,

        aber genau dort wird der contentbereich doch nur durch margin soweit eingerückt, dass er die anderen nicht überlappt, oder hatte ich das falsch in erinnerung?

        gruß, frankx

      2. Hi Adrian,

        dort:

        div#Inhalt {
            margin: 0 12em 1em 16em;
            padding: 0 1em;
            border: 1px dashed silver;

        oder bin ich am Thema vorbei?

        Gruß, Frankx

  3. Moin Adrian,

    dann nehmen wir doch mal das von die von dir als Vorlage benutzte CSS aus Self unter die Lupe:

    Die linke Navigationsleiste ist 18em breit und hat einen linken Umfluss:

    ul#Navigation {float: left;}

    Die rechte Infobox floatet rechts und soll 12em breit sein.

    div#Info {float: right; width: 12em;}

    Wenn eine der beiden Seitenboxen noch irgendwelche seitlichen margins oder paddings hat, musst du die mit einkalkulieren.

    Wenn du dir nun das Inhalts-Div anguckst, hat dieses bezüglich der Aussenabstände folgende Angaben:
    div#Inhalt {margin: 0 12em 1em 16em;}
    Ausgeschrieben wäre das:
    margin-top: 0px;
    margin-right: 12em;
    margin-bottom: 1em;
    margin-left: 16em;

    Vom linken und rechten Rand hält sich die Inhaltsbox also ungefähr genau so weit entfernt, wie die jeweiligen Außenboxen breit sind (für den linken Rand 16 em statt 18em, weil die Schriftgröße für die Navibox via font-size: 0.83em; herabgesetzt ist, und ein in der linken Box kleiner ist als für die übrigen). Diesen margin-Angaben ist es zu verdanken, dass die Inhaltsbox die  Außenboxen nicht überdeckt.

    Dass dein div#content die Außenblöcke überlagert, liegt an deinen margin-Angaben dort: Du sagst explizit, dass margin-left und margin-right 0px sein sollen. Der Bezugsrahmen dafür ist dein div#Page!

    Die Breite deiner Außenboxen legst du in ul.navi auf 200px fest. Dazu kommen  für ul#leftnavi noch 10px Rand nach rechts, für ul#rightnavi 10px Rand nach links. Daraus ergibt sich für div#content.

    div#content {
      margin: 0px 210px 0px 210px:
      ... die übrigen Angaben
    }

    Frag nach, wenn du es nicht verstanden hast.

    Schönes Restwochenende, Uschi

    1. Nochmal,

      Ein Blick auf deinen Quälcode zeigt mir, dass du im Doctype HTML 4.01 angegeben hast. Das ist für Layouts mit float und vielen Boxen nix.
      Bevor du weitermachst, solltest du auf XHTML umstellen und deine Syntax entsprechend anpassen, du hast sonst jede Menge Ärger mit den unterschiedlichen Boxmodels des Internet Explorers (falsch) und ordentlichen Browsern (z.B. Firefox).

      Die Unterschiede zwischen XHTML und HTML:
      http://de.selfhtml.org/html/xhtml/unterschiede.htm. Besonders die Abschnitte ab Kleinschreibung solltest du lesen. Verzichte unbedingt auf eine xml-Deklaration, sonst hast du wieder Ärger mit den IE.

      Gruß, Uschi

      1. Hallo!

        Bevor du weitermachst, solltest du auf XHTML umstellen und deine Syntax entsprechend anpassen, du hast sonst jede Menge Ärger mit den unterschiedlichen Boxmodels des Internet Explorers (falsch) und ordentlichen Browsern (z.B. Firefox).

        Die Unterschiede zwischen XHTML und HTML:
        http://de.selfhtml.org/html/xhtml/unterschiede.htm. Besonders die Abschnitte ab Kleinschreibung solltest du lesen. Verzichte unbedingt auf eine xml-Deklaration, sonst hast du wieder Ärger mit den IE.

        dh, ich schreibe oben weiter mit html4.01 und schreibe aber in xml?
        ich meine, ich versuche ja schon, meine sachen übersichtlich zu halten.
        ich wurde schonmal darauf hingewiesen, xhtml zu benutzen, aber dabei habe ich keine vorteile entdecken können.
        dh, wenn ich xhtml benutze, dann wird in allen browsern (neueren) ohne fehler alles gleich angezeigt?
        ab welchen?

        Mit freundlichen Grüßen,
        Adrian

        1. Gugugg,

          dh, ich schreibe oben weiter mit html4.01 und schreibe aber in xml?

          Nein, du gibst in jedem Falle einen XHTML-Doctype an, z.B.
          <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
              "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

          Ohne Angabe eines XHTML-Doctypes rennt der IE im sogenannten Quirksmode und verwendet ein vom Standard   und damit den ordentlichen Browsern abweichendes Boxmodel. Beispiel:

          div.box {
            width: 200px;
            padding-left: 10px;
            padding-right: 10px;
            border: 2px solid #000000;
          }

          Im IE ist dein div.box im Quirksmode incl. der 20px für das Padding und die 4px für die Border links und rechts 200px breit, bei allen anderen werden 224px verbraucht. Sobald du einen XHTML-Doctype verwendest, hat sich zumindest dieses Problem für IE >= 5.5 erledigt, und auf den IE 5.0 würde ich an deiner Stelle zumindest solange pfeifen, bis du ordentlich CSS kannst. Das Ding kann einen nämlich in den Wahnsinn treiben.

          Und nun die Sache mit der XML-Deklaration. Diese kannst du zusätzlich VOR dem Doctype angeben, e.g.
          <?xml version="1.0" encoding="ISO-8859-1"?>
          <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
              "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

          Das dumme ist nur: Sobald du das tust, geht der IE unweigerlich wieder in den Quirksmode, und ich denke nicht, dass du die XML-Deklaration brauchst.

          dh, wenn ich xhtml benutze, dann wird in allen browsern (neueren) ohne fehler alles gleich angezeigt?

          ALLES gleich nicht, aber doch im Wesentlichen. Die unterschiedlichen Browser haben unterschiedliche Ansichten über die Standardzeilenhöhe, die margins und paddings von Absätzen, Listen usw. usf. Du bist vielleicht gut beraten, wenn du dir mal die Standardvorgaben von Mozilla/Firefox anguckst. Die findest du auf deinem Rechner hier: Programm_Verzeichnis_Firefox/res/html.css (nur angucken, nicht drin rummalen). Von den Werten dort ausgehend kannst du dann für alle Browser einheitlich definieren, wie die Dinge aussehen sollen.

          Ein paar Probleme verbleiben für den IE, der auch unabhängig von der Boxmodelfrage so einige Bugs hat, besonders wenn es um float geht. Gehe so vor: Räume deinen Code auf, prüfe, wie es in Firefox oder Opera aussieht. Erst dann ziehst du den IE zu Rate. Sollten sich da Abweichungen ergeben, hilft der folgende Hack.

          In der CSS zuerst die Angaben für die guten Browser notieren, dann einzelne Werte für den IE überschreiben, z.B.

          p {font-size: 0.9em} /* Das hier lesen alle */
          * html p {font-size: 0.8em} /* Diese Zeile liest nur der IE */

          Liebe Grüße, Uschi

      2. Hallo Uschi,

        Ein Blick auf deinen Quälcode zeigt mir, dass du im Doctype HTML 4.01 angegeben hast. Das ist für Layouts mit float und vielen Boxen nix.
        Bevor du weitermachst, solltest du auf XHTML umstellen und deine Syntax entsprechend anpassen, du hast sonst jede Menge Ärger mit den unterschiedlichen Boxmodels des Internet Explorers (falsch) und ordentlichen Browsern (z.B. Firefox).

        Man kann auch HTML 4.01 verwenden und den MSIE trotzdem in den gewünschten standardkonformen Modus schicken. Siehe die Tabellen auf http://hsivonen.iki.fi/doctype/.
        Man muss dann entweder einen korrekten Doctype HTML 4.01 Strict angeben oder einen vollen Doctype HTML 4.01 Transitional.
        Siehe auch hier: http://www.carsten-protsch.de/zwischennetz/doctype/einleitung.html#full

        Mathias

        1. moin molily

          Frau lernt doch nie aus, thx für Info.

          An Adrian,

          nimm trotzdem XHTML, schon deshalb, weil das die Musik von heute und morgen ist, einige weitere Möglichkeiten eröffnet und dein Projekt ja eh noch am Anfang steht.

          Gruß, Uschi

          1. Hallo,

            nimm trotzdem XHTML, schon deshalb, weil das die Musik von heute und morgen ist,

            *g* hyper-hypa - hyped!

            einige weitere Möglichkeiten eröffnet

            Welche denn, wenn man die XML-Deklaration doch für den IE weglassen muss und der Server das Ganze mit Content-Type: text/html ausliefern muss, damit Browser was damit anfangen können? Das XHTML ist dann auch _nur_ HTML. Da schreibe doch lieber gleich HTML.

            viele Grüße

            Axel

            1. Hallo!

              Das XHTML ist dann auch _nur_ HTML. Da schreibe doch lieber gleich HTML.

              Das meine ich auch, aber mal sehen, vielleicht stelle ich doch auf xhtml um... das wird doch eigentlich nur hier verbreitet, weil es anfänger zu ordnung und sauberkeit und disziplin erziehen soll... ;)

              Mit freundlichen Grüßen,
              Adrian

              1. Hallo,

                Das XHTML ist dann auch _nur_ HTML. Da schreibe doch lieber gleich HTML.

                Das meine ich auch, aber mal sehen, vielleicht stelle ich doch auf xhtml um... das wird doch eigentlich nur hier verbreitet, weil es anfänger zu ordnung und sauberkeit und disziplin erziehen soll... ;)

                Nein. Es wäre schon sinnvoll und hätte schon Vorteile, siehe:http://de.selfhtml.org/html/xhtml/unterschiede.htm#allgemeines, wenn man es nicht für die zur Zeit gebräuchlichen Web-Browser verstümmeln und mit dem falschen Content-Type ausliefern lassen müsste. Sollte es sich also bei Dir um eine Web-Ressource handeln, die den IE ausschließen kann und deren Nutzer Browser nutzen, die einen XML-MIME-Type unterstützen, dann würde XHTML sinnvoll sein.

                Für normale Web-Seiten ist aber SGML (HTML) weiterhin die am besten unterstützte Auszeichnungssprache, und CSS für dieses HTML die zu bevorzugende Methode zur Gestaltung. Das wird, meiner Meinung nach, auch noch einige Jahre so bleiben.

                viele Grüße

                Axel

              2. Hallo,

                das wird doch eigentlich nur hier verbreitet, weil es anfänger zu ordnung und sauberkeit und disziplin erziehen soll... ;)

                Validiertes HTML 4.01 nach strict.dtd erzieht mehr als XHTML 1.0 Transitional.

                viele Grüße ;-)

                Axel

                1. Hallo,
                  Dann erzähl mir mal worauf sich diese Einschätzung gründet. Und wie du das lernökonomisch rechtfertigen willst? Weiss ich um die Grundprinzipien der XHTML-Syntax (so simple Sachen wie: Alles muss geschlossen werden, auch ein <br />) kann ich im Grunde auch schon XML.
                  Und das Zusammenwürfeln von SGML und HTML ist ja wohl ein Witz. Oder hat für dich SGML auch zu wenig Auszeichnungsvokabular?
                  Gruß, Uschi

              3. Gugugg ihr zwei,

                Das meine ich auch, aber mal sehen, vielleicht stelle ich doch auf xhtml um... das wird doch eigentlich nur hier verbreitet, weil es anfänger zu ordnung und sauberkeit und disziplin erziehen soll... ;)

                Ihr schreibt gerade Unsinn. Nehmen wir mal an, man hat so ein paar 100 Seiten statischen Kontent, hat sich aber an den Regeln von xhtml orientiert und damit im Kern xml geschrieben. Und dann will man die Inhalte vielleicht doch mal per xslt umwursten. Selbst wenn man die xml-Deklaration erstmal weggelassen hat, die steht immer in der ersten Zeile, also null problem, dass mal eben hinzuzufügen. Aber wenn man sich nicht an offizielle und eigene Regeln hält, dann gibt das ein Problem. Und im Übrigen: Ja, ich denke dass bei allem, was mit IT zu tun hat, die strikte Einhaltung von Regeln nix als Vorteile mit sich bringt. Ich weiß das aus ziemlich leidvoller Erfahrung.
                Außerdem ist xhtml beides: a) HTML und b) XML.

                Im Übrigen habe ich gesagt, Adrian soll die XML-Deklaration solange weggelassen, bis er hinreichend CSS kann, um den IE im Quirksmode zu überlisten, denn das kann wirklich Nerven kosten, und man sollte dann so halbwegs wissen, was man tut. Und bislang hat er ja noch nicht besonders viel Content produziert. Sich die paar Regeln anzueignen, dauert vielleicht drei Stunden, jedenfalls die wesentlichen. Umbau von viel Content viel Zeit :-))

                Gruß, Uschi

                1. Hallo,

                  Ihr schreibt gerade Unsinn.

                  Ja?

                  Nehmen wir mal an, man hat so ein paar 100 Seiten statischen Kontent, hat sich aber an den Regeln von xhtml orientiert und damit im Kern xml geschrieben.

                  Ja, mit den wenigen Elementen, die XHTML 1.0 definiert hat, hat er sehr simples XML geschieben.

                  Und dann will man die Inhalte vielleicht doch mal per xslt umwursten.

                  Mit den wenigen Elementen, die mit XHTML 1.0 definiert sind? Nein, die Verwendung von XML ist sinnvoll, um Daten zu speichern. Diese können dann mit XSLT oder mit etwas Anderem, in bestimmte Ausgabeformate, z.B. HTML, transformiert werden. Das Transformieren von XHTML 1.0 in Irgendwas halte ich nicht für sinnvoll. Bring mal Beispiele für sinnvolle Anwendungen.

                  Und im Übrigen: Ja, ich denke dass bei allem, was mit IT zu tun hat, die strikte Einhaltung von Regeln nix als Vorteile mit sich bringt. Ich weiß das aus ziemlich leidvoller Erfahrung.

                  Ja, es wurde in diesem Threadzweig auch nichts Gegenteiliges behauptet. HTML 4.01 nach strict.dtd ist _die_ Regel für HyperText und ich wende sie auch konsequent an.

                  Außerdem ist xhtml beides: a) HTML und b) XML.

                  Ja, es _kann_ beides sein. Ich halte XHTML 1.0 als XML aber nicht für sehr innovativ. XHTML 1.0 bietet einfach zu wenige Elemente, um sinnvoll Daten allgemeiner Art zu strukturieren. Es bietet genügend Elemente, um Hyper-Textdokumente zu strukturieren. Solche Dokumente sind aber normalerweise _Ergebnisse_ der Datenverarbeitung und _nicht_ deren Datenspeicher.

                  viele Grüße

                  Axel

      3. Hallo!

        Ein Blick auf deinen Quälcode zeigt mir, dass du im Doctype HTML 4.01 angegeben hast.

        Ist mein Code so schlimm? was wäre denn zu verbessern?
        ich finde ihn so noch sehr übersichtlich...

        Mit freundlichen Grüßen,
        Adrian