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: - <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
12  5422 
Maybe i should try putting the img and p into separate rows of a table? What do you reckon guys?
Banfa 9,065
Recognized Expert Moderator Expert
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.
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.
Banfa 9,065
Recognized Expert Moderator Expert
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) -
<!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 9,065
Recognized Expert Moderator Expert
As an after thought do you mean "should not" rather than "cannot"? If so why?
I haven't a clue why I said that.
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
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.
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)
-
<!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 :-)
Sign in to post your reply or Sign up for a free account.
Similar topics | |
by: Nishant |
last post by:
I have a combo box with a horizontal scroll bar.
(Used SetHorizontalExtent)
The dropdown with horizontal scroll bar works fine when I have more
items in the dropdown list. However when the number of items is less,
the horizontal scroll bar comes over the last item.
If there is only one item, I am not able to see that item because of
Horizontal scroll.
|
by: Dave |
last post by:
My web site is not particularly theme-based, but it contains an Art Gallery
I'd like to display in a different perspective. I would like to horizontally
scroll it, rather than vertically - as if the viewer is virtually "walking"
through the gallery. I'm just attempting this to have this part of the page
be different.
Is horizontal scrolling okay, or will it throw our browsers into chaos and
viewers into insanity? If horizontal scrolling...
|
by: justdummy |
last post by:
Hi,
I am struggling with a problem for sometimes. I need to display a table in
a html and if the height of the table goes beyond 200 px then a vertical
scrollbar should alone appear without any horizontal scroll bar. If the
height of the table is less than 200 px then no scroll bars should appear.
Here is the html below. I tried to wrap the table around a <div> tag but
its doesn't work out as the scroll bar appear close to the scroll bar...
|
by: Boaz Ben-Porat |
last post by:
Hi all
Is there a way to simulate a click on a scrollbar (horizontal) of a FataGrid
?
I need to programmatically scroll the grid to the right/left upon some
condition, when the total width of the grid columns is greater then the
grid`s rectangle.
TIA
|
by: Jeremy Chapman |
last post by:
I've got a grid inside a div so that it's got scroll bars around it.
What I want to do is have the header row fixed at the top, so that the
vertical scroll bars scroll just the data rows of the grid while the
horizontal scroll bar scrolls both the data and the header row.
The only way I can think of doing it is putting the data portion as a
seperate grid in a div and the header in a seperate div. I would force the
header div not to have...
| | |
by: Eduard |
last post by:
I have a ASP.Net datagrid wrap in the following div:
<DIV id="divPart2" style="OVERFLOW: hidden">.
Another div controls the horizontal scrolling:
<DIV id="scroll1" style="OVERFLOW: scroll; WIDTH: 800px; LINE-HEIGHT: 0px;
HEIGHT: 17px" onscroll="javascript:
document.getElementById('divPart2').scrollLeft = this.scrollLeft;"> scrolls
the datagrid horizontally.
When the horizontal scroll box is dragged or any of the scrollbar arrows is
|
by: lolo |
last post by:
hello. happy new year.
I'm trying to build a website for my wife and she is adament on having
a horizontal thumbnail scrolling div. great. I have a good vertical
scrolling thing, but can't figure out how to make it scroll
horizontally. It's probably real simple and I just can't figure it
out....
Here is the code I have so far:
|
by: amuven |
last post by:
Hi All,
I need to put a horizontal scroll bar for 4 cells alone where my first cell in table should not contain any horizontal scroll bar .
In clear, let us say there are 5 columns in my table i want to put horizontal scroll bar only for 2nd,3rd,4th and 5th column alone where my 1st column should not horizontal scroll bar . so that I can scroll only last 4 columns .
Please some one provide me sample code as early as possible in doing...
|
by: newbie009 |
last post by:
How can I disable horizontal scroll in textbox for FireFox?
Right now 1 textbox has vertical scroll and other textbox has horizontal scroll.
It only looks like this on FireFox but it looks ugly.
http://jumbofiles.com/example.gif
I used this code but it only worked for IE not FireFox:
style="overflow: scroll; overflow-y: scroll; overflow-x: hidden; overflow:-moz-scrollbars-vertical;"
Basically I want only vertical scroll.
|
by: marktang |
last post by:
ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However, people are often confused as to whether an ONU can Work As a Router. In this blog post, we’ll explore What is ONU, What Is Router, ONU & Router’s main usage, and What is the difference between ONU and Router. Let’s take a closer look !
Part I. Meaning of...
|
by: Hystou |
last post by:
Most computers default to English, but sometimes we require a different language, especially when relocating. Forgot to request a specific language before your computer shipped? No problem! You can effortlessly switch the default language on Windows 10 without reinstalling. I'll walk you through it.
First, let's disable language synchronization. With a Microsoft account, language settings sync across devices. To prevent any complications,...
| | |
by: jinu1996 |
last post by:
In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven tapestry of website design and digital marketing. It's not merely about having a website; it's about crafting an immersive digital experience that captivates audiences and drives business growth.
The Art of Business Website Design
Your website is...
|
by: Hystou |
last post by:
Overview:
Windows 11 and 10 have less user interface control over operating system update behaviour than previous versions of Windows. In Windows 11 and 10, there is no way to turn off the Windows Update option using the Control Panel or Settings app; it automatically checks for updates and installs any it finds, whether you like it or not. For most users, this new feature is actually very convenient. If you want to control the update process,...
|
by: tracyyun |
last post by:
Dear forum friends,
With the development of smart home technology, a variety of wireless communication protocols have appeared on the market, such as Zigbee, Z-Wave, Wi-Fi, Bluetooth, etc. Each protocol has its own unique characteristics and advantages, but as a user who is planning to build a smart home system, I am a bit confused by the choice of these technologies. I'm particularly interested in Zigbee because I've heard it does some...
|
by: agi2029 |
last post by:
Let's talk about the concept of autonomous AI software engineers and no-code agents. These AIs are designed to manage the entire lifecycle of a software development project—planning, coding, testing, and deployment—without human intervention. Imagine an AI that can take a project description, break it down, write the code, debug it, and then launch it, all on its own....
Now, this would greatly impact the work of software developers. The idea...
|
by: TSSRALBI |
last post by:
Hello
I'm a network technician in training and I need your help.
I am currently learning how to create and manage the different types of VPNs and I have a question about LAN-to-LAN VPNs.
The last exercise I practiced was to create a LAN-to-LAN VPN between two Pfsense firewalls, by using IPSEC protocols.
I succeeded, with both firewalls in the same network. But I'm wondering if it's possible to do the same thing, with 2 Pfsense firewalls...
|
by: adsilva |
last post by:
A Windows Forms form does not have the event Unload, like VB6. What one acts like?
| | |
by: bsmnconsultancy |
last post by:
In today's digital era, a well-designed website is crucial for businesses looking to succeed. Whether you're a small business owner or a large corporation in Toronto, having a strong online presence can significantly impact your brand's success. BSMN Consultancy, a leader in Website Development in Toronto offers valuable insights into creating effective websites that not only look great but also perform exceptionally well. In this comprehensive...
| |
