Notifikationer

Markér alle som læst Log ud

Claus Mester

30. april 2005 - 19:32 Der er 8 kommentarer og
1 løsning

Scroll ved mere tekst end siden kan rumme

Hej Eksperter.

Kryptisk overskrift - jeg ved det. Jeg håber i forstå pointen.

Hvis i ser på min side: http://aladdin.1go.dk/ og bevæge siden lidt op, kan i se det går helt galt.

Spørgsmålet er, hvordan jeg kommer udenom den suppedas.

Jeg forestiller mig følgende en scoll bar i højre side?

Vh nicolaus

Synes godt om

al_dair Nybegynder

30. april 2005 - 20:09 #1

i dit css dokument:

div.scroll {
height: 200px;
width: 300px;
overflow: auto;
border: 1px solid #666;
background-color: #ccc;
padding: 8px;
}

i dit html dokument:

<div class="scroll">
Aliquip ullamcorper duis dolor, feugiat iusto facilisis ..
Aliquip ullamcorper duis dolor, feugiat iusto facilisis
</div>

Synes godt om

Claus Mester

30. april 2005 - 20:15 #2

Genialt! Tak for hjælpen :-)
(smid lige et svar)

Synes godt om

olebole Juniormester

30. april 2005 - 20:36 #3

<ole>

Hvis du kun ønsker scrollbar i højre side, ser koden ikke sådan ud, men sådan:

div.scroll {
height: 200px;
width: 300px;
overflow-x: hidden;
overflow-y: auto;
overflow: -moz-scrollbars-vertical;
border: 1px solid #666;
background-color: #ccc;
padding: 8px;
}

/mvh
</bole>

Synes godt om

al_dair Nybegynder

30. april 2005 - 22:26 #4

velbekom :)

Synes godt om

Claus Mester

02. maj 2005 - 13:56 #5

olebole; umiddelbart giver det samme resultat. Endvidere er css validator ikke glad for overflow: -moz-scrollbars-vertical;

Synes godt om

hyberpreprocessor Nybegynder

02. maj 2005 - 13:57 #6

Scrollbar koden kan ikke valideres :] , men den er korrekt nok.

Synes godt om

olebole Juniormester

02. maj 2005 - 16:47 #7

Nej, det giver skam et helt andet resultat ... alt efter, hvad du hælder i af indhold og hvilken browser, du se det i :)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>TITLE</title>
<style type="text/css">
body, html {
height: 100%;
margin: 0px;
padding: 0px;
}
</style>
</head>
<body>

<style type="text/css">
div.scroll {
height: 200px;
width: 300px;
overflow: auto;
border: 1px solid #666;
background-color: #ccc;
padding: 8px;
}
div.scroll2 {
height: 200px;
width: 300px;
overflow-x: hidden;
overflow-y: auto;
overflow: -moz-scrollbars-vertical;
border: 1px solid #666;
background-color: #ccc;
padding: 8px;
}
</style>

<div class="scroll">
<div style="width:100%">
Dette div vil være for bredt, men introducerer ikke vertikal scrollbar i min løsning :)
</div>
Aliquip ullamcorper duis dolor, feugiat iusto facilisis ..
Aliquip ullamcorper duis dolor, feugiat iusto facilisis
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<h3>Bund</h3>
</div>

<div class="scroll2">
<div style="width:100%">
Dette div vil være for bredt, men introducerer ikke vertikal scrollbar i min løsning :)
</div>
Aliquip ullamcorper duis dolor, feugiat iusto facilisis ..
Aliquip ullamcorper duis dolor, feugiat iusto facilisis
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<h3>Bund</h3>
</div>

</body>
</html>

Hvad validatoren angår, så er det rystende ligegyldigt, hvad den siger i den forbindelse. I forhold til W3C's egne rekomendationer, er det faktisk lidt buggy at afvise koden, da CSS jo netop foreskriver, at properties, en browser ikke forstår, skal ignoreres.
Det morsomme er, at 'overflow-x' og 'overflow-y' endnu ikke er med i nogen CSS-standard. Det kommer de først i CSS3 ... på trods af, at de har været understøttet af IE siden version 4 og Mozilla har understøttet dem siden september.

Validatorer er kun software - med alle de fejl og mangler, den slags nu engang er begavet med ;o)

Synes godt om

Claus Mester

02. maj 2005 - 18:18 #8

Ja! Den fungerer jo upåklageligt og fuldstændig som den skal :-)

Men jeg forstår ikke helt, hvad det er al_dairs løsning gør til forskel fra din. Rent praktisk, som jeg umiddelbart kan se, supplerer de siden med en horisontal srollbar til højre.

Synes godt om

Claus Mester

04. maj 2005 - 17:53 #9

Efter en del læsning om CSS og videre, kan jeg nu se hvad forskellen er. Overflow "moser" det sammen, så det kan ses alligevel.

Jeg syntes i skal dele pointene, da al_dair svarede først med en brugbar og god løsning og olebole, med en mere fremtidssikret løsning.

Så smider du lige et svar, olebole.

Synes godt om

Ny bruger Nybegynder

Din løsning...

Tilladte BB-code-tags: [b]fed[/b] [i]kursiv[/i] [u]understreget[/u] Web- og emailadresser omdannes automatisk til links. Der sættes "nofollow" på alle links.

Følg dette spørgsmål

Opret Preview

Webudvikling kurser

Vi tilbyder markedets bedste kurser inden for webudvikling

Se alle Webudvikling kurser

Flere spørgsmål fra HTML kategorien

Titel	Indlæg	Oprettet	Seneste aktivitet
Hjælp med HTML og CSS Af Nojsa i HTML	18	10/09/202515:07	17/09/202515:11
CSS 2 x firkanter + tekst på samme linje Af nemlig i HTML	3	19/03/202522:16	20/03/202513:04
Se og ændre html på en webside Af magger i HTML	4	11/03/202513:55	12/03/202506:56
Få input felt, der er med fed skrift og formatteres på linje Af KurtG i HTML	5	02/03/202520:05	04/03/202515:40
Variabler som ikke virker Af Frits Jensen i HTML	3	30/10/202409:37	01/01/202515:27

Se alle spørgsmål i kategorien Opret spørgsmål

Log ind eller opret profil

Hov!

For at kunne deltage på Computerworld Eksperten skal du være logget ind.

Det er heldigvis nemt at oprette en bruger: Det tager to minutter og du kan vælge at bruge enten e-mail, Facebook eller Google som login.

Du kan også logge ind via nedenstående tjenester

Alle kategorier på Eksperten

Seneste artiklerRSS