Seite aufbauen mit geschachtelten Divs?

ShadCad · 2. April 2017

Hallo,
ich bin gerade dabei meine erste Seite zu basteln. Ungefähr so soll sie aussehen [Blockierte Grafik: http://www.bilder-upload.eu/thumb/f508fe-1491137714.png]
Als Anfänger stellt sich mir nun die Frage: Wie geht man das an? Wieviele DIV's braucht man? verschachtelt? Begrenzt man dann die Breite er Divs mit "width"? Platziert man die Divs mit Margin? Position: Absolute soll man ja nicht machen oder?
Was passiert wenn das Display kleiner ist (Smartphone) ist dann noch alles da?

Meine Erste Idee für die Div aufteilung war [Blockierte Grafik: http://www.bilder-upload.eu/thumb/2c0e6c-1491138747.png]
Ich weiß aber nicht wie ich die platzieren, "fixieren" soll.

JR Cologne · 2. April 2017

Ich habe dir mal kurz ein mögliches Markup runtergeschrieben. So ähnlich könntest du es aufbauen, definitiv nicht perfekt:

HTML

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Beispielaufbau</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
  </head>
  <body>
    <header>
      <a href="index.html" class="home-button_wrap">
        <img src="home-button.svg" class="home-button">
      </a>




      <h1>Text</h1>




      <a href="index.html" class="menu-button_wrap">
        <img src="menu-button.svg" class="menu-button">
      </a>
    </header>




    <main>
      <section class="top">
        <div class="infobox">
          <p>Erklärungstext hier</p>
        </div>
      </section>




      <section class="main">
        <section class="left">
          <ul>
            <li>Name 1</li>
            <li>Name 2</li>
            <li>Name 3</li>
            <li>Name 4</li>
          </ul>
        </section>




        <section class="middle">
          <div class="switcher">
            <a href="#" class="left-arrow_wrap">
              <img src="left-arrow.svg" class="left-arrow">
            </a>




            <form action="" method="get" class="date-picker_wrap">
              <input type="date" class="date-picker">
            </form>




            <a href="#" class="right-arrow_wrap">
              <img src="right-arrow.svg" class="right-arrow">
            </a>
          </div>




          <div class="showcase">
            <ul>
              <li>Liste Element 1</li>
              <li>Liste Element 2</li>
              <li>Text ...</li>
              <li>Text ...</li>
              <li>Text ...</li>
            </ul>
          </div>
        </section>




        <section class="right">
          <ul>
            <li><a href="#" class="button">Button 1</a></li>
            <li><a href="#" class="button">Button 2</a></li>
            <li><a href="#" class="button">Button 3</a></li>
          </ul>
        </section>
      </section>
    </main>
  </body>
</html>

Alles anzeigen

Anschließend müsstest du deinem HTML die Styles verpassen. Für den Anfang würde ich erstmal im Wesentlichen mit width, margin, padding und float arbeiten.

Besonders float ist zwar nicht mehr die allerneuste Technologie, aber immer noch völlig ok und für Anfänger ist das vermutlich erstmal einfacher.

Falls es weitere Fragen gibt, nur raus damit. Versuche am besten aber erstmal selber anzufangen, denn so lernt man es am leichtesten.

Seite aufbauen mit geschachtelten Divs?

Jetzt mitmachen!

Teilen