CSS Grid: Holy Grail

html_css_basics | ├── demos │ ├── ... │ └── d19 │ ├── index.html │ ├── style.css │ ├── menu.css │ | │ ├── svg │ | ├── garage.svg │ | ├── house_logo.svg │ | ├── house.svg │ | └── tree.svg | | │ └── img │ ├── asunto1.png │ ├── asunto2.png │ ├── asunto3.png │ ├── asunto4.png │ ├── pohja1.jpg │ ├── pohja2.jpg │ ├── pohja3.jpg │ ├── pohja4.jpg │ ├── talli1.jpg │ ├── talli2.jpg │ ├── tila1.jpg │ ├── tila2.jpg │ ├── mainos_mob_1.jpg │ ├── mainos_mob_2.jpg │ ├── mainos_pc_1.jpg │ ├── mainos_pc_2.jpg │ ├── mainos_tab_1.jpg │ └── mainos_tab_2.jpg |

Layout

Screenshots

layout_pc layout_tab layout_mob
body( nav header .advert_tab .advert_mob #container( .advert_pc main( article article article aside ) .advert_pc ) .advert_tab .advert_mob footer ) small_grid

Tehtävä

HTML (2/2) Sisältö

header

article id="aparts"

figure

article id="garages"

article id="forests"

aside

  • lisää asiden sisälle details tagi
  • voit antaa sille lisäparametriksi open
  • detailsin sisälle tulee details-tagi, jossa lukee ”Asuntohaku”
  • summaryn alle form tagi
  • form tagin sisällä on 3 diviä joiden tarkoitus on ryhmitellä lomakkeen kentät

    • 1. diviin tulee:
    2. diviin tulee:
    3. diviin tulee: Tallenna GitHubiin

    CSS (2/2) style.css

    Tallenna GitHubiin

    JavaScriptiä kokeiltavaksi

    Sulkee hampurilaisvalikon, kun käyttäjä painaa jotain linkkiä

    <script> const closeMenu = () => { document.getElementById("menu_box").checked = false; } const elems = document.querySelectorAll("nav ul li a"); elems.forEach(item =>{ console.log(item) item.setAttribute('onClick', 'closeMenu()') }) </script>

    Asettaa ”active” CSS-luokan navigaatiolinkille, jota on klikattu
    Poistaa ”active” CSS-luokan jos sivua vieritetään hiirellä tai scrollbarista tai puhelimella

    Headiin: <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script> Ennen body tagin sulkeutumista: <script> const navElements = document.querySelectorAll("nav ul li"); // active navbar item const activeLink = (e) => { navElements.forEach((item) => { item.classList.remove("active"); e.classList.add("active"); }); }; // attaching the event listener for each element navElements.forEach((item) => { item.addEventListener("click", () => { activeLink(item) }); }); // remove link active class const clear_nav_actives = () => { navElements.forEach((item) => { item.classList.remove("active"); }); } // mouse scroll $(window).bind('mousewheel DOMMouseScroll', function(event){ clear_nav_actives() }); // scrollbar click $(document).mousedown(function(e){ if($(window).outerWidth() <= e.clientX+20 ){ clear_nav_actives() } }); // mobile swipe const div = document.getElementById('container') div.addEventListener('touchstart', event => { clear_nav_actives() }) </script>

    Seuraa ”range” tyyppisen inputin muuttumista ja näyttää sen arvot asuntohaussa kohdassa max ja min hinnat

    <script> const minslider = document.getElementById("minprice"); const minoutput = document.getElementById("minprice_display"); minoutput.innerHTML = minslider.value; minslider.oninput = function() { minoutput.innerHTML = this.value; } const maxslider = document.getElementById("maxprice"); const maxoutput = document.getElementById("maxprice_display"); maxoutput.innerHTML = maxslider.value; maxslider.oninput = function() { maxoutput.innerHTML = this.value; } </script> Tallensithan GitHubiin

    HTML (1/2) Holy Grail Layout

    Saat ladattua projektin kuvat helpoiten, kun kloonaat ensin malli-repon työpöydälle
    ja sitten siirrät img ja svg kansiot omaan harjoituskansioosi

    git clone https://github.com/tredu/kiinteisto_lkv_html_harjoitus.git

    CSS (1/2) style.css

    :root tee muuttujat: *{ box-sizing: border-box; scroll-margin-top: var(--nav-height); scroll-behavior: smooth; }

    Eli siis: Määritettiin elementtien laskentatapa siten , että padding ja reunaviiva siältyvät ulkomittoihin Ankkurilinkit rullaavat sivun tiettyyn, kohtaan, mutta koska nav on position fixed se peittää osan sisällöstä alleen. Jotta otsikko jonka kohdalle scrollataan jää näkyviin, tarvitaan scroll-marginaali. Hyvällä tuurilla myös scroll-behavior: smooth toimii ja lisää scrollaukseen kiihtyvyyden, suoran hypähdyksen sijaan.


    @media only screen and (max-width: 1050px){
    .advert_pc

    piilota pc mainos

    .advert_tab

    näytä tablettimainos display: block;

    keskitä teksti

    .advert_tab img

    rajoita kuvan max leveys 100%

    main

    muokkaa gridiä:

    grid-template-areas: 'aside' 'article' 'garages' 'forests';

    nyt gridissä on vain yksi sarake ja kaikki elementit ovat päällekkäin

    aside

    poista vasen reunaviiva

    form } @media only screen and (max-width: 600px) {
    .advert_tab

    piilota tablettimainos

    .advert_mob

    näytä mobiilimainos display: block;

    keskitä teksti

    article div, section div

    käännä artikkelin flexin suunta pystyyn flex-direction: column;

    form

    käännää lomakkeen flexin suunta pystyyn flex-direction: column;

    }

    Kuvat