View Code? Open in Web Editor
NEW
Home Page: https://alex-mp4.github.io/bildterapihuset_redesign/
bildterapihuset_redesign's Introduction
Welcome to my profile! I go by Alex... but you can call me anytime. Wait, no... please don't leave!
⁉️
I am a student from a moderately sized city in northern Sweden.
Currently affiliated with NTI and their fourth-year programme.
‼️
UI & UX design is my bread and butter. That is, if the bread is moldy and the butter out-of-date.
Figma and VSCode is also my bread and butter, but they are comparatively fine.
🆎
bildterapihuset_redesign's People
Contributors
Watchers
bildterapihuset_redesign's Issues
< div class ="button ">
< a href ="omoss.html "> < button > Information</ button > </ a >
< a href ="boka.html "> < button > Boka nu</ button > </ a >
</ div >
De här knapparna syns inte på desktop, men dyker upp i mobil.
De ställer till det lite med valideringen av sidan och anledningen är att du har knappar i länkar.
Välj antingen eller, i det här fallet är det länkar till andra sidor, då använder du a elementet.
Sedan kan du styla a elementet som en knapp om det är effekt du önskar, https://jensnti.github.io/wu-exempel/knappar.html
< label title ="date " for ="date ">
< input id ="date " title ="date " type ="date " name ="date " value ="">
</ label >
<label for="name">Skriv ditt namn</label><input type="text" name="name">
.container2 ul {
list-style : none;
}
.container2 ul li ::before {
content : "• " ;
color : # FFBA3B ;
}
.container2 {
background-color : # 403B30 ;
border-radius : 6px ;
width : 50% ;
justify-content : center;
align-content : center;
flex-direction : column;
margin-left : 2rem ;
box-shadow : 3px 3px 2px grey;
line-height : 2.5rem ;
}
.container2 li {
Du har inte nödvändigtvis gjort fel, men selektorerna kan påverka mer än du önskar.
Kolla detta dokument om du vill lära dig mer https://www.w3schools.com/cssref/css_selectors.asp
< header >
< nav >
< ul >
< div class ="space ">
< div >
< a href ="index.html "> < div class ="homeicon ">
< img src ="assets/icons/foundation_black_24dp.svg " alt ="Logo ">
</ div > </ a >
</ div >
< ul class ="flex ">
< li > < a href ="boka.html "> < img src ="assets/icons/bookmark.svg " alt =""> Boka</ a > </ li >
< li > < a href ="aktuellt.html "> < img src ="assets/icons/clock-outline.svg " alt =""> Aktuellt</ a > </ li >
< li > < a href ="omoss.html "> < img src ="assets/icons/account-multiple.svg " alt =""> Om oss</ a > </ li >
< li > < a href ="kontaktadress.html "> < img src ="assets/icons/earth.svg " alt =""> Kontakt och adress</ a > </ li >
</ ul >
</ div >
</ ul >
</ nav >
</ header >
Rörigt med taggarna. Se till att du indenterar koden så blir det lättare att se vars det börjar och slutar.
Du har även tillgång till automatisk formatering i VSCode, högerklicka och formatera eller tryck shift+alt+F
< ul >
< div class ="space ">
< div >
< a href ="index.html "> < div class ="homeicon ">
< img src ="assets/icons/foundation_black_24dp.svg " alt ="Logo ">
</ div > </ a >
</ div >
< div class ="flex ">
< li > < a href ="boka.html "> < img src ="assets/icons/bookmark.svg " alt =""> Boka</ a > </ li >
< li > < a href ="aktuellt.html "> < img src ="assets/icons/clock-outline.svg " alt =""> Aktuellt</ a > </ li >
< li > < a href ="omoss.html "> < img src ="assets/icons/account-multiple.svg " alt =""> Om oss</ a > </ li >
< li > < a href ="kontaktadress.html "> < img src ="assets/icons/earth.svg " alt =""> Kontakt och adress</ a > </ li >
</ div >
</ div >
</ ul >
Som barn till ul taggen får du enbart ha li taggar.
Du måste därför strukturera om menyn.
Om det är flex du önskar på listan, så gör ul elementet till display: flex
Se exemplet här https://jensnti.github.io/wu-exempel/navigation.html