Kod:
<!DOCTYPE html>
<html lang="sv">
<head>
<meta charset="utf-8" />
<title>Om oss - Läxhjälpen</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<link href='https://fonts.googleapis.com/css?family=Merianda+one' rel='stylesheet' /> <!-- Så man kan använda en specifik stilmall från google -->
<link href="css/lax.css" title="Finished" rel="stylesheet" /> <!-- Länkar till lax.css -->
</head>
<body class="subpage">
<header>
<div class="hwrap">
<a href="./"><img class="logo" alt="Startsidan" src="images/laxlogo.png"/></a>
<h1>Läxhjälpen: <span>Om oss</span></h1> <!-- Så meningen "Om oss" hamnar på samma rad */ -->
</div>
<p class="tagline" ></p>
<hr />
</header>
<nav>
<ul class="menu">
<li><a href="om-oss.html">Vilka vi är 〠</a></li>
<li><a href="arbeten.html">Vad vi gör ⌘</a></li>
<li><a href="blog.php">Blogg ✪</a></li>
<li><a href="contact.php">Kontakt ☎</a></li>
</ul>
</nav>
<div role="main">
<article>
<figure>
<img src="images/tjej1.png" alt="Det här är jag - Mia" />
<figcaption class="dborder">Mia</figcaption>
</figure>
<p>Hej! Jag heter Mia och tycker om att göra hemsidor. Jag har bloggat under en längre tid men
blev nyfiken på hur jag själv skulle kunna bygga en blogg. Hur svårt kunde det egentligen vara?
Hur mycket var jag tvungen att lära mig?</p>
<p>Just nu sitter jag här och och skapar koder samtidigt som jag ser hur bloggen växer fram.
Det är en spännande utmaning och inte alls så svårt som jag först trodde. Jag känner mig så stolt.</p>
<p>Om du vill ha hjälp med <strong>svenska, engelska, spanska eller samhällsämnena</strong> då
står jag gärna till tjänst.</p>
</article>
<article>
<figure>
<img src="images/kille1.png" alt="Det här är jag - Per" />
<figcaption class="dborder">Per</figcaption>
</figure>
<p>Mitt namn är Per, men jag kallas för Pelle. Mina vänner säger att jag är en riktig webbnörd
och det stämmer nog. Jag trivs bakom dataskärmen och att knacka html-koder.</p>
<p>Det är en hel del att lära sig men det som är bra är att det finns färdiga koder att utgå
ifrån. Jag tror man lär sig lättare då, och det blir enklare att komma ihåg. Åtminstone var
det så för mig.</p>
<p>Om det är hjälp med <strong>matte, fysik, kemi och biologi</strong> du vill ha, då är det
mest jag som kommer att hjälpa dig. De andra är inte dåliga, men jag är allt strået vassare!</p>
</article>
<article>
<figure>
<img src="images/kille2.png" alt="Det här är jag - Jörgen" />
<figcaption class="dborder">Jörgen</figcaption>
</figure>
<p>Hejsan! Jag tycker om att teckna och designa. Och så gillar jag att vara social på nätet.
Min dröm är att bli webbdesigner men alla sa att det är jättesvårt för man måste läsa i många år och vara bra på matte.</p>
<p>Jag upptäckte att det inte alls var så svårt. Har man bara intresse och bra handledning så
lyckas man. Det är viktigt med en bra och tydlig pedagogik för de som är nybörjare. Det fick jag här.
Och nu är jag på väg att bli en webbdesigner.</p>
<p>Om du vill ha hjälp med <strong>samhällsämnena, fotografering och bildbehandling eller design</strong> då
kommer jag snabbt som ögat!</p>
</article>
</div>
<footer>
</footer>
</body>
</html>
@CHARSET "UTF-8";
html {
margin 2%; /* För att förhindra att innehållet kommer precis in på kanten */
}
body {
margin: auto; /* Centrera sidan */
max-width: 860px;
font-family: sans-serif;
font-size: 100%; /* Startvärde */
font-family: "Helvetica Neue;" , "Liberation Sans", Calibri, Arial, sans-serif; /* Val av typsnitt i turordning */
}
/*section, header, footer {
outline: 1px solid red; /* provisorisk */
}
*/
header {
text-align: center; /* Centrera texten */
}
.startpage h1 {
font-size: 500%; /* Stor rubriktext */
}
.tagline {
font-size: 120%;
padding: 0.5em; /* Avstånd till kantlinje */
border-top: 3px double #00AF64;
border-bottom: 3px double #00AF64;
margin: 1em 0; /* Avstånd nedåt men inte uppåt */
}
.startpage { /* Startsidan ska använda flex för sin layout */
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.startpage header, /* Fyller ut sidans bredd */
.startpage footer {
flex: 0 0 100%;
}
.startpage section { /* Sectionerna ska lägga sig på rad */
flex: 0 0 22%
}
.menu a:Link, /* Ta bort färg och understrykning på länkarna */
.menu a:visited {
text-decoration: none;
color: #000;
}
.menu a:focus, /* Ta bort färg och understrykning på länkarna */
.menu a:hover {
text-decoration: underline;
color: #A62F00;
}
.menu a:active { /* Ta bort färg och understrykning på länkarna */
text-decoration: underline;
color: #FF4900;
}
.menu li,
.menu h2 { /* Positionering, outlines och bakgrundsfärg */
margin: 0 0 1em;
padding: 2em 0;
background-color: #F5F5F5;
text-align: center;
box-shadow: inset 0 0 20px #007241; /* Ellipser */
border-radius: 50%;
font-family: 'Merianda One', cursive; /* Typsnitt */
}
h1 {
font-family: 'Merianda One', cursive; /* Typsnitt */
}
h1::first-letter { /* Annan färg på första bokstaven i rubriken */
color: #00AF64;
}
.startpage .Logo { /* Styrning på logans storlek */
width: 235px;
height: 198px;
}
.hwrap {
display: flex; /* Gör divven till en flexcontainer */
flex-wrap: wrap; /* Radbryt om det behövs */
align-items: center; /* Lägg elementen centrerat verikalt */
justify-content: center; /* Och intill varandra centrerat */
}
.hwrap > a {
margin-right: 30px; /* Avstånd mellan text och bild */
}
}
.startpage > header > h1 {
font-size: 500%; /* Massiv rubrik */
}
.startpage > header > p.tagline {
font-size: 120%;
padding: 0.5em; /* Avstånd till kantlinje */
}
.startpage > section {
}
.startpage > section:last-of-type {
}
.startpage > section > h2 {
}
footer {
margin-top: 3em; /* Utseende på footen */
text-align: center;
color: #999;
}
.subpage .logo {
width: 146px; /* Krymper bilden */
height: 123px;
}
.subpage h1 {
font-size: 2.6rem; /* Storlek på rubriken */
}
h1 > span {
color: #a62f00; /* Färg på rubriken */
}
.menu {
margin: 1em 0;
padding: 0;
}
.menu li {
margin: 0 0 1rem;
list-style: none; /* Nollställer de inbyggda inställningarna för <ul> och <li> */
}
.subpage .hwrap {
justify-content: space-between;
}
.subpage .hwrap > a,
nav {
flex: 0 1 20%;
min-width: 146px;
margin-right: 10px;
outline: 1px solid; /* Temporär */
}
.subpage .hwrap > h1,
div[role=main] {
flex: 1 1 300px;
}
.dborder {
border: 1px solid #ccc;
padding: 5px;
}
article {
padding-bottom: 1em;
margin-bottom: 2em;
border-bottom: 3 px double #00af64;
}
article:last-child {
border-bottom: none;
margin-bottom: 0;
}
Ok, behöver hjälp igen.
Det jag vill lyckas med är att få alla navigationslänkarna <nav> så de hamnar i en kolumn till vänster om samtliga <article>. Får det inte att fungera, och jag tror det är någon deklaration som krockar med någon annan. Kan någon kunnig se över koden och se vart det felar/saknas något. Det är en skoluppgift så ni kan gärna hinta felet, så kan jag försöka själv
Tack på förhand / Newbie
