Forum Mjukvara Programmering och digitalt skapande Tråd Inlägg

Fastnat i utvecklandet av responsiv design. HTML/CSS. Tips?

1
Skriv svar
Permalänk
Medlem
●

Fastnat i utvecklandet av responsiv design. HTML/CSS. Tips?

Tjena!

Jag håller på och gör responsiv design till en webbplats jag har skapat. Jag har dock fastnat lite..

När jag i det minsta läget på den responsiva designen ska fixa navbaren så hamnar innehållet i main på menyn. Jag har försökt på flera olika sätt att inget ska överlappa navbaren när den är öppen men har fastnat.

Det måste ju alltså vara någonstans i CSS som jag ska ändra...

Här är min kod: https://jsfiddle.net/b56zaa5a/ .

Och det är som sagt i det responsiva läget (max 400px) som jag har problem.

Någon som kan ge tips på hur jag ska lösa detta?
Tack på förhand!

Senast redigerat
Redigera
Citera flera Citera
Permalänk
Medlem ★
●

Jag har ingen direkt lösning för detta men för framtida problem och övrig information kring responsiv design så kan du ju ta en titt på Bootstrap och dess dokumentation. https://www.w3schools.com/bootstrap/default.asp

Redigera
Citera flera Citera
Permalänk
Medlem ★
●

Tänker du att vi ska gissa oss till hur din källkod ser ut? Gör en jsfiddle eller liknande som illustrerar problemet.

Visa signatur

Spela Swemantle! Du vet att du vill.

Ibland har jag fel, men då är det någon annans fel.

Redigera
Citera flera Citera
Permalänk
Medlem
●
Skrivet av LemonIllusion:

Tänker du att vi ska gissa oss till hur din källkod ser ut? Gör en jsfiddle eller liknande som illustrerar problemet.

Gå till inlägget

Jag ber om ursäkt. Är ganska ny inom detta och just nu är det skolarbete jag håller på med. Hade t.ex. aldrig hört talas om jsfiddle men det verkar ju skitsmidigt.

Här är min kod: https://jsfiddle.net/b56zaa5a/ .

Och det är som sagt i det responsiva läget (max 400px) som jag har problem.

Redigera
Citera flera Citera
Permalänk
Medlem
●

Ta bort

@media (max-width: 400px)
nav {
    height: 100px;
}
Redigera
Citera flera Citera
Permalänk
Medlem ★
●
Skrivet av murre_:

Jag ber om ursäkt. Är ganska ny inom detta och just nu är det skolarbete jag håller på med. Hade t.ex. aldrig hört talas om jsfiddle men det verkar ju skitsmidigt.

Här är min kod: https://jsfiddle.net/b56zaa5a/ .

Och det är som sagt i det responsiva läget (max 400px) som jag har problem.

Gå till inlägget

Med hjälp av webbläsarens utvecklarverktyg man snabbt skaffa sig en överblick av varför saker beter sig som de gör. I ditt fall är det ditt nav-elementet som fått en fast höjd på 100px. Då kommer den inte anpassa höjden efter innehållet och eftersom ul-elementet tar upp mer än 100px i höjdled hamnar det utanför naven och överlappar det som kommer efter. Låt bli att ändra höjden så kommer det fungera.

Visa signatur

Spela Swemantle! Du vet att du vill.

Ibland har jag fel, men då är det någon annans fel.

Redigera
Citera flera Citera
Permalänk
Medlem
●
Skrivet av LemonIllusion:

Med hjälp av webbläsarens utvecklarverktyg man snabbt skaffa sig en överblick av varför saker beter sig som de gör. I ditt fall är det ditt nav-elementet som fått en fast höjd på 100px. Då kommer den inte anpassa höjden efter innehållet och eftersom ul-elementet tar upp mer än 100px i höjdled hamnar det utanför naven och överlappar det som kommer efter. Låt bli att ändra höjden så kommer det fungera.
https://i.imgur.com/Vehk4kL.png

Gå till inlägget

TACK!
Fick två riktigt bra tips i JSFiddle och webbläsaren utvecklarverktyg där med. Det kommer jag att ha stor nytta av framöver.

Fortsatt trevlig helg!

Redigera
Citera flera Citera
Permalänk
Medlem
●

@murre_: Har du funderat på att använda dig utav css grid eller flexbox något? Grid framförallt gör det väldigt enkelt att designa responsiva webbsidor!

Redigera
Citera flera Citera
Permalänk
Medlem
●

Fick du till det? Kan annars rekommendera att kolla in den här SO-tråden: https://stackoverflow.com/a/32301823
Ett till tips är att köra bootstrap för responsiv design i framtiden.

Redigera
Citera flera Citera
1
Skriv svar