0
Wie mache ich alle Spalten gleich groß?
@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,600|Lato|Montserrat&subset=greek);
body
{
\t background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
}
.desc
{
\t margin-top: 40px;
\t text-align: center;
\t font-size: 100px;
\t color: darkred;
}
.cool
{
\t display: inline-block;
\t width: 100%;
}
.topbar
{
\t position: fixed;
\t top: 0px;
\t width: 100%;
right: 0px;
\t background-color: tomato;
\t text-align: right;
\t height: 50px;
\t z-index: 100;
}
.texti
{
\t margin-right: 15px;
}
.linkur
{
\t border: 1px solid black;
\t padding: 8.5px;
\t margin-right: 10px;
\t text-decoration: none;
\t border-color: transparent;
\t font-size: 1.3em;
\t color: darkred;
}
.linkur:hover
{
\t background-color: lightblue;
\t opacity: 0.7;
}
label
{
\t position: fixed;
\t top: -2000px;
}
.mynd
{
\t position: fixed;
\t top: -50px;
\t left:20px;
}
.navigation
{
\t height: 96%;
\t width: 20%;
\t background-color: tomato;
}
.logo
{
\t position: fixed;
\t top: -100px;
}
.hlid
{
position: fixed;
left: -2000px;
width: 700px;
height: 90%;
z-index: 100;
margin-right: 20px;
}
.main
{
\t position: relative;
\t left: 3%;
\t width: 30%;
\t text-align: center;
\t height: 30%;
\t display:inline-block;
\t margin-right:10px;
\t margin-left:10px;
\t margin-bottom:10px;
}
/*
.main2
{
\t position: relative;
\t right: -3%;
\t width: 30%;
\t text-align: center;
display:inline-block;
\t margin-right:10px;
\t margin-left:10px;
\t margin-bottom:10px;
}
*/
.leikur2
{
\t 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
{
\t text-decoration: none;
\t color: darkred;
}
@media screen and (max-width: 48em){
.mynd2
{
\t height: 150px;
\t width: 70px;
\t margin-top: 10px;
}
.desc
{
\t font-size: 45px;
}
.topbar
{
\t text-align: left;
}
.linkur
{
\t position: fixed;
\t top: -100px;
}
\t
input {
display: none;
}
label,
label {
position: fixed;
top: -27px;
left: 5px;
cursor: pointer;
display: inline-block;
font-size: 18px;
transition: all .15s ease;
font-size: 30px;
z-index: 100;
}
label:hover {
color: darkred;
}
input:checked ~ .hlid {
position: fixed;
left: -50px;
height: 18%;
top: 30px;
transition: all .15s ease;
}
li
{
\t list-style-type: none;
}
.hlidlinkur
{
\t margin-bottom: 20px;
\t margin-left: 10px;
}
.hlidlinkura
{
\t border: 1px solid black;
\t padding: 7px;
\t text-align: center;
\t border-color: transparent;
\t text-decoration: none;
\t color: darkred;
\t font-size: 1.1em;
}
.hlidlinkura:hover
{
\t 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">
\t <meta charset="utf-8">
\t <title>Main site</title>
\t <link rel="stylesheet" href="Gru_games.css" type="text/css" />
\t
</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">
\t <div class="main">
\t \t <a class="text2" href="Gru_login.html">
\t \t <div class="leikjatexti">
\t \t <img class="mynd2" src="walking.jpg" alt="Walking Dead" height="152" width="120">
\t \t \t <h1>The Walking Dead</h1>
\t \t \t <p>
\t \t \t viðmiðið í þessum leik er að lifa af og velja réttu leiðirnar til þess, í leiknum reynir mikið á leikmanninn
\t \t \t til að velja rétt og fá rétta endann.
\t \t \t </p>
\t \t </div>
\t \t </a>
\t </div>
\t <div class="main"> \t
\t <a class="text2" href="Gru_login.html">
\t \t <div class="leikjatexti">
\t \t <img class="mynd2" src="portal2.jpg" alt="portal" height="152" width="120">
\t \t <h1>Portal 2</h1>
\t \t <p>
\t \t Portal 2 er leikur sem kom út árið 2010, leikurinn hefur hlotið gríðarlega góða dóma um heim allann,
\t \t í leiknum þarftu að kljást við fjölda þrauta með byssu sem getur skotið hliðum inní aðrar víddir.
\t \t </p>
\t </div>
\t \t </a>
\t </div>
\t \t <div class="main">
\t \t <a class="text2" href="Gru_login.html">
\t \t <div class="leikjatexti">
\t \t <img class="mynd2" src="blackops.png" alt="Black ops" height="152" width="120">
\t \t \t <h1>COD: Black Ops III</h1>
\t \t \t <p>
\t \t \t viðmiðið í þessum leik er að lifa af og velja réttu leiðirnar til þess, í leiknum reynir mikið á leikmanninn
\t \t \t til að velja rétt og fá rétta endann.
\t \t \t </p>
\t \t </div>
\t \t </a>
\t </div>
\t <div class="main"> \t
\t <a class="text2" href="Gru_login.html">
\t \t <div class="leikjatexti">
\t \t <img class="mynd2" src="borderlands.jpg" alt="portal" height="152" width="120">
\t \t <h1>Borderlands</h1>
\t \t <p>
\t \t Portal 2 er leikur sem kom út árið 2010, leikurinn hefur hlotið gríðarlega góða dóma um heim allann,
\t \t í leiknum þarftu að kljást við fjölda þrauta með byssu sem getur skotið hliðum inní aðrar víddir.
\t \t </p>
\t </div>
\t \t </a>
\t </div>
\t \t <div class="main">
\t \t <a class="text2" href="Gru_login.html">
\t \t <div class="leikjatexti">
\t \t <img class="mynd2" src="gta.jpg" alt="GTA V" height="152" width="120">
\t \t \t <h1>Grand Theft Auto V</h1>
\t \t \t <p>
\t \t \t viðmiðið í þessum leik er að lifa af og velja réttu leiðirnar til þess, í leiknum reynir mikið á leikmanninn
\t \t \t til að velja rétt og fá rétta endann.
\t \t \t </p>
\t \t </div>
\t \t </a>
\t </div>
\t <div class="main"> \t
\t <a class="text2" href="Gru_login.html">
\t \t <div class="leikjatexti">
\t \t <img class="mynd2" src="tombraider.jpg" alt="TR" height="152" width="120">
\t \t <h1>Tombraider 2014</h1>
\t \t <p>
\t \t Portal 2 er leikur sem kom út árið 2010, leikurinn hefur hlotið gríðarlega góða dóma um heim allann,
\t \t í leiknum þarftu að kljást við fjölda þrauta með byssu sem getur skotið hliðum inní aðrar víddir.
\t \t </p>
\t </div>
\t \t </a>
\t </div>
\t <div class="main">
\t \t <a class="text2" href="Gru_login.html">
\t \t <div class="leikjatexti">
\t \t <img class="mynd2" src="destiny.jpg" alt="Destiny" height="152" width="120">
\t \t \t <h1>Destiny</h1>
\t \t \t <p>
\t \t \t viðmiðið í þessum leik er að lifa af og velja réttu leiðirnar til þess, í leiknum reynir mikið á leikmanninn
\t \t \t til að velja rétt og fá rétta endann.
\t \t \t </p>
\t \t </div>
\t \t </a>
\t </div>
\t <div class="main"> \t
\t <a class="text2" href="Gru_login.html">
\t \t <div class="leikjatexti">
\t \t <img class="mynd2" src="rambo.jpg" alt="Rambo" height="152" width="120">
\t \t <h1>Rambo: The Video Game</h1>
\t \t <p>
\t \t Portal 2 er leikur sem kom út árið 2010, leikurinn hefur hlotið gríðarlega góða dóma um heim allann,
\t \t í leiknum þarftu að kljást við fjölda þrauta með byssu sem getur skotið hliðum inní aðrar víddir.
\t \t </p>
\t </div>
\t \t </a>
\t </div> \t
\t <div class="main">
\t \t <a class="text2" href="Gru_login.html">
\t \t <div class="leikjatexti">
\t \t <img class="mynd2" src="nba2k.jpg" alt="NBA" height="152" width="120">
\t \t \t <h1>NBA 2K16</h1>
\t \t \t <p>
\t \t \t viðmiðið í þessum leik er að lifa af og velja réttu leiðirnar til þess, í leiknum reynir mikið á leikmanninn
\t \t \t til að velja rétt og fá rétta endann.
\t \t \t </p>
\t \t </div>
\t \t </a>
\t </div>
\t <div class="main"> \t
\t <a class="text2" href="Gru_login.html">
\t \t <div class="leikjatexti">
\t \t <img class="mynd2" src="ratchet.jpg" alt="R&C" height="152" width="120">
\t \t <h1>Ratchet&Clank: A crack in time </h1>
\t \t <p>
\t \t Portal 2 er leikur sem kom út árið 2010, leikurinn hefur hlotið gríðarlega góða dóma um heim allann,
\t \t í leiknum þarftu að kljást við fjölda þrauta með byssu sem getur skotið hliðum inní aðrar víddir.
\t \t </p>
\t </div>
\t \t </a>
\t </div>
\t \t <div class="main">
\t \t <a class="text2" href="Gru_login.html">
\t \t <div class="leikjatexti">
\t \t <img class="mynd2" src="bloodborne.jpg" alt="Bloodborne" height="152" width="120">
\t \t \t <h1>Bloodborne</h1>
\t \t \t <p>
\t \t \t viðmiðið í þessum leik er að lifa af og velja réttu leiðirnar til þess, í leiknum reynir mikið á leikmanninn
\t \t \t til að velja rétt og fá rétta endann.
\t \t \t </p>
\t \t </div>
\t \t </a>
\t </div>
\t <div class="main"> \t
\t <a class="text2" href="Gru_login.html">
\t \t <div class="leikjatexti">
\t \t <img class="mynd2" src="evolve.jpg" alt="evolve" height="152" width="120">
\t \t <h1>Evolve</h1>
\t \t <p>
\t \t Portal 2 er leikur sem kom út árið 2010, leikurinn hefur hlotið gríðarlega góða dóma um heim allann,
\t \t í leiknum þarftu að kljást við fjölda þrauta með byssu sem getur skotið hliðum inní aðrar víddir.
\t \t </p>
\t </div>
\t \t </a>
\t </div>
\t
</div>
</body>betonte Text
ich nicht die Boxen zu machen scheinen (Spalten) auf gleicher Höhe gehen, ich habe versucht, auf sie eine Höhe setzen und i don Ich habe wirklich keine Ideen mehr. Jede Rückmeldung würde sehr gut geschätzt, Ps: Einige isländische Wörter können in dem Code sein
Mögliches Duplikat von [CSS - Gleiche Spaltenhöhe?] (Http://stackoverflow.com/questions/2114757/css-equal-height-columns) –