This forum uses cookies
This forum makes use of cookies to store your login information if you are registered, and your last visit if you are not. Cookies are small text documents stored on your computer; the cookies set by this forum can only be used on this website and pose no security risk. Cookies on this forum also track the specific topics you have read and when you last read them. Please confirm whether you accept or reject these cookies being set.

A cookie will be stored in your browser regardless of choice to prevent you being asked this question again. You will be able to change your cookie settings at any time using the link in the footer.

Themabewertung:
  • 0 Bewertung(en) - 0 im Durchschnitt
  • 1
  • 2
  • 3
  • 4
  • 5
Flexbox mit aside
#1
Hier ein Beispiel wie man Flexbox Layout umsetzten, kann

Der Code
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<title>Flexboxen -Layout</title>
<style>
    *{ 
  margin: 0px; 
  padding: 0px;
}
body{ 
  background: #E6E6E6; 
  border: solid 3px black;
  display:flex;
  flex-direction:column;
}
p { 
  font-family: Helvetica, Avenir, Arial, sans-serif; 
  font-size: 11px;
}
header{ 
  width: 100%; 
  background: #ABABAB; 
  border: solid 2px blue; 
  text-align:center;
}
header p{
  font-size:30px;
}
#wrapper{
  display:flex;
}
#left{ 
  flex:1; 
  padding-top:30px;
  border: dotted 2px black; 
  background: #D4D4D4; 
  text-align:center;
}
main{ 
  flex:4;
  border: solid 2px blue; 
  background: #D1EEEE; 
}
main p{
  font-size:100px;
  text-align:center;
}
#right{ 
  flex:1;
  background: white;
  border: dotted 2px black; 
  background: lightgreen; 
  text-align:center;
  padding-top:30px;
}
 
ul {
  list-style-type: none;
  list-style-position: inside;
  font-family: Helvetiva, Avenir, Arial sans-serif; 
  font-size: 12px; 
  margin-left: 0em; 
  padding-left: 0em;
}
footer{ 
  background: #ABABAB; 
  border: solid 2px blue; 
  text-align:center;

}
footer p{
    font-size:30px;
}
  </style>
</head>
<body>
 <header> <p> Kopfzeile </p></header>
<div id="wrapper">
   <aside id="left">
             <ul>
             <li> <p>Navigation 1</p> </li>
             <li> <p>Navigation 2</p> </li>
             <li> <p>Navigation 3</p> </li>
             </ul>
   </aside>
   <main><p>Mitte</p></main>
   <aside id="right">
        <img src="https://gravatar.com/avatar/05985c88be5fa0d7f448e068960452b9?s=80&d=https://codepen.io/assets/avatars/user-avatar-80x80-bdcd44a3bfb9a5fd01eb8b86f9e033fa1a9897c3a15b33adfc2649a002dab1b6.png" alt="placeholder" width="150" height="150" style="border: 0px; vertical-align: middle;" />  <br />
        <img src="https://gravatar.com/avatar/05985c88be5fa0d7f448e068960452b9?s=80&d=https://codepen.io/assets/avatars/user-avatar-80x80-bdcd44a3bfb9a5fd01eb8b86f9e033fa1a9897c3a15b33adfc2649a002dab1b6.png" alt="placeholder" width="150" height="150" style="border: 0px; vertical-align: middle;" />
    </aside>
</div>
<footer> <p> Fußzeile </p></footer>
</body>
</html>
Zitieren
#2
Jetzt noch eine Version mit Suchfeld und Logo im Header

DEMO

[Bild: soforthilfeforum-96.png]
Als Lösung markieren Zitieren


Gehe zu:


Benutzer, die gerade dieses Thema anschauen: 1 Gast/Gäste