The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

 
Reply to this topicStart new topic
> I would like some help with a basic image and text problem, Aligning text with images
Ziggletooth
post 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?
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Ziggletooth
post 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
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Jan 1 2020, 07:27 PM
Post #3


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,716
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.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Ziggletooth
post 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
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Jan 2 2020, 02:21 PM
Post #5


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,716
Joined: 9-August 06
Member No.: 6



Thanks, but what do you mean by confectionery? laugh.gif
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
CharlesEF
post 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



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.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Jan 2 2020, 09:34 PM
Post #7


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,716
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. happy.gif

IPB Image

User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Darin McGrew
post 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.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Jan 3 2020, 07:09 AM
Post #9


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,716
Joined: 9-August 06
Member No.: 6



Mmmm.... wub.gif
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Ziggletooth
post 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?
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Jan 3 2020, 09:44 AM
Post #11


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,716
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...
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post

Reply to this topicStart new topic
1 User(s) are reading this topic (1 Guests and 0 Anonymous Users)
0 Members:

 



- Lo-Fi Version Time is now: 28th March 2024 - 06:48 PM