Horizontal scroll - img & p

Collapse
X
Collapse
 
  • Page of 1
  • Time
  • Show
Clear All
new posts
Previous template Next
  • ryrocks
    New Member
    • May 2008
    • 19
    #1

    Horizontal scroll - img & p

    Hello everyone!

    Im having a little trouble with my horizontal scrolling set of video thumbnails.

    I've got 6 video thumbnails that the user scrolls through horizontally, I've got this working fine with the images. However, I want a small peice of text underneath each image - the title of the video.

    But i can't get the text to display below the image without messing up the horizontal scrolling!

    Here's an online example:
    http://10.132.0.167/medialab/horizontal_scroll_example.html


    Here's the code:

    Code:
    <style>
.photo-list {
 margin: 0;
 padding: 0;
 height: 130px;
 width: 558px;
 list-style: none;
 overflow: auto;
 white-space:nowrap;
}
.photo-list li {
 display: inline;
}
.photo-list p {
 display: inline;
}
.photo-list img {
 height: 82px;
 width: 108px;
 border: 0;
}

</style>

</head>

<body>

<ul class="photo-list">
     <li><img src="images/vid_thumb.jpg" alt=""><p>video 1</p></li>
     <li><img src="images/vid_thumb.jpg" alt=""><p>video 2</p></li>
     <li><img src="images/vid_thumb.jpg" alt=""><p>video 3</p></li>
     <li><img src="images/vid_thumb.jpg" alt=""><p>video 4</p></li>
     <li><img src="images/vid_thumb.jpg" alt=""><p>video 5</p></li>
     <li><img src="images/vid_thumb.jpg" alt=""><p>video 6</p></li>
</ul>
    Your help would be much appreaciated!

    Thanks in advance

    -Ryan
    Last edited by eWish; Jul 17 '08, 03:33 AM. Reason: Please use code tags
    Tags: None
    • ryrocks
      New Member
      • May 2008
      • 19
      #2
      Maybe i should try putting the img and p into separate rows of a table? What do you reckon guys?

        Comment

        • Banfa
          Recognized Expert Expert
          • Feb 2006
          • 9067
          #3
          Try removing

          .photo-list p {
          display: inline;
          }

          from the CSS you don't want the paragraph inline, you want it below the image, you may want to centre the text in the paragraph though.

            Comment

            • drhowarddrfine
              Recognized Expert Expert
              • Sep 2006
              • 7434
              #4
              A <p> is a block level element and cannot be made 'inline'.

              What you can do is make the image 'display:block' and then, if necessary, adjust height/width and float them left to actually keep them inline.

                Comment

                • Banfa
                  Recognized Expert Expert
                  • Feb 2006
                  • 9067
                  #5
                  Originally posted by drhowarddrfine
                  A <p> is a block level element and cannot be made 'inline'.
                  Yes you can in the same way you can make span (and other inline elements) block using display: block. In fact that is what these styles are for surely.

                  Anyway try this completely conforming code (at least it validates in the W3C HTML and CSS validators)

                  [code=html]
                  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
                  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

                  <html xmlns="http://www.w3.org/1999/xhtml">
                  <head>
                  <title>Div inline test</title>
                  <meta http-equiv="Content-Type" content="text/html; charset=us-ascii" />
                  <style type="text/css">
                  p {
                  display: inline;
                  }
                  span {
                  display: block;
                  }
                  </style>
                  </head>
                  <body>
                  <p>Division 1</p>
                  <p>Division 2</p>
                  <div>
                  <span>Span 1</span><span>Span 2</span>
                  </div>
                  </body>
                  </html>
                  [/code]

                    Comment

                    • Banfa
                      Recognized Expert Expert
                      • Feb 2006
                      • 9067
                      #6
                      As an after thought do you mean "should not" rather than "cannot"? If so why?

                        Comment

                        • drhowarddrfine
                          Recognized Expert Expert
                          • Sep 2006
                          • 7434
                          #7
                          I haven't a clue why I said that.

                            Comment

                            • ryrocks
                              New Member
                              • May 2008
                              • 19
                              #8
                              Originally posted by Banfa
                              Try removing

                              .photo-list p {
                              display: inline;
                              }

                              from the CSS you don't want the paragraph inline, you want it below the image, you may want to centre the text in the paragraph though.
                              This results in the same problem. Removing ' display: inline;' and taking the text out of the <p> tags does nothing, the text is still displayed next to the images, not underneath

                                Comment

                                • ryrocks
                                  New Member
                                  • May 2008
                                  • 19
                                  #9
                                  Originally posted by drhowarddrfine
                                  A <p> is a block level element and cannot be made 'inline'.

                                  What you can do is make the image 'display:block' and then, if necessary, adjust height/width and float them left to actually keep them inline.
                                  displaying the image as 'block' does make the text go under the image but it also makes the overflow display vertically, not horizontally.
                                  Floating the images 'left' makes the images bunch together in an untidy fashion.

                                    Comment

                                    • ryrocks
                                      New Member
                                      • May 2008
                                      • 19
                                      #10
                                      Originally posted by Banfa
                                      Yes you can in the same way you can make span (and other inline elements) block using display: block. In fact that is what these styles are for surely.

                                      Anyway try this completely conforming code (at least it validates in the W3C HTML and CSS validators)

                                      [code=html]
                                      <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
                                      "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

                                      <html xmlns="http://www.w3.org/1999/xhtml">
                                      <head>
                                      <title>Div inline test</title>
                                      <meta http-equiv="Content-Type" content="text/html; charset=us-ascii" />
                                      <style type="text/css">
                                      p {
                                      display: inline;
                                      }
                                      span {
                                      display: block;
                                      }
                                      </style>
                                      </head>
                                      <body>
                                      <p>Division 1</p>
                                      <p>Division 2</p>
                                      <div>
                                      <span>Span 1</span><span>Span 2</span>
                                      </div>
                                      </body>
                                      </html>
                                      [/code]
                                      I understand how this code shows the values of 'inline' and 'block, how can this effectively be applied to my problem?
                                      Thanks for your help :-)

                                        Comment

                                        • ryrocks
                                          New Member
                                          • May 2008
                                          • 19
                                          #11
                                          Well, I've stuck the content into a table. Image in the top row, text in the bottom. There is a div holding the table with overflow: auto and white-space: nowrap... works a treat :-) I didn't really wanna use table, but se lave!

                                          Here's the working code:

                                          Code:
                                          <style>
#holder {
 margin: 0;
 padding: 0;
 height: 230px;
 width: 358px;
 list-style: none;
 overflow: auto;
 white-space:nowrap;
}

</style>


</head>

<body>

<div id="holder">
<table width="700" height="151" border="0">
  <tr>
    <td width="158"><img src="images/vid_thumb_02.jpg" width="130" height="120" /></td>
    <td width="379"><img src="images/vid_thumb_02.jpg" width="130" height="120" /></td>
    <td width="33"><img src="images/vid_thumb_02.jpg" alt="" width="130" height="120" /></td>
    <td width="33"><img src="images/vid_thumb_02.jpg" alt="" width="130" height="120" /></td>
    <td width="33"><img src="images/vid_thumb_02.jpg" alt="" width="130" height="120" /></td>
    <td width="38"><img src="images/vid_thumb_02.jpg" alt="" width="130" height="120" /></td>
  </tr>
  <tr>
    <td><div align="center">mong vid</div></td>
    <td><div align="center">bong vid</div></td>
    <td><div align="center">long vid</div></td>
    <td><div align="center">hong vid</div></td>
    <td><div align="center">song vid</div></td>
    <td><div align="center">trong vid</div></td>
  </tr>
</table>
</div>

</body>
                                          Thank you to everyone for their help!

                                            Comment

                                            • Banfa
                                              Recognized Expert Expert
                                              • Feb 2006
                                              • 9067
                                              #12
                                              Originally posted by ryrocks
                                              This results in the same problem. Removing ' display: inline;' and taking the text out of the <p> tags does nothing, the text is still displayed next to the images, not underneath
                                              That isn't what I said to do, I said remove the CSS I said nothing about removing the text from the <p> tags.

                                                Comment

                                                • ryrocks
                                                  New Member
                                                  • May 2008
                                                  • 19
                                                  #13
                                                  Originally posted by Banfa
                                                  That isn't what I said to do, I said remove the CSS I said nothing about removing the text from the <p> tags.
                                                  Well I get the same result whether I keep it in the P tags or not, It's fixed now anyway... so nyah!

                                                    Comment

                                                    Previous template Next
                                                    Working...