PHP picture layout

[DaSe]

Hello guys ( and Phil ) as usual this month....

Ok - looks like my css skills fail in here after strugling with the layout of the pics. I have this piece of code:

$default_pic = "members/0/image01.jpg";
$user_pic = "<img src='$default_pic' width='94px;' height='86' border='1px;' />"; 


	if($i<12) {
	
	$membersShow .='<a href="[URL unfurl="true"]http://localhost/mu/muProfile.php?id='[/URL] . $id . '">' . $user_pic . '</a>';
	$membersShow .='<a href="[URL unfurl="true"]http://localhost/mu/muProfile.php?id='[/URL] . $id . '"id="firstnameLink2"><br/>' .$firstname.  '</a></tr>';
   
$i++;


}

The problem is : I want to display each picture next to each other but when <?php print "$membersShow" ?> is invoked it prints all the pitures in a vertical row. I tried to place <table> or < td> <br/> within this code - but nowhere it works fine. I know it might be a question for another forum but since it's php I decided to place it in here. Regards...

 

[Noway2]

Try floating the elements (pictures). The best way to do that may be to create a <div> block around each one and then create a css class for it.

For example:

.figure
{
float: left;
display: inline-block;
vertical-align: top;
width: 96px; // 94 + left and right border
margin: 1px solid;
}

This will cause them to in a row, with the top edges aligned.

 

[vacunita]

No need to float, as links and images are by nature inline elements and line themselves up next to each other as long as they fit.

However your code has a stray closing <tr> tag for no apparent reason, as there are no <td> tags and no actual table has been opened anywhere. And you also have a break tag </br> there that causes a line break.

$default_pic = "members/0/image01.jpg";
$user_pic = "<img src='$default_pic' width='94px;' height='86' border='1px;' />";


    if($i<12) {
    
    $membersShow .='<a href="[URL unfurl="true"]http://localhost/mu/muProfile.php?id='[/URL] . $id . '">' . $user_pic . '</a>';
    $membersShow .='<a href="[URL unfurl="true"]http://localhost/mu/muProfile.php?id='[/URL] . $id . '"id="firstnameLink2">[red]<br/>[/red]' .$firstname.  '</a>[red]</tr>[/red]';
   
$i++;


}

Remove all those and you should be fine.

----------------------------------
Phil AKA Vacunita
----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.

Behind the Web, Tips and Tricks for Web Development.

http://behindtheweb.blogspot.com/

 

[DaSe]

Thanks to all - before your posts I had managed to place them horizontally a bit and done a small scrollbar workaround which is not the same but looks ok...I might use your suggestion. For the time being - here's the fresh site ( that I'm still improving for now):

http://www.thebluetemple.com

Regards all...

 

[spamjim]

Your next step might be to have PHP scale/crop the userpic on upload so that it is not squished in the HTML.

 

[DaSe]

Yes, this is exactly what I'll try to do next..

 

[vacunita]

I am confused. your page shows them placed vertically. One on top of the other.



----------------------------------
Phil AKA Vacunita
----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.

Behind the Web, Tips and Tricks for Web Development.

http://behindtheweb.blogspot.com/

 

[DaSe]

Sorry for not being concise enough - I mean the "See all members" page ( the link at the bottom left. The pics there are placed horizontally...

 

[vacunita]

Ahh, yes that makes sense, sorry.

----------------------------------
Phil AKA Vacunita
----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.

Behind the Web, Tips and Tricks for Web Development.

http://behindtheweb.blogspot.com/

 

[DaSe]

The

http://www.thebluetemple.com

site is live and seems working fine for now so everyone is welcome to register ( of course with moderate injections guys... ) You can embed your video, post your say or chat for now...I'd be grateful if anyone lets me know if the site is vulnerable - I've tried to make it safe(er) after all...anyway...