How do I add a simple scroll bar to this HTML?

Question

Level 1

0 points

How do I add a simple scroll bar to this HTML?

Apologies to post again so soon. Thanks to Wyodor I was able to get the basic horixontal HTML set up.

How do I add a scroll bar to this html and where?

I really hope I can be helped!

<style type="text/css">
<!--
#div1 {
     width: 1000px;
     height: 120px;
     display : block;
     }
#div1 ul {
     padding: 0px;
     }
#div1 li {
     display: inline;
     padding: 0px;
     }
-->
</style>
<div id="div1">
     <ul>
          <li><img src="image.png" alt="My Image" width="100" height="100" alt="" /></li>
          <li><img src="image.png" alt="My Image" width="100" height="100" alt="" /></li>
          <li><img src="image.png" alt="My Image" width="100" height="100" alt="" /></li>
          <li><img src="image.png" alt="My Image" width="100" height="100" alt="" /></li>
          <li><img src="image.png" alt="My Image" width="100" height="100" alt="" /></li>
          <li><img src="image.png" alt="My Image" width="100" height="100" alt="" /></li>
          <li><img src="image.png" alt="My Image" width="100" height="100" alt="" /></li>
          <li><img src="image.png" alt="My Image" width="100" height="100" alt="" /></li>
          <li><img src="image.png" alt="My Image" width="100" height="100" alt="" /></li>
     </ul>
</div>

Thanks again

iMac, Mac OS X (10.6.7)

Posted on Jun 21, 2011 3:28 PM

Reply

Answer 1

Koeklin

Level 4

1,125 points

Jun 22, 2011 1:38 AM in response to UKTOG

Bonjour

Something like this...

<!--

* {

margin: 0;

padding: 0;

}

div {

width: 400px;

height: 116px;

overflow-x: scroll;

overflow-y: hidden;

}

ul {

display :block;

width: 1000px;

height: 100px;

}

li {

float:left;

}

img {

width: 100px;

height: 100px;

}

-->

</style>

<div>

<ul>

</ul>

</div>

Reply

Answer 2

UKTOG Author

Level 1

0 points

Jun 22, 2011 2:56 AM in response to Koeklin

Thank you Koeklin!

Only one problem, I am using images that are

WIDTH -1013px by HEIGHT- 675

and

WIDTH - 450 by HEIGHT 675

You have fixed my problem by stopping the images stacking.... but in this html it will only let me insert ither landscape or portrait images

eg

width: 1013px;

height: 675px;

How do I get around the problem of the images stacking, but also have land scape and portrait images in one line?? All im after is a simple scrolling bow with my images in in, all the same height in px but different lengths?

Reply

Answer 3

Wyodor

Level 6

19,930 points

Jun 22, 2011 3:00 AM in response to UKTOG

Then change the numbers :

<img src="image.png" alt="My Image" width="100" height="100" alt="" />

And start learning HTML & CSS.

Tutorials galore on the internet.

Reply

Answer 4

UKTOG Author

Level 1

0 points

Jun 22, 2011 4:38 AM in response to Wyodor

Does that not counteract with this?

}

img {

width: 100px;

height: 100px;

}

-->

Which seems to be the only way to keep the images next to each other and not stacking?

Awfully sorry Wyodor, I have spent the last 24 hours scanning the internet for solutions. Am getting desperate

HTML 1

I can have landscape and portraits next to eachother in one line. However NO scroll Bar.

-------------------------------------------------------------------------------- ----------------------------------------------------------------------------

<!--

#div1 {

width: 4000px;

height: 657px;

overflow: auto;

display : block;

}

#div1 ul {

padding: 0px;

}

#div1 li {

display: inline;

padding: 0px;

}

-->

</style>

<ul>

</ul>

</div>

-------------------------------------------------------------------------------- ----------------------------------------------------------------------------

HTML 2

Scroll Bar but Images Stacking

<!--

* {

margin: 0;

padding: 0;

}

div {

width: 700px;

height: 700px;

overflow-x: scroll;

overflow-y: hidden;

}

ul {

display :block;

width: 1000px;

height: 800px;

}

li {

float:left;

}

-->

</style>

<div>

<ul>

</ul>

</div>

-------------------------------------------------------------------------------- ----------------------------------------------------------------------------

Reply