Scrollbar tekstfelt i midten av siden.

20. februar 2016

God kveld / natt folkens.

Jeg holder på å lærer meg html for øyeblikket og har lært en god del de siste dagene.
Nettsiden er så og si ferdig, men jeg ønsker å legge til et "tekstfelt" i midten som scroller nedover.

http://imgur.com/qcdbZEM

Som dere ser i bildet her så er det feltet i midten jeg tenker på.
Footer, header og nav bar til venstre har jeg og et bakgrunnsbilde.

Men nå vil jeg ha det tekstfeltet i midten som scroller nedover.
Er det noen som kan gi litt tips til hvordan dette gjøres sånn at jeg lærer det?

Takk.

edit: bildet vises ikke: Bildet er nå her: http://imgur.com/qcdbZEM

Sist endret av Nikon01; 20. februar 2016 kl. 02:18.

nudo

Avventende

1.819 129

20. februar 2016

Er feltet et div-element?

Kode

div {
    overflow: scroll;
}

eller

Kode

div {
    overflow: auto;
}

Sist endret av nudo; 20. februar 2016 kl. 16:39. Grunn: Automatisk sammenslåing med etterfølgende innlegg.

Nikon01

Trådstarter

1.923 320

20. februar 2016

Jeg har ikke et felt der for øyeblikket.
Tanken var om noen vet hva det heter og kan finne det på google eller om noen har tips til begynnelse på dette.

For øyeblikket har jeg bare en boks på midten for litt tekst, men det ser ikke akkurat noe pent ut =/

Sist endret av Nikon01; 20. februar 2016 kl. 18:20.

nudo

Avventende

1.819 129

20. februar 2016

Vel det er normalt å benytte div elementer til layout

Kode

#scrollbartekstboks {
    overflow: auto;
}

overflow auto på div elementet i midten vil trolig gi deg det du ønsker.

https://www.youtube.com/watch?v=eOG90Q8EfRo

Sist endret av nudo; 20. februar 2016 kl. 18:34.

Nikon01

Trådstarter

1.923 320

20. februar 2016

ok.
Men hvis jeg skal få dette feltet til å bli i midten og legge seg "bak" footer og header på en måte sånn at bare denne i midten scroller. Er det bare overflow: auto; jeg trenger å tenke på da?

Zirto

Approved

706 110

20. februar 2016

Sitat av Nikon01

Vis hele sitatet...

Evt. så kan du bruke z-index.

http://www.w3schools.com/cssref/pr_pos_z-index.asp

Edit: Kan du ikke bare legge inn HTML-koden / CSS her?

Sist endret av Zirto; 20. februar 2016 kl. 18:47.

Nikon01

Trådstarter

1.923 320

20. februar 2016

Sitat av Zirto

Evt. så kan du bruke z-index.

http://www.w3schools.com/cssref/pr_pos_z-index.asp

Edit: Kan du ikke bare legge inn HTML-koden / CSS her?

Vis hele sitatet...

Hadde ikke noe laget for dette så da kunne jeg ikke poste koden.

Men har nå gjort som dere skrev og gjorde det sånn her:

Kode

#scrollbartekstboks {
	overflow:auto;
	z-index:-1;
	position:fixed;
	border:3px solid;
	left: 30%;
	right:30%;
	height:100%;
	background-color:#5B5454;
	
}

Fargevalg på noe som helst har jeg ikke bestemt meg for, så ikke tenk på fargen der.

Yochi

1.018 228

20. februar 2016

Her er et simpelt eksempel med en annen fremgangsmåte.

http://codepen.io/andeersg/pen/YwoPZj

Zirto

Approved

706 110

20. februar 2016

Noe slikt som dette?

Kode

<!DOCTYPE html>
<html>
<head>
    <title></title>
	<meta charset="utf-8" />

    <style>
  #scrollbartekstboks {
  width: 200px;
    font-family: Verdana, Tahoma, Arial, Helvetica, sans-serif;
    font-size: 82%;
    overflow: scroll;
    left: 30%;
    height: 500px;
    background-color: #5B5454;
    border: 3px solid;
    color: white;
    position:fixed;
    }
    </style>




</head>

<body>

    <textarea id="scrollbartekstboks" name="" value=""></textarea>

</body>
</html>

Sist endret av Zirto; 20. februar 2016 kl. 19:29.

nudo

Avventende

1.819 129

21. februar 2016

Sitat av Yochi

Her er et simpelt eksempel med en annen fremgangsmåte.

http://codepen.io/andeersg/pen/YwoPZj

Vis hele sitatet...

Morsom detalj: overflow-y: auto;

Nikon01

Trådstarter

1.923 320

24. februar 2016

God kveld igjen folkens.

Kode

#scrollbartekstboks {
	overflow:auto;
	z-index:-1;
	position:fixed;
	left: 30%;
	right:30%;
	height: 100%;
	background-color:white;
	top:100px;
	font-family:verdana, Tahoma, Arial, Helvetica, sans-serif;
	font-size:100%;
	font-style:italic;
	font-weight:bold;
	opacity: .8;
	
}

Jeg fikk opp en scrollbar i midten og alt fungerte helt fint.
MEN, når jeg skriver en del i dette feltet og det er på tide å scrolle nedover, så får jeg scrollet litt, men ikke helt ned.

Noen som kan se hvorfor?

Yochi

1.018 228

24. februar 2016

Sitat av Nikon01

Vis hele sitatet...

Har du mulighet til å lage en liten demo på Codepen.io eller jsbin.com? Da er det litt enklere for deg å vise oss problemet + enklere for oss debugge problemet.

Nikon01

Trådstarter

1.923 320

24. februar 2016

Når jeg kjører koden igjennom jsbin.com så fungerer det fint og jeg får scrollet nedover.

Men når jeg kjører den her hos meg så fungerer det ikke.

EDIT:

Det virker som at det er når jeg putter inn noen , bilder etc inni der at det ikke fungerer å scrolle ned.
Med ren tekst fungerer det fint, men legger jeg til bilder og paragrafer så får jeg ikke scrollet mer enn kanskje 1 cm av 8 cm f.eks.

Sist endret av Nikon01; 24. februar 2016 kl. 22:02. Grunn: Automatisk sammenslåing med etterfølgende innlegg.

nudo

Avventende

1.819 129

24. februar 2016

Pass på at avsnittene i feltet er i -tag, du kan alltids jukse det hele til med noen ekstra i en egen på slutten av teksten din, men det beste er kanskje å legge inn padding eller margin i CSSen til p?

Har du ?

Da er det bare å finne ut hvilken #avsnitt{ margin: 5px } eller 3?

Sist endret av nudo; 24. februar 2016 kl. 23:47.

Nikon01

Trådstarter

1.923 320

25. februar 2016

Ja tenkte å unngå å bruke for mye for å komme nedover på siden.
Men jeg ønsker at det skal være litt mellomrom imellom avsnittene da det er "nyheter" som skal stå på denne siden og da syns jeg ikke det er så veldig fint om de er for nærme hverandre.