Headline 01

Geek Answers Handbook

Html + css: horizontal scrollbars?

really markup simpel:

<div id="page-wrap">

    <div class="post horizontal">

        <h2>Headline 01</h2>

        <div class="entry">
            <p>Lorem ipsum dolor...</p>
<p class="image"><img class="alignnone" src="some.jpg" alt="" width="1024" height="768"></p>
<p class="image"><img class="alignnone" src="some.jpg" alt="" width="1024" height="768"></p>
<p class="image"><img class="alignnone" src="some.jpg" alt="" width="1024" height="768"></p>
        </div>
    </div>

    <div class="post horizontal">

        <h2>Headline 02</h2>

        <div class="entry">
            <p>Lorem ipsum dolor...</p>
            <p class="image"><img class="alignnone" src="some.jpg" alt="" width="1024" height="768"></p>
            <p class="image"><img class="alignnone" src="some.jpg" alt="" width="1024" height="768"></p>
            <p class="image"><img class="alignnone" src="some.jpg" alt="" width="1024" height="768"></p>
        </div>
    </div>

</div>

my css looks like this:

.horizontal {
    overflow-x:scroll;
    clear:both;
}

.horizontal p {
    float:left;
    width:500px;
    padding:0 20px 20px 0;
}

.horizontal p.image {
    width:1024px;
}

I have no idea how to create horizontal "frames", for example, a layout without using real frames.

Currently, the images do not swim, because with. horizontal 100% inside # page-wrap. Thus, they are aligned under each other. I want all the images to be side by side inside. Horizontally. Each bar should have a separate scrollbar that allows me to scroll through the images.

I want to create this:

http://i.stack.imgur.com/p2Vfk.png

Any idea how to solve this?

, , , ... . , , ( , scollbar)

. jquery , js?

+5
2

, , :

  • , , , .

  • , .

  • , , .

CSS :

.horizontal p.image {
    display: inline;         /* 1 */
}

.entry {
    overflow-x: scroll;      /* 2 */
    white-space: nowrap;     /* 3 */
}

CSS ( / , ): http://jsfiddle.net/TT9hq/

overflow-x: scroll overflow-x: auto, , () , .

+2

-, p, , , . , - display:inline . , overflow-x: auto div overflow-x:scroll

: p s, display:inline p s.

0

More articles:


All Articles