Centrering af topmenu?

[Kurt Hansen]

https://danacord.com/ny/index.html

Hvordan centrerer jeg topmenuen vandret?

Jeg har fedtmulet og googlet, men jeg kan ikke få noget til at virke.

[Morten Bonderup]

Post by Kurt Hansen
https://danacord.com/ny/index.html
Hvordan centrerer jeg topmenuen vandret?
Jeg har fedtmulet og googlet, men jeg kan ikke få noget til at virke.

Følgende ændringer og tilføjelser centrerer topmenuen på sort baggrund

I Css

.header_container {
background-color: #333;
}

.topnav {
overflow: hidden;
width: 675px;
margin: 0 auto;
}

I html

<header class="header_container">
<div class="topnav" id="myTopnav">
<a href="index.html" class="active">Home</a>
<a href="catalog.html">Catalog</a>
<a href="collections.html">Collections</a>
<a href="composers.html">Composers</a>
<a href="artists.html">Artists</a>
<a href="order.html">Order CDs</a>
<a href="about.html">About</a>
<a href="javascript:void(0);" class="icon"
onclick="myFunction()">
<i class="fa fa-bars"></i>
</a>
</div>
</header>

[Kurt Hansen]

Post by Morten Bonderup

Post by Kurt Hansen
https://danacord.com/ny/index.html
Hvordan centrerer jeg topmenuen vandret?
Jeg har fedtmulet og googlet, men jeg kan ikke få noget til at virke.

Følgende ændringer og tilføjelser centrerer topmenuen på sort baggrund

[klip]

Jeg takker mange gange.

Problemet er at nu virker det ikke når man resizer vinduet i bredden.

Før: http://www.danacord.com/ny/index2.html
Efter: http://www.danacord.com/ny/index.html

Nu kommer der ikke et menu-ikon når vinduet indsnævres.

[Dennis Munding]

Post by Kurt Hansen

Post by Morten Bonderup

Post by Kurt Hansen
https://danacord.com/ny/index.html
Hvordan centrerer jeg topmenuen vandret?
Jeg har fedtmulet og googlet, men jeg kan ikke få noget til at virke.

Følgende ændringer og tilføjelser centrerer topmenuen på sort baggrund

[klip]
Jeg takker mange gange.
Problemet er at nu virker det ikke når man resizer vinduet i bredden.
Før: http://www.danacord.com/ny/index2.html
Efter: http://www.danacord.com/ny/index.html
Nu kommer der ikke et menu-ikon når vinduet indsnævres.

Jo da!
Men det kommer langt ude til højre, fordi din indholdsdel er bredere
end skærmvinduet...

[Kurt Hansen]

Post by Dennis Munding

Post by Kurt Hansen
Problemet er at nu virker det ikke når man resizer vinduet i bredden.
Før: http://www.danacord.com/ny/index2.html
Efter: http://www.danacord.com/ny/index.html
Nu kommer der ikke et menu-ikon når vinduet indsnævres.

Jo da!
Men det kommer langt ude til højre, fordi din indholdsdel er bredere
end skærmvinduet...

På Mortens anbefaling satte jeg dette:

.topnav {
overflow: hidden;
background-color: #333;
margin: 0 auto;
width: 675px;
}

Jeg lurede godt nok på den der width, men hvis jeg sætter max-width:
600px på, så wrapper menuen allerede selv om browservinduet er i fuld
størrelse og det gør den også selv om jeg sætter width: 600px.

Jeg forstår simpelthen ikke hvad det er der overordnet bestemmer den
maximale bredde. Jeg har jo også disse:

@media screen and (max-width: 600px) {
.topnav a:not(:first-child) {
display: none;
}

- og

@media screen and (max-width: 600px) {
.topnav.responsive {
position: relative;
}

Dem har jeg ikke ændret på i forhold til standardskabelonen.

Problemet er jo nok at jeg har for mange/for lange menupunkter og jeg
kan ikke udelukket at der kommer et eller to mere.

Hvordan laver jeg en topmenu med f.eks. 8 eller 9 punkter? Det er ok for
mig at punkterne wrapper ind på to linjer. Det er det vel også for
mobilbrugere ... eller hvad?

[Kurt Hansen]

Post by Dennis Munding

Post by Kurt Hansen
Problemet er at nu virker det ikke når man resizer vinduet i bredden.
Før: http://www.danacord.com/ny/index2.html
Efter: http://www.danacord.com/ny/index.html
Nu kommer der ikke et menu-ikon når vinduet indsnævres.

Jo da!
Men det kommer langt ude til højre, fordi din indholdsdel er bredere
end skærmvinduet...

Jeg har ingen smartphone og får det heller ikke, lige som jeg ikke har
forstand på nyere webdesign. Een ting er jeg dog klar over (?): at man
ikke skal sætte alt for mange faste størrelser på noget som helst.

[Dennis Munding]

Post by Kurt Hansen

Post by Dennis Munding

Post by Kurt Hansen
Problemet er at nu virker det ikke når man resizer vinduet i bredden.
Før: http://www.danacord.com/ny/index2.html
Efter: http://www.danacord.com/ny/index.html
Nu kommer der ikke et menu-ikon når vinduet indsnævres.

Jo da!
Men det kommer langt ude til højre, fordi din indholdsdel er
bredere end skærmvinduet...

Jeg har ingen smartphone og får det heller ikke, lige som jeg ikke
at man ikke skal sætte alt for mange faste størrelser på noget som
helst.

Det behøver du heller ikke have.
Firefox og Firefox Developer Edition har begge indbygget mobil-visning
via genvejstastekombinationen (langt ord!) CTRL+SHIFT+M.
Du vender tilbage til normalvisning igen med samme genvej. :-)

[Kurt Hansen]

Post by Dennis Munding

Post by Kurt Hansen

Post by Dennis Munding

Post by Kurt Hansen
Problemet er at nu virker det ikke når man resizer vinduet i bredden.
Før: http://www.danacord.com/ny/index2.html
Efter: http://www.danacord.com/ny/index.html
Nu kommer der ikke et menu-ikon når vinduet indsnævres.

Jo da!
Men det kommer langt ude til højre, fordi din indholdsdel er
bredere end skærmvinduet...

Jeg har ingen smartphone og får det heller ikke, lige som jeg ikke
at man ikke skal sætte alt for mange faste størrelser på noget som
helst.

Det behøver du heller ikke have.
Firefox og Firefox Developer Edition har begge indbygget mobil-visning
via genvejstastekombinationen (langt ord!) CTRL+SHIFT+M.
Du vender tilbage til normalvisning igen med samme genvej. :-)

Funker ikke i min FF 70.0.1 :-(

[Kim Ludvigsen]

Post by Kurt Hansen

Post by Dennis Munding
Det behøver du heller ikke have.
Firefox og Firefox Developer Edition har begge indbygget mobil-visning
via genvejstastekombinationen (langt ord!) CTRL+SHIFT+M.
Du vender tilbage til normalvisning igen med samme genvej. :-)

Funker ikke i min FF 70.0.1 :-(

Så har du ikke ramt de rigtige taster. Der er en anden måde at aktivere
mobilvisning på:
Tryk på tasten F12
Det åbner udviklerværktøjerne
Til højre på værktøjslinjen, der adskiller sidens indhold fra
udviklerværktøjerne, finder du i højre side en ikon med en mobil og en
padde. Klik på den.
Der skiftes til mobilvisning, og øverst på siden kan du vælge mellem
forskellige forud-definerede størrelser. Du kan også bare trække i
mobilvisningens sider.

Udviklerværktøjerne giver dig desuden mulighed for at ændre på både
HTML- og CSS-kode, så du kan prøve dig frem med forskellige koder og
værdier og se virkningen med det samme i stedet for at skulle rode med
at uploade siden og tjekke mellem hver ændring.

[Kurt Hansen]

Post by Kim Ludvigsen

Post by Kurt Hansen

Post by Dennis Munding
Det behøver du heller ikke have.
Firefox og Firefox Developer Edition har begge indbygget mobil-visning
via genvejstastekombinationen (langt ord!) CTRL+SHIFT+M.
Du vender tilbage til normalvisning igen med samme genvej. :-)

Funker ikke i min FF 70.0.1 :-(

Så har du ikke ramt de rigtige taster.

Hvis jeg i stedet tastekombinationen ALT+CMD+M så virker det.

Det blev afsløret da jeg åbnede udviklerværktøjerne og holdt pilen hen
over det ikon du henviste til :-)

[Kim Ludvigsen]

Post by Kurt Hansen

Post by Kim Ludvigsen
Så har du ikke ramt de rigtige taster.

Hvis jeg i stedet tastekombinationen ALT+CMD+M så virker det.
Det blev afsløret da jeg åbnede udviklerværktøjerne og holdt pilen hen
over det ikon du henviste til :-)

Åh, du sidder med en Mac. Du kan bare få dig en ordentlig computer :-)

Jeg har prøvet en Mac for første gang for nylig i et forsøg på at lave
en iOS-app[*], det kræver godt nok en del tilvænning, at de almindelige
tastaturgenveje ikke virker, og at man har andre taster.

[*] Skønne spildte kræfter, for Apple forlanger knap 700 kroner om året
for at huse appen i deres App Store, og det vil jeg ikke betale for at
udsende en gratis app.

[Kim Ludvigsen]

Post by Kim Ludvigsen
Åh, du sidder med en Mac. Du kan bare få dig en ordentlig computer :-)

Jeg startede med en 8088 med 512 KILObytes hukommelse og en gul skærm

De gode gamle dage, hvor man kunne vælge om farveskærmen skulle have
farverne gul og sort eller grøn og sort. Og så kostede de billigste
computere omkring 10.000 kroner i datidens mindre inflationsramte kroner.

Man bliver helt nostalgisk.

[Bertel Lund Hansen]

Jeg startede med en 8088 med 512 KILObytes hukommelse og en gul skærm
med Hercules grafikkort og i mange år kørte jeg med DOS/Windows,

Heldige kartoffel. Jeg startede med en 8080 cpu, 24 Kbyte ram, 1
Kbyte rom og et mikroskopisk OS (det modtog tastetryk, og det
kunne skrive til til skærmen). Der medfulgte to bånd med ASM og
Basic. Senere fik jeg et program af Anders Hejlsberg der kunne
gemme et udsnit af hukommelsen til bånd

[Kurt Hansen]

Post by Bertel Lund Hansen

Jeg startede med en 8088 med 512 KILObytes hukommelse og en gul skærm
med Hercules grafikkort og i mange år kørte jeg med DOS/Windows,

Heldige kartoffel. Jeg startede med en 8080 cpu, 24 Kbyte ram, 1
Kbyte rom og et mikroskopisk OS (det modtog tastetryk, og det
kunne skrive til til skærmen). Der medfulgte to bånd med ASM og
Basic. Senere fik jeg et program af Anders Hejlsberg der kunne
gemme et udsnit af hukommelsen til bånd

Tø-hø, ja det sætter jo udtrækket "De gode, gamle dage" i perspektiv :-)

[Kurt Hansen]

Post by Kurt Hansen

Post by Bertel Lund Hansen

Jeg startede med en 8088 med 512 KILObytes hukommelse og en gul skærm
med Hercules grafikkort og i mange år kørte jeg med DOS/Windows,

Heldige kartoffel. Jeg startede med en 8080 cpu, 24 Kbyte ram, 1
Kbyte rom og et mikroskopisk OS (det modtog tastetryk, og det
kunne skrive til til skærmen). Der medfulgte to bånd med ASM og
Basic. Senere fik jeg et program af Anders Hejlsberg der kunne
gemme et udsnit af hukommelsen til bånd

Tø-hø, ja det sætter jo udtrækket "De gode, gamle dage" i perspektiv :-)

æ > y ;-)

[Kim Ludvigsen]

Post by Kurt Hansen
600px på, så wrapper menuen allerede selv om browservinduet er i fuld
størrelse og det gør den også selv om jeg sætter width: 600px.

Prøv at bruge max-width og ret så denne linje i .topnav a i CSS-filen:

padding: 14px 16px;

Prøv dig frem med andreværdier, fx
padding: 14px 6px;

[Kim Ludvigsen]

Post by Kim Ludvigsen
padding: 14px 16px;
Prøv dig frem med andreværdier, fx
padding: 14px 6px;

Ret også til max-width i HTML-koden, så du undgår vandret rullebjælke i
smalle vinduer:
<table style="margin: auto;" max-width="600px" cellspacing="5"
cellpadding="3" border="0">

[Kurt Hansen]

Post by Kim Ludvigsen

Post by Kim Ludvigsen
padding: 14px 16px;
Prøv dig frem med andreværdier, fx
padding: 14px 6px;

Det er åbenbart ikke så kritisk. Det virker og tak for det.

Post by Kim Ludvigsen
Ret også til max-width i HTML-koden, så du undgår vandret rullebjælke i
<table style="margin: auto;" max-width="600px" cellspacing="5"
cellpadding="3" border="0">

"max-" virker åbenbart ikke. Se:
http://www.danacord.com/ny/index.html

[Kim Ludvigsen]

Post by Kurt Hansen

Post by Kim Ludvigsen
Ret også til max-width i HTML-koden, så du undgår vandret rullebjælke
<table style="margin: auto;" max-width="600px" cellspacing="5"
cellpadding="3" border="0">

http://www.danacord.com/ny/index.html

Jeg kiggede ikke på koden og tjekkede ikke andet end mobilvisning, my
bad, prøv med dette:
<table style="margin: auto; max-width:600px" cellspacing="5"
cellpadding="3" border="0">

[Kurt Hansen]

Post by Kim Ludvigsen

Post by Kurt Hansen

Post by Kim Ludvigsen
Ret også til max-width i HTML-koden, så du undgår vandret rullebjælke
<table style="margin: auto;" max-width="600px" cellspacing="5"
cellpadding="3" border="0">

http://www.danacord.com/ny/index.html

Jeg kiggede ikke på koden og tjekkede ikke andet end mobilvisning, my
<table style="margin: auto; max-width:600px" cellspacing="5"
cellpadding="3" border="0">

Tamam, så virker det og jeg kan godt se hvorfor. Det er jeg ellers
kommet helt ud af træning med, så jeg tager meget små skridt ad gangen.

Tak for hjælpen. MEN! Der kommer helt sikkert mere ;-)

[Kurt Hansen]

Post by Morten Bonderup

Post by Kurt Hansen
https://danacord.com/ny/index.html
Hvordan centrerer jeg topmenuen vandret?
Jeg har fedtmulet og googlet, men jeg kan ikke få noget til at virke.

Følgende ændringer og tilføjelser centrerer topmenuen på sort baggrund
I Css
[klip]
        .topnav {
            overflow: hidden;
            width: 675px;
            margin: 0 auto;
        }

Jeg spurgte ind til det i sin tid, men fik ikke lige svar på hvor,
hvordan og hvorfor de 675px kommer ind i billedet.

https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_topnav

Her er der ingen bredde på .topnav og de andre steder hvor en bredde
figurerer, er den sat til 600px.

Æhhhh, hvorfor skal man absolut sætte en bredde på? Hjemmesiden skal jo
bare tilpasse sig skærmen på håndholdte enheder, men naturligvis have en
begrænsning (max-width?), når jeg sidder og kigger på en stor skærm på
min Mac/PC.

[Kurt Hansen]

Post by Kurt Hansen
Æhhhh, hvorfor skal man absolut sætte en bredde på? Hjemmesiden skal jo
bare tilpasse sig skærmen på håndholdte enheder, men naturligvis have en
begrænsning (max-width?), når jeg sidder og kigger på en stor skærm på
min Mac/PC.

Se mine eksperimenter her:
http://www.danacord.com/ny/index.html

[Morten Bonderup]

Post by Kurt Hansen

Post by Morten Bonderup

Post by Kurt Hansen
https://danacord.com/ny/index.html
Hvordan centrerer jeg topmenuen vandret?
Jeg har fedtmulet og googlet, men jeg kan ikke få noget til at virke.

Følgende ændringer og tilføjelser centrerer topmenuen på sort baggrund
I Css
[klip]
         .topnav {
             overflow: hidden;
             width: 675px;
             margin: 0 auto;
         }

Jeg spurgte ind til det i sin tid, men fik ikke lige svar på hvor,
hvordan og hvorfor de 675px kommer ind i billedet.
https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_topnav
Her er der ingen bredde på .topnav og de andre steder hvor en bredde
figurerer, er den sat til 600px.
Æhhhh, hvorfor skal man absolut sætte en bredde på? Hjemmesiden skal jo
bare tilpasse sig skærmen på håndholdte enheder, men naturligvis have en
begrænsning (max-width?), når jeg sidder og kigger på en stor skærm på
min Mac/PC.

Når du anvender margin: 0 auto til centrering skal browseren beregne
venstre og højre margin og den skal derfor kende bredden på det element
som skal centreres. De 675px er bredden på topnav.

[Kurt Hansen]

Post by Morten Bonderup

Post by Kurt Hansen
Jeg spurgte ind til det i sin tid, men fik ikke lige svar på hvor,
hvordan og hvorfor de 675px kommer ind i billedet.

Når du anvender margin: 0 auto til centrering skal browseren beregne
venstre og højre margin og den skal derfor kende bredden på det element
som skal centreres. De 675px er bredden på topnav.

Aha, tak for svar. Jeg kan altså sætte bredden som jeg lyster med
henblik på beskuelse på en stor skærm?

Her har jeg sat bredden til 960px og det virker åbenbart stadig:
http://www.danacord.com/ny2/index.html

[Morten Bonderup]

Post by Kurt Hansen
Aha, tak for svar. Jeg kan altså sætte bredden som jeg lyster med
henblik på beskuelse på en stor skærm?
http://www.danacord.com/ny2/index.html

Ja, du kan sætte bredden som du lyster og I dit tilfælde vil browseren
beregne venstre og højre margin i forhold til det element som skal
centreres og det er så 960px bred.

[Dennis Munding]

Post by Kurt Hansen

Post by Morten Bonderup

Post by Kurt Hansen
Jeg spurgte ind til det i sin tid, men fik ikke lige svar på
hvor, hvordan og hvorfor de 675px kommer ind i billedet.

Når du anvender margin: 0 auto til centrering skal browseren
beregne venstre og højre margin og den skal derfor kende bredden
på det element som skal centreres. De 675px er bredden på topnav.

Aha, tak for svar. Jeg kan altså sætte bredden som jeg lyster med
henblik på beskuelse på en stor skærm?
http://www.danacord.com/ny2/index.html

Ja, det kan du - men jeg ville holde mig langt væk fra px, da det er en
fast bredde.

Alternativerne er em (1em = bredden på m'et i den anvendte font - så
vidt jeg husker), % (i forhold til omgivende element), vw (står for
Viewport Width - altså skærmbredden. Synes dog, det er en svær enhed at
arbejde med) og rem (der er en god forklaring på forskellen på em og
rem på denne side (på engelsk):
https://www.sitepoint.com/understanding-and-using-rem-units-in-css/)

Eks.:

Din wrapper er sat til 80% (af tilgængelig bredde).
Indeni har du en header, som fylder 100% i bredden, hvis det er et
block-element.
Nu kan du så sætte: header img {width:100%;}, hvilket vil gøre, at
billedet fylder headerens bredde.

[Kurt Hansen]

Post by Dennis Munding

Post by Kurt Hansen
http://www.danacord.com/ny2/index.html

Ja, det kan du - men jeg ville holde mig langt væk fra px, da det er en
fast bredde.
Alternativerne er em (1em = bredden på m'et i den anvendte font - så
vidt jeg husker), % (i forhold til omgivende element), vw (står for
Viewport Width - altså skærmbredden. Synes dog, det er en svær enhed at
arbejde med) og rem (der er en god forklaring på forskellen på em og
https://www.sitepoint.com/understanding-and-using-rem-units-in-css/)
Din wrapper er sat til 80% (af tilgængelig bredde).
Indeni har du en header, som fylder 100% i bredden, hvis det er et
block-element.
Nu kan du så sætte: header img {width:100%;}, hvilket vil gøre, at
billedet fylder headerens bredde.

Jeg er da meget indstillet på at undgå faste størrelser, men jeg er
stadig helt rundforvirret. Hvad retter jeg hvor og hvor kommer header
img {width:100%;} ind i billedet? Om det er % eller em/rem er helt
transparent for mig.

På http://www.danacord.com/ny/index.html har jeg følgende:

<div class="wrapper">
<img src="/ny/images/banner.jpg" style="width:960px; max-width:100%; ...
- og
<table bgcolor="#ffffff" style="margin: auto; max-width:860px ...

I den tilhørende "http://www.danacord.com/ny/test.css" har jeg følgende:

.topnav {
max-width: 960px;

@media screen and (max-width: 960px) {

.wrapper {
max-width: 960px;

[Dennis Munding]

Post by Kurt Hansen

Post by Dennis Munding

Post by Kurt Hansen
http://www.danacord.com/ny2/index.html

Ja, det kan du - men jeg ville holde mig langt væk fra px, da det
er en fast bredde.
Alternativerne er em (1em = bredden på m'et i den anvendte font - så
vidt jeg husker), % (i forhold til omgivende element), vw (står for
Viewport Width - altså skærmbredden. Synes dog, det er en svær
enhed at arbejde med) og rem (der er en god forklaring på
https://www.sitepoint.com/understanding-and-using-rem-units-in-css/)
Din wrapper er sat til 80% (af tilgængelig bredde).
Indeni har du en header, som fylder 100% i bredden, hvis det er et
block-element.
Nu kan du så sætte: header img {width:100%;}, hvilket vil gøre, at
billedet fylder headerens bredde.

Jeg er da meget indstillet på at undgå faste størrelser, men jeg er
stadig helt rundforvirret. Hvad retter jeg hvor og hvor kommer header
img {width:100%;} ind i billedet? Om det er % eller em/rem er helt
transparent for mig.

header img {} var blot et eksempel.

Hvis ikke du har et blokelement, som omkranser dit banner, så ville jeg
give banneret et id, så du ikke rammer alle billeder med img
{width:100%;}

Eks.: <img id="banner" src="/ny/images/banner.jpg" alt="" />

CSS: img#banner {width:100%;display:table;}

Altså du fjerner alt css fra html'en og flytter det over i din css-fil
og tilføjer et id til dit img-tag. :-)

Post by Kurt Hansen
<div class="wrapper">
<img src="/ny/images/banner.jpg" style="width:960px; max-width:100%;
... - og
<table bgcolor="#ffffff" style="margin: auto; max-width:860px ...
.topnav {
max-width: 960px;
@media screen and (max-width: 960px) {
.wrapper {
max-width: 960px;

Her fastlåser du så bredden på indholdsdelen, hvilket ikke er særligt
"responsivt" i mine øjne.

På en skærm med meget høj opløsning, vil det se meget minimalistisk ud
- og måske også være svær at læse...

[Kurt Hansen]

Post by Dennis Munding

Post by Kurt Hansen
Jeg er da meget indstillet på at undgå faste størrelser, men jeg er
stadig helt rundforvirret. Hvad retter jeg hvor og hvor kommer header
img {width:100%;} ind i billedet? Om det er % eller em/rem er helt
transparent for mig.

Hvis ikke du har et blokelement, som omkranser dit banner, så ville jeg
give banneret et id, så du ikke rammer alle billeder med img
{width:100%;}
Eks.: <img id="banner" src="/ny/images/banner.jpg" alt="" />
CSS: img#banner {width:100%;display:table;}
Altså du fjerner alt css fra html'en og flytter det over i din css-fil
og tilføjer et id til dit img-tag. :-)

Jow, det funker, men nu kommer der mellemrum under banneret.
Se http://www.danacord.com/ny/index.html

[Kurt Hansen]

Post by Dennis Munding

Post by Kurt Hansen
<div class="wrapper">
<img src="/ny/images/banner.jpg" style="width:960px; max-width:100%;
... - og
<table bgcolor="#ffffff" style="margin: auto; max-width:860px ...
.topnav {
max-width: 960px;
@media screen and (max-width: 960px) {
.wrapper {
max-width: 960px;

Her fastlåser du så bredden på indholdsdelen, hvilket ikke er særligt
"responsivt" i mine øjne.
På en skærm med meget høj opløsning, vil det se meget minimalistisk ud
- og måske også være svær at læse...

Af een eller anden grund kan jeg bedst forholde mig til %, men er
bestemt villig til at ændre til em, hvis der er argumenter for det.

Uanset hvad, så forstår jeg ikke hvad % er i forhold til. w3schools
skriver: "Relative to the parent element", men hvad er "parent element"
i mit tilfælde?

Mit html-dokument starter i body med:

<body>
<div class="wrapper">

Jamen er det så ikke "wrapper" der er "parent"? Formålet med "wrapper"
er jo netop at wrappe alt sideindhold

I min css sætter jeg som eksperiment .wrapper til 50%, men 50% af hvad?
Skærmopløsningen (browservinduets bredde) formoder jeg?

[Henning]

Post by Kurt Hansen
Uanset hvad, så forstår jeg ikke hvad % er i forhold til. w3schools
skriver: "Relative to the parent element", men hvad er "parent element"
i mit tilfælde?

parent er er *altid* det element som dit element er puttet indeni.

Post by Kurt Hansen
<body>
    <div class="wrapper">
Jamen er det så ikke "wrapper" der er "parent"? Formålet med "wrapper"
er jo netop at wrappe alt sideindhold

body er parent til wrapper
wrapper er parent til det du putter ind i den

Post by Kurt Hansen
I min css sætter jeg som eksperiment .wrapper til 50%, men 50% af hvad?
Skærmopløsningen (browservinduets bredde) formoder jeg?

Helt rigtigt gættet.

[Kurt Hansen]

Post by Dennis Munding

Post by Kurt Hansen
<div class="wrapper">
<img src="/ny/images/banner.jpg" style="width:960px; max-width:100%;
... - og
<table bgcolor="#ffffff" style="margin: auto; max-width:860px ...
.topnav {
max-width: 960px;
@media screen and (max-width: 960px) {
.wrapper {
max-width: 960px;

Her fastlåser du så bredden på indholdsdelen, hvilket ikke er særligt
"responsivt" i mine øjne.
På en skærm med meget høj opløsning, vil det se meget minimalistisk ud
- og måske også være svær at læse...

Det der med em kan jeg slet ikke forholde mig til. Jeg mener ... hvilken
mening giver det at sætte f.eks. bredden på en div i forhold til bredden
på et "m" i den anvendte skrifttype? Det er, for mig, rent gætværk og
med udgangspunkt i Fedtmule-forsøg med efterfølgende kontrol af hvordan
det ser ud.

Men % er vel også godt nok? Der sker dog underlige ting hvis jeg sætter
% på i stedet for px:

@media screen and (max-width: 960px) {
.topnav a:not(:first-child) {
display: none;
}

og

@media screen and (max-width: 1075px) {
.topnav.responsive {
position: relative;
}

Burgeren/brændestakken forsvinder når jeg krymper siden, men kun på
http://www.danacord.com/nyny/catalog.html, som jeg har sat border på
alle div'er for overskuelighedens skyld.

Det sker dog ikke på:
http://www.danacord.com/nyny/index.html

Hvad sker der lige?

[Kurt Hansen]

Post by Kurt Hansen
Men % er vel også godt nok? Der sker dog underlige ting hvis jeg sætter
            .topnav a:not(:first-child) {
                display: none;
            }
og
            .topnav.responsive {
                position: relative;
            }
Burgeren/brændestakken forsvinder når jeg krymper siden, men kun på
http://www.danacord.com/nyny/catalog.html, som jeg har sat border på
alle div'er for overskuelighedens skyld.

- altså hvis jeg sætter % i stedet for px.