Ankündigung

Einklappen
Keine Ankündigung bisher.

divs Positionierung Falsh

Einklappen

Neue Werbung 2019

Einklappen
X
  • Filter
  • Zeit
  • Anzeigen
Alles löschen
neue Beiträge

  • divs Positionierung Falsh

    Hallo!
    Ich habe eine Seite erstellt, wo ich HTML5 benutze.
    Um die Seite auf zwei Flächen (Links,Rechts) zu teilen, benutze ich für die linke Seite <article> und für die rechte <aside>.

    Das Problem ist, dass es mehrere article's sind sowie aside's.
    Code:
    .main aside {
    float: right;
    width: 28%;
    }
    .main article {
    float: left;
    width: 57%;
    }
    HTML
    Code:
    <article>
      <section>foo</section>
      <section>foo</section>
    </article>
    <aside>foo</aside>
    <aside>foo</aside>
    <aside>foo</aside>
    So, dementsprechend, wenn ich nur ein Article (section) habe, dafür aber zwei Aside's, spring der untere Aside nach links.


    Normal:
    section | aside
    section | aside
    section | aside
    section |
    section |

    Fehler:
    section | aside
    aside|
    aside|



    Habt ihr ein paar Vorschlage, wie ich es beseitigen könnte?

    Vielen Dank im Voraus!
    mfg Alexander
    PHP-Code:
    if($happy)
       
    $happy false

  • #2
    Du musst zwei Container für die beiden Spalten erstellen, sowas wie:
    Code:
    <div class="left">
        <article></article>
        <article></article>
        <article></article>
    </div>
    <div class="right">
        <aside></aside>
        <aside></aside>
        <aside></aside>
    </div>
    article und aside benötigen kein Styling, lediglich die Container:
    Code:
    .left { width: 50%; float: left }
    .right { width: 50%; margin-left: 50% }

    Kommentar


    • #3
      alles klar, habe ich mir schon gedacht. Danke schön!
      mfg Alexander
      PHP-Code:
      if($happy)
         
      $happy false

      Kommentar


      • #4
        Hab noch ein kleines problem:

        ich möchte mein Footer, wenn es zu wenig Inhalt ist, am unteren Rand platzieren, aber kein "fix", bei viel Content soll es runter gehen.
        Also so wie hier: Click
        habe die Methoden angewendet, mein footer schwebt immer noch zw. content und browser rand.

        hier sind die Styles vor der Anpassung:
        Code:
        .footer-container footer {
            color: white;
            padding: 10px 0;
        }
        .wrapper {
            width: 90%;
            margin: 0 auto;
        	text-align: center;
        }
        Für footer-container Position:absolut; ist keine Lösung, da die Seite dynamisch (PC, Tablett, Handy) sein soll.
        Vielen Dank im Voraus!
        mfg Alexander
        PHP-Code:
        if($happy)
           
        $happy false

        Kommentar


        • #5
          Also, noch dazu, wenn es ausreichend Content da ist, dann ist Footer an dem richtigem Platz, nur wenn zu wenig, gibts Probleme
          mfg Alexander
          PHP-Code:
          if($happy)
             
          $happy false

          Kommentar

          Lädt...
          X