Scroll uten rammer

wunderbaum · 22. januar 2005

Ok.. Driver og lager en side.. Har lagd hele designet i Photoshop, og brukt "slice" i ImageReady for å "kappe opp" bildene.. Har problemer med å få skrevet alt som skal skrives på siden uten at det forsvinner litt utafor nede.. Noen som kan forklare meg hvordan jeg kan få til å lage en scrollbar uten å måtte bruke rammer? Evt. forklare meg andre løsninger som kan være til nytte?

PoleCat · 22. januar 2005

Sett en

<div style="height: 300px; overflow: auto;">
<!-- innholdet som skal få scroll her -->
</div>

rundt innholdet som skal få scrollen. 300px er her høyden, du får bytte den med din egen. Dersom du allerede bruker et div-element til å ha rundt teksten, setter du bare overflow-egenskapen rett på denne, men her lukter jeg nok tabeller.

wunderbaum · 22. januar 2005

Ok.. Takker

wunderbaum · 23. januar 2005

Umm... Kan du forklare den koden litt bedre?

Den der skjønte jeg ikke..

Haraldson · 23. januar 2005

Det er en HTML-kommentar, og sier bare hvor innholdet er. Det betyr altså at du putter tekst og HTML-koder som skal være inni ruta som det er scroll i, skal ligge der i HTML-koden.

wunderbaum · 23. januar 2005

Ok TROR jeg skjønner det nå.. Kan edit'e etterpå sånn som jeg tror dere mener.. Er noob på HTML, så jeg har ærlig talt ingen peiling :blush:

Haraldson · 23. januar 2005

Bare erstatt koden du siterte i forrige post med innholdet som skal kunne scrolles.

wunderbaum · 23. januar 2005

Ok... Så hvis jeg har denne koden:

<p>sadfasfdsdf</p>
<p>asdf</p>
<p>asdf</p>
<p>sadf</p>
<p>sadf</p>
<p>sa</p>
<p>df</p>
<p>sadf</p>
<p>sadf</p>
<p>sadf</p>

så skal jeg bare gjøre det om til det her:

<div style="height: 300px; overflow: auto;">
<p>sadfasfdsdf</p>
<p>asdf</p>
<p>asdf</p>
<p>sadf</p>
<p>sadf</p>
<p>sa</p>
<p>df</p>
<p>sadf</p>
<p>sadf</p>
<p>sadf</p>
</div>

Eller misforstår jeg litt nå? :blush:

Haraldson · 23. januar 2005

Nei, koden din er helt korrekt den. Hvis du nå ser på det du har laget, vil du se - om du har innhold som opptar mer enn 300px i høyden - se at du får vertikal scroll.

EGIS · 23. januar 2005

Riktig det!

N* · 23. januar 2005

Eller misforstår jeg litt nå?

nei. men du kan sette height:auto;.. da blir diven høyere ettersom det blir mer inni den.

er ikke sikker på om det er det du vil da.

edit: tidlig på morran :sleep:

Endret 23. januar 2005 av N*

Haraldson · 23. januar 2005

N*: Se på emnetittelen for denne tråden.

Han vil ha scroll. (Og om man skal ha en div som utvider seg avhengig av innholdet, bare dropper man height og overflow og alt det der. )

wunderbaum · 23. januar 2005

Ok... Skal se om jeg har skjønt helt riktig nå Jeg må ikke ha tables for å bruke den koden? Og hvis jeg da bruker det bildet, setter inn koden som PoleCat ga, så får jeg scroll hvis innholdet er mer enn på 300px? Skulle nok lært litt scripting.. Føler meg som en komplett idiot :blush:

Haraldson · 23. januar 2005

Nei, det eneste du trenger for å få scroll, er altså koden som PoleCat postet over, og slik som du postet over her.

Disse kodene må selvfølgelig stå i et skikkelig HTML-dokument, med doctype, body-tagger og alt det der.

wunderbaum · 23. januar 2005

Men da scrolles vel hele dritten (for å si det mildt) Vil jo bare scrolle contentboksen når det er mye tekst der? Må jeg referere til at det er contentboksen jeg skal scrolle da eller?

Hvis jeg tar feil, kunne du være så snill å forklare det litt detaljert? Skjønner så vidt hva jeg mener sjøl

Haraldson · 23. januar 2005

Vel, det eneste du vel trenger å gjøre er å sette boksen som PoleCat postet kode til som contentboksen, og eventuelle andre bokser trenger da ikke å ha denne koden.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="no">
<head>
<title>Tittel</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-10">
<link rel="stylesheet" type="text/css" media="screen" href="styles.css">
</head>

<body>

<div id="container">

<div style="height: 300px; overflow: auto;">
<h2>Hei og hå</h2>

<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vivamus non massa. Suspendisse quis sem. Duis nulla leo, egestas lacinia, ornare ac, mattis sed, lacus.</p>
<p>Phasellus id ligula. Donec a est. Vestibulum fermentum ipsum eu tellus. Curabitur eu elit. Suspendisse non neque. Morbi mauris est, adipiscing eget, dictum eu, hendrerit quis, leo. Mauris vulputate, sem a vulputate vestibulum, arcu erat fermentum nisl, nec egestas sem nulla in metus. Aliquam neque eros, rutrum eu, vulputate sed, interdum non, massa. Suspendisse potenti. Pellentesque suscipit quam ac nulla. Mauris ac libero. Nullam at urna. Integer et lorem dictum sapien imperdiet tempor.</p>
</div>

</div>

</body>
</html>

^^ Eksempel på hvordan det blir.

wunderbaum · 23. januar 2005

Ok.. Var på en måte sånn jeg mente.. At jeg måtte sette det inn der som contentboksen er Har bare litt vinglende forklaringer Men takk Mr.Berg :thumbup: Det funka som bare det

wunderbaum · 23. januar 2005

Fikk plutselig et problem til.. Får ikke litt space mellom boksene (de ligger liksom helt inntil hverandre) :hmm:

Skjønner dere pointet?

EDIT: Her er et eksempel på hvordan jeg vil ha det.. De forskjellige boksene henger liksom sammen, men vil ikke ha det sånn..

Endret 23. januar 2005 av wunderbaum

Steinmann · 23. januar 2005

margin skal du bruke til slikt!

#whateverdiv {

margin: 5px;

}

wunderbaum · 23. januar 2005

Ok.. Takker orsus :thumbup:

Scroll uten rammer

Anbefalte innlegg

Lenke til kommentar

Videoannonse

Lenke til kommentar

Lenke til kommentar

Lenke til kommentar

Lenke til kommentar

Lenke til kommentar

Lenke til kommentar

Lenke til kommentar

Lenke til kommentar

Lenke til kommentar

Lenke til kommentar

Lenke til kommentar

Lenke til kommentar

Lenke til kommentar

Lenke til kommentar

Lenke til kommentar

Lenke til kommentar

Lenke til kommentar

Lenke til kommentar

Lenke til kommentar

Opprett en konto eller logg inn for å kommentere

Opprett konto

Logg inn

Hvem er aktive 0 medlemmer