Hoe krijg ik de witte achtergronden op de afbeelding en naast de tabel.

Overzicht Reageren

Sponsored by: Vacatures door Monsterboard

Alexander Tobe

Alexander Tobe

24/06/2024 10:21:33
Quote Anchor link
Ik moet een opdracht doen, maar ik ben de afgelopen weken uren bezig geweest.
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.
Afbeelding
** spamknip **

Ik hoef alleen maar achtergrond + tekst en tabelgedeelte goed te maken.

Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
<!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">&#9820;</td>
                <td class="grey">&#9822;</td>
                <td class="white">&#9821;</td>
                <td class="grey">&#9819;</td>
                <td class="white">&#9818;</td>
                <td class="grey">&#9821;</td>
                <td class="white">&#9822;</td>
                <td class="grey">&#9820;</td>
          </tr>
          <tr>
                <td class="grey">&#9823;</td>
                <td class="white">&#9823;</td>
                <td class="grey">&#9823;</td>
                <td class="white">&#9823;</td>
                <td class="grey">&#9823;</td>
                <td class="white">&#9823;</td>
                <td class="grey">&#9823;</td>
                <td class="white">&#9823;</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">&#9817;</td>
                <td class="grey">&#9817;</td>
                <td class="white">&#9817;</td>
                <td class="grey">&#9817;</td>
                <td class="white">&#9817;</td>
                <td class="grey">&#9817;</td>
                <td class="white">&#9817;</td>
                <td class="grey">&#9817;</td>
          </tr>
          <tr>
                <td class="grey">&#9814;</td>
                <td class="white">&#9816;</td>
                <td class="grey">&#9815;</td>
                <td class="white">&#9812;</td>
                <td class="grey">&#9812;</td>
                <td class="white">&#9815;</td>
                <td class="grey">&#9816;</td>
                <td class="white">&#9814;</td>
          </tr>
        </table>
  </div>
</body>
</html>


Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
.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;
}


Edit:
Spam weggeknipt uit je post. Deze lijkt te zijn meegelift uit een copypaste van je imageuploader.
Graag daarop letten in het vervolg.
Gewijzigd op 24/06/2024 10:27:19 door - Ariën -
 
PHP hulp

PHP hulp

07/07/2024 23:37:27
 
Ad Fundum

Ad Fundum

30/06/2024 21:39:38
Quote Anchor link
Alexander Tobe op 24/06/2024 10:21:33:
Ik moet een opdracht doen, maar ik ben de afgelopen weken uren bezig geweest.

Uren bezig geweest in een periode van weken? Ik wilde dat ik zoveel vrije tijd had!

Alexander Tobe op 24/06/2024 10:21:33:
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."


Een achtergrondafbeelding regel je met CSS background-image, en als je geen flex mag gebruiken is dat echt achterlijk, echt iets voor een docent om zoiets kinderachtigs te doen. Aan de andere kant kan het ook prima met een float op een <div> met een width: 50%; of zelfs een <table>.
Maar dat is dus enorm achterhaald. Hebben jullie soms niets beters te doen?
 
- Ariën -
Beheerder

- Ariën -

30/06/2024 21:50:45
Quote Anchor link
@Ad: Ik weet dat scholen en opleidingen achterlijke eisen hebben.Ik weet nog dat wij in 2005 op de opleiding ICT een website moesten bouwen, met tabellen. De grotere site werden toen al semantisch in CSS omgebouwd, maar dat mochten wij niet.
 
Alexander Tobe

Alexander Tobe

30/06/2024 22:03:29
Quote Anchor link
@ad fundum

Heb ook zeker niet alle tijd van de wereld maar 3x per week wel 1,5 uur.
Werd er ook helemaal gek van dat het zolang duurde want het boek wat ik heb staat vol tekst met weinig uitleg/voorbeelden.

Inmiddels heb ik contact gehad met de docent en ze rekent flex ook goed omdat float achterhaald is.
Ook wat aanwijzingen gehad.
Flex is trouwens het volgende hoofdstuk volgens mij dus dan kan ik het de volgende opdracht gebruiken.
Maar ben er zo klaar mee dat ik geen zin meer heb om het om te zetten.

Enige wat ik nu nog moet doen is die transparante rand goed krijgen alleen krijg ik dat witte blok achter de tekst niet goed.
Ik kan het morgenochtend uploaden maar wilde het eind morgenmiddag wel versturen dus dan heb ik al het antwoord nodig.

EDIT: code toegevoegd met afbeelding zoals ik het zie.
(je moet op dat blauwe dingetje links onder het plaatje drukken voor een groter versie.)

Afbeelding

Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
.block {
  width: 50%;
  height: 250px;
  float: left;
  background-image: url(images/background.jpg);
  background-size: cover;
  background-position: center;
  border-image: linear-gradient(to left, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 1) 50%);
  border-image-slice: 1;
}
.text {
  background-color: rgba(255, 255, 255);
  font-size: 18px;
  padding: 15px;
  text-align: center;
  position: relative;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 50%;
  border: 50px solid rgb(255, 0, 0);
  opacity: 0.5;
}
Gewijzigd op 01/07/2024 09:47:03 door Alexander Tobe
 
Ad Fundum

Ad Fundum

03/07/2024 06:46:27
Quote Anchor link
Het probleem dat ik zie op de afbeelding is dat niet alleen de rand, maar ook het binnenste transparant is.
Dat komt omdat je het hele blok transparant maakt met "opacity: 0.5;". Dat moet je niet doen.
Je moet de "opacity" en "border"-regels vervangen door "box-shadow" met een transparante kleur:
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
  box-shadow: 0 0 0 50px #FF00007F;

#FF000077 is hexacimaal, en kan je ook schrijven als decimaal met rgba(255, 0, 0, 127);
Gewijzigd op 03/07/2024 06:47:00 door Ad Fundum
 
Alexander Tobe

Alexander Tobe

04/07/2024 09:37:17
Quote Anchor link
Ja dat was het duss had dit ook geprobeerd eerder maar denk dat ik toen nog niet ander onderdeel had want toen werkte het niet.

Heb de opdracht wel ingeleverd met die andere waarde.
Ook nog geen antwoord op gehad duss weet niet of ze dit ook wilde.

In ieder geval gewijzigd op mijn eigen pc.

Bedankt voor de hulp.
 
Ramon van Dongen

Ramon van Dongen

04/07/2024 17:31:38
Quote Anchor link
Ad Fundum op 03/07/2024 06:46:27:
#FF000077 is hexacimaal, en kan je ook schrijven als decimaal met rgba(255, 0, 0, 127);


Nooit geweten dat je hexadecimale notatie ook met 8 ipv 6 tekens kunt doen om de alpha aan te geven. Zie het hier nu ook; https://gist.github.com/lopspower/03fb1cc0ac9f32ef38f4

Goede tip!
 
Jan Koehoorn

Jan Koehoorn

05/07/2024 12:48:45
Quote Anchor link
Ramon van Dongen op 04/07/2024 17:31:38:
Ad Fundum op 03/07/2024 06:46:27:
#FF000077 is hexacimaal, en kan je ook schrijven als decimaal met rgba(255, 0, 0, 127);


Nooit geweten dat je hexadecimale notatie ook met 8 ipv 6 tekens kunt doen om de alpha aan te geven.

Goede tip!


In dit geval kan het zelfs met vier tekens: #f007
 



Overzicht Reageren

 
 

Om de gebruiksvriendelijkheid van onze website en diensten te optimaliseren maken wij gebruik van cookies. Deze cookies gebruiken wij voor functionaliteiten, analytische gegevens en marketing doeleinden. U vindt meer informatie in onze privacy statement.