Horizontal scroll - img & p

ryrocks

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/horizon...l_example.html

Here's the code:

Expand|Select|Wrap|Line Numbers

 <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

ryrocks

Maybe i should try putting the img and p into separate rows of a table? What do you reckon guys?

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.

drhowarddrfine

A 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.

Banfa

Quote:

Originally Posted by drhowarddrfine

A 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)

Expand|Select|Wrap|Line Numbers

 
<!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>

Banfa

As an after thought do you mean "should not" rather than "cannot"? If so why?

drhowarddrfine

I haven't a clue why I said that.

ryrocks

Quote:

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 tags does nothing, the text is still displayed next to the images, not underneath

ryrocks

Quote:

Originally Posted by drhowarddrfine

A 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.

ryrocks

Quote:

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)

Expand|Select|Wrap|Line Numbers

 
<!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>

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 :-)

ryrocks

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:

Expand|Select|Wrap|Line Numbers

 
<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!

Banfa

Quote:

Originally Posted by ryrocks

This results in the same problem. Removing ' display: inline;' and taking the text out of the 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 tags.

ryrocks

Quote:

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 tags.

Well I get the same result whether I keep it in the P tags or not, It's fixed now anyway... so nyah!

Horizontal scroll - img & p

re: Horizontal scroll - img & p

re: Horizontal scroll - img & p

re: Horizontal scroll - img & p

re: Horizontal scroll - img & p

re: Horizontal scroll - img & p

re: Horizontal scroll - img & p

re: Horizontal scroll - img & p

re: Horizontal scroll - img & p

re: Horizontal scroll - img & p

re: Horizontal scroll - img & p

re: Horizontal scroll - img & p

re: Horizontal scroll - img & p

Similar HTML / CSS bytes

/bytes/development

/bytes/it

/bytes/about