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

04/10/2024 07:06:10
 

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
 

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
 
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
 
Jan Koehoorn

Jan Koehoorn

10/07/2024 20:52:47
Quote Anchor link
Alexander Tobe op 24/06/2024 10:21:33:
Ik mag geen flex- en grid-technieken gebruiken.

En daarom worden we dus geen docent IT; voor je het weet heb je geen tijd meer om de laatste technieken bij te houden ;-)
 
Jan Koehoorn

Jan Koehoorn

11/07/2024 21:48:47
Quote Anchor link
Nog even ter illustratie: met grid is dit echt heel simpel:

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
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        html,
        body {
            font: 16px Verdana;
            color: black;
            height: 100vh;
            background: black;
            padding: 0;
        }

        .container {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            grid-template-rows: 300px;
        }

        .left {
            display: grid;
            place-items: center;
            background: url('phphulp.jpg') center center / cover no-repeat;
        }

        .transparent {
            display: grid;
            place-items: center;
            width: 80%;
            height: 100px;
            background: rgba(255, 255, 255, .5);
            padding: 40px;
        }

        .content {
            display: grid;
            place-items: center;
            background-color: white;
            width: 100%;
            height: 100%;
        }
    </style>
</head>

<body>
    <div class="container">
        <div class="left">
            <div class="transparent">
                <div class="content">Lorem ipsum dolor sit amet</div>
            </div>
        </div>
        <div class="right">
            <table>
                <thead>
                    <tr>
                        <th>one</th>
                        <th>two</th>
                        <th>three</th>
                    </tr>
                </thead>
            </table>
        </div>
    </div>
</body>

</html>


Ik heb leren front-enden in de tijd dat je speciaal voor Internet Explorer speciale extra stylesheets moest maken, en conditional comments moest gebruiken. Iets horizontaal en verticaal centreren was een ramp.

De minst erge oplossing was toen:

parent position: relative geven
child postion: absolute geven, left: 50% en right: 50%
en vervolgens transform: translate gebruiken om het child element 50% te verschuiven langs de x- en de y-as.

Tegenwoordig (dus met grid) is het echt kip-simpel. Het kan met twee regels CSS:

Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
display: grid;
place-items: center;


Aanvulling: voor de image phphulp.jpg moet je zelf even een dummy image aanmaken.
Gewijzigd op 11/07/2024 21:50:29 door Jan Koehoorn
 
Alexander Tobe

Alexander Tobe

13/07/2024 10:20:04
Quote Anchor link
@Jan koehoorn ben nu bezig met volgende hoofdstuk waarin flex en grid uitgelegd worden en zie al na 1 oefening dat dat veel beter werkt.

Zoals ik al eerder zei het boek is voor mij ook waardeloos vooral uitlegteksten en weinig voorbeelden en al helemaal geen voorbeelden waarmee je inzicht krijgt in de gevraagde onderdelen in opdrachten.

Nog 1 oefen-opdracht en eind-opdracht te gaan.
 
Jan Koehoorn

Jan Koehoorn

20/07/2024 21:21:26
Quote Anchor link
Ik heb ooit een codepen aangemaakt om grid aan leerlingen uit te leggen: https://codepen.io/jan-koehoorn/pen/LYWgPZY
 

20/07/2024 22:56:14
Quote Anchor link
Als je eenmaal afgestudeerd bent en in 'het vak' zit, moet je je eigen kennis bijhouden.
Niet met boeken, maar gewoon met wat er op het internet te vinden is.

https://css-tricks.com/snippets/css/a-guide-to-flexbox/
https://css-tricks.com/snippets/css/complete-guide-grid/

Meer dan hun posters heb je niet snel nodig.
 



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.