Jan3: Konstruktionsplan für Website @ Axel Richter & Co.

Hallo Axel Richter. Da du im letzten Thread mir eine sehr vielversprechende Idee gabst, möchte ich nur noch gern fragen: Wie bekomme ich den Bereich 1 (<div> Nr.1) immer zentriert im Browser 500px; breit. Ansonsten bin ich sehr zufrieden und natürlich dankbar.

  1. Hallo Axel Richter. Da du im letzten Thread mir eine sehr vielversprechende Idee gabst, möchte ich nur noch gern fragen: Wie bekomme ich den Bereich 1 (<div> Nr.1) immer zentriert im Browser 500px; breit. Ansonsten bin ich sehr zufrieden und natürlich dankbar.

    WICHTIG, hier ist der aktuellste Code von Axel Richter, bei dem ich bitte noch obige Frage zu klären hätte. Vielen Dank im Voraus.

    1. Hallo Axel Richter. Da du im letzten Thread mir eine sehr vielversprechende Idee gabst, möchte ich nur noch gern fragen: Wie bekomme ich den Bereich 1 (<div> Nr.1) immer zentriert im Browser 500px; breit. Ansonsten bin ich sehr zufrieden und natürlich dankbar.

      WICHTIG, hier ist der aktuellste Code von Axel Richter, bei dem ich bitte noch obige Frage zu klären hätte. Vielen Dank im Voraus.

      <!doctype html public "-//W3C//DTD HTML 4.0 //EN">
      <html>
      <head>
      <title></title>
      <style type="text/css">
      <!--
      div.oben {position:relative; width:100%; height:50px;}
      div.olinks{position:absolute; left:0; top:0; width:50%; height:100%; border:1px solid #FF0000;}
      div.orechts{position:absolute; left:50%; top:0; width:50%; height:100%; border:1px solid #00FF00;}
      div.menu{position:relative; width:200px; height:400px; float:left; border:1px solid #00FF00;}
      div.inhalt{position:relative; margin-left:200px; height:400px; border:1px solid #0000FF;}
      div.fuss{position:relative; left:10%; width:90%; border:1px solid #000000;}
      -->
      </style>
      </head>
      <body>
      <div class="oben">
        <div class="olinks" id="2">2</div>
        <div class="orechts" id="3">3</div>
      </div>
      <div class="menu" id="4">4</div>
      <div class="inhalt" id="5">
        5
        <h1>Inhalt</h1>
        <p>Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt </p>
        <p>Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt </p>
        <p>Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt </p>
        <p>Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt </p>
        <p>Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt </p>
        <p>Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt </p>
        <p>Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt </p>
        <p>Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt </p>
        <p>Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt </p>
        <p>Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt </p>
        <p>Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt </p>
        <p>Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt </p>
      </div>
      1
      <div class="fuss" id="6">6</div>
      </body>
      </html>

      1. spam spam spam

  2. Hallo Axel Richter. Da du im letzten Thread mir eine sehr vielversprechende Idee gabst, möchte ich nur noch gern fragen:

    Wie bekomme ich es hin, dass Bereich 1 (=Hauptcontainer => und damit alle anderen Bereiche) zentriert im browser mit der Breite 500px; angeordnet ist? Desweiteren sollte Bereich 1 durchaus mit einem Rahmen gekennzeichnet sein.

    Danke im Voraus.

    1. Hallo,

      Hallo Axel Richter. Da du im letzten Thread mir eine sehr vielversprechende Idee gabst, möchte ich nur noch gern fragen:

      Wie bekomme ich es hin, dass Bereich 1 (=Hauptcontainer => und damit alle anderen Bereiche) zentriert im browser mit der Breite 500px; angeordnet ist? Desweiteren sollte Bereich 1 durchaus mit einem Rahmen gekennzeichnet sein.

      Wie oft möchtest du es noch posten? Erst überlegen, nochmal durchlesen, und dann schreiben, steht in der faq, und schon garnicht alles 2 mal.

      Verärgert

      --
      Aleksej
  3. Hallo,

    1. Wenn Du eine E-Mail schreiben möchetst, dann mach das doch bitte einfach, und schreib die nicht hier rein

    2. wenn Du ein posting als Antwort schreiben willst, dann mach es doch bitte im betreffenden (Deinem) thread weiter unten)

    3. bitte etwas mehr Struktur in Deine Fragestellung, vier Fragepostings sind doch etwas arg viel....

    Hoffe, Dir kann jemand helfen,

    Chräcker

  4. Hallo Axel Richter. Da du im letzten Thread mir eine sehr vielversprechende Idee gabst, möchte ich nur noch gern fragen: Wie bekomme ich den Bereich 1 (<div> Nr.1) immer zentriert im Browser 500px; breit. Ansonsten bin ich sehr zufrieden und natürlich dankbar.

    Hallo Jan,

    die Hinweise auf noch offene Threads, und dass man dann dort nachfragt, hast Du ja schon bekommen.

    Zunächst gibts bei meinem Vorschlag keinen div 1. Das ist einfach der body. Du musst also einen div erstellen und mit margin:auto so formatieren, dass sich die Ränder automatisch einstellen. Bei height:100% und width:500px sollte dann dieser Bereich horizontal zentriert werden. Das kann aber der MSIE5.x noch nicht.

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
            "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
    <title></title>
    <style type="text/css">
    <!--
    div.gesamt {margin:auto; width:500px; border:1px solid #000000;}
    div.oben {position:relative; width:100%; height:50px;}
    div.olinks{position:absolute; top:0; left:0; width:50%; height:100%; border:1px solid #FF0000;}
    div.orechts{position:absolute; top:0; left:50%; width:50%; height:100%; border:1px solid #00FF00;}
    div.menu{position:relative; width:200px; height:400px; float:left; border:1px solid #00FF00;}
    div.inhalt{position:relative; margin-left:200px; border:1px solid #0000FF;}
    div.fuss{position:relative; left:10%; width:90%; clear:left; border:1px solid #000000;}
    -->
    </style>
    </head>
    <body>
    <div class="gesamt">
      <div class="oben">
        <div class="olinks" id="2">2</div>
        <div class="orechts" id="3">3</div>
      </div>
      <div class="menu" id="4">4</div>
      <div class="inhalt" id="5">5</div>
      <div class="fuss" id="6">6</div>
    1</div>
    </body>
    </html>

    Hinweis:
    Ich lerne auch noch. Im ersten Vorschlag habe ich das Nebeneinanderstellen des Menu-Bereichs und des Fuß-Bereichs dadurch verhindert, dass ich dem Inhalt-Bereich eine Höhe von mindestens 400px verpasst habe. Besser ist wahrscheinlich die Angabe clear:left im Fußbereich. Diese verbietet, dass etwas links neben dem Fußbereich stehen darf.

    Gruß

    Axel

    1. Ausdrücklich ENTSCHULDIGUNG an dieser Stelle. Das war einfach viel zu unüberlegt von mir. Das mit dem zweiten Thema muss man mir aber verzeiehen, denn ich wusste nicht, dass man hier auch noch 2 m unten angeordnete Beiträge registriert - jetzt weiß ich es.

      Vorallem gilt an dieser Stelle aber mein Dank Alexander Richter, der mir hier vermutlich bei einem für mich sehr großen CSS-Problem helfen konnte. Ich bin sehr glücklich. Danke!

      Getestet habe ich schon mit Opera, und IE - beides einwandfrei. Könnte das jmd. noch für den Mozilla übernehmen?

    2. Damit ich kein neues Thema eröffne, hier die kleine Frage:

      Ich möchte das "Gesamtdiv" hoch an das Browserfenster kleben.

      Dazu habe ich die body-style-definition verwendet:

      body {
        margin:0px; auto;
        }

      Beim IE klappt das wunderbar, aber jetzt fängts schon an eng zu werden mit der Browserkompatibilität, denn Opera lässt zum Beispiel 5 px oberen Rand :( !

      1. Hi,

        body {
          margin:0px; auto;
          }

        wofür steht denn das "auto;" da? ;)

        Beim IE klappt das wunderbar, aber jetzt fängts schon an eng zu werden mit der Browserkompatibilität, denn Opera lässt zum Beispiel 5 px oberen Rand :( !

        Opera mag padding für den body:

        body {
         margin:0;
         padding:0;
        }

        So klappt's mit allen Browsern.

        LG Roland