OPGAVER TIL HTML & CSS – OPGAVE 1 – POPUP VINDUER
Opgave 1
Opgave 1 – Del 1
- Lav en ny pen i codepen.io
- Lav 1 div boks i din HTML del og giv den klassen “detHele1”
- Således her
<div class=”detHele1″></div>
Stil dig mellem de to div tags og tryk enter, således.
- Således her
<div class=”detHele1″>
</div>
Tilføj dette i din CSS box:
Opgave 1 – Del 2
Nu skal vi lave indholdet i den første boks som er et input der fungere som en checkbox med en knap oven på. Stil dig mellem de to div tags i HTML’en på den tomme linje og lav nu inputboksen.
< input id=”letterA” type=”checkbox” />
Tryk enter bagefter og skriv linjen i HTML ind for dit label.
< label id=”letterAbutton” for=”letterA” class=”grid-item button3 tooltip” > < /label >
Gå så ned i din CSS og skriv koden for klassen “grid-item” Der skal definere rummet, hvor checkboksen med knappen er i.
.grid-item {
position: absolute;
border: 1px solid rgba(0, 0, 0, 0.8);
border-radius: 20px;
padding: 0px;
font-size: 20px;
text-align: center;
display: grid;
}
Opgave 1 – Del 3
Nu skal vi lave 2. klasse for label, nemlig button3, så følg med her:
.button3 {
position: auto;
width: 100%;
background-color: lightblue;
font-weight: 900;
cursor: pointer;
display: grid;
}
}
Dette skal definere knap delen for det label vi satte ind i HTML’en. Læg mærke til at de lige nu ligger ved siden af hinanden.
Opgave 1 – Del 4
Nu skal vi så til at sætte den sidste klasse ind, nemlig den der er vores hover boks for knappen.
< label id=”letterAbutton” for=”letterA” class=”grid-item button3 tooltip” >
< /label >
Gå så ned i din CSS og skriv koden for “tooltip”.
}
Opgave 1 – Del 5
Så lang så godt. Nu skal vi tilbage til HTML koden. Her skal der 2 linjer ind mellem label taggene. Så det kommer til at se således ud:
< label id=”letterAbutton” for=”letterA” class=”tooltip grid-item button3″ >
< div class=”buttonTxt” >A< /div >
< span class=”tooltiptext” >Note< br >om indholdet< /span >
</label>
Opgave 1 – Del 6
Nu skal vi kigge på de klassen til button3. Som også skal have en hover og klassen for bogstavet A.
.button3 {
position: auto;
width: 100%;
background-color: lightblue;
font-weight: 900;
cursor: pointer;
display: grid;
}
.button3:hover {
cursor: pointer;
background-color: #4D94DB;
}
.buttonTxt {
font-family: verdana;
justify-self: center;
align-self: center;
font-size: 1rem;
}
Opgave 1 – Del 7
I denne del skal vi lave tooltip og tooltiptext klasserne der har samme karakterer og derfor begge står over klassen.
Opgave 1 – Del 8
Vi skal tilbage i HTML’en og tilføje vores popup-boks og dens lukke knap.
Der skal derfor sættes nogle div bokse ind, med klasser og et label til vores lukke knap for popup-boksen.
Opgave 1 – Del 9
Vi skal nu tilbage til CSS’en og kode klasserne “show1”, “item-1” og “close-btn1”.
Opgave 1 – Del 10
Vi skal vi kode lukke knappen “close-btn1” og gøre sådan at popup-boksen bliver gemt når man trykker på krydset 🙂
Opgave 1 – Del 11
Så skal vi gøre sådan at boksen kommer frem når man klikker på knappen A 🙂
Opgave 1 – Del 12
Til allersidst så skal vi gøre sådan at boksen kommer laver en animation, når man klikker på knappen A 🙂
