html - How do i make all the columns equally big? -
@import url(https://fonts.googleapis.com/css?family=open+sans:400,600|lato|montserrat&subset=greek); body { background-repeat: no-repeat; background-attachment: fixed; background-size: cover; } .desc { margin-top: 40px; text-align: center; font-size: 100px; color: darkred; } .cool { display: inline-block; width: 100%; } .topbar { position: fixed; top: 0px; width: 100%; right: 0px; background-color: tomato; text-align: right; height: 50px; z-index: 100; } .texti { margin-right: 15px; } .linkur { border: 1px solid black; padding: 8.5px; margin-right: 10px; text-decoration: none; border-color: transparent; font-size: 1.3em; color: darkred; } .linkur:hover { background-color: lightblue; opacity: 0.7; } label { position: fixed; top: -2000px; } .mynd { position: fixed; top: -50px; left:20px; } .navigation { height: 96%; width: 20%; background-color: tomato; } .logo { position: fixed; top: -100px; } .hlid { position: fixed; left: -2000px; width: 700px; height: 90%; z-index: 100; margin-right: 20px; } .main { position: relative; left: 3%; width: 30%; text-align: center; height: 30%; display:inline-block; margin-right:10px; margin-left:10px; margin-bottom:10px; } /* .main2 { position: relative; right: -3%; width: 30%; text-align: center; display:inline-block; margin-right:10px; margin-left:10px; margin-bottom:10px; } */ .leikur2 { float: right; } .leikjatexti { border: 1px solid black; border-radius: 20px; text-decoration: none; margin-bottom: 10px; padding-top: 5px; margin-top: 10px; background-color: tomato; height: auto; } .text2 { text-decoration: none; color: darkred; } @media screen , (max-width: 48em){ .mynd2 { height: 150px; width: 70px; margin-top: 10px; } .desc { font-size: 45px; } .topbar { text-align: left; } .linkur { position: fixed; top: -100px; } input { display: none; } label, label { position: fixed; top: -27px; left: 5px; cursor: pointer; display: inline-block; font-size: 18px; transition: .15s ease; font-size: 30px; z-index: 100; } label:hover { color: darkred; } input:checked ~ .hlid { position: fixed; left: -50px; height: 18%; top: 30px; transition: .15s ease; } li { list-style-type: none; } .hlidlinkur { margin-bottom: 20px; margin-left: 10px; } .hlidlinkura { border: 1px solid black; padding: 7px; text-align: center; border-color: transparent; text-decoration: none; color: darkred; font-size: 1.1em; } .hlidlinkura:hover { background-color: lightblue; } }<!doctype html> <html> <head> <script language="javascript"> var randnum = math.random(); var inum = 3; var rand1 = math.round(randnum * (inum-1)) + 1; images = new array images[1] = "img/shi.jpg" images[2] = "img/halo.jpg" images[3] = "img/franklin.jpg" var image = images[rand1] </script> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta charset="utf-8"> <title>main site</title> <link rel="stylesheet" href="gru_games.css" type="text/css" /> </head> <body> <script language="javascript"> document.write('<body background="' + image + '" text="white">') </script> <nav class="topbar"> <a href="gru_main.html"><img class="mynd" src="project.png"></a> <ul class="texti"> <a href="" class="linkur">games</a> <a href="" class="linkur">profile</a> <a href="" class="linkur">my cart</a> </ul> </nav> <input type="checkbox" id="toggle"> <label for="toggle"><p>☰</p></label> <nav class="hlid"> <ul class="navigation"> <li class="hlidlinkur"><a class="hlidlinkura" href="#">games</a><li> <li class="hlidlinkur"><a class="hlidlinkura" href="#">profile</a></li> <li class="hlidlinkur"><a class="hlidlinkura" href="#">my cart</a></li> </ul> </nav> <input type="checkbox" id="nav-trigger" class="nav-trigger" /> <label for="nav-trigger"></label> <h1 class="desc">games</h1> <div class="cool"> <div class="main"> <a class="text2" href="gru_login.html"> <div class="leikjatexti"> <img class="mynd2" src="walking.jpg" alt="walking dead" height="152" width="120"> <h1>the walking dead</h1> <p> viðmiðið í þessum leik er að lifa af og velja réttu leiðirnar til þess, í leiknum reynir mikið á leikmanninn til að velja rétt og fá rétta endann. </p> </div> </a> </div> <div class="main"> <a class="text2" href="gru_login.html"> <div class="leikjatexti"> <img class="mynd2" src="portal2.jpg" alt="portal" height="152" width="120"> <h1>portal 2</h1> <p> portal 2 er leikur sem kom út árið 2010, leikurinn hefur hlotið gríðarlega góða dóma um heim allann, í leiknum þarftu að kljást við fjölda þrauta með byssu sem getur skotið hliðum inní aðrar víddir. </p> </div> </a> </div> <div class="main"> <a class="text2" href="gru_login.html"> <div class="leikjatexti"> <img class="mynd2" src="blackops.png" alt="black ops" height="152" width="120"> <h1>cod: black ops iii</h1> <p> viðmiðið í þessum leik er að lifa af og velja réttu leiðirnar til þess, í leiknum reynir mikið á leikmanninn til að velja rétt og fá rétta endann. </p> </div> </a> </div> <div class="main"> <a class="text2" href="gru_login.html"> <div class="leikjatexti"> <img class="mynd2" src="borderlands.jpg" alt="portal" height="152" width="120"> <h1>borderlands</h1> <p> portal 2 er leikur sem kom út árið 2010, leikurinn hefur hlotið gríðarlega góða dóma um heim allann, í leiknum þarftu að kljást við fjölda þrauta með byssu sem getur skotið hliðum inní aðrar víddir. </p> </div> </a> </div> <div class="main"> <a class="text2" href="gru_login.html"> <div class="leikjatexti"> <img class="mynd2" src="gta.jpg" alt="gta v" height="152" width="120"> <h1>grand theft auto v</h1> <p> viðmiðið í þessum leik er að lifa af og velja réttu leiðirnar til þess, í leiknum reynir mikið á leikmanninn til að velja rétt og fá rétta endann. </p> </div> </a> </div> <div class="main"> <a class="text2" href="gru_login.html"> <div class="leikjatexti"> <img class="mynd2" src="tombraider.jpg" alt="tr" height="152" width="120"> <h1>tombraider 2014</h1> <p> portal 2 er leikur sem kom út árið 2010, leikurinn hefur hlotið gríðarlega góða dóma um heim allann, í leiknum þarftu að kljást við fjölda þrauta með byssu sem getur skotið hliðum inní aðrar víddir. </p> </div> </a> </div> <div class="main"> <a class="text2" href="gru_login.html"> <div class="leikjatexti"> <img class="mynd2" src="destiny.jpg" alt="destiny" height="152" width="120"> <h1>destiny</h1> <p> viðmiðið í þessum leik er að lifa af og velja réttu leiðirnar til þess, í leiknum reynir mikið á leikmanninn til að velja rétt og fá rétta endann. </p> </div> </a> </div> <div class="main"> <a class="text2" href="gru_login.html"> <div class="leikjatexti"> <img class="mynd2" src="rambo.jpg" alt="rambo" height="152" width="120"> <h1>rambo: video game</h1> <p> portal 2 er leikur sem kom út árið 2010, leikurinn hefur hlotið gríðarlega góða dóma um heim allann, í leiknum þarftu að kljást við fjölda þrauta með byssu sem getur skotið hliðum inní aðrar víddir. </p> </div> </a> </div> <div class="main"> <a class="text2" href="gru_login.html"> <div class="leikjatexti"> <img class="mynd2" src="nba2k.jpg" alt="nba" height="152" width="120"> <h1>nba 2k16</h1> <p> viðmiðið í þessum leik er að lifa af og velja réttu leiðirnar til þess, í leiknum reynir mikið á leikmanninn til að velja rétt og fá rétta endann. </p> </div> </a> </div> <div class="main"> <a class="text2" href="gru_login.html"> <div class="leikjatexti"> <img class="mynd2" src="ratchet.jpg" alt="r&c" height="152" width="120"> <h1>ratchet&clank: crack in time </h1> <p> portal 2 er leikur sem kom út árið 2010, leikurinn hefur hlotið gríðarlega góða dóma um heim allann, í leiknum þarftu að kljást við fjölda þrauta með byssu sem getur skotið hliðum inní aðrar víddir. </p> </div> </a> </div> <div class="main"> <a class="text2" href="gru_login.html"> <div class="leikjatexti"> <img class="mynd2" src="bloodborne.jpg" alt="bloodborne" height="152" width="120"> <h1>bloodborne</h1> <p> viðmiðið í þessum leik er að lifa af og velja réttu leiðirnar til þess, í leiknum reynir mikið á leikmanninn til að velja rétt og fá rétta endann. </p> </div> </a> </div> <div class="main"> <a class="text2" href="gru_login.html"> <div class="leikjatexti"> <img class="mynd2" src="evolve.jpg" alt="evolve" height="152" width="120"> <h1>evolve</h1> <p> portal 2 er leikur sem kom út árið 2010, leikurinn hefur hlotið gríðarlega góða dóma um heim allann, í leiknum þarftu að kljást við fjölda þrauta með byssu sem getur skotið hliðum inní aðrar víddir. </p> </div> </a> </div> </div> </body>emphasized text
i can't seem make boxes(columns) go equal height, i've tried putting height on them , don't have more ideas really. feedback appreciated, ps: icelandic words may in code
if set height of .leikjatexti class, boxes have same height;
you have align boxes because middle 1 little above of others, heights of them equal
Comments
Post a Comment