problem mit div-positionierung: div hinter div, statt darunter bearbeitet von iasonas 19.06.2015 21:36 hallo zusammen.komme nicht mehr weiter. magst du mal schauen?anforderung:- 4 divs untereinander.- "oben": hat feste höhe. klappt.- "bild": hat 30 % höhe und breite 100%. klappt (gesamtgröße passt sich an browserbreite automatisch an. so solls sein).- "mitte": hat 70% höhe ....klappt nicht. liegt HINTER der "bild"-div. soll aber darunter anfangen. und genau DAS krieg ich nicht hin.- "unten": hat feste höhe, ist immer unten. klappt.**~~~css:**html, body {height: 100%;}body {margin: 0; padding: 0;}#wrapper {width: 100%; margin: auto auto; min-height: 100%; position: relative;}* html #wrapper {height: 100%;} /* IE Hack für 100 % Höhe */#oben { height:100px; background:#285a72;}#bild { width: 100%; height: 30%;background-image: url('b-tunnel.jpg');background-repeat:no-repeat;background-position: center;background-size: 100% auto;-webkit-background-size: cover;-moz-background-size: cover;-o-background-size: cover;background-size: cover;position: absolute;}#mitte {margin-bottom: 2em; float: left;}#unten {position: absolute; bottom: 0; left: 0; width: 100%;height: 30px;background:#285a72;}* html #unten {bottom: -1px;} /* Nächster IE Hack, da bottom: 0; als bottom: 1px interpretiert wird */~~~**~~~html:**<!DOCTYPE html><html lang="de"><head> <meta charset="utf-8"> <title>HIIIIIILFEEEEEEEE</title> <link rel="stylesheet" href="style.css"> </head> <body> <div id="wrapper"> <div id="oben">oben </div> <div id="bild"> </div> <div id="mitte"> Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est. Lorem ipsum dolor sit amet. </div> <br style="clear: both;" /> <div id="unten"> Erdgeschoss ! </div> </div> </body></html> ~~~
problem mit div-positionierung: div hinter div, statt darunter bearbeitet von Matthias Apsel 19.06.2015 21:44 hallo zusammen. komme nicht mehr weiter. magst du mal schauen? anforderung: 4 divs untereinander. "oben": hat feste höhe. klappt. "bild": hat 30 % höhe und breite 100%. klappt (gesamtgröße passt sich an browserbreite automatisch an. so solls sein). "mitte": hat 70% höhe ....klappt nicht. liegt HINTER der "bild"-div. soll aber darunter anfangen. und genau DAS krieg ich nicht hin. "unten": hat feste höhe, ist immer unten. klappt. **css:** html, body { height: 100%; } body { margin: 0; padding: 0; } #wrapper { width: 100%; margin: auto auto; min-height: 100%; position: relative; } * html #wrapper {height: 100%;} /* IE Hack für 100 % Höhe */ #oben { height:100px; background:#285a72; } #bild { width: 100%; height: 30%; background-image: url('b-tunnel.jpg'); background-repeat:no-repeat; background-position: center; background-size: 100% auto; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; position: absolute; } #mitte { margin-bottom: 2em; float: left; } #unten { position: absolute; bottom: 0; left: 0; width: 100%; height: 30px; background:#285a72; } * html #unten {bottom: -1px;} /* Nächster IE Hack, da bottom: 0; als bottom: 1px interpretiert wird */ **html:** <!DOCTYPE html> <html lang="de"> <head> <meta charset="utf-8"> <title>HIIIIIILFEEEEEEEE</title> <link rel="stylesheet" href="style.css"> </head> <body> <div id="wrapper"> <div id="oben">oben </div> <div id="bild"> </div> <div id="mitte"> Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est. Lorem ipsum dolor sit amet. </div> <br style="clear: both;" /> <div id="unten"> Erdgeschoss ! </div> </div> </body> </html>
nicht angemeldet nicht angemeldet
