OPGAVE TIL HTML & CSS – MIDDEL – OPSLAGSTAVLE
Opgave 6
Opgave 6 – Del 1
Først skal vi have sat div’er op som skal fungere som rammerne til opslagstavlen
Start med at skrive:
< div style=”overflow: hidden;”>
< div id=”opslagstavle” class=”opslagstavle”>OPSLAGSTAVLE</div > < div id=”board” class=”board”>
< div id=”table” class=”table”>
< div class=”galleri1″>
< div>< /div>
< /div>
< div class=”galleri2″>
< div>< /div>
< /div>
< div class=”galleri3″>
< div>< /div>
< /div>
< div class=”galleri4″>
< div>< /div>
< /div>
< /div>
</ div>
</ div>
1. div boks skal have en style direkte i html teksten. Stil dig imellem < div> start og
slut og tryk enter.
2. div ligger nu inde i 1. div og skal have en #id og en .klasse. Skriv dertil OPSLAGSTAVLE som tekst mellem tags’ne.
3. div skal ligger under 2. div og skal også have #id og .klasse. Stil dig før
og tryk nu enter.
4. div skal ligge inde i 3. div og skal også have #id og .klasse.
Gå derefter ned i CSS’en og lav tilsvarende CSS styles til disse klasser>
Opgave 6 – Del 2
Nu skal der laves CSS styles vi starter med “opslagstavle”
.opslagstavle {
height: 100%;
width: 97%;
border: 7px solid #7D4924;
color: white;
font-size: 30px;
text-align: center;
background-color: #63391F;
}
Sørg for at justere højden til 100%.
Her kan man sætte baggrundsbilledet i stylesheetet og ikke i html’en, hvilket også vil sige at for at justere på dens størrelse skal der justeres med en scale(); for at billedet vises fuldt. Det kan op og ned justeres alt efter størrelsen på det oprindelige billede.
Opgave 6 – Del 3
Nu skal sætte styles ind i CSS’en for board og table.
.board {
height: 100%;
width: 97%;
background-image: linear-gradient(#E3A856,#7D4924);
border: 5px solid #63391F;
outline: 5px solid #7D4924;
overflow: hidden;
}
}
I board er der både en kant og en ramme på på 5px
Opgave 6 – Del 4
Nu skal vi op i html’en igen for der skal indsætte div’er til lapperne som skal vises på opslagstavlen. Det er denne kode der skal kopieres og sættes ind 4 gange med galleri1, galleri2, galleri3, galleri4 som klasser.
< div>< /div>
< /div>
Det skal gerne se sådanne her ud:
< div style=”overflow: hidden;”>< div id=”opslagstavle” class=”opslagstavle”>OPSLAGSTAVLE</div >
< div id=”board” class=”board”>
< div id=”table” class=”table”>
< div class=”galleri1″>
< div>< /div>
< /div>
< div class=”galleri2″>
< div>< /div>
< /div>
< div class=”galleri3″>
< div>< /div>
< /div>
< div class=”galleri4″>
< div>< /div>
< /div>
< /div>
</ div>
</ div>
Der er 4 klasser, der hver har hver sin farve. Hvis man ønsker flere lapper, så veksel mellem de 4 farver for at give et bedre spil og blandet billede
Opgave 6 – Del 5
Nu skal vi så til at kode #id’erne og .klasserne for gallerierne. Vi starte med galleri1. Husk vi skal have en mouseover effekt på også.
.galleri1{
}
vi venstre stiller den, og de andre også, så de sidder ved siden af hinanden og ikke under hinanden, før skærmen tvinger dem til det. Men den del af koden laver vi til sidst.
Opgave 6 – Del 6
Nu skal vi så lave galleri2 i CSS’en.
.galleri2{
float: left;
width: 245px;
height: 245px;
margin-left: 30px;
margin-bottom: 30px;
background-color: #7DE87A;
box-shadow: 5px 5px 10px 0px;
transform: rotate(-5deg);
overflow: hidden;
transition: width 0.5s, height 0.5s, transform 0.5s;
}
.galleri2:hover {
transform: rotate(5deg);
transform: scale(110%, 110%);
}
Det er den samme som galleri 1, dog er farven en anden og vinklen den er roterer er 5deg og med minus.
Opgave 6 – Del 7
Nu kan vi tilføje galleri3 og galleri4 i CSS’en. ELLER du kan bare kopiere din egen kode med galleri1 og galleri2 og sætte det ind igen under og ændre klasserne og farverne.
.galleri3{
float: left;
width: 245px;
height: 245px;
margin-left: 30px;
margin-bottom: 30px;
background-color: #BC7BE8;
box-shadow: 5px 5px 10px 0px;
transform: rotate(5deg);
overflow: hidden;
transition: width 0.5s, height 0.5s, transform 0.5s;
}
.galleri3:hover {
transform: rotate(-5deg);
transform: scale(110%, 110%);
}
.galleri4{
float: left;
width: 245px;
height: 245px;
margin-left: 30px;
margin-bottom: 30px;
background-color: #89B0EB;
box-shadow: 5px 5px 10px 0px;
transform: rotate(-5deg);
overflow: hidden;
transition: width 0.5s, height 0.5s, transform 0.5s;
}
.galleri4:hover {
transform: rotate(5deg);
transform: scale(110%, 110%);
}
Ved af benytte transition, skifter den sig mere blødt når man holder musen over og fjerner den igen.
Opgave 6 – Del 8
Nu skal vi sørge for at denne opslagstavle også er pæn i mobil eller ipad view. Gå ned i CSS’en og skriv denne ind.
.@media only screen and (max-width:620px) {
.board, .table {width:100%;}
}
Dette gør at når man ser det i et view der max er 620 så er den 100% den størrelse som skærmen har og ikke koden oprindeligt er sat til.