OPGAVE TIL HTML & CSS – MIDDEL – INTERAKTIVT KORT
Opgave 3
Opgave 3 – Del 1
- Først skal du gå ind på codepen.io
- Skriv koden ind fra opgave 1 i intro
- Lav nu en div boks under tagget < body >
- Således her
< body >< div > < /div >
Tildel din div class=” baggrund ” således her
< div class=” bagrund “> < /div >
Opgave 3 – Del 2
Nu skal vi tilføje en div med 70 < div > < /div > inde i den div. Således her:
< div class = “grid-container”>
< div > < /div >
< div > < /div >
< div > < /div >
< div > < /div >
< div > < /div >
< div > < /div >
< div > < /div >
< div > < /div >
< div > < /div >
< div > < /div >
….fortsæt (kopier evt disse 10 og sæt dem ind 7 gange) 🙂
< /div >
Vælg 18 div’er der alle skal have en class= “grid-item”
Opgave 3 – Del 3
Nu skal vi kode CSS’en med bagrund.
.baggrund {
position: absolute;
background-image: url(https://mom2day.dk/wp-content/uploads/2020/06/Baggrund.png);
width: 50em;
height: 30em;
background-repeat: no-repeat;
}
At en position er i absolute betyder at det er
muligt at placere noget oven på den tilhørende div.
Der er flere måder at definere størrelser på i CSS.
Ofte brugte er px(pixel) eller em(fx 2em er 2 gange
størrelsen på den nuværende font) Opgave 3 – Del 4
Nu skal vi kode CSS’en med .grid-container.
position:absolute;
display: grid;
width:50em;
height:30em;
grid-template-columns: auto auto auto auto auto auto auto auto auto
auto;
background-color:;
padding: 0px;
}
Her viser vi grid ved hjælp af display functionen. grid-template-columns placerer 10 rækker henad, hvor div'erne fortæller hvor mange rum hele grid'et har
Opgave 3 – Del 5
Nu skal vi kode CSS’en med .grid-tiem.
background-color: rgba(255, 255, 255, 0.8);
border: 1px solid rgba(0, 0, 0, 0.8);
padding: 10px;
font-size: 30px;
text-align: center;
}
rgba har vi haft om før r= red(rød) g=green(grøn) b=blue(blå) a=opacity ;)
Opgave 3 – Del 6
Nu skal vi kode en SPAN ind i stedet for på en af div’erne, du vælger selv hvilken 🙂
< div class=”tooltip” >
< a href=”https://www.google.com” target=”_blank” >< button class=”button-point” >
<span class=”tooltiptekst”>Check this out<br>This is awesome< /span ></button>< /a > < /div >
Hvad er en SPAN :
En span er en inline container, der bruges til at markere en del af en tekst op eller en del af et dokument op. Det er simpelt at style i CSS'en eller nemt manipuleret i JavaScript ved brug af class eller id attribute.
Læg mærke til class’en tooltip og tooltiptekst disse class’er koder vi i næste delopgave
Linket går til google og det åbnes i en ny fane via:
target = “_blank”
button class’en laver vi derefter 🙂
Opgave 3 – Del 7
Nu skal vi kode CSS’en for tooltip.
.tooltip {
position: relative;
display: inline-block;
}
Opgave 3 – Del 8
Nu skal vi kode CSS’en for tooltiptekst.
.tooltiptekst {
font-family: verdana;
font-size: 11px;
visibility: hidden;
width: 120px;
background-color: black;
color: #fff;
text-align: center;
border-radius: 6px;
padding: 5px 0;
position: absolute;
z-index: 1;
top: 100%;
left: 50%;
margin-left: -60px;
}
Hvad vi er ved at indskrive:
Du har allerede stødt på en del af disse kontroller i CSS før. Hovedsageligt justerer vi hvor der skal komme en tekst henne når vi peger, farven og bagrund
Opgave 3 – Del 9
Nu skal vi kode CSS’en for tooltip og tooltiptekst after, som gør at vi kan sætte noget ind efterfølgende. Husk at fjerne mellemrum før og efter ::
.tooltip .tooltiptekst :: after {
content: “”;
position: absolute;
bottom: 100%;
left: 50%;
margin-left: -5px;
border-width: 5px;
border-style: solid;
border-color: transparent transparent black transparent;
}
Vi sætter ikke et content(indhold) ind her det gør vi mellem span taggene, da det skal være forskelligt fra tag til tag.
Opgave 3 – Del 10
Nu skal vi kode CSS’en for når vi holder musen over et feltet.
.tooltip: hover .tooltiptekst {
visibility: visible;
}
Meget enkelt vi gør den nu synlig når vi holder musen hen over(hover) på placeringen
Opgave 3 – Del 11
Sidst men ikke mindst skal vi have kodet vores button.
.button-point{
position:absolute;
border:transparent;
width:80px;
height:67px;
background-color: rgba(255, 255, 255, 0);
}
.button-point: hover {
/*background-color: rgba(255, 255, 255, 0.4);*/
cursor: pointer;
}
.button-point: active {
opacity: 0;
}
Vi har her en class for button-point. Dertil hvordan den button(knap) virker når vi holder musen over og når den er aktivt valgt.