I would like some help with a basic image and text problem, Aligning text with images |
I would like some help with a basic image and text problem, Aligning text with images |
Ziggletooth |
Jan 1 2020, 06:47 AM
Post
#1
|
Newbie Group: Members Posts: 13 Joined: 1-January 20 Member No.: 27,107 |
Right now I have this
<div class="img-and-text"> <img src="imgone.png" alt="sometext" /> <p>Some text</p> <img src="imgtwo.png" alt="moretext"> <p>Some more text</p> </div> This produces image one with it's text under it, then under that there is image two with it's text underneath it. I would like my images to be side by side with it's respective text underneath each of them. In addition to this I would also like this placement to be static and stay this way even if I change the size of the browser.So if I reduce the width of the browser it cuts it off and doesn't reform it to one on top of the other. Can someone help me with this please? |
Ziggletooth |
Jan 1 2020, 07:42 AM
Post
#2
|
Newbie Group: Members Posts: 13 Joined: 1-January 20 Member No.: 27,107 |
Update. Just learned what a css is... so now I have
*.html <link rel="stylesheet" type="text/css" href="style.css" /> <div class="myclass"> <img src="img.png" /> <div>Hello 1</div> </div> <div class="myclass"> <img src="img.png" /> <div>Hello 2</div> </div> *.css .myclass { float : left; margin-right : 50px; text-align: left; height : 325px; } .myclass img { height : 325px; width : 325px; } This aligns everything correctly now the only problem is it reforming into one above the other when changing the width of the browser. Can someone help me make this static so it always stays in position? This post has been edited by Ziggletooth: Jan 1 2020, 07:43 AM |
pandy |
Jan 1 2020, 07:27 PM
Post
#3
|
🌟Computer says no🌟 Group: WDG Moderators Posts: 20,730 Joined: 9-August 06 Member No.: 6 |
Do you want two images in a row, always? You could wrap a DIV around each image pair and give it an explicit width.
BTW keep width and height for the images in the HTML. That helps the browser to draw the page. It will reserve space for the images and the page will load nicer without reflowing as the images fill in. Very noticable difference with large images. There is no point in moving that bit to CSS, really. |
Ziggletooth |
Jan 2 2020, 07:08 AM
Post
#4
|
Newbie Group: Members Posts: 13 Joined: 1-January 20 Member No.: 27,107 |
Thanks Pandy that worked!
While I have reservations on your views of confectionery I do admire your html knowledge. This post has been edited by Ziggletooth: Jan 2 2020, 08:03 AM |
pandy |
Jan 2 2020, 02:21 PM
Post
#5
|
🌟Computer says no🌟 Group: WDG Moderators Posts: 20,730 Joined: 9-August 06 Member No.: 6 |
Thanks, but what do you mean by confectionery?
|
CharlesEF |
Jan 2 2020, 04:31 PM
Post
#6
|
Programming Fanatic Group: Members Posts: 1,981 Joined: 27-April 13 From: Edinburg, Texas Member No.: 19,088 |
|
pandy |
Jan 2 2020, 09:34 PM
Post
#7
|
🌟Computer says no🌟 Group: WDG Moderators Posts: 20,730 Joined: 9-August 06 Member No.: 6 |
Of course! I had totally forgot about that. I actually love donuts. Real ones. And not those with glazing on them. And they shall be cooked in lard. I don't eat them but I love them.
|
Darin McGrew |
Jan 3 2020, 03:00 AM
Post
#8
|
WDG Member Group: Root Admin Posts: 8,365 Joined: 4-August 06 From: Mountain View, CA Member No.: 3 |
QUOTE I actually love donuts. Real ones. And not those with glazing on them. I like old-fashioned donuts myself. Or better yet, an apple fritter, as long as it's done right, with a crunchy outside and a moist, tender inside. |
pandy |
Jan 3 2020, 07:09 AM
Post
#9
|
🌟Computer says no🌟 Group: WDG Moderators Posts: 20,730 Joined: 9-August 06 Member No.: 6 |
Mmmm....
|
Ziggletooth |
Jan 3 2020, 08:55 AM
Post
#10
|
Newbie Group: Members Posts: 13 Joined: 1-January 20 Member No.: 27,107 |
On a far less delicious subject, I have one more problem that has arisen.
I have a series of links composed of three parts. I want to arrange these links in a matrix of some sort so that I may easily find and click an entry. Obviously a table would be great for two parts. aa - ab - ac ba - bb - bc ca - cb - cc I found this useful for that. table style="width:50%"> <tr> <td><a href="link">AA</a></td> <td><a href="link">AB</a></td> </tr> <tr> <td><a href="link">BA</a></td> <td><a href="link">BB</a></td> </tr> </table> What would be the best implementation of a three part system? arranging aaa aab aac etc? I know I'm a dimension short here, but what do you think would be the best way to arrange this on one page? |
pandy |
Jan 3 2020, 09:44 AM
Post
#11
|
🌟Computer says no🌟 Group: WDG Moderators Posts: 20,730 Joined: 9-August 06 Member No.: 6 |
In a more structurally sound way than a table, you mean?
This is a little simplistic, but it works. CODE .nav { list-style: none; margin: 0; padding: 0; clear: left } .nav li { float: left } CODE <ul class="nav"> <li>aa</li> <li>ab</li> <li>ac</li> </ul> <ul class="nav"> <li>ba</li> <li>bb</li> <li>bc</li> </ul> <ul class="nav"> <li>ca</li> <li>cb</li> <li>cc</li> </ul> You'd probably want to add back some margin and padding here and there... |
Lo-Fi Version | Time is now: 23rd April 2024 - 04:19 PM |