Printable Version of Topic

Click here to view this topic in its original format

HTMLHelp Forums _ Markup (HTML, XHTML, XML) _ I would like some help with a basic image and text problem

Posted by: Ziggletooth Jan 1 2020, 06:47 AM

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?

Posted by: Ziggletooth Jan 1 2020, 07:42 AM

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?

Posted by: pandy Jan 1 2020, 07:27 PM

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.

Posted by: Ziggletooth Jan 2 2020, 07:08 AM

Thanks Pandy that worked!

While I have reservations on your views of confectionery I do admire your html knowledge.

Posted by: pandy Jan 2 2020, 02:21 PM

Thanks, but what do you mean by confectionery? laugh.gif

Posted by: CharlesEF Jan 2 2020, 04:31 PM

QUOTE(pandy @ Jan 2 2020, 01:21 PM) *

Thanks, but what do you mean by confectionery? laugh.gif
I think it is a reference to your ' Don't like donuts' statement.

Posted by: pandy Jan 2 2020, 09:34 PM

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. happy.gif

IPB Image


Posted by: Darin McGrew Jan 3 2020, 03:00 AM

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.

Posted by: pandy Jan 3 2020, 07:09 AM

Mmmm.... wub.gif

Posted by: Ziggletooth Jan 3 2020, 08:55 AM

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?

Posted by: pandy Jan 3 2020, 09:44 AM

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

Powered by Invision Power Board (http://www.invisionboard.com)
© Invision Power Services (http://www.invisionpower.com)