Hallo,
ich lerne zur Zeit CSS an einem echten Projekt, das ich gerne umsetzen möchte. Mir schwebt vor, ein Regal zu bauen, in das ich per jQuery sortable (https://jqueryui.com/sortable/#display-grid) verschiedene Buchcover hin und her verschieben kann. (Soll eine kleine Spielerei sein).
Nun habe ich mir Gedanken über den grundsätzlichen Aufbau gemacht, stoße hier allerdings an meine Grenzen. Folgendes habe ich mir bisher gedacht (nur mal als Test):
Das background-image ist das Regal. Der container soll exemplarisch den <div> Bereich darstellen, in dem ich später das sortable unterbringen möchte.
Das klappt auch soweit schon ganz gut, jedoch frage ich mich, wie ich das nun noch responsive machen könnte. Im Moment ist es nämlich so, dass beim Verkleinern des Browserfensters der rote container seine Position verliert. Er soll aber genau an dieser Stelle im Regal bleiben.
Wie könnte ich das bewerkstelligen? Oder ist mein ganzer Gedankengang bzgl. des Aufbaus einfach falsch?
Bin über jeden Tipp dankbar.
Vielen Dank bereits im Voraus.
ich lerne zur Zeit CSS an einem echten Projekt, das ich gerne umsetzen möchte. Mir schwebt vor, ein Regal zu bauen, in das ich per jQuery sortable (https://jqueryui.com/sortable/#display-grid) verschiedene Buchcover hin und her verschieben kann. (Soll eine kleine Spielerei sein).
Nun habe ich mir Gedanken über den grundsätzlichen Aufbau gemacht, stoße hier allerdings an meine Grenzen. Folgendes habe ich mir bisher gedacht (nur mal als Test):
HTML:
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Unbenanntes Dokument</title>
<style>
body, html { margin: 0; padding: 0; width: 100%; height: 100%; font-family: Arial, sans-sarif; font-size: 10px; }
#background_image {
background-image: url("http://ws2-media1.tchibo-content.de/newmedia/art_img/MAIN_ALT_3-IMPORTED/4113906f0b0eab32/regal-weiss.jpg");
max-width: 55.3em;
width: 100%;
max-height: 47.1em;
height: 100%;
background-size:contain;
position: absolute;
background-repeat: no-repeat;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
#container { background-color: #FF0004; max-width: 5em; width: 100%; max-height: 5em; height: 100%; position: relative; left: 50%; top: 60%; }
</style>
</head>
<body>
<section id="background_image">
<div id="container"></div>
</section>
</body>
</html>Das background-image ist das Regal. Der container soll exemplarisch den <div> Bereich darstellen, in dem ich später das sortable unterbringen möchte.
Das klappt auch soweit schon ganz gut, jedoch frage ich mich, wie ich das nun noch responsive machen könnte. Im Moment ist es nämlich so, dass beim Verkleinern des Browserfensters der rote container seine Position verliert. Er soll aber genau an dieser Stelle im Regal bleiben.
Wie könnte ich das bewerkstelligen? Oder ist mein ganzer Gedankengang bzgl. des Aufbaus einfach falsch?
Bin über jeden Tipp dankbar.
Vielen Dank bereits im Voraus.
