Würfelbereich gestaltet

2 years ago · 461a43a05d
2 changed files with 28 additions and 9 deletions
--- a/schlangen_und_leitern/board.html
+++ b/schlangen_und_leitern/board.html
@ -13,9 +13,11 @@
 </head>
 <body>
    
-    <div class = "container">
+    <div class = container id="würfelBereich">
+
        <img src="/img/wurfle/f(1).png" id="face">
        <input type = "button" id="rollButton"  onclick = "changeFace()" value = "Würfeln">  
+    
    </div>
    

--- a/schlangen_und_leitern/css/style.css
+++ b/schlangen_und_leitern/css/style.css
@ -1,12 +1,29 @@
+#würfelBereich{
+    
+    height: 170px;
+    width: 170px;
+
+    display: grid;
+    grid-template-columns: 30px 100px 30px;
+    grid-template-rows: 30px 100px 30px;
+    gap: 5px; 
+}
+
+#face {
+
+grid-column: 2/2;
+grid-row: 2/2;
+height: 100%;
+width: auto;
+}
+
 #rollButton{
-    border: 1px solid #000000;
-    position: absolute;
-   
-    top:50%;
-    left: 10%;    
-    background-color:#ffffff;

-    font-size: 13px;
-    color: #000000 ;
+    grid-column: 2/2;
+    grid-row: 3/3;

+    height: 100%;
+    width: 100%;
+    
+    font-size: 10px;
 }