Hjælp det virker ikke

Her kan du stille og svare på spørgsmål omkring HTML. Du kan altså med andre ord finde en masse hjælp til HTML og HTML5 på dette forum
Besvar
henrik_t7
Rutineret
Rutineret
Indlæg: 98
Tilmeldt: 26. jul 2011, 20:12

Hjælp det virker ikke

Indlæg af henrik_t7 » 9. okt 2018, 20:49

Hej.
Jeg har lavet denne css grid layout, men når den er i mobil size kan den godt vise nav menuen, når man clicker på open nav og når man så tager en stor skærm så er nav der også. Men hvis man lukker nav menuen i mobil size, så kan den ikke vise nav i stor skærm. Det er fra Web Designer tutorials
Hvad er der gal?
http://www.danskspeedway.dk/cssgrid/

Html code

Kode: Vælg alt

<!DOCTYPE html>
<html lang="en">
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>CSS Grid Tutorial</title>
  <link rel="stylesheet" type="text/css" href="styles.css">
</head>

<body>
  <div id="grid">
    <header>
      Header
      <button id="nav-open">Open Nav</button>
    </header>
    <nav id="nav">
      <ul>
  <li>Nav</li>
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
  <li>6</li>
  <li>7</li>
</ul>5
      <button id="nav-close">Close Nav</button>
    </nav>
    <section id="hero">Hero</section>
    <main>Main</main>
    <article>Article</article>
    <section id="sign-up">Sign Up</section>
    <section id="gallery">
      <!-- Gallery -->
      <img src="http://via.placeholder.com/400x300">
      <img src="http://via.placeholder.com/400x300">
      <img src="http://via.placeholder.com/400x300">
      <img src="http://via.placeholder.com/400x300">
    </section>
    <footer>Footer</footer>
  </div>

  <script type="text/javascript" src="script.js"></script>
</body>
</html>
css kode

Kode: Vælg alt

/* Optional general styles */
* {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: 'Arial';
}

/* all immediate descendants of grid */
#grid > * {
  padding: 30px;
  border: 1px solid black;
  background: #fff;
  text-align: center;
}

#hero {
  padding: 80px 30px;
}

/* General */
#nav-open,
#nav-close {
  padding: 10px;
  background: #eee;
  margin-top: 10px;
}

#gallery {
  text-align: center;
}

#gallery img {
  padding: 16px;
  max-width: 100%;
}

/* Mobile */
@media (max-width: 720px) {
  #nav {
    display: none;
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    right: 50%;
  }
}

@media (min-width: 721px) {
  #nav-open,
  #nav-close {
    display: none;
  }
}

/* Fallback */
#grid {
  max-width: 1100px;
  margin: 0 auto;
}

@media (min-width: 721px) {
  article,
  #sign-up,
  #gallery img {
    float: left;
    width: 50%;
  }
  #gallery,
  footer {
    float: left;
    width: 100%;
  }
}

@supports (display: grid) {
  /* Override Fallback */
  article,
  #sign-up,
  #gallery,
  #gallery img,
  footer {
    float: none;
    width: 100%;
  }
  /* Define Grid Areas */
  header {
    grid-area: header;
  }
  nav {
    grid-area: nav;
  }
  #hero {
    grid-area: hero;
  }
  main {
    grid-area: main;
  }
  #gallery {
    grid-area: gallery;
  }
  article {
    grid-area: article;
  }
  #sign-up {
    grid-area: sign-up;
  }
  footer {
    grid-area: footer;
  }
  /* Define Grid */
  @media (min-width: 721px) {
    #grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
    }
  }
  /* Define item position on tablet */
  @media (min-width: 721px) and (max-width: 1000px) {
    #grid {
      grid-template-areas: "header header header header"
 "nav nav nav nav"
 "hero hero hero hero"
 "main main main main"
 "gallery gallery gallery gallery"
 "article article sign-up sign-up"
 "footer footer footer footer";
    }
  }
  /* Define item position on desktop */
  @media (min-width: 1001px) {
    #grid {
      grid-template-areas: "header header nav nav"
 "hero hero hero hero"
 "sign-up main main article"
 "gallery gallery gallery gallery"
 "footer footer footer footer";
    }
  }
  /* Nested gallery grid */
  @media (min-width: 721px) {
    #gallery {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
    }
  }
  @media (min-width: 1001px) {
    #gallery {
      grid-template-columns: repeat(4, 1fr);
    }
  }
}

og til sidst javaScript code

Kode: Vælg alt

var nav = document.getElementById('nav');

document.getElementById('nav-open').addEventListener('click', function() {
  nav.style.display = 'block';
});

document.getElementById('nav-close').addEventListener('click', function() {
  nav.style.display = 'none';
});

jepperask
Geni
Geni
Indlæg: 356
Tilmeldt: 4. nov 2012, 17:57

Re: Hjælp det virker ikke

Indlæg af jepperask » 9. okt 2018, 22:43

Jeg forstår ikke helt hvad du mener. Er nav og tallene 1-7 nogle der kun skal vises på mobil?
I så fald ville jeg at #nav har display: none hvis skærmen er > 721px. Men jeg ved ikke om jeg forstår dit problem. :-)

cristian
Moderator
Moderator
Indlæg: 860
Tilmeldt: 26. sep 2011, 21:31
Kontakt:

Re: Hjælp det virker ikke

Indlæg af cristian » 10. okt 2018, 18:15

Aaaaa ja jeg kan godt se hvad du mener.

I din JavaScript for at lukke din nav siger du

Kode: Vælg alt

<nav id="nav" style="display: none;">
Når du så går fra lille til stor skærm så fjerner du ikke display: none; så menuen forbliver gemt.

Brug i stedet for

Kode: Vælg alt

visibility: visible;
visibility: hidden;
Og det er heller ikke så godt at sætte disse værdier direkte på elementerne for du kan ikke overskrive dem i din CSS fil senere uden først at fjerne dem.

Jeg kunne ikke komme med noget bedre da Firefox tilsyneladende ikke tillader mig at rette direkte i JS mere.

henrik_t7
Rutineret
Rutineret
Indlæg: 98
Tilmeldt: 26. jul 2011, 20:12

Re: Hjælp det virker ikke

Indlæg af henrik_t7 » 10. okt 2018, 21:01

Hej
Hvor skal jeg indsætte det code?
I JavaScript filen eller i Css filen?

cristian
Moderator
Moderator
Indlæg: 860
Tilmeldt: 26. sep 2011, 21:31
Kontakt:

Re: Hjælp det virker ikke

Indlæg af cristian » 10. okt 2018, 22:06

Du overskriver din CSS med din JS fil i din HTML fil, så det er i din JS du er nød til at udskifte display med visibility

henrik_t7
Rutineret
Rutineret
Indlæg: 98
Tilmeldt: 26. jul 2011, 20:12

Re: Hjælp det virker ikke

Indlæg af henrik_t7 » 12. okt 2018, 20:49

Hej.
Ja, det var så det. Det virker ikke med at bytte display ud med visibility i min JS fil.
Det gør det samme igen- hvad kan det så værer.

jepperask
Geni
Geni
Indlæg: 356
Tilmeldt: 4. nov 2012, 17:57

Re: Hjælp det virker ikke

Indlæg af jepperask » 13. okt 2018, 12:24

Kan du prøve at beskrive mere udførligt hvad problemet er?

Visibility gør stadig at baren vil optage plads og 'skubbe' elementerne ned, selvom den ikke kan ses. Display gør at elementerne ikke optager noget plads, hvilket jeg tror er det du ønsker. Men vi har vist brug for en bedre forklaring først. :-)

cristian
Moderator
Moderator
Indlæg: 860
Tilmeldt: 26. sep 2011, 21:31
Kontakt:

Re: Hjælp det virker ikke

Indlæg af cristian » 15. okt 2018, 10:01

Det her er ikke kønt men det virker

Kode: Vælg alt

var nav = document.getElementById('nav');

document.getElementById('nav-open').addEventListener('click', function() {
  nav.style.display = 'block';
});

document.getElementById('nav-close').addEventListener('click', function() {
  nav.style.display = "none"
});

window.onresize = function() {
	var w = Math.max(document.documentElement.clientWidth, window.innerWidth || 0) 
	if(w > 720) {
		nav.removeAttribute("style");
	}
}
Jeg vil kigge din CSS struktur i gennem hvis jeg var dig, for det burde ikke være nødvendigt at bruge JS til dette, her tænker jeg media-queries eller lign.
Og hvis en browser ikke har JS aktiveret så brækker hele din menu sig.

henrik_t7
Rutineret
Rutineret
Indlæg: 98
Tilmeldt: 26. jul 2011, 20:12

Re: Hjælp det virker ikke

Indlæg af henrik_t7 » 16. okt 2018, 19:18

Hej Cristian
Tak for tipet, se på det.

:D :D :D

jepperask
Geni
Geni
Indlæg: 356
Tilmeldt: 4. nov 2012, 17:57

Re: Hjælp det virker ikke

Indlæg af jepperask » 16. okt 2018, 22:34

Jeg ved stadig ikke om jeg har forstået dit problem rigtigt, men her er min løsning:
Generelt bør du forsøge at undgå styling direkte på elementet med "style".
Du kan istedet introducere endnu en klasse kaldet "nav-opened":

Kode: Vælg alt

.nav-opened {
    display: block;
}

/* Mobile */
@media (max-width: 720px) {
    #nav {
        display: none;
        left: 0;
        top: 0;
        bottom: 0;
        right: 50%;
        position: absolute;
    }
    #nav.nav-opened {
        display: block;
    }
}

Dit script skal så tilføje og fjerne klassen når der trykkes:

Kode: Vælg alt

var nav = document.getElementById('nav');

document.getElementById('nav-open').addEventListener('click', function() {
    nav.classList.add("nav-opened");
});

document.getElementById('nav-close').addEventListener('click', function() {
    nav.classList.remove("nav-opened");
});
(classList er ikke understøttet af ældre versioner af IE, så brug evt. det her hvis du vil understøtte det: https://stackoverflow.com/a/43824723/3717691)

cristian
Moderator
Moderator
Indlæg: 860
Tilmeldt: 26. sep 2011, 21:31
Kontakt:

Re: Hjælp det virker ikke

Indlæg af cristian » 24. okt 2018, 10:11

Generelt bør du forsøge at undgå styling direkte på elementet med "style".
Som Jeppe skriver så er jeg fuldstændig enig, at komme style direkte på dine HTML elementer er rigtig skidt fordi

1. De kan ikke overskrives med CSS, du skal først fjerne selve elementet. Du kan sammenligne det med at når du sætter style eller andre
attributter direkte på elementet så er dette som den "administrative bruger" og når du skriver i .css dokumentet så er dette en bruger med færre "rettigheder".

2. W3C har sat nogle regler for god kode, og når du skriver direkte på HTML elementet med f.eks style så bryder du denne god kode stil.
https://en.wikipedia.org/wiki/World_Wide_Web_Consortium

3. Det er svært at holde større hjemmesider opdateret hvis du sætter style attributter direkte på elementerne og på sigt bliver det umuligt eller ekstremt tidskrævende.

4. Du mister hurtigt overblikket og dermed din professionalisme ud af til.

Som Jeppe også skriver så brug klasser på den lange bane med CSS selectors
[attribute]
[attribute=value]
[attribute~=value]
[attribute|=value]
[attribute^=value]
[attribute$=value]
[attribute*=value]
I stedet for at ændre stilen af din side med 1.000 forskellige individuelle elementer sætter du dem alle af en omgang i en klasse = nice.
Og i dit eksempel kan du have klasser der overskriver hinanden baseret på media-queries, så løser du dette helt uden JS.

Besvar