4udesigns: Feldunten unter Textfeld

SELF-Forum

Feldunten unter Textfeld

4udesigns
– Informationen zu den Bewertungsregeln

Hallo,
wie bekomme ich es hin, dass das Feldunten immer 50px unter Textfeld ist, egal wie lang das Textfeld ist?

Beitrag melden
–
Informationen zu den Bewertungsregeln

  1. Feldunten unter Textfeld

    Beat Homepage des Autors
    – Informationen zu den Bewertungsregeln

    wie bekomme ich es hin, dass das Feldunten immer 50px unter Textfeld ist, egal wie lang das Textfeld ist?

    Was meinst du mit Feldunten?
    Meinst du eine <textarea> oder ein <input type="text"> ?

    mfg Beat

    --
    Woran ich arbeite:
    X-Torah
    ><o(((°>       ><o(((°>
       <°)))o><                      ><o(((°>o
    Beitrag melden
    –
    Informationen zu den Bewertungsregeln

    1. Feldunten unter Textfeld

      4udesigns
      – Informationen zu den Bewertungsregeln

      Nein, damit habe ich eine CSS-Klasse bezeichnet.
      Ich hätte gern, dass sie immer unter dem Textfeld wäre.

      Beitrag melden
      –
      Informationen zu den Bewertungsregeln

      1. Feldunten unter Textfeld

        Daniela
        – Informationen zu den Bewertungsregeln

        Nein, damit habe ich eine CSS-Klasse bezeichnet.
        Ich hätte gern, dass sie immer unter dem Textfeld wäre.

        So ganz schlau wird man aus der Fareg nicht.
        Also zumindest ich nicht ;o)

        Kannst du die Frage etwas präzesieren?
        Liebe Grüße
        Daniela

        Beitrag melden
        –
        Informationen zu den Bewertungsregeln

        1. Feldunten unter Textfeld

          4udesigns
          – Informationen zu den Bewertungsregeln

          Also wie bei http://www.top-side.de/index.html soll das unterste Feld immer unter dem Textfeld(mitte) sein.
          Wenn ich jetzt also noch mehr ins textfeld schreibe,
          dann verschiebt sich das Feld unten nach unten.
          wie kann ich das realisieren?

          Beitrag melden
          –
          Informationen zu den Bewertungsregeln

          1. Feldunten unter Textfeld

            vaudi
            – Informationen zu den Bewertungsregeln

            Hallöchen,

            Also wie bei http://www.top-side.de/index.html soll das unterste Feld immer unter dem Textfeld(mitte) sein.
            Wenn ich jetzt also noch mehr ins textfeld schreibe,
            dann verschiebt sich das Feld unten nach unten.
            wie kann ich das realisieren?

            Um dir helfen zu können, müsstest du deinen Code posten, auch wenn der nicht das macht, was du willst. Nur dann kann dir jemand einen Tip geben, woran es liegt.

            Also für das Textfeld, in das du reinschreibst, und für das Feld, das nicht dort ist, wo du es haben willst. Woher soll man wissen, warum es nicht klappt, wenn man nicht weis, was derzeit ausgeführt wird?

            MfG
            vaudi

            Beitrag melden
            –
            Informationen zu den Bewertungsregeln

            1. Feldunten unter Textfeld

              4udesigns
              – Informationen zu den Bewertungsregeln

              @Beat Darum geht es mir ja garnicht.

              Hier mein Code:~~~html <html>
              <head>
              <title>Dreispaltiges Layout mit Kopf- und Fußzeile</title>
              <style type="text/css">
              #Header_oben {
              position: absolute;
              left: 105px;
              top: 40px;
              height: 145px;
              width: 800px;
              background-color: #ffffff;
              background-image:url();
              color: #EBB000;
              border: 1px solid #888888;
              margin: 0px 0px 0px 0px;
              padding: 0px;
              float: left;}

              body {background-color: #dddddd;background-image:url();}

              a{color:#ff00cc; font-size: 15px; text-decoration: none;}

              a:hover {color: #ff99ff; font-size: 15px; text-decoration: none;}

              a:link {color: #ff00ff; font-size: 15px; text-decoration: none;}

              a:active {color: #cc00cc; font-size: 15px; text-decoration: none;}

              a:visited {color: #9900cc; font-size: 15px; text-decoration: none;}

              #nav_container {
              position: absolute;
              left: 105px;
              top: 186px;
              width: 800px;
              height: 52px;
              background-color: #xxx;
              color: #ff00cc;
              border: 0px solid #888888;
              margin: 0px 0px 0px 0px;
              padding: 0px 0px 0px 0px;
              float: left;overflow:auto;
              background-image: url();}

              #Textfeld {
              position: absolute;
              left: 105px;
              top: 200px;
              width: 610px;
              background-color: #ffffff;
              color: #ff00cc;
              background-image: url();
              border: 1px solid #888888;
              margin-bottom: 50px;
              padding: 10px 10px 0px 10px;
              display: inline;
              float: left;}

              #sidebar_container {position: absolute;
              left: 752px;
              top: 200px;
              width: 143px;
              height: 450px;
              background-color: #ffffff;
              color: #ff00cc;
              border: 1px solid #888888;
              margin-bottom: 50px;
              padding: 0px 0px 0px 0px;
              float: left;overflow:auto;
              background-image: url();}

              #Feld_unten {
              width: 780px;
              background-color: #ffffff;
              color: #ff00cc;
              clear: both;
              border: 1px solid #888888;
              padding: 10px;}
              </style>
              </head>
              <body>

              <div id="Header_oben">Der Header</div>

              <div id="nav_container"></div>

              <div id="sidebar_container">Hier die rechten Boxen</div>

              <div id="Textfeld">Lorem ipsum</div>

              <div id="Feld_unten">Hier die Fußzeile</div>

              </body>
              </html>

              Beitrag melden
              –
              Informationen zu den Bewertungsregeln

              1. Feldunten unter Textfeld

                vaudi
                – Informationen zu den Bewertungsregeln

                Hallöchen,

                <html>  

> <body>  
>   
> <div id="Header_oben">Der Header</div>  
>   
> <div id="nav_container"></div>  
>   
> <div id="sidebar_container">Hier die rechten Boxen</div>  
>   
> <div id="Textfeld">Lorem ipsum</div>  
>   
> <div id="Feld_unten">Hier die Fußzeile</div>  
>   
> </body>  
> </html>

                Da hast du ein schönes vorgegebenes Layout versucht anzupassen. Nur hast du

                a) jeden div einzeln untereinander notiert
                  b) mit "position: absolute;" an ihren jetzigen Standort festgenagelt
                  c) damit die float Angaben unwirksam gemacht
                  d) das vorgegebene Layout "abgespeckt", sprich einige div's weggelassen

                Um dein Ziel zu erreichen, müsstest du schon mindestens Textfeld und Feld_unten mit einem weiteren div gruppieren:

                <div id=#content>  
  <div id="Textfeld">Lorem ipsum</div>  
  <div id="Feld_unten">Hier die Fußzeile</div>  
</div>

                Ich bin mir ziemlich sicher, das deine ursprüngliche Vorlage einen div mit id="content", und natürlich eine css-Definition für #content hat.

                Da solltest du zuerst nachschauen...
                MfG
                vaudi

                Beitrag melden
                –
                Informationen zu den Bewertungsregeln

          2. Feldunten unter Textfeld

            Beat Homepage des Autors
            – Informationen zu den Bewertungsregeln

            Also wie bei http://www.top-side.de/index.html soll das unterste Feld immer unter dem Textfeld(mitte) sein.

            Wenn es um die allgemeine Frage geht:

            "Wie richte ich ein Blockelement zentriert aus?"

            So ist die allgemeine Antwort:

            div.yourelement{ margin:0 auto; width:80%;}

            Resultat: 10% Rand Links und 10% Rand Rechts, 80% Breite bezogen auf die breite des nächst höheren Elternelements.

            mfg Beat

            --
            Woran ich arbeite:
            X-Torah
            ><o(((°>        ><o(((°>
               <°)))o><                      ><o(((°>o
            Beitrag melden
            –
            Informationen zu den Bewertungsregeln

  2. Feldunten unter Textfeld

    4udesigns
    – Informationen zu den Bewertungsregeln

    @Beat Darum geht es mir ja garnicht.

    Hier mein Code:~~~css <html>
    <head>
    <title>Dreispaltiges Layout mit Kopf- und Fußzeile</title>
    <style type="text/css">
    #Header_oben {
    position: absolute;
    left: 105px;
    top: 40px;
    height: 145px;
    width: 800px;
    background-color: #ffffff;
    background-image:url();
    color: #EBB000;
    border: 1px solid #888888;
    margin: 0px 0px 0px 0px;
    padding: 0px;
    float: left;}

    body {background-color: #dddddd;background-image:url();}

    a{color:#ff00cc; font-size: 15px; text-decoration: none;}

    a:hover {color: #ff99ff; font-size: 15px; text-decoration: none;}

    a:link {color: #ff00ff; font-size: 15px; text-decoration: none;}

    a:active {color: #cc00cc; font-size: 15px; text-decoration: none;}

    a:visited {color: #9900cc; font-size: 15px; text-decoration: none;}

    #nav_container {
    position: absolute;
    left: 105px;
    top: 186px;
    width: 800px;
    height: 52px;
    background-color: #xxx;
    color: #ff00cc;
    border: 0px solid #888888;
    margin: 0px 0px 0px 0px;
    padding: 0px 0px 0px 0px;
    float: left;overflow:auto;
    background-image: url();}

    #Textfeld {
    position: absolute;
    left: 105px;
    top: 200px;
    width: 610px;
    background-color: #ffffff;
    color: #ff00cc;
    background-image: url();
    border: 1px solid #888888;
    margin-bottom: 50px;
    padding: 10px 10px 0px 10px;
    display: inline;
    float: left;}

    #sidebar_container {position: absolute;
    left: 752px;
    top: 200px;
    width: 143px;
    height: 450px;
    background-color: #ffffff;
    color: #ff00cc;
    border: 1px solid #888888;
    margin-bottom: 50px;
    padding: 0px 0px 0px 0px;
    float: left;overflow:auto;
    background-image: url();}

    #Feld_unten {
    width: 780px;
    background-color: #ffffff;
    color: #ff00cc;
    clear: both;
    border: 1px solid #888888;
    padding: 10px;}
    </style>
    </head>
    <body>

    <div id="Header_oben">Der Header</div>

    <div id="nav_container"></div>

    <div id="sidebar_container">Hier die rechten Boxen</div>

    <div id="Textfeld">Lorem ipsum</div>

    <div id="Feld_unten">Hier die Fußzeile</div>

    </body>
    </html>

    Beitrag melden
    –
    Informationen zu den Bewertungsregeln

    1. Feldunten unter Textfeld

      Beat Homepage des Autors
      – Informationen zu den Bewertungsregeln

      Höre auf, die Dinge absolut zu positionieren, wenn du ein normales Flow Verhalten willst, auf welches clear anwendbar wäre.

      Deinem Sidebar gibst du float:left
      Deinem Textfeld einen margin-left, das der Breite des Sidebars (content, padding + border) entspricht.
      Dein Feld_Unten behält wie jetzt clear:left.

      mfg Beat

      --
      Woran ich arbeite:
      X-Torah
      ><o(((°>       ><o(((°>
         <°)))o><                      ><o(((°>o
      Beitrag melden
      –
      Informationen zu den Bewertungsregeln

      1. Feldunten unter Textfeld

        4udesigns
        – Informationen zu den Bewertungsregeln

        Tut mir leid, aber das Hilft mir garnichts, jetzt ist alles durcheinander.
        Mein code:~~~html <html>
        <head>
        <title>Dreispaltiges Layout mit Kopf- und Fußzeile</title>
        <style type="text/css">
        #Header_oben {
        position: absolute;
        left: 105px;
        top: 40px;
        height: 145px;
        width: 800px;
        background-color: #ffffff;
        background-image:url();
        color: #EBB000;
        border: 1px solid #888888;
        margin: 0px 0px 0px 0px;
        padding: 0px;
        float: left;}

        body {background-color: #dddddd;background-image:url();}

        a{color:#ff00cc; font-size: 15px; text-decoration: none;}

        a:hover {color: #ff99ff; font-size: 15px; text-decoration: none;}

        a:link {color: #ff00ff; font-size: 15px; text-decoration: none;}

        a:active {color: #cc00cc; font-size: 15px; text-decoration: none;}

        a:visited {color: #9900cc; font-size: 15px; text-decoration: none;}

        #nav_container {
        position: absolute;
        left: 105px;
        top: 186px;
        width: 800px;
        height: 52px;
        background-color: #xxx;
        color: #ff00cc;
        border: 0px solid #888888;
        margin: 0px 0px 0px 0px;
        padding: 0px 0px 0px 0px;
        float: left;overflow:auto;
        background-image: url();}

        #content {
        position: absolute;
        left: 105px;
        top: 200px;
        width: 610px;
        background-color: #ffffff;
        color: #ff00cc;
        background-image: url();
        border: 1px solid #888888;
        margin-left: 143px;
        padding: 10px 10px 0px 10px;
        display: inline;
        float: left;}

        #sidebar_container {position: absolute;
        left: 752px;
        top: 200px;
        width: 143px;
        height: 450px;
        background-color: #ffffff;
        color: #ff00cc;
        border: 1px solid #888888;
        margin-bottom: 50px;
        padding: 0px 0px 0px 0px;
        float: left;overflow:auto;
        background-image: url();}

        #Feld_unten {
        width: 780px;
        background-color: #ffffff;
        color: #ff00cc;
        clear: left;
        border: 1px solid #888888;
        padding: 10px;}
        </style>
        </head>
        <body>

        <div id="Header_oben">Der Header</div>

        <div id="nav_container"></div>

        <div id="sidebar_container">Hier die rechten Boxen</div>

        <div id="Content">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
        Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
        Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
        Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
        Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
        Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
        Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
        Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
        Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
        Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
        Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
        Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
        </div>

        <div id="Feld_unten">Hier die Fußzeile</div>

        </body>
        </html>

        Beitrag melden
        –
        Informationen zu den Bewertungsregeln

        1. Feldunten unter Textfeld

          Detlef G.
          – Informationen zu den Bewertungsregeln

          Hallo 4udesigns

          Tut mir leid, aber das Hilft mir garnichts, jetzt ist alles durcheinander.

          Schmeiße als erstes alle position:absolute raus!

          Wenn du willst, dass sich dein Layout an die an die Größe des Inhalts anpasst, dann position:absolute nichts darin zu suchen!
          (Zitat)

          Am besten wird es sein, du beschäftigst dich mit CSS-basierte Layouts.

          Auf Wiederlesen
          Detlef

          --
          - Wissen ist gut
          - Können ist besser
          - aber das Beste und Interessanteste ist der Weg dahin!
          Beitrag melden
          –
          Informationen zu den Bewertungsregeln

  3. Feldunten unter Textfeld

    4udesigns
    – Informationen zu den Bewertungsregeln

    @Beat Darum geht es mir ja garnicht.

    Hier mein Code:~~~html <html>
    <head>
    <title>Dreispaltiges Layout mit Kopf- und Fußzeile</title>
    <style type="text/css">
    #Header_oben {
    position: absolute;
    left: 105px;
    top: 40px;
    height: 145px;
    width: 800px;
    background-color: #ffffff;
    background-image:url();
    color: #EBB000;
    border: 1px solid #888888;
    margin: 0px 0px 0px 0px;
    padding: 0px;
    float: left;}

    body {background-color: #dddddd;background-image:url();}

    a{color:#ff00cc; font-size: 15px; text-decoration: none;}

    a:hover {color: #ff99ff; font-size: 15px; text-decoration: none;}

    a:link {color: #ff00ff; font-size: 15px; text-decoration: none;}

    a:active {color: #cc00cc; font-size: 15px; text-decoration: none;}

    a:visited {color: #9900cc; font-size: 15px; text-decoration: none;}

    #nav_container {
    position: absolute;
    left: 105px;
    top: 186px;
    width: 800px;
    height: 52px;
    background-color: #xxx;
    color: #ff00cc;
    border: 0px solid #888888;
    margin: 0px 0px 0px 0px;
    padding: 0px 0px 0px 0px;
    float: left;overflow:auto;
    background-image: url();}

    #Textfeld {
    position: absolute;
    left: 105px;
    top: 200px;
    width: 610px;
    background-color: #ffffff;
    color: #ff00cc;
    background-image: url();
    border: 1px solid #888888;
    margin-bottom: 50px;
    padding: 10px 10px 0px 10px;
    display: inline;
    float: left;}

    #sidebar_container {position: absolute;
    left: 752px;
    top: 200px;
    width: 143px;
    height: 450px;
    background-color: #ffffff;
    color: #ff00cc;
    border: 1px solid #888888;
    margin-bottom: 50px;
    padding: 0px 0px 0px 0px;
    float: left;overflow:auto;
    background-image: url();}

    #Feld_unten {
    width: 780px;
    background-color: #ffffff;
    color: #ff00cc;
    clear: both;
    border: 1px solid #888888;
    padding: 10px;}
    </style>
    </head>
    <body>

    <div id="Header_oben">Der Header</div>

    <div id="nav_container"></div>

    <div id="sidebar_container">Hier die rechten Boxen</div>

    <div id="Textfeld">Lorem ipsum</div>

    <div id="Feld_unten">Hier die Fußzeile</div>

    </body>
    </html>

    Beitrag melden
    –
    Informationen zu den Bewertungsregeln