2 Boxen main und aside sollen ÜBER header liegen

html.de-Forum HTML, XHTML & CSS
1

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]

Praxisfotos

Praxisfotos

Überschrift

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.

[/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;}

[/CODE]

2

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:

<!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

3

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.

4

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