HTML grid

Pagina: 1
Acties:
  • 467 views

Vraag


  • johanvh2002
  • Registratie: September 2024
  • Laatst online: 19-09 18:27
Beste ik begon sinds kort met html en css werken ik probeer een grid te maken ik volg via youtube hoe dat moet maar nu alleen werkt het wel met mijn html maar mijn css doet nie wat ik vraag ik wou mijn grid achtergrond kleur groen doen maar die heeft geel en roze weer ik weet niet wat ik fout doet en ondertussen ben ik nog maar beginenling dus als je me helpen graag en als je het niet goed snap hier is de html en css code mvg Johan


code:
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
 <!DOCTYPE html>
<html>
<head> 
<link rel="stylesheet" href="style.css">

<body>


  <title>WebProgramming</title>
  <a href="kit.html" style="border: 4px solid black; display: inline-block; padding: 6px;">Ga naar de pagina kit.html</a>

<h1>James</h1>
<div class="container">
  <div>Jackie James</div>
  <div>Tito </div>
  <div>Olivier</div>
  <div>Mats</div>
  <div>Quinten</div>
  <div>Dave</div>
  <div>Kim</div>
  <div>Lor</div>
  <div>Jacob</div>
</div>
}
  <p>Dit is James</p>
  <ul style="list-style-type:disc">
  <li>Jim</li>
  <li>Fred</li>
  <li>Cody</li>
  <table bgcolor="black" wdith"700">
      <tr bgcolor="gray">
          <th width="100">Jack</th>
          <th width="100">Miz</th>
          <th width="100">Fack</th>
         
        </tr>
         <tr bgcolor="lightgray" align="center">
        
          <td>Closed</td>
          <td>3-5</td>
          <td>3-5</td>
          <td>3-5</td>

          <table bgcolor="Yellow" wdith"700">
          <tr>
          <th width="100">Scampis</th>
          <th width="100">Noedels</th>
          <th width="100">Rijst</th>
        
          </tr>
          <tr>
           <td>Johan</td>
           <td>vind die eten lekker</td>
           </tr>
           <tr>
           <tr bgcolor="lightgray" align="center">+++
             <td>open</td>
             <td>Gesloten</td>
              <tr bgcolor="lightgray" align="center">
             </table>
          
     <tr></tr>
     <tr></tr>
    </table>
    <table>
      <tr>
       <tr bgcolor="lightgray" align="center">
       <td>Dit is een link</td>
       <td>
       <a href="https://www.codecenter.nl/">Klik hier</a>
       </td>
       </tr>
       </table>

<img src="ezel.jpg" alt="Beschrijving van de afbeelding" style="float: left; margin-right: 15px;">
<p>ik ben Sean de ezel en ik eet graag appels met mayonnaise </p>
<!DOCTYPE html>
<html lang="nl">
<head>
<div class="cirkel"></div>
<iframe width="560" height="315" src="https://www.youtube.com/embed/zWLi_18NyUA?si=sjcWgZ0hhv56auQ0" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
<div class="container">
    <div class="grid">
        <div calss="box">
            <h2>Tool</h2>
            <div calss="box">
            <h2>Tool</h2>
        <div class="row dude">
        /div>
        <div calss="box">
            <h2>Tool</h2>
        <div class="row dude2">
        /div>
        <div class="row dude3">
            <div calss="box">
            <h2>Tool</h2>
            <div calss="box">
            <h2>Tool</h2>
            <div calss="box">
            <h2>Tool</h2>



</body>
</html>


  </ul>

   </body>
  </head>
 
  </html>

code:
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
h1 {
  color: red;
   font-family: Palatino Linotype, 'GR Times New Roman', Gentium, serif;
}
p {
  color: yellow; /* Stelt de kleur van alinea's in op groen */
}
li {
  color: pink; /* Of een specifieke hexadecimale code zoals #FFC0CB */
}
body {
  background-color: blue; /* Stelt de achtergrond van het hele document in op blauw */
  display: grid;
    grid-template-colums: 20vw 15vw 15vw 20vw;
    grid-template-rows: 10vh 45vh auto;
}

    
    

#nav 
    background-color yellow; 
        grid-colum 2 /6;
        grid-row: 1 /2;
}
#storyleft {
    background-color: green;
    grid-column: 1 / 4;
    grid-row: 2 / 3;

}
#storyright {
    background-color: purple;
    grid-column: 1 / 4;
    grid-row: 2 / 3;
}
#article1 {
    background-color: gray;
    grid-column: 1 / 4;
    grid-row: 2 / 3;
}
.container {
  display: grid;
  grid-template-columns: auto auto auto;
  background-color: yellow;
  padding: 5px;
}
.container > div {
  background-color: #FFC0CB;
  border: 1px solid black;
  padding: 5px;
  font-size: 35px;
  text-align: center;
.cirkel {
  width: 100px;        /* Bepaalt de breedte van het element */
  height: 100px;       /* Bepaalt de hoogte van het element */
  background-color: yellow; /* Kleur van de cirkel */
  border-radius: 50%;  /* Maakt het element rond */
}
.container{
  width: 80%;
  margin: 0 auto;
  background-color: white;
  padding: 20px;
}
  .row{
   display: grid;
   margin: 20px;
   gap: 20px;
   
}
.box{
  background: #00FF00
  padding: 50px;
  border-radius: 15px;
}
.row dude{
  grid-template-columns: 6fr 6fr;
}
.row dude2{
  grid-template-columns: 3fr 6fr 3fr;
} 
.row dude3{
  grid-template-columns: 6fr 6fr;
}

...

Alle reacties


  • johanvh2002
  • Registratie: September 2024
  • Laatst online: 19-09 18:27
ik was vergeten zeggen die laatste grid wou ik groen die andere nie dus die laatste code

Acties:
  • +1 Henk 'm!

  • Juup
  • Registratie: Februari 2000
  • Niet online
Op regel 21 van je CSS mist in ieder geval een {

Een wappie is iemand die gevallen is voor de (jarenlange) Russische desinformatiecampagnes.
Wantrouwen en confirmation bias doen de rest.


Acties:
  • +1 Henk 'm!

  • Juup
  • Registratie: Februari 2000
  • Niet online
En na regel 53 ben je de } vergeten

Een wappie is iemand die gevallen is voor de (jarenlange) Russische desinformatiecampagnes.
Wantrouwen en confirmation bias doen de rest.


Acties:
  • +1 Henk 'm!

  • Juup
  • Registratie: Februari 2000
  • Niet online
En op regel 14 grid-template-colums mist een 'n' in columns

Een wappie is iemand die gevallen is voor de (jarenlange) Russische desinformatiecampagnes.
Wantrouwen en confirmation bias doen de rest.


Acties:
  • 0 Henk 'm!

  • Merethil
  • Registratie: December 2008
  • Laatst online: 16:07
Tevens tweemaal HTML openen en sluiten in dezelfde file. Ik geloof dat een validator en een beetje lezen al vrij veel kan oplossen hier. Gooi het voor de lol eens hierin: https://validator.w3.org/#validate_by_input

Acties:
  • 0 Henk 'm!

  • Juup
  • Registratie: Februari 2000
  • Niet online
Hmmm de TS heeft nog nooit in z'n eigen topics gereageerd dus ik denk dat het weinig zin heeft om hem verder te helpen :X

Een wappie is iemand die gevallen is voor de (jarenlange) Russische desinformatiecampagnes.
Wantrouwen en confirmation bias doen de rest.


Acties:
  • 0 Henk 'm!

  • MueR
  • Registratie: Januari 2004
  • Laatst online: 02:01

MueR

Admin Tweakers Discord

is niet lief

Help, mijn code werkt niet (goed).

Dit soort code dumps doen we niet aan. Een simpele IDE zoals VSCode zou de syntax errors er al uit halen. Een beetje meer inzet mag dus wel.

Anyone who gets in between me and my morning coffee should be insecure.

Pagina: 1

Dit topic is gesloten.