I'm extremely new to programming - I'm trying to replicate this webpage layout with HTML & CSS >>> Desired look <<< So far, I've been using CSS grid and I think I understand the concept, however I'm unable to implemate it on my webpage:
.wrapper {
display: grid;
grid-template-columns: 0.9fr 1.1fr;
grid-template-rows: 1.1fr 1.8fr 0.1fr;
grid-template-areas: "header header" "content content" "footer footer";
grid-column-gap: 1em;
grid-row-gap: 1em;
background-color: #fff;
}
.wrapper>div {
padding: 1em;
}
.mainheader {
grid-area: header;
width: 70%;
background-color: #fff;
}
.content {
grid-area: content;
width: 40%;
font-family: Trebuchet MS;
background-color: #fff;
color: #000;
}
.mainfooter {
grid-area: footer;
background-color: #854242;
width: 40%;
border-radius: 25px;
padding: 20px;
width: 800px;
height: 30px;
li {
display: inline;
}
#h1,
h2 {
color: #854242
}
#content {}
#footer1 {
background-color: #999999
}
#footer2 {
background-color: #999999
}<body>
<div class="wrapper">
<div class="mainheader">
<header>
<h1>Webbutveckling för mobila enheter</h1>
<h2>Responsiv webbdesign</h2>
<img src="images/header.jpg" alt="Header-bild" width="960px" />
<nav id="mainmenu">
<ul>
<li><a href="index.htm" title="Startsidan">Startsidan</a></li>
<li><a href="#" title="Sida två">Sida 2</a></li>
<li><a href="#" title="Sida tre">Sida 3</a></li>
<li><a href="#" title="Sida fyra">Sida 4</a></li>
<li><a href="http://www.miun.se" title="Mittuniversitetet">Miun</a></li>
</ul>
</nav>
<div id="search">
<form>
<input type="text" name="searchstring" id="searchstring">
<input type="submit" value="Sök" id="searchbutton">
</form>
</div>
<!-- Slut på search -->
</header>
</div>
<div class="content">
<section>
<h2>Box 1</h2>
<p>
Mauris dapibus consectetur neque commodo eleifend. Pellentesque interdum posuere mollis. Nunc dui libero, feugiat sed consectetur ac, eleifend fermentum nisl. Praesent felis ligula, interdum sit amet tortor in, eleifend vestibulum mi. Duis eu ultricies
enim. Quisque blandit ligula vel odio adipiscing, et consectetur odio vestibulum. Nam sed lectus vulputate, posuere orci sit amet, eleifend massa. Nullam mi ante, faucibus vitae turpis sed, volutpat auctor orci.
</p>
<p>
Aenean varius, sapien sed pharetra gravida, massa massa sodales mi, eu venenatis quam nunc sit amet ante. Praesent bibendum massa enim, vitae pulvinar odio imperdiet sed. Nam ac lacus ac nulla mollis blandit eu quis lectus. Nullam non tortor vel ipsum
consectetur lacinia eget non nisi. Aliquam erat volutpat. Pellentesque eget dui bibendum, malesuada quam quis, consequat lacus. Ut tincidunt pharetra laoreet. Nullam sed sem et mauris luctus ullamcorper. Mauris ipsum velit, tincidunt eget quam
convallis, cursus suscipit ante. Vivamus vitae massa id lorem interdum hendrerit. Duis suscipit elit eu tempor tincidunt. Suspendisse ut metus id magna aliquam posuere. Duis vulputate sit amet ipsum vel egestas. Ut rhoncus elementum augue.
</p>
<footer id="footer1">
<p>
Denna sektion är från start till vänster, sedan ovanpå.
</p>
</footer>
</section>
<section>
<h2>Box 2</h2>
<p>
Vestibulum mollis mattis risus, feugiat iaculis massa suscipit vel. Aenean ultricies lorem nec dui pulvinar, quis scelerisque enim egestas. Morbi massa eros, tempus id dictum eget, facilisis lobortis arcu. Nulla ut blandit nunc, ut egestas massa. Duis
a lorem et lorem commodo dictum nec a libero. Donec porta lectus a accumsan rhoncus. Nunc vitae est id tellus suscipit malesuada. Aenean eu arcu et quam laoreet auctor ac ut sapien. Fusce sed ligula quis felis vehicula tempor sed ut libero.
Vestibulum hendrerit id libero eget dictum. Nulla augue erat, fringilla eget imperdiet non, sagittis vitae arcu.
</p>
<footer id="footer2">
<p>
Denna sektion är från start till höger, sedan under.
</p>
</footer>
</section>
</div>
<div class="mainfooter">
<footer>
<p>Sidfot - Webbutveckling för mobila enheter</p>
</footer>
</div>
</div>
</body>What am I doing wrong? Should I be going around this some other way, with bootstrap perhaps? <-- Please note this is a really rough draft -->
For example this one, I set .wrapper display to block and I used 2 inline blocks to do boxes and add a margin, you just have to ajust other parts where you used grid properties before
.wrapper {
display: block;
grid-template-columns: 0.9fr 1.1fr;
grid-template-rows: 1.1fr 1.8fr 0.1fr;
grid-template-areas: "header header" "content content" "footer footer";
grid-column-gap: 1em;
grid-row-gap: 1em;
background-color: #fff;
}
.wrapper>div {
padding: 1em;
}
.mainheader {
grid-area: header;
width: 70%;
background-color: #fff;
}
.content {
/*grid-area: content;*/
width: 100%;
font-family: Trebuchet MS;
background-color: #fff;
color: #000;
}
.content section {
width: calc(50% - 10px);/*for margin*/
display: inline-block;
vertical-align: top;
margin: 0px 3px;
}
.mainfooter {
grid-area: footer;
background-color: #854242;
width: 40%;
border-radius: 25px;
padding: 20px;
width: 800px;
height: 30px;
li {
display: inline;
}
#h1,
h2 {
color: #854242
}
#content {}
#footer1 {
background-color: #999999
}
#footer2 {
background-color: #999999
}<body>
<div class="wrapper">
<div class="mainheader">
<header>
<h1>Webbutveckling för mobila enheter</h1>
<h2>Responsiv webbdesign</h2>
<img src="images/header.jpg" alt="Header-bild" width="960px" />
<nav id="mainmenu">
<ul>
<li><a href="index.htm" title="Startsidan">Startsidan</a></li>
<li><a href="#" title="Sida två">Sida 2</a></li>
<li><a href="#" title="Sida tre">Sida 3</a></li>
<li><a href="#" title="Sida fyra">Sida 4</a></li>
<li><a href="http://www.miun.se" title="Mittuniversitetet">Miun</a></li>
</ul>
</nav>
<div id="search">
<form>
<input type="text" name="searchstring" id="searchstring">
<input type="submit" value="Sök" id="searchbutton">
</form>
</div>
<!-- Slut på search -->
</header>
</div>
<div class="content">
<section>
<h2>Box 1</h2>
<p>
Mauris dapibus consectetur neque commodo eleifend. Pellentesque interdum posuere mollis. Nunc dui libero, feugiat sed consectetur ac, eleifend fermentum nisl. Praesent felis ligula, interdum sit amet tortor in, eleifend vestibulum mi. Duis eu ultricies
enim. Quisque blandit ligula vel odio adipiscing, et consectetur odio vestibulum. Nam sed lectus vulputate, posuere orci sit amet, eleifend massa. Nullam mi ante, faucibus vitae turpis sed, volutpat auctor orci.
</p>
<p>
Aenean varius, sapien sed pharetra gravida, massa massa sodales mi, eu venenatis quam nunc sit amet ante. Praesent bibendum massa enim, vitae pulvinar odio imperdiet sed. Nam ac lacus ac nulla mollis blandit eu quis lectus. Nullam non tortor vel ipsum
consectetur lacinia eget non nisi. Aliquam erat volutpat. Pellentesque eget dui bibendum, malesuada quam quis, consequat lacus. Ut tincidunt pharetra laoreet. Nullam sed sem et mauris luctus ullamcorper. Mauris ipsum velit, tincidunt eget quam
convallis, cursus suscipit ante. Vivamus vitae massa id lorem interdum hendrerit. Duis suscipit elit eu tempor tincidunt. Suspendisse ut metus id magna aliquam posuere. Duis vulputate sit amet ipsum vel egestas. Ut rhoncus elementum augue.
</p>
<footer id="footer1">
<p>
Denna sektion är från start till vänster, sedan ovanpå.
</p>
</footer>
</section>
<section>
<h2>Box 2</h2>
<p>
Vestibulum mollis mattis risus, feugiat iaculis massa suscipit vel. Aenean ultricies lorem nec dui pulvinar, quis scelerisque enim egestas. Morbi massa eros, tempus id dictum eget, facilisis lobortis arcu. Nulla ut blandit nunc, ut egestas massa. Duis
a lorem et lorem commodo dictum nec a libero. Donec porta lectus a accumsan rhoncus. Nunc vitae est id tellus suscipit malesuada. Aenean eu arcu et quam laoreet auctor ac ut sapien. Fusce sed ligula quis felis vehicula tempor sed ut libero.
Vestibulum hendrerit id libero eget dictum. Nulla augue erat, fringilla eget imperdiet non, sagittis vitae arcu.
</p>
<footer id="footer2">
<p>
Denna sektion är från start till höger, sedan under.
</p>
</footer>
</section>
</div>
<div class="mainfooter">
<footer>
<p>Sidfot - Webbutveckling för mobila enheter</p>
</footer>
</div>
</div>
</body>