• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Frage 2 Boxen main und aside sollen ÜBER header liegen

E

ekiem

Neues Mitglied
Ich habe ein responsive Foto im header.
Dann habe ich zwei Boxen main und aside, die durch negative margin-Werte und html overflow-y scroll und #wrapper overflow:hidden im Browserfenster dieselbe Höhe haben.
Diese beiden Boxen sollen zu 10% über dem header liegen. Die liegen aber unter dem header. Wie kann ich das ändern?


HTML: 
<html>
<head>
</head>
<body>

<header>

<div id="praxisfoto">
<h1> Praxisfotos</h1>
<img src="images/headerfoto.jpg" alt="Praxisfotos">
</div> <!-- // Ende praxisfoto-->

</header>

<div id="wrapper">

<main>
<h1>Überschrift</h1>
 <p>Weit hinten, hinter den Wortbergen, fern der Länder Vokalien und   Konsonantien leben die Blindtexte. Abgeschieden wohnen sie in   Buchstabhausen an der Küste des Semantik, eines großen Sprachozeans. Ein   kleines Bächlein namens Duden fließt durch ihren Ort und versorgt sie   mit den nötigen Regelialien. Es ist ein paradiesmatisches Land, in dem   einem gebratene Satzteile in den Mund fliegen.</p>
</main>

<aside>
Weit hinten, hinter den Wortbergen, fern der Länder Vokalien und   Konsonantien leben die Blindtexte. Abgeschieden wohnen sie in   Buchstabhausen an der Küste des Semantik, eines großen Sprachozeans. Ein   kleines Bächlein namens Duden fließt durch ihren Ort und versorgt sie   mit den nötigen Regelialien. Es ist ein paradiesmatisches Land, in dem   einem gebratene Satzteile in den Mund fliegen. Nicht einmal von der   allmächtigen Interpunktion werden die Blindtexte beherrscht – ein   geradezu unorthographisches Leben. Eines Tages aber beschloß eine kleine   Zeile Blindtext, ihr Name war Lorem Ipsum, hinaus zu gehen in die weite   Grammatik.
</aside>

</div> <!-- // Ende wrapper-->
</body>
</html>

</body>
</html>
Code: 
* {margin: 0; padding: 0;}

img {
    max-width:100%;
    border:0;
}


html, body div, span, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    font-size:100%;
    line-height:150%;
    font-family:arial;
    color:#333333;
    vertical-align:baseline;
}

html{overflow-y: scroll;}

#wrapper {overflow: hidden;}




header {
    position:relative;

}

header h1{
    display:none;
}


#praxisfoto {
    padding: 0 8% 0 8%;
    background-color:#f6ede7;
    z-index:1;
}

#praxisfoto img{
    vertical-align:bottom;
}


#praxisfoto h1{
    display:none;
}

#wrapper {
    margin-top:-10%;
    margin-left:10%;
    margin-right:10%;
    margin-bottom:0%;
    /*margin:0% 10% 0 10%;*/
}

main, aside{
    display:block;
    box-sizing:border-box;
    -moz-box-sizing:border-box;
    padding: 3%;
    float:left;
    padding-bottom: 32767px;
    margin-bottom: -32767px;
}

main{width:65%; background-color: #f4e9e1;}
aside{width: 35%; background-color: #1e7782;}

</style>
 
Werbung:
Hallo,

ich würde das folgendermaßen lösen. Wenn es genau 10% sein sollen musst du dem header noch eine fixe Höhe geben und für das negative margin dann 10% davon eintragen:

Code: 
<!DOCTYPE html>
<html lang="de">
<head>
   <meta charset="utf-8">
   <title>Layout 01</title>
   <meta name="description" content="HTML5, CSS3">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <!--[if lt IE 9]>
      <script src="http://html5shiv-printshiv.googlecode.com/svn/trunk/html5shiv-printshiv.js"></script>
   <![endif]-->
   <style>
   @media all {
      header, nav, main, aside, footer, section, article, figure, figcaption, audio, video {
         display: block;
      }
      * {
         box-sizing: border-box;
      }
      html {
         font-family: Sans-Serif;
         font-size: 120%;
      }
      body {
         margin: 0;
      }
      body>header {
         background-color: hsla(60,100%,50%,0.5);
         padding: 0 2rem;
      }
      body>header h1 {
         display: none;
      }
      body>header img {
         margin: 0;
      }
      #wrapper {
         margin: -1rem 2rem 0 2rem;
         display: flex;
      }
      #wrapper>* {
         padding: 1rem;
      }
      #wrapper>main {
         background-color: #f4e9e1;
         flex: 1 1 65%;
      }
      #wrapper>aside {
         background-color: #1e7782;
         flex: 1 1 35%;
      }
   }
   </style>
</head>
<body>
   <header>
      <h1>Praxisfotos</h1>
      <img src="http://lorempixel.com/150/100/transport" alt="Praxisfotos">
   </header>
   <div id="wrapper">
      <main>
         <h1>Überschrift</h1>
         <p>Weit hinten, hinter den Wortbergen, fern der Länder Vokalien und Konsonantien leben die Blindtexte. Abgeschieden wohnen sie in Buchstabhausen an der Küste des Semantik, eines großen Sprachozeans. Ein kleines Bächlein namens Duden fließt durch ihren Ort und versorgt sie mit den nötigen Regelialien. Es ist ein paradiesmatisches Land, in dem einem gebratene Satzteile in den Mund fliegen.</p>
      </main>
      <aside>
         <p>Weit hinten, hinter den Wortbergen, fern der Länder Vokalien und Konsonantien leben die Blindtexte. Abgeschieden wohnen sie in Buchstabhausen an der Küste des Semantik, eines großen Sprachozeans. Ein kleines Bächlein namens Duden fließt durch ihren Ort und versorgt sie mit den nötigen Regelialien. Es ist ein paradiesmatisches Land, in dem einem gebratene Satzteile in den Mund fliegen. Nicht einmal von der allmächtigen Interpunktion werden die Blindtexte beherrscht – ein geradezu unorthographisches Leben. Eines Tages aber beschloß eine kleine Zeile Blindtext, ihr Name war Lorem Ipsum, hinaus zu gehen in die weite Grammatik.</p>
      </aside>
   </div>
</body>
</html>

Gruss

MrMurphy
 
Super! Aber geht es auch ohne flex? Ich möchte das auf dieser Website noch nicht einsetzen, da dort die Wahrscheinlichkeit groß ist, dass User mit alten Browsern unterwegs sind.
 
Werbung:
Hallo,

die Sorge ist unbegründet.

Es geht zwar mit viel Aufwand und Nachteilen beim responisve Design.

Aber ist es ja nicht so, dass die veralteten Browser nichts anzeigen. Das Layout ist halt nur einfacher.

Gruss

MrMurphy
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben