Permalänk
Medlem

HTML & CSS overflow

Hej!
Håller på med en liten sida mest för skojskull men också för att bli bättre generellt. Har iallafall stöt på ett problem med overflow-y.
Sidan är uppbyggd för att visa nyheter, så det är självklart viktigt att kunna scrolla ned en bit Sidan har ett överflöde, som inte visas at the moment, och overflowen ser ut såhär --> (http://gyazo.com/4af75bc517c387adbd3cce168a967524)
vad har jag missat? Otroligt tacksam för svar!

((Om admin tycker att inlägget är felplacerat för denna taåtgärd))

Vänliga hälsningar // Filip

Permalänk
Medlem

Varför inte skippa overflow-y och låta webbläsaren sköta det själv om det behövs?

Permalänk
Medlem

Har testat, men det blir ingen skillnad. Kan det vara z-index på mina divs som ställer till det?

Permalänk
Hedersmedlem
Skrivet av FailiP:

Hej!
Håller på med en liten sida mest för skojskull men också för att bli bättre generellt. Har iallafall stöt på ett problem med overflow-y.
Sidan är uppbyggd för att visa nyheter, så det är självklart viktigt att kunna scrolla ned en bit Sidan har ett överflöde, som inte visas at the moment, och overflowen ser ut såhär --> (http://gyazo.com/4af75bc517c387adbd3cce168a967524)
vad har jag missat? Otroligt tacksam för svar!

((Om admin tycker att inlägget är felplacerat för denna taåtgärd))

Vänliga hälsningar // Filip

Vad har du suttit för värde på overflow-y? Det skulle hjälpa med iaf lite kod (såväl html som css)

Visa signatur

Dator, MOBO: Asus X99-A, CPU: Intel I7 6800k (3.4GHz), GPU: Geforce PNY 2070 Super, RAM: 4x8GB Corsair Vengeance LPX 2400MHz, OS-HDD: Intel 750 PCIe 400GB, PSU: EVGA SuperNOVA G2 850W

Permalänk
Medlem

http://www.w3schools.com/cssref/playit.asp?filename=playcss_o...

Där hittar du allt och kan prova vilken overflow du vill ha

Permalänk
Medlem
Skrivet av Klorixx:

Vad har du suttit för värde på overflow-y? Det skulle hjälpa med iaf lite kod (såväl html som css)

Värdet är scroll ( overflow-y: scroll; )
Vet inte riktigt vad som är intressant av all min kod tyvärr

Permalänk
Medlem
Skrivet av Rupenbritz:

http://www.w3schools.com/cssref/playit.asp?filename=playcss_o...

Där hittar du allt och kan prova vilken overflow du vill ha

Nu blev det lite lättare att beskriva problemet! Min text och mina bilder hamnar som om värdet skulle vart overflow-y: hidden!

Edit: och det ändras inte när jag sätter värdet scroll :/

Permalänk
Medlem

Skicka HTML och CSS-kod så blir det lättare att hitta felet.

Permalänk
Medlem
Skrivet av BuruZ:

Skicka HTML och CSS-kod så blir det lättare att hitta felet.

Här är länk till all kod. Håller bara på för att utvecklas så lika bra att skicka allt. ---> ((https://drive.google.com/folderview?id=0Bx29slC7E4g5SGtNWjkxO...))

Edit: kan se lite halvdant ut då alla bilder är från min lokala hårddisk Tar gärna emot kritik på saker som kan göras bättre

Permalänk
Medlem

Jag tror jag har accepterat delning med er som begärt åtkomst, om inte säg till

Permalänk
Medlem

Lägg koden här istället:

http://jsfiddle.net/

Har du overflow-y:scroll måste du sätta en höjd på din DIV. Om DIV är lika hög som window kommer ju scrollen inte aktiveras. Så sätt height:100px så kommer du se på tusan.

Permalänk
Medlem
Skrivet av Ernesto:

Lägg koden här istället:

http://jsfiddle.net/

Har du overflow-y:scroll måste du sätta en höjd på din DIV. Om DIV är lika hög som window kommer ju scrollen inte aktiveras. Så sätt height:100px så kommer du se på tusan.

Aha, tack så mycket, det låter logiskt! Ska testa det när jag får möjlighet!

Permalänk
Medlem
Skrivet av Ernesto:

Lägg koden här istället:

http://jsfiddle.net/

Har du overflow-y:scroll måste du sätta en höjd på din DIV. Om DIV är lika hög som window kommer ju scrollen inte aktiveras. Så sätt height:100px så kommer du se på tusan.

Hej!
Att ändra höjd på diven fungerade inte, har nu fått möjlighet att lägga in koden på jsfiddle så den finns tillgänglig här --> (http://jsfiddle.net/KjellKriminell/6bryyubd/1/)

Då sidan är i ett väldigt tidigt stadie finns ingen javascript ännu.

Permalänk
Medlem

Om du tar bort position fixed på .main så kommer du få scroll.

Ett fixed element tar "ingen" plats i sin parent så därför kommer ingen scroll fram heller

Permalänk
Medlem

Det är lite gammaldags design att ha en top och bottom som ligger fixed så där och tar massa plats i "onödan" - Om man kollat med liten skärm eller mobil hade man blivit vansinnig och aldrig återkommit hehe.

Permalänk
Medlem
Skrivet av Ernesto:

Om du tar bort position fixed på .main så kommer du få scroll.

Ett fixed element tar "ingen" plats i sin parent så därför kommer ingen scroll fram heller

Okej tack så mycket, får testa det!

Skickades från m.sweclockers.com

Permalänk
Medlem
Skrivet av Ernesto:

Det är lite gammaldags design att ha en top och bottom som ligger fixed så där och tar massa plats i "onödan" - Om man kollat med liten skärm eller mobil hade man blivit vansinnig och aldrig återkommit hehe.

Vad/hur rekommenderar du att jag gör istället?

Skickades från m.sweclockers.com

Permalänk

FailiP, för att svara på dina frågor;

Använd aldrig en fixed-bot eller side. Detta ger ett intryck att sidan var skapad 1991.
Element som har en fixed position har ofta en tendens att bete sig olika i olika webbläsare och det kan vara svårt att få vissa atributer att fungera som man vill.

Skippa den skiten, bygg på ett ramverk, det är inte komplicerat alls.

Ett ramverk för webbdesign är en rad komponenter som du bara klickar in i editorn och får en magisk hemsida som (oftast) fungerar för datorer och mobiler och anpassar sig därefter.

Ett enkelt ramverk skulle kunna vara Twitter Bootstrap.

Lathund: http://getbootstrap.com

Grundkod för hemsidan:
http://getbootstrap.com/getting-started/#template
Kolla så att du länkar bootstrap.min.js längst ner rätt och stilmallen.

Sedan så kan du hitta olika prylar under components som du kan använda på ditt projekt.

Simpelt, finns massor av bra sidor så som:
http://www.bootply.com/new - En builder för ramverket
http://bootsnipp.com - Massor av olika element folk knapat ihop

Släng på lite schyssta ikoner utan att använda massor av bilder:
fortawesome.github.io/Font-Awesome/

KLARTEXT: Twitter Bootstrap är bara en av många ramverk, men har använt Twitter Bootstrap sedan 2.3.1 och kan rekommendera det starkt till andra. Bra dokumentation, enkelt och visuellt stilrent.

Har du frågor så ställ de bara!

Visa signatur

Streamer | Webbdesigner | Videoredigerare | Systemtekniker

CPU: i7-8700k @ 4.9GHz GPU: EVGA 1070 8GB SCC RAM: 2x8GB 3000MHz DDR4 CASE: Antec P280 COOLER: BeQuiet! Pure Rock HDD: 120+240+24SSD + 1TB HDD [b]

Permalänk
Medlem
Skrivet av Dustforce:

FailiP, för att svara på dina frågor;

Använd aldrig en fixed-bot eller side. Detta ger ett intryck att sidan var skapad 1991.
Element som har en fixed position har ofta en tendens att bete sig olika i olika webbläsare och det kan vara svårt att få vissa atributer att fungera som man vill.

Skippa den skiten, bygg på ett ramverk, det är inte komplicerat alls.

Ett ramverk för webbdesign är en rad komponenter som du bara klickar in i editorn och får en magisk hemsida som (oftast) fungerar för datorer och mobiler och anpassar sig därefter.

Ett enkelt ramverk skulle kunna vara Twitter Bootstrap.

Lathund: http://getbootstrap.com

Grundkod för hemsidan:
http://getbootstrap.com/getting-started/#template
Kolla så att du länkar bootstrap.min.js längst ner rätt och stilmallen.

Sedan så kan du hitta olika prylar under components som du kan använda på ditt projekt.

Simpelt, finns massor av bra sidor så som:
http://www.bootply.com/new - En builder för ramverket
http://bootsnipp.com - Massor av olika element folk knapat ihop

Släng på lite schyssta ikoner utan att använda massor av bilder:
fortawesome.github.io/Font-Awesome/

KLARTEXT: Twitter Bootstrap är bara en av många ramverk, men har använt Twitter Bootstrap sedan 2.3.1 och kan rekommendera det starkt till andra. Bra dokumentation, enkelt och visuellt stilrent.

Har du frågor så ställ de bara!

Tack så jättemycket! Ska sätta mig in mer i ramverk nu