Display a series of images with text headers like a paragraph, Treating a DIV like a word in a paragraph |
Display a series of images with text headers like a paragraph, Treating a DIV like a word in a paragraph |
PapaGeek |
Sep 3 2022, 01:49 PM
Post
#1
|
Newbie Group: Members Posts: 10 Joined: 2-January 22 Member No.: 28,211 |
I have a page where I am displaying a series of 5 large image on a single, or multiple, lines. I would like to find a way of displaying a text header above each image.
http://www.papageek.com/Tile1/index.htm My current coding is: <p><img height=276px width=414px src=Basic.jpg> <img height=276px width=414px src=River1.jpg> <img height=276px width=414px src=River2.jpg> <img height=276px width=414px src=InnCath.jpg> <img height=276px width=414px src=Riv1Cath.jpg></p> Basically, I want to change each img lines into something like: <p> <div class=both>Basic<br><img height=276px width=414px src=Basic.jpg></div> <div class=both>R 1<br><img height=276px width=414px src=River1.jpg></div> <div class=both>R 2<br><img height=276px width=414px src=River2.jpg></div> <div class=both>Inns<br><img height=276px width=414px src=InnCath.jpg></div> <div class=both>RInn<br><img height=276px width=414px src=Riv1Cath.jpg></div> </p> Then, if the image doesn’t fit on the line, both the image and the header will move to the start of the next line. http://www.papageek.com/Tile1/index.htm You can look at the example of the 5 images being treated as words in a paragraph, and like words, as the page width gets smaller and another word does not fit on the line, the word (image) is just moved to the start of the next line. I want to create a DIV that acts like a single word in a paragraph. |
pandy |
Sep 3 2022, 10:52 PM
Post
#2
|
🌟Computer says no🌟 Group: WDG Moderators Posts: 20,733 Joined: 9-August 06 Member No.: 6 |
Floats. I.e. each image and its caption must be contained in for example a DIV and then you float the DIVs left. There's a little more to it, but basically.
There is a good old writeup about that. Lets see if I can find it. Yes, I could! :-D http://realworldstyle.com/thumb_float.html |
Brian Chandler |
Sep 4 2022, 10:06 AM
Post
#3
|
Jocular coder Group: Members Posts: 2,460 Joined: 31-August 06 Member No.: 43 |
Floats. I.e. each image and its caption must be contained in for example a DIV and then you float the DIVs left. There's a little more to it, but basically. There is a good old writeup about that. Lets see if I can find it. Yes, I could! :-D http://realworldstyle.com/thumb_float.html I recommend you read up on flex display. I would avoid floats everywhere it is possible: they are an ill-thought-out mess. I note that Pandy's reference seems to be dated 2002. |
pandy |
Sep 4 2022, 10:43 PM
Post
#4
|
🌟Computer says no🌟 Group: WDG Moderators Posts: 20,733 Joined: 9-August 06 Member No.: 6 |
I said it was old, didn't I? That doesn't make it bad. It's an easy to follow writeup. Your dislike for floats and almost everything that has to do with CSS doesn't mean it is bad.
|
Lo-Fi Version | Time is now: 27th April 2024 - 08:55 AM |