Ein modernes Layout kann mit mehreren möglichkeiten gestaltet werden.
Hier geht es nur um die Positionierung von Elementen (div-Container) mit float, flex und grid,
diese können Responsives Design am besten darstellen.
Beispiel mit float:
Ein Textfeld
Ein Textfeld
Ein Textfeld
Ein Textfeld
Ein Textfeld
Ein Textfeld
Ein Textfeld
Ein Textfeld
Ein Textfeld
SOCIAL MEDIA
UNTERNEHMEN
ADDRESSE
float eignet sich bedingt als modernes Layout-Gerüst!
Beispiel mit float html ansehen ausblenden
html: float
<div id="box">
<div id="head">
<div class="hleft"><img src="bild.png" alt=""></div>
<div class="hright"><img src="bild.png" alt=""></div>
</div>
<nav> <ul> <li> Navigation </li> </ul> </nav>
<div id="bgzwei">
<div class="zwleft">
Ein Textfeld
</div>
<div class="zwright">
Ein Textfeld
</div>
</div>
<div id="bgdrei">
<div class="drleft">
Ein Textfeld
</div>
<div class="drmitte">
Ein Textfeld
</div>
<div class="drright">
Ein Textfeld
</div>
</div>
<div id="bgvier">
<div class="vleft">
Ein Textfeld
</div>
<div class="vmitte">
<img src="bild.png" alt="">
<img src="bild.png" alt="">
<img src="bild.png" alt="">
</div>
<div class="vright">
Ein Textfeld
</div>
</div>
<div id="bgfunf">
<div class="fuleft">
<img src="bild.png" alt="">
</div>
<div class="furight">
Ein Textfeld
</div>
</div>
<div id="bgsechs">
<div class="seleft">
Ein Textfeld
</div>
<div class="seright">
<img src="bild.png" alt="">
</div>
</div>
<div id="foot">
<div class="fleft">
<h4>SOCIAL MEDIA</h4>
</div>
<div class="fmiddle">
<h4>UNTERNEHMEN</h4>
</div>
<div class="fright">
<h4>ADDRESSE</h4>
</div>
</div>
</div> <!-- Ende id box -->
<div id="head">
<div class="hleft"><img src="bild.png" alt=""></div>
<div class="hright"><img src="bild.png" alt=""></div>
</div>
<nav> <ul> <li> Navigation </li> </ul> </nav>
<div id="bgzwei">
<div class="zwleft">
Ein Textfeld
</div>
<div class="zwright">
Ein Textfeld
</div>
</div>
<div id="bgdrei">
<div class="drleft">
Ein Textfeld
</div>
<div class="drmitte">
Ein Textfeld
</div>
<div class="drright">
Ein Textfeld
</div>
</div>
<div id="bgvier">
<div class="vleft">
Ein Textfeld
</div>
<div class="vmitte">
<img src="bild.png" alt="">
<img src="bild.png" alt="">
<img src="bild.png" alt="">
</div>
<div class="vright">
Ein Textfeld
</div>
</div>
<div id="bgfunf">
<div class="fuleft">
<img src="bild.png" alt="">
</div>
<div class="furight">
Ein Textfeld
</div>
</div>
<div id="bgsechs">
<div class="seleft">
Ein Textfeld
</div>
<div class="seright">
<img src="bild.png" alt="">
</div>
</div>
<div id="foot">
<div class="fleft">
<h4>SOCIAL MEDIA</h4>
</div>
<div class="fmiddle">
<h4>UNTERNEHMEN</h4>
</div>
<div class="fright">
<h4>ADDRESSE</h4>
</div>
</div>
</div> <!-- Ende id box -->
Beispiel mit flex:
Ein Textfeld
Ein Textfeld
Ein Textfeld
Ein Textfeld
Ein Textfeld
Ein Textfeld
Ein Textfeld
Ein Textfeld
Ein Textfeld
SOCIAL MEDIA
UNTERNEHMEN
ADDRESSE
flex eignet sich als modernes Layout-Gerüst!
Beispiel mit flex html ansehen ausblenden
html: flex
<div id="box">
<div id="head">
<div class="hleft"><img src="bild.png" alt=""></div>
<div class="hright"><img src="bild.png" alt=""></div>
</div>
<nav> <ul> <li> Navigation </li> </ul> </nav>
<div id="bgzwei">
<div class="zwleft">
Ein Textfeld
</div>
<div class="zwright">
Ein Textfeld
</div>
</div>
<div id="bgdrei">
<div class="drleft">
Ein Textfeld
</div>
<div class="drmitte">
Ein Textfeld
</div>
<div class="drright">
Ein Textfeld
</div>
</div>
<div id="bgvier">
<div class="vleft">
Ein Textfeld
</div>
<div class="vmitte">
<img src="bild.png" alt="">
<img src="bild.png" alt="">
<img src="bild.png" alt="">
</div>
<div class="vright">
Ein Textfeld
</div>
</div>
<div id="bgfunf">
<div class="fuleft">
<img src="bild.png" alt="">
</div>
<div class="furight">
Ein Textfeld
</div>
</div>
<div id="bgsechs">
<div class="seleft">
Ein Textfeld
</div>
<div class="seright">
<img src="bild.png" alt="">
</div>
</div>
<div id="foot">
<div class="fleft">
<h4>SOCIAL MEDIA</h4>
</div>
<div class="fmiddle">
<h4>UNTERNEHMEN</h4>
</div>
<div class="fright">
<h4>ADDRESSE</h4>
</div>
</div>
</div> <!-- Ende id box -->
<div id="head">
<div class="hleft"><img src="bild.png" alt=""></div>
<div class="hright"><img src="bild.png" alt=""></div>
</div>
<nav> <ul> <li> Navigation </li> </ul> </nav>
<div id="bgzwei">
<div class="zwleft">
Ein Textfeld
</div>
<div class="zwright">
Ein Textfeld
</div>
</div>
<div id="bgdrei">
<div class="drleft">
Ein Textfeld
</div>
<div class="drmitte">
Ein Textfeld
</div>
<div class="drright">
Ein Textfeld
</div>
</div>
<div id="bgvier">
<div class="vleft">
Ein Textfeld
</div>
<div class="vmitte">
<img src="bild.png" alt="">
<img src="bild.png" alt="">
<img src="bild.png" alt="">
</div>
<div class="vright">
Ein Textfeld
</div>
</div>
<div id="bgfunf">
<div class="fuleft">
<img src="bild.png" alt="">
</div>
<div class="furight">
Ein Textfeld
</div>
</div>
<div id="bgsechs">
<div class="seleft">
Ein Textfeld
</div>
<div class="seright">
<img src="bild.png" alt="">
</div>
</div>
<div id="foot">
<div class="fleft">
<h4>SOCIAL MEDIA</h4>
</div>
<div class="fmiddle">
<h4>UNTERNEHMEN</h4>
</div>
<div class="fright">
<h4>ADDRESSE</h4>
</div>
</div>
</div> <!-- Ende id box -->
Beispiel mit grid:
Ein Textfeld
Ein Textfeld
Ein Textfeld
Ein Textfeld
Ein Textfeld
Ein Textfeld
Ein Textfeld
Ein Textfeld
Ein Textfeld
SOCIAL MEDIA
UNTERNEHMEN
ADDRESSE
grid eignet sich als modernes Layout-Gerüst!
Beispiel mit grid html ansehen ausblenden
html: grid
<div id="box">
<div id="head">
<div class="hleft"><img src="bild.png" alt=""></div>
<div class="hright"><img src="bild.png" alt=""></div>
</div>
<div id="nav">
<nav><ul><li>Navigation</li></ul></nav>
</div>
<div id="bgzwei">
<div class="zwleft">
Ein Textfeld
</div>
<div class="zwright">
Ein Textfeld
</div>
</div>
<div id="bgdrei">
<div class="drleft">
Ein Textfeld
</div>
<div class="drmitte">
Ein Textfeld
</div>
<div class="drright">
Ein Textfeld
</div>
</div>
<div id="bgvier">
<div class="vleft">
Ein Textfeld
</div>
<div class="vmitte">
<img src="bild.png" alt="">
<img src="bild.png" alt="">
<img src="bild.png" alt="">
</div>
<div class="vright">
Ein Textfeld
</div>
</div>
<div id="bgfunf">
<div class="fuleft">
<img src="bild.png" alt="">
</div>
<div class="furight">
Ein Textfeld
</div>
</div>
<div id="bgsechs">
<div class="seleft">
Ein Textfeld
</div>
<div class="seright">
<img src="bild.png" alt="">
</div>
</div>
<div id="foot">
<div class="fleft">
<h4>SOCIAL MEDIA</h4>
</div>
<div class="fmiddle">
<h4>UNTERNEHMEN</h4>
</div>
<div class="fright">
<h4>ADDRESSE</h4>
</div>
</div>
</div> <!-- Ende id box -->
<div id="head">
<div class="hleft"><img src="bild.png" alt=""></div>
<div class="hright"><img src="bild.png" alt=""></div>
</div>
<div id="nav">
<nav><ul><li>Navigation</li></ul></nav>
</div>
<div id="bgzwei">
<div class="zwleft">
Ein Textfeld
</div>
<div class="zwright">
Ein Textfeld
</div>
</div>
<div id="bgdrei">
<div class="drleft">
Ein Textfeld
</div>
<div class="drmitte">
Ein Textfeld
</div>
<div class="drright">
Ein Textfeld
</div>
</div>
<div id="bgvier">
<div class="vleft">
Ein Textfeld
</div>
<div class="vmitte">
<img src="bild.png" alt="">
<img src="bild.png" alt="">
<img src="bild.png" alt="">
</div>
<div class="vright">
Ein Textfeld
</div>
</div>
<div id="bgfunf">
<div class="fuleft">
<img src="bild.png" alt="">
</div>
<div class="furight">
Ein Textfeld
</div>
</div>
<div id="bgsechs">
<div class="seleft">
Ein Textfeld
</div>
<div class="seright">
<img src="bild.png" alt="">
</div>
</div>
<div id="foot">
<div class="fleft">
<h4>SOCIAL MEDIA</h4>
</div>
<div class="fmiddle">
<h4>UNTERNEHMEN</h4>
</div>
<div class="fright">
<h4>ADDRESSE</h4>
</div>
</div>
</div> <!-- Ende id box -->