PHP MySQL Picture/Data Dynamic Alignment

Question

Morning all,

I'm having an alignment issue.

I am using a MYSQL array to create a sports profile page.

I want it to display the image, then to the right, show their name, position and number below each other.

Then i want it to dynamically display 3 or 4 of these next to each other before swapping down to the next line.

I have managed to get it to work with just the pictures, not with the text in between. they all just show on new lines currently.

<style>
   #container .profile{
               display: inline-block;
               vertical-align:top;
                      }
</style>
<div class="profile">
<img src="wp-content/uploads/profile/jh7.jpg" alt="" /><br />
<h3 class="widget-title">Player 1</h3>
<p>Defence</br>#7</br></br>
<img src="wp-content/uploads/profile/dw21.jpg" alt="" /><br />
<h3 class="widget-title">Player 2</h3>
<p>Defence</br>#21</br></br>
<img src="wp-content/uploads/profile/pn22.jpg" alt="" /><br /> 
<h3 class="widget-title">Player 3</h3>
<p>Defence</br>#22</br></br>
</div>
                </div><!-- .entry-content -->


</div>

Thanks guys

This is a CSS question. Please replace the PHP with the HTML that is outputted, and then remove the PHP and MySQL tags. — Sverri M. Olsen
– Sverri M. Olsen, Commented Jan 1, 2015 at 12:06
@SverriM.Olsen Although, to be fair, the OP might not have known that! — Strawberry
– Strawberry, Commented Jan 1, 2015 at 12:06

SaidbakR · Accepted Answer · 2015-01-01 12:20:10Z

1

You can use float left for the image:

<style>
    .profile img{
        float: left;
          margin-right: 5px;
    }    
  </style>

Checkout this DEMO: http://jsbin.com/jigotamamu/1/

answered Jan 1, 2015 at 12:20

SaidbakR

13.6k23 gold badges113 silver badges202 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

MongoUK Over a year ago

Thanks for that, that's almost cracked it.

MongoUK Over a year ago

I now have the text next to the pictures as desired. Can I get it so that there are 3 or 4 of these in a line rather than 1 on each row? Like columns on the page?

SaidbakR Over a year ago

Sure, make them in a list and style it horizontally! i.e from your initial code, replace <br /> with <ul><li>Number</li><li>another</li>...</ul>

MongoUK Over a year ago

I mean an inclusive set of image and the associated text, then another set etc, wouldn't listing horizontally just make the text go side by side?

SaidbakR Over a year ago

Checkout this demo and place any html tags you want: jsbin.com/jigotamamu/2/edit

|

sodawillow · Accepted Answer · 2015-01-01 12:56:10Z

1

Quick example : float the images and clear the float with a block element having a clear: both property :

http://jsfiddle.net/L8jtwkw1/2/

You can wrap each profile in a container and use inline block to list them horizontally then.

edited Jan 1, 2015 at 12:56

answered Jan 1, 2015 at 12:10

sodawillow

13.3k4 gold badges36 silver badges44 bronze badges

4 Comments

Strawberry Over a year ago

Well, that doesn't exactly put three to a row

Strawberry Over a year ago

Yeah, I think the OP's issue is about css formatting in general - but, getting three in a row in particular.

MongoUK Over a year ago

I need the text next to the picture, then the other pictures with text, to line horizontally

sodawillow Over a year ago

Edited my answer with an updated link to reflect what you want :)

MongoUK · Accepted Answer · 2015-01-01 23:46:12Z

1

It still didn't do exactly what I was after, However I managed to sort it by putting a column in:

<style> 
.profile img{ 
      float: left; 
      margin-right: 10px; 
      margin-top: 2px; } 
.profile h3 { display: inline-block; } 
.profile pos{ } 
.column-left{ float: left; width: 33%; } 
</style>

answered Jan 1, 2015 at 23:46

MongoUK

19310 bronze badges

Comments

VMAtm · Accepted Answer · 2015-01-01 12:11:54Z

0

I think that thie problem is in <h3> tag - you need either replace it with <span> or override styles for it.

For example:

echo '<img src="wp-content/uploads/profile/'.$row['Id'].'.jpg" alt="" />',
   '<span class="widget-title">'.$row['FirstName'].' '.$row['Surname'].'</span>',
    $row['PositionLong'].'</br>',
   '#'.$row['Number'].'</br>';

If you show the css styles for widget-title, we can help you.

answered Jan 1, 2015 at 12:11

VMAtm

28.4k17 gold badges85 silver badges133 bronze badges

Collectives™ on Stack Overflow

PHP MySQL Picture/Data Dynamic Alignment

4 Answers 4

7 Comments

4 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

7 Comments

4 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related