Html Css how positioning playing cards correctly on page? -
i creating memory card game , cards don't seem displaying on page correctly. this: [image of end result][1]. using css place 4 playing cards on page: 2 cards top , bottom, can't seem find have done wrong , footer not displaying underneath cards. appreciated...
here code instructions: https://jsfiddle.net/ray1234/zeqks3kq/2/
<!doctype html> <html> <head> <title>memory game</title> <link rel="stylesheet" type="text/css" href="css/main.css" > </head> <body> <nav class="clearfix"> <a href="#">instructions</a> <a href="#">games</a> </nav> <h1>memory game</h1> <h2>instructions</h2> <h3>my game fun play, want play again , again. game fun because it's easy play. game awesome because of how built.</h3> <p>concentration, known match match, memory, pelmanism, shinkei-suijaku, pexeso or pairs, card game in of cards laid face down on surface , 2 cards flipped face on each turn. object of game turn on pairs of matching cards.</p> <hr> <div class="board"> <div class="card">adf</div> <div class="card">af</div> <div class="card">adsf</div> <div class="card">asdf</div> </div> <footer> <p>created <img src="images/heart.png" width="10px"> <span class="name">razor</span></p> </footer> </body> </html> and here css:
h1 { color: rgb(2, 132, 130); text-align: center; } h2 { color: #ffd700; text-align: center; } h3 { text-align: center; } p { text-align: center; } .board { height: 80%; width: 50%; display: inline-block; border: 3px solid black; float: left; margin: 8%; } .card { height: 200px; width: 150px; border: 1px solid black; background-color: yellow; border-radius: 10px; float: left; } .name { color: #ff0000; } nav { text-decoration: none; background-color: #808080; } { text-decoration: none; background-color: #ffbf00; color: white; padding: 35px; display: block; float: left; } a:hover { background-color: #ee5f3c; } .clearfix:after { visibility: hidden; display: block; content: " "; clear: both; height: 0; font-size: 0; } footer { text-align: center; }
since you're using cards recommend use flexbox compatible on most browsers handle layout of cards on page, can find simple flexbox tutorials on net, reccomend 1 https://css-tricks.com/snippets/css/a-guide-to-flexbox/
this should not impact footer , allow position rest of elements more easily.
hope helps
Comments
Post a Comment