UIkit från getuikit.com - hur få igång rotation av hemsida i mobila enheter?

Trädvy Permalänk
Medlem
Registrerad
Dec 2004

UIkit från getuikit.com - hur få igång rotation av hemsida i mobila enheter?

Hej!

Ny frågeställning, se UIkit från getuikit.com - hur få igång rotation av hemsida i mobila enheter?
/moderator

Jag har hamnat i en situation där jag behöver skapa kod i C# / ASP.NET för en hemsida som ska fungera på mobiler och andra enheter som har andra skärmstorlekar som surfplattor och stora datorskärmar. Jag tänker mig en responsiv lösning med hjälp av UIkit.

För detta tänkte jag göra 5 olika sidor *.aspx sidor men har inte hittat ett bra sätt att skapa en meny som på en vanlig stor datorskärm visar en horisontell meny där de fem menylänkarna visas som "knappar" i en meny. På en mindre mobiltelefon skulle det helst dyka upp den typiska kvadratiska symbolen för meny med de tre horisontella strecken i. Om man klickar på den menysymbolen så ska man få upp en vertikal lista i mobilen med länkar till de 5 olika .NET sidorna som jag har skrivit i C#.

Är det någon som vet hur man kan skapa en meny med hjälp av UIkit från getuikit.com som fungerar enligt ovan och där man kan ange vilka *.aspx sidor som de olika menyvalen ska länka till så när man klickar på ett menyval så ska den sidan visas?

Alla tips mottages tacksamt!

The Programmer

Trädvy Permalänk
Medlem
Plats
Göteborg
Registrerad
Maj 2004

I korta drag;
Använd klasserna för att visa och dölja element i olika storlekar för att visa knappen och dölja menyn. Använd exempelvis UI-kits offcanvas för att skapa menyn som skall fällas fram.

Kika på deras tutorial-film här: http://getuikit.com/docs/tutorials.html#off-canvas-mobile-nav...

as far as we can tell, the massacre went well...

Trädvy Permalänk
Medlem
Registrerad
Dec 2004
Skrivet av jovnas:

I korta drag;
Använd klasserna för att visa och dölja element i olika storlekar för att visa knappen och dölja menyn. Använd exempelvis UI-kits offcanvas för att skapa menyn som skall fällas fram.

Kika på deras tutorial-film här: http://getuikit.com/docs/tutorials.html#off-canvas-mobile-nav...

Kanon, det fungerade bra!

The Programmer

Trädvy Permalänk
Medlem
Registrerad
Dec 2004

UIkit från getuikit.com - lägg till bakgrund som täcker HELA webbläsaren?

Hej!

Jag har använt UIKit från getuikit.com och fått ett problem med att lägga till en bakgrundsbild som ska repeteras och fylla ut hela webbläsarfönstret.

När jag gör som jag brukar - typ något i stil med:

body { background-image: url("/img/bg.jpg") !important; background-position: left top; background-repeat: repeat; }

så blir inte hela webbläsaren fylld med bakgrunden utan bara den vertikala delen som fylls upp av webbsidans innehåll. T ex kan jag ha en webbsida som innehåller en centrerad div som är 800px bred och 200 px hög. Eftersom den tar bara 200px från toppen och nedåt så blir hela bredden på t ex en Full HD skärm (1920x1080 pixlar) uppifrån fylld med bakgrundsbilden på sidorna av den centrerade div:en (men bara ner till 200px från toppen). Under de 200 pixlarna från överkanten blir hemsidan bara vit och inte fylld med bakgrundsbilden.

Någon som har ett tips på hur man kan få en heltäckande bakgrundsbild som fyller ut hela webbläsaren, alltså även under hemsidans innehåll?

Tacksam för alla tips!

The Programmer

Trädvy Permalänk
Medlem
Plats
Stockholm
Registrerad
Nov 2015

Provade göra en sida som du beskrev och installerade UIKit, fick samma resultat som du beskrivit ovan. Prova att lägga till detta i din css:

html { height: 100%; } body { height: 100%; }

Trädvy Permalänk
Medlem
Registrerad
Dec 2004
Skrivet av davidhogberg:

Provade göra en sida som du beskrev och installerade UIKit, fick samma resultat som du beskrivit ovan. Prova att lägga till detta i din css:

html { height: 100%; } body { height: 100%; }

Naturligtvis! Gjorde ett snabbtest och det verkar fungera som det ska med den fixen

The Programmer

Trädvy Permalänk
Medlem
Registrerad
Dec 2004

UIkit från getuikit.com - hur få igång rotation av hemsida i mobila enheter?

Hej!

Jag har använt UIKit från getuikit.com för att göra en responsiv hemsida som fungerar på både små mobila enheter och vanliga stora datorskärmar.

Jag hittar konstigt nog ingen information om hur man får innehållet på hemsidan att rotera om användaren roterar sin mobil t ex 90 grader. Hemsidan blir alltid i porträtt (portrait) läge och aldrig i landskap (landscape).

Om man t ex har en bred bild som inte är så hög så tar den hela bredden men eftersom hemsidan visas i stående läge och inte liggande (landscape) läge så blir bilden väldigt liten. En naturlig reaktion är att användaren roterar sin mobil för att låta bilden breda ut sig i landskapsläget där bilden skulle visas så bred/stor som möjligt. Tyvärr så händer det inget när man roterar mobilen, innehållet visas fortfarande i stående läge och inte i ett liggande landskapsläge som man skulle kunna förvänta sig.

Hur kan man göra så innehållet roteras om användaren vrider sin mobil 90 grader?

Alltid tacksam för alla tips!

The Programmer

Trädvy Permalänk
Forumledare
Registrerad
Jan 2005

@TheProgrammer *Trådar sammanfogade, rubrik ändrad*

Observera att vi inte tillåter flera trådar om samma ämne (korspostning), det går alldeles utmärkt att fortsätta i denna tråden.

Citat:

§3.3 Det är inte tillåtet att skapa flera trådar om samma ämne (så kallad korspostning). Detta gäller oavsett om trådarna placeras i samma forumdel eller i olika forumdelar. Om en moderator har låst en tråd är det inte tillåtet att skapa en ny tråd om samma ämne. Regeln finns för att alla ska få samma chans att få sina trådar uppmärksammade och för att forumet ska bli så överskådligt som möjligt.

/moderator

Synpunkter gällande modereringen? Då kan du kontakta mig, moderatorerna, Sweclockers
Ursäkta min stavning, jag är dansk