Hvorfor wrapper mine div'er ikke?

[Kurt Hansen]

Min "viden" om responsive webdesign er yderst begrænset, men jeg har
altid troet at div'er vil wrappe ned under hinanden, når der ikke er
plads nok på skærmen.

På http://www.danacord.com/nyny/catalog.html har jeg sat en border på de
div'er der er på siden, så man kan følge med i hvad der sker, når siden
krympes.

[Jan Hansen]

Post by Kurt Hansen
Min "viden" om responsive webdesign er yderst begrænset, men jeg har
altid troet at div'er vil wrappe ned under hinanden, når der ikke er
plads nok på skærmen.
På http://www.danacord.com/nyny/catalog.html har jeg sat en border på de
div'er der er på siden, så man kan følge med i hvad der sker, når siden
krympes.

De div hopper jo allerede rundt på
https://www.danacord.dk/frmsets/records/790-r.html

Men hvis du vil lave det samme, bare på en anden måde, kan du jo kigge
lidt på <https://css-tricks.com/snippets/css/a-guide-to-flexbox/>

[Kurt Hansen]

Post by Jan Hansen

Post by Kurt Hansen
Min "viden" om responsive webdesign er yderst begrænset, men jeg har
altid troet at div'er vil wrappe ned under hinanden, når der ikke er
plads nok på skærmen.
På http://www.danacord.com/nyny/catalog.html har jeg sat en border på de
div'er der er på siden, så man kan følge med i hvad der sker, når siden
krympes.

De div hopper jo allerede rundt på
https://www.danacord.dk/frmsets/records/790-r.html

Glem den gamle side, Jan. Den er helt ytdateret.

Post by Jan Hansen
Men hvis du vil lave det samme, bare på en anden måde, kan du jo kigge
lidt på <https://css-tricks.com/snippets/css/a-guide-to-flexbox/>

Det er en større mundfuld, men jeg vil læse det grundigt igennem. Jeg
kan dog, til en start, konstatere, at selve siden "...guide-to-flexbox"
gør lige præcist det som jeg gerne vil.

Jeg har bare haft en opfattelse i flere år, at det er standardbehavior
for div'er, men det er det åbenbart ikke?

[Kim Ludvigsen]

Post by Kurt Hansen
Jeg har bare haft en opfattelse i flere år, at det er standardbehavior
for div'er, men det er det åbenbart ikke?

Ikke hvis man selv definerer noget andet. Du har angivet, at div'erne
skal placeret i et grid. Prøv at fjerne det, og prøv også at angive
float:left på div'erne.

[Kurt Hansen]

Post by Kim Ludvigsen

Post by Kurt Hansen
Jeg har bare haft en opfattelse i flere år, at det er standardbehavior
for div'er, men det er det åbenbart ikke?

Ikke hvis man selv definerer noget andet. Du har angivet, at div'erne
skal placeret i et grid. Prøv at fjerne det, og prøv også at angive
float:left på div'erne.

Det vil altså sige, at jeg som alternativ til tabeldesign kan bruge
grid-layout (https://www.w3schools.com/css/css_grid.asp)?

Jamen ... hvis jeg sætter float:left på div'erne, så er det vel sådan de
bliver vist allerede mens man se siden på en stor skærm?

[Kurt Hansen]

Post by Kurt Hansen

Post by Kim Ludvigsen

Post by Kurt Hansen
Jeg har bare haft en opfattelse i flere år, at det er
standardbehavior for div'er, men det er det åbenbart ikke?

Ikke hvis man selv definerer noget andet. Du har angivet, at div'erne
skal placeret i et grid. Prøv at fjerne det, og prøv også at angive
float:left på div'erne.

Det vil altså sige, at jeg som alternativ til tabeldesign kan bruge
grid-layout (https://www.w3schools.com/css/css_grid.asp)?
Jamen ... hvis jeg sætter float:left på div'erne, så er det vel sådan de
bliver vist allerede mens man se siden på en stor skærm?

Arrrgh ...

til tabeldesign kan bruge grid-layout

- skal være

til tabeldesign IKKE kan bruge grid-layout

[Kim Ludvigsen]

Post by Kurt Hansen
til tabeldesign IKKE kan bruge grid-layout

Nu har jeg ikke leget med grid-layout, men jeg vil tro, at Grid-design
netop svarer til tabel-design - men tabel-design er ikke beregnet til at
wrappe.

Hvis du vil have noget til at flyde ned på linjen under på smalle
skærme, så skal du bruge float. Med float angiver du netop, at indholdet
skal flyde ved siden af hinanden i det omfang, der er plads til det, og
ellers skal det flyde ned under det tidligere indhold på en ny linje.

[Kurt Hansen]

Post by Jan Hansen
De div hopper jo allerede rundt på
https://www.danacord.dk/frmsets/records/790-r.html

Jeg håber at http://www.sniper-pistol.com/csv.php får lov til at leve
lidt endnu? Jeg er langt fra færdig med at benytte den.

P.S. Æhhh ... hvad var det nu lige jeg kunne eller skulle bruge
http://www.sniper-pistol.com/responsiv/ til?

[Jan Hansen]

Post by Kurt Hansen
Jeg håber at http://www.sniper-pistol.com/csv.php får lov til at leve
lidt endnu? Jeg er langt fra færdig med at benytte den.

Jeg kan da godt lade den blive liggende, hvis du synes det er sjovt.
Jeg vil da ellers mene, at det må være nemmere at have den liggende
på danacord.com, så du kan rette i den, så det passer til den CD, du
er i gang med at tilpasse til Microsoft Excel. Men hvad ved jeg.
Kildekoden til den er jo lige til at kopiere fra
http://www.sniper-pistol.com/csv.php?viskode

Post by Kurt Hansen
P.S. Æhhh ... hvad var det nu lige jeg kunne eller skulle bruge
http://www.sniper-pistol.com/responsiv/ til?

Det var til at lægge ind på danacord.dk, hvor det så lave siderne
responsive uden at man skal bekymre sig om noget sværere end at klippe
og klistre fra de eksisterende sider til en formular. Derefter laver
php en side der er mage til den eksisterende ved passende opløsning,
og med de fornødne afvigelser ved andre opløsninger.
Men når du kan bedre selv, kan jeg vel godt slette det igen?

[Kurt Hansen]

Post by Jan Hansen

Post by Kurt Hansen
Min "viden" om responsive webdesign er yderst begrænset, men jeg har
altid troet at div'er vil wrappe ned under hinanden, når der ikke er
plads nok på skærmen.
På http://www.danacord.com/nyny/catalog.html har jeg sat en border på de
div'er der er på siden, så man kan følge med i hvad der sker, når siden
krympes.

De div hopper jo allerede rundt på
https://www.danacord.dk/frmsets/records/790-r.html
Men hvis du vil lave det samme, bare på en anden måde, kan du jo kigge
lidt på <https://css-tricks.com/snippets/css/a-guide-to-flexbox/>

Jeg har kigget på det flere gange, men det er for stor en mundfuld for
mig. Jeg kan simpelthen ikke overskue det.