Ik ben vandaag in de goede richting gekomen, maar kan er nog steeds niet achter komen hoe ik het witte achtergrondgedeelte op de afbeelding krijg.
Dit staat erin de opdracht;
"een transparante rand om een achtergrondafbeelding en plaats daar wat tekst in. Plaats een dunne zwarte rand om het item. Deze beslaat precies de helft van de breedte van het blok."
Ik heb dus achtergrondafbeelding met text maar nog geen witte achtergrond zoals in het voorbeeld hieronder.
Daarnaast moet ik dus nog de achtergrondafbeelding naast de tabel krijgen.
Ik mag geen flex- en grid-technieken gebruiken.
Minimaliseer het gebruik van div, gebruik het alleen als er geen ander geschikt element is.
Dit is het voorbeeld dat ze mij hebben gegeven.
[img]https://img.eselt.de/img/15636251_IeAevbom2GD96dKh/ad.jpg[/img]
** spamknip **
Ik hoef alleen maar achtergrond + tekst en tabelgedeelte goed te maken.
<!DOCTYPE html>
<html lang="nl">
<head>
<title>Opdracht Lay-out - boxmodel en weergavemodel</title>
<meta charset="utf-8">
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1> Spelletjes</h1>
<div class="div1">
<h2>Bordspellen</h2>
<figure>
<img class=scaled src="images/Schaakbord.jpg" alt="Schaakbord met enkele schaakstukken">
<figcaption>Schaakbord met enkele schaakstukken</figcaption>
</figure>
<div class="block">
<div class="text">Hiernaast staat een lijst van een aantal bordspellen.</div>
</div>
<table class="games">
<tr>
<td class="rijgroep">Naam</td>
<td class="rijgroep" colspan="3">Leeftijd (van tot)</td>
<td class="rijgroep" colspan="3">Aantal spelers (min max)</td>
</tr>
<tr>
<td class="naam">Monopoly</td>
<td class="leeftijd">8</td>
<td class="scheiding">-</td>
<td class="leeftijd">99</td>
<td class="spelers">2</td>
<td class="scheiding">-</td>
<td class="spelers">6</td>
</tr>
<tr>
<td class="naam">30 seconds</td>
<td class="leeftijd">12</td>
<td class="scheiding">-</td>
<td class="leeftijd">99</td>
<td class="spelers">3</td>
<td class="scheiding">-</td>
<td class="spelers">20</td>
</tr>
<tr>
<td class="naam">De kolonisten van Catan</td>
<td class="leeftijd">10</td>
<td class="scheiding">-</td>
<td class="leeftijd">99</td>
<td class="spelers">3</td>
<td class="scheiding">-</td>
<td class="spelers">4</td>
</tr>
<tr>
<td class="naam">Levensweg</td>
<td class="leeftijd">6</td>
<td class="scheiding">-</td>
<td class="leeftijd">99</td>
<td class="spelers">2</td>
<td class="scheiding">-</td>
<td class="spelers">4</td>
</tr>
<tr>
<td class="naam">Rummikub</td>
<td class="leeftijd">6</td>
<td class="scheiding">-</td>
<td class="leeftijd">99</td>
<td class="spelers">2</td>
<td class="scheiding">-</td>
<td class="spelers">4</td>
</tr>
<tr>
<td class="naam">Statego</td>
<td class="leeftijd">8</td>
<td class="scheiding">-</td>
<td class="leeftijd">99</td>
<td class="spelers">2</td>
<td class="scheiding">-</td>
<td class="spelers">2</td>
</tr>
<tr>
<td class="naam">Risk</td>
<td class="leeftijd">10</td>
<td class="scheiding">-</td>
<td class="leeftijd">99</td>
<td class="spelers">2</td>
<td class="scheiding">-</td>
<td class="spelers">5</td>
</tr>
<tr>
<td class="naam">Mens erger je niet!</td>
<td class="leeftijd">6</td>
<td class="scheiding">-</td>
<td class="leeftijd">99</td>
<td class="spelers">2</td>
<td class="scheiding">-</td>
<td class="spelers">6</td>
</tr>
</table>
</div>
<div class="div2">
<h3>Schaakbord</h3>
<table class="chess">
<tr>
<td class="white">♜</td>
<td class="grey">♞</td>
<td class="white">♝</td>
<td class="grey">♛</td>
<td class="white">♚</td>
<td class="grey">♝</td>
<td class="white">♞</td>
<td class="grey">♜</td>
</tr>
<tr>
<td class="grey">♟</td>
<td class="white">♟</td>
<td class="grey">♟</td>
<td class="white">♟</td>
<td class="grey">♟</td>
<td class="white">♟</td>
<td class="grey">♟</td>
<td class="white">♟</td>
</tr>
<tr>
<td class="white"></td>
<td class="grey"></td>
<td class="white"></td>
<td class="grey"></td>
<td class="white"></td>
<td class="grey"></td>
<td class="white"></td>
<td class="grey"></td>
</tr>
<tr>
<td class="grey"></td>
<td class="white"></td>
<td class="grey"></td>
<td class="white"></td>
<td class="grey"></td>
<td class="white"></td>
<td class="grey"></td>
<td class="white"></td>
</tr>
<tr>
<td class="white"></td>
<td class="grey"></td>
<td class="white"></td>
<td class="grey"></td>
<td class="white"></td>
<td class="grey"></td>
<td class="white"></td>
<td class="grey"></td>
</tr>
<tr>
<td class="grey"></td>
<td class="white"></td>
<td class="grey"></td>
<td class="white"></td>
<td class="grey"></td>
<td class="white"></td>
<td class="grey"></td>
<td class="white"></td>
</tr>
<tr>
<td class="white">♙</td>
<td class="grey">♙</td>
<td class="white">♙</td>
<td class="grey">♙</td>
<td class="white">♙</td>
<td class="grey">♙</td>
<td class="white">♙</td>
<td class="grey">♙</td>
</tr>
<tr>
<td class="grey">♖</td>
<td class="white">♘</td>
<td class="grey">♗</td>
<td class="white">♔</td>
<td class="grey">♔</td>
<td class="white">♗</td>
<td class="grey">♘</td>
<td class="white">♖</td>
</tr>
</table>
</div>
</body>
</html>
.div1 {
display: flow-root;
border: 3px solid silver;
margin-bottom: 10px;
}
.div2 {
height: 650px;
border: 3px solid silver;
}
h2 {
text-align: center;
font-size: 20px;
}
figure {
float: center;
width: 25%;
text-align: center;
text-indent: 0;
border: 2px silver solid;
margin: 0.2em;
padding: 0.2em;
margin-left: auto;
margin-right: auto;
margin-bottom: 10px;
}
img.scaled {
width: 100%;
}
.block {
width: 50%;
height: auto;
float: left;
background-image: url(images/background.jpg);
background-size: cover;
background-position: center;
padding: 100px;
border: 1px solid #000;
border-image: linear-gradient(to left, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 1) 50%);
border-image-slice: 1;
}
.block.text {
color: #000000;
font-size: 18px;
padding: 10px;
}
table.games {
border: 2px solid black;
width: 50%;
float: right;
TABLE { border-collapse: separate; border-spacing: 2px; }
TABLE, TD { border: solid 1px white; }
TD {color:black; padding: 2px; }
.rijgroep{
background-color: lightblue;
text-align: center;
font-weight: 700;
}
.naam{
background-color: peachpuff;
text-align: left;
}
.leeftijd{
background-color: sandybrown;
text-align: center;
}
.scheiding{
text-align: center;
}
.spelers{
background-color: orange;
text-align: center;
}
}
h3 {
text-align: center;
font-size: 20px;
padding-bottom: 25px;
}
table.chess{
border: 3px solid red;
border-spacing: 0px;
box-shadow:
0 0 0 15px white,
0 0 0 30px black;
text-align: center;
font-size: 35px;
margin-left: auto;
margin-right: auto;
}
.white{
background-color: white;
width: 60.5px;
height: 60.5px;
}
.grey{
background-color: grey;
width: 60.5px;
height: 60.5px;
}
