Søg
Avatar billede topperware Nybegynder
14. december 2002 - 15:41 Der er 15 kommentarer og
1 løsning

overflow scroll, på den vandret led?

Jeg har hentet et eks. fra www.w3schools.com se koden forneden. Jeg vil gerne bruge noget der ligner, men kan ikke få det til at virke. Jeg har en tabel der er 600px bred og 150px høj. I denne er der mange billeder, flere en man kan se indenfor de 600px tabellen er bred. Ideen er så at man skal bruge en scrollbar forneden i tabelcellen og så scrolle mod højre så de resterende billeder bliver synlige.

Altså et synligt felt (en tabelcelle) på 600px i bredden og en scrollbar forneden i denne, men ingen scrollbar i højre side på den lodrette led. Kan det mon lade sig gøre?

eks.:

<html>
<head>

<style type="text/css">
div
{
background-color:#00FFFF;
width:150;
height:150;
overflow: scroll
}
</style>

</head>

<body>

<p><b>Note:</b> Netscape 4 does not support the "overflow" property.</p>

<p>
The overflow property decides what to do if the content inside an element exceeds the given width and height properties. If you set the overflow property to scroll, scrollbars will be added to the element.
</p>

<div>
You can use the overflow property when you want to have better control of the layout.<br><br>
Try to change the overflow property to: visible, hidden, auto, or inherit and see what happens. The default value is visible.
</div>

</body>
</html>
Avatar billede hells Nybegynder
14. december 2002 - 15:49 #1
overflow: auto;
så kommer scrollbaren kun når der er brug for den og så kommer der ikke en vertikal scrollbar medmindre billederne er for høje.
Avatar billede topperware Nybegynder
14. december 2002 - 15:56 #2
Jeg indsætter lige min egen kode; måske du (eller andre) gider hjælpe mig videre derfra. Jeg tror jeg er gået lidt i stå, det fungrer i hvert fald ikke for mig.
Avatar billede topperware Nybegynder
14. december 2002 - 15:57 #3
...et øjeblik...
Avatar billede topperware Nybegynder
14. december 2002 - 16:10 #4
Her kommer så koden - og det skulle helst blive en lang række i stedet for som det er nu; flere rækker over hinanden.

<html>

<head>

<title></title>

</head>

<body>

<table width="600" height="150" border="1">

<tr>
    <td width="600" height="150"> <a href="java script:goNewWin('popuphg.htm?src=hdgrpix/aa.jpg&txt=');"><img src="hdgrpix/aa.jpg" width="85" height="85" border="0"></a>&nbsp;&nbsp;&nbsp;
      <a href="java script:goNewWin('popuphg.htm?src=hdgrpix/dd.jpg&txt=');"><img src="hdgrpix/dd.jpg" width="85" height="85" border="0"></a>&nbsp;&nbsp;&nbsp;
      <a href="java script:goNewWin('popuphg.htm?src=hdgrpix/bb.jpg&txt=');"><img src="hdgrpix/bb.jpg" width="85" height="85" border="0"></a>&nbsp;&nbsp;&nbsp;
      <a href="java script:goNewWin('popuphg.htm?src=hdgrpix/cc.jpg&txt=');"><img src="hdgrpix/cc.jpg" width="85" height="85" border="0"></a>&nbsp;&nbsp;&nbsp;
      <a href="java script:goNewWin('popuphg.htm?src=hdgrpix/g3.jpg&txt=');"><img src="hdgrpix/g3.jpg" width="85" height="85" border="0"></a>&nbsp;&nbsp;&nbsp;
      <a href="java script:goNewWin('popuphg.htm?src=hdgrpix/g2.jpg&txt=');"><img src="hdgrpix/g2.jpg" width="85" height="85" border="0"></a>&nbsp;&nbsp;&nbsp;
      <a href="java script:goNewWin('popuphg.htm?src=hdgrpix/g9.jpg&txt=');"><img src="hdgrpix/g9.jpg" width="85" height="85" border="0"></a>&nbsp;&nbsp;&nbsp;
      <a href="java script:goNewWin('popuphg.htm?src=hdgrpix/g4.jpg&txt=');"><img src="hdgrpix/g4.jpg" width="85" height="85" border="0"></a>&nbsp;&nbsp;&nbsp;
      <a href="java script:goNewWin('popuphg.htm?src=hdgrpix/g5.jpg&txt=');"><img src="hdgrpix/g5.jpg" width="85" height="85" border="0"></a>&nbsp;&nbsp;&nbsp;
      <a href="java script:goNewWin('popuphg.htm?src=hdgrpix/g6.jpg&txt=');"><img src="hdgrpix/g6.jpg" width="85" height="85" border="0"></a>&nbsp;&nbsp;&nbsp;
      <a href="java script:goNewWin('popuphg.htm?src=hdgrpix/g1.jpg&txt=');"><img src="hdgrpix/g1.jpg" width="85" height="85" border="0"></a>&nbsp;&nbsp;&nbsp;
      <a href="java script:goNewWin('popuphg.htm?src=hdgrpix/g10.jpg&txt=');"><img src="hdgrpix/g10.jpg" width="85" height="85" border="0"></a>&nbsp;&nbsp;&nbsp;
      <a href="java script:goNewWin('popuphg.htm?src=hdgrpix/g7.jpg&txt=');"><img src="hdgrpix/g7.jpg" width="85" height="85" border="0"></a>&nbsp;&nbsp;&nbsp;
      <a href="java script:goNewWin('popuphg.htm?src=hdgrpix/g12.jpg&txt=');"><img src="hdgrpix/g12.jpg" width="85" height="85" border="0"></a>&nbsp;&nbsp;&nbsp;
      <a href="java script:goNewWin('popuphg.htm?src=hdgrpix/g11.jpg&txt=');"><img src="hdgrpix/g11.jpg" width="85" height="85" border="0"></a>&nbsp;&nbsp;&nbsp;
      <a href="java script:goNewWin('popuphg.htm?src=hdgrpix/b11.jpg&txt=');"><img src="hdgrpix/b11.jpg" width="85" height="85" border="0"></a>&nbsp;&nbsp;&nbsp;
      <a href="java script:goNewWin('popuphg.htm?src=hdgrpix/b12.jpg&txt=');"><img src="hdgrpix/b12.jpg" width="85" height="85" border="0"></a>&nbsp;&nbsp;&nbsp;
      <a href="java script:goNewWin('popuphg.htm?src=hdgrpix/b2.jpg&txt=');"><img src="hdgrpix/b2.jpg" width="85" height="85" border="0"></a>&nbsp;&nbsp;&nbsp;
      <a href="java script:goNewWin('popuphg.htm?src=hdgrpix/b5.jpg&txt=');"><img src="hdgrpix/b5.jpg" width="85" height="85" border="0"></a>&nbsp;&nbsp;&nbsp;
      <a href="java script:goNewWin('popuphg.htm?src=hdgrpix/b9.jpg&txt=');"><img src="hdgrpix/b9.jpg" width="85" height="85" border="0"></a>&nbsp;&nbsp;&nbsp;
      <a href="java script:goNewWin('popuphg.htm?src=hdgrpix/b6.jpg&txt=');"><img src="hdgrpix/b6.jpg" width="85" height="85" border="0"></a>&nbsp;&nbsp;&nbsp;
      <a href="java script:goNewWin('popuphg.htm?src=hdgrpix/b8.jpg&txt=');"><img src="hdgrpix/b8.jpg" width="85" height="85" border="0"></a>&nbsp;&nbsp;&nbsp;
      <a href="java script:goNewWin('popuphg.htm?src=hdgrpix/b4.jpg&txt=');"><img src="hdgrpix/b4.jpg" width="85" height="85" border="0"></a>&nbsp;&nbsp;&nbsp;
      <a href="java script:goNewWin('popuphg.htm?src=hdgrpix/b3.jpg&txt=');"><img src="hdgrpix/b3.jpg" width="85" height="85" border="0"></a>&nbsp;&nbsp;&nbsp;
      <a href="java script:goNewWin('popuphg.htm?src=hdgrpix/b10.jpg&txt=');"><img src="hdgrpix/b10.jpg" width="85" height="85" border="0"></a>&nbsp;&nbsp;&nbsp;
      <a href="java script:goNewWin('popuphg.htm?src=hdgrpix/ccdk15mini.jpg&txt=');"><img src="hdgrpix/ccdk15mini.jpg" width="85" height="85" border="0"></a>&nbsp;&nbsp;&nbsp;
    </td>
    </tr>

</table>

</body>

</html>
Avatar billede hells Nybegynder
14. december 2002 - 16:13 #5
erstat:
<tr>
    <td width="600" height="150">
med:
<tr>
    <td width="600" height="150" style="overflow: auto;>
Avatar billede topperware Nybegynder
14. december 2002 - 16:43 #6
Der sker intet...skal jeg gøre andet end at udskifte:
<tr>
<td width="600" height="150">
med:
<tr>
    <td width="600" height="150" style="overflow: auto;>
Avatar billede cdc Novice
14. december 2002 - 16:45 #7
<td width="600" height="150" style="overflow: auto;">
manglede lige en "
Avatar billede hells Nybegynder
14. december 2002 - 16:51 #8
prøv at putte det i et div:
<tr>
    <td>
<div style="width: 600px; height: 150px; overflow: auto;">
<a href="java script:goNewWin('popuphg.htm?src=hdgrpix/aa.jpg&txt=');"><img src="hdgrpix/aa.jpg" width="85" height="85" border="0"></a>&nbsp;&nbsp;&nbsp;
      <a href="java script:goNewWin('popuphg.htm?src=hdgrpix/dd.jpg&txt=');"><img src="hdgrpix/dd.jpg" width="85" height="85" border="0"></a>&nbsp;&nbsp;&nbsp;
      <a href="java script:goNewWin('popuphg.htm?src=hdgrpix/bb.jpg&txt=');"><img src="hdgrpix/bb.jpg" width="85" height="85" border="0"></a>&nbsp;&nbsp;&nbsp;
      <a href="java script:goNewWin('popuphg.htm?src=hdgrpix/cc.jpg&txt=');"><img src="hdgrpix/cc.jpg" width="85" height="85" border="0"></a>&nbsp;&nbsp;&nbsp;
      <a href="java script:goNewWin('popuphg.htm?src=hdgrpix/g3.jpg&txt=');"><img src="hdgrpix/g3.jpg" width="85" height="85" border="0"></a>&nbsp;&nbsp;&nbsp;
      <a href="java script:goNewWin('popuphg.htm?src=hdgrpix/g2.jpg&txt=');"><img src="hdgrpix/g2.jpg" width="85" height="85" border="0"></a>&nbsp;&nbsp;&nbsp;
      <a href="java script:goNewWin('popuphg.htm?src=hdgrpix/g9.jpg&txt=');"><img src="hdgrpix/g9.jpg" width="85" height="85" border="0"></a>&nbsp;&nbsp;&nbsp;
      <a href="java script:goNewWin('popuphg.htm?src=hdgrpix/g4.jpg&txt=');"><img src="hdgrpix/g4.jpg" width="85" height="85" border="0"></a>&nbsp;&nbsp;&nbsp;
      <a href="java script:goNewWin('popuphg.htm?src=hdgrpix/g5.jpg&txt=');"><img src="hdgrpix/g5.jpg" width="85" height="85" border="0"></a>&nbsp;&nbsp;&nbsp;
      <a href="java script:goNewWin('popuphg.htm?src=hdgrpix/g6.jpg&txt=');"><img src="hdgrpix/g6.jpg" width="85" height="85" border="0"></a>&nbsp;&nbsp;&nbsp;
      <a href="java script:goNewWin('popuphg.htm?src=hdgrpix/g1.jpg&txt=');"><img src="hdgrpix/g1.jpg" width="85" height="85" border="0"></a>&nbsp;&nbsp;&nbsp;
      <a href="java script:goNewWin('popuphg.htm?src=hdgrpix/g10.jpg&txt=');"><img src="hdgrpix/g10.jpg" width="85" height="85" border="0"></a>&nbsp;&nbsp;&nbsp;
      <a href="java script:goNewWin('popuphg.htm?src=hdgrpix/g7.jpg&txt=');"><img src="hdgrpix/g7.jpg" width="85" height="85" border="0"></a>&nbsp;&nbsp;&nbsp;
      <a href="java script:goNewWin('popuphg.htm?src=hdgrpix/g12.jpg&txt=');"><img src="hdgrpix/g12.jpg" width="85" height="85" border="0"></a>&nbsp;&nbsp;&nbsp;
      <a href="java script:goNewWin('popuphg.htm?src=hdgrpix/g11.jpg&txt=');"><img src="hdgrpix/g11.jpg" width="85" height="85" border="0"></a>&nbsp;&nbsp;&nbsp;
      <a href="java script:goNewWin('popuphg.htm?src=hdgrpix/b11.jpg&txt=');"><img src="hdgrpix/b11.jpg" width="85" height="85" border="0"></a>&nbsp;&nbsp;&nbsp;
      <a href="java script:goNewWin('popuphg.htm?src=hdgrpix/b12.jpg&txt=');"><img src="hdgrpix/b12.jpg" width="85" height="85" border="0"></a>&nbsp;&nbsp;&nbsp;
      <a href="java script:goNewWin('popuphg.htm?src=hdgrpix/b2.jpg&txt=');"><img src="hdgrpix/b2.jpg" width="85" height="85" border="0"></a>&nbsp;&nbsp;&nbsp;
      <a href="java script:goNewWin('popuphg.htm?src=hdgrpix/b5.jpg&txt=');"><img src="hdgrpix/b5.jpg" width="85" height="85" border="0"></a>&nbsp;&nbsp;&nbsp;
      <a href="java script:goNewWin('popuphg.htm?src=hdgrpix/b9.jpg&txt=');"><img src="hdgrpix/b9.jpg" width="85" height="85" border="0"></a>&nbsp;&nbsp;&nbsp;
      <a href="java script:goNewWin('popuphg.htm?src=hdgrpix/b6.jpg&txt=');"><img src="hdgrpix/b6.jpg" width="85" height="85" border="0"></a>&nbsp;&nbsp;&nbsp;
      <a href="java script:goNewWin('popuphg.htm?src=hdgrpix/b8.jpg&txt=');"><img src="hdgrpix/b8.jpg" width="85" height="85" border="0"></a>&nbsp;&nbsp;&nbsp;
      <a href="java script:goNewWin('popuphg.htm?src=hdgrpix/b4.jpg&txt=');"><img src="hdgrpix/b4.jpg" width="85" height="85" border="0"></a>&nbsp;&nbsp;&nbsp;
      <a href="java script:goNewWin('popuphg.htm?src=hdgrpix/b3.jpg&txt=');"><img src="hdgrpix/b3.jpg" width="85" height="85" border="0"></a>&nbsp;&nbsp;&nbsp;
      <a href="java script:goNewWin('popuphg.htm?src=hdgrpix/b10.jpg&txt=');"><img src="hdgrpix/b10.jpg" width="85" height="85" border="0"></a>&nbsp;&nbsp;&nbsp;
      <a href="java script:goNewWin('popuphg.htm?src=hdgrpix/ccdk15mini.jpg&txt=');"><img src="hdgrpix/ccdk15mini.jpg" width="85" height="85" border="0"></a>&nbsp;&nbsp;&nbsp;
</div>
    </td>
    </tr>
Avatar billede topperware Nybegynder
14. december 2002 - 16:51 #9
ja, den havde jeg set - så jeg ved sgu´ ikke. Er der ikke en der gider prøve lige at tage min kode foroven indsætte hvad der skal indsættes og så lige prøve om der virker - og så derefter kopiere den tilbage her til siden. Jeg håber ikke det er for meget at forlange, men det virker bare ikke hos mig, så hvis man kunne sige dette er afprøvet og virker.
Avatar billede topperware Nybegynder
14. december 2002 - 16:58 #10
Ok, nu har den de rigtige dimensioner, men scrollbaren sidder i højre side og virker altså på den vertikale led, og der er 6 rækker med billeder i stedet for en lang række. Så hvis scrollbaren lige kunne blive flyttet ned i bunden af cellen og billederne blev på en række ville det være perfekt.
Avatar billede cdc Novice
14. december 2002 - 16:58 #11
du skal nok sette din div til 2700 i stedet for 600 da der er mange billder, det er jo ingen linie skift i scrollen :o)
<div style="width: 2700; height: 150; overflow: auto">
Avatar billede topperware Nybegynder
14. december 2002 - 17:05 #12
det blev det ikke bedre af, nu er scrollbaren ikke i tabelcellen, men nederst i selve browservinduet
Avatar billede callesen Praktikant
14. december 2002 - 21:59 #13
Er det sådan:
<table border="1" STYLE="table-layout:fixed;width:600px;height:150px;">
<tr>
    <td STYLE="width:600px;height:150px;">
    <div STYLE="overflow-x:auto;overflow-y:hidden;width:600px;height:150px;display:inline;">
    <table><tr>
    <td><a href="java script:goNewWin('popuphg.htm?src=hdgrpix/aa.jpg&txt=');"><img src="hdgrpix/aa.jpg" width="85" height="85" border="0"></a></td>
      <td><a href="java script:goNewWin('popuphg.htm?src=hdgrpix/dd.jpg&txt=');"><img src="hdgrpix/dd.jpg" width="85" height="85" border="0"></a></td>
      <td><a href="java script:goNewWin('popuphg.htm?src=hdgrpix/bb.jpg&txt=');"><img src="hdgrpix/bb.jpg" width="85" height="85" border="0"></a></td>
      <td><a href="java script:goNewWin('popuphg.htm?src=hdgrpix/cc.jpg&txt=');"><img src="hdgrpix/cc.jpg" width="85" height="85" border="0"></a></td>
      <td><a href="java script:goNewWin('popuphg.htm?src=hdgrpix/g3.jpg&txt=');"><img src="hdgrpix/g3.jpg" width="85" height="85" border="0"></a></td>
      <td><a href="java script:goNewWin('popuphg.htm?src=hdgrpix/g2.jpg&txt=');"><img src="hdgrpix/g2.jpg" width="85" height="85" border="0"></a></td>
      <td><a href="java script:goNewWin('popuphg.htm?src=hdgrpix/g9.jpg&txt=');"><img src="hdgrpix/g9.jpg" width="85" height="85" border="0"></a></td>
      <td><a href="java script:goNewWin('popuphg.htm?src=hdgrpix/g4.jpg&txt=');"><img src="hdgrpix/g4.jpg" width="85" height="85" border="0"></a></td>
      <td><a href="java script:goNewWin('popuphg.htm?src=hdgrpix/g5.jpg&txt=');"><img src="hdgrpix/g5.jpg" width="85" height="85" border="0"></a></td>
      <td><a href="java script:goNewWin('popuphg.htm?src=hdgrpix/g6.jpg&txt=');"><img src="hdgrpix/g6.jpg" width="85" height="85" border="0"></a></td>
      <td><a href="java script:goNewWin('popuphg.htm?src=hdgrpix/g1.jpg&txt=');"><img src="hdgrpix/g1.jpg" width="85" height="85" border="0"></a></td>
      <td><a href="java script:goNewWin('popuphg.htm?src=hdgrpix/g10.jpg&txt=');"><img src="hdgrpix/g10.jpg" width="85" height="85" border="0"></a></td>
      <td><a href="java script:goNewWin('popuphg.htm?src=hdgrpix/g7.jpg&txt=');"><img src="hdgrpix/g7.jpg" width="85" height="85" border="0"></a></td>
      <td><a href="java script:goNewWin('popuphg.htm?src=hdgrpix/g12.jpg&txt=');"><img src="hdgrpix/g12.jpg" width="85" height="85" border="0"></a></td>
      <td><a href="java script:goNewWin('popuphg.htm?src=hdgrpix/g11.jpg&txt=');"><img src="hdgrpix/g11.jpg" width="85" height="85" border="0"></a></td>
      <td><a href="java script:goNewWin('popuphg.htm?src=hdgrpix/b11.jpg&txt=');"><img src="hdgrpix/b11.jpg" width="85" height="85" border="0"></a></td>
      <td><a href="java script:goNewWin('popuphg.htm?src=hdgrpix/b12.jpg&txt=');"><img src="hdgrpix/b12.jpg" width="85" height="85" border="0"></a></td>
      <td><a href="java script:goNewWin('popuphg.htm?src=hdgrpix/b2.jpg&txt=');"><img src="hdgrpix/b2.jpg" width="85" height="85" border="0"></a></td>
      <td><a href="java script:goNewWin('popuphg.htm?src=hdgrpix/b5.jpg&txt=');"><img src="hdgrpix/b5.jpg" width="85" height="85" border="0"></a></td>
      <td><a href="java script:goNewWin('popuphg.htm?src=hdgrpix/b9.jpg&txt=');"><img src="hdgrpix/b9.jpg" width="85" height="85" border="0"></a></td>
      <td><a href="java script:goNewWin('popuphg.htm?src=hdgrpix/b6.jpg&txt=');"><img src="hdgrpix/b6.jpg" width="85" height="85" border="0"></a></td>
      <td><a href="java script:goNewWin('popuphg.htm?src=hdgrpix/b8.jpg&txt=');"><img src="hdgrpix/b8.jpg" width="85" height="85" border="0"></a></td>
      <td><a href="java script:goNewWin('popuphg.htm?src=hdgrpix/b4.jpg&txt=');"><img src="hdgrpix/b4.jpg" width="85" height="85" border="0"></a></td>
      <td><a href="java script:goNewWin('popuphg.htm?src=hdgrpix/b3.jpg&txt=');"><img src="hdgrpix/b3.jpg" width="85" height="85" border="0"></a></td>
      <td><a href="java script:goNewWin('popuphg.htm?src=hdgrpix/b10.jpg&txt=');"><img src="hdgrpix/b10.jpg" width="85" height="85" border="0"></a></td>
      <td><a href="java script:goNewWin('popuphg.htm?src=hdgrpix/ccdk15mini.jpg&txt=');"><img src="hdgrpix/ccdk15mini.jpg" width="85" height="85" border="0"></a></td>
      </tr></table>
      </DIV>
    </td>
    </tr>

</table>
Avatar billede topperware Nybegynder
15. december 2002 - 13:01 #14
Yeps, lige i øjet.

Ved du om der er problemer med, at vise dette korrekt på en Mac.
Jeg havde nemlig brugt <iframes> til at lave det med først, men det gik ikke så godt hos Mac-brugerne. Hvis ikke, hvad kan man da ellers gøre.
Hvad med "almindelige" <frames>, er det samme problematik som med <iframes> m.h.t. Mac.

Anyway tak for hjælpen - og det gælder selvfølgelig alle.
Avatar billede callesen Praktikant
15. december 2002 - 21:17 #15
Tak for point. Nej, jeg er ikke sikker på hvordan mac-versioner vil vise dette; men de nyeste burde vise det korrekt - ihf. IE. Der vil være problemer med Opera uanset mac eller pc-version.
Avatar billede topperware Nybegynder
15. december 2002 - 21:41 #16
O.K.
Avatar billede 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.

Loading billede Opret Preview
Kategori
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.

Opret Log ind

Du kan også logge ind via nedenstående tjenester

Alle kategorier på Eksperten
Seneste spørgsmål Seneste aktivitet
18/0919:52 Libre office skriveprogram Af Frank i Office & Kontorpakker
17/0914:55 Hente WordPad til Windows 11 Af Strawberry i Andet software
17/0911:37 Persits.Upload Af bsn i ASP
16/0918:13 oprette et installationsmedie Af Malm i Windows
16/0913:11 Adapterstik stik på ladekabel til USB-C Af ErikHg i Andet software
White papers
Flere white papers »