Box that contains picture and titles

[Irantwomiles]

Hey every Irantwomiles here, this is my first post so I'm sorry if some things or not the way that they are suppose to be, but my question is this. How do I create a box so that I can have a picture in it with a title above the picture. To be exact I'm trying to recreate something like this https://www.hydrapvp.com/staff . I know a lot of forums don't like to just give out code, so even a link in the right direction would mean a lot, thanks!

[Ronald Roe]

Copied straight from the HTML on the site:

<div class="col-md-3">
<a href="./user?u=Doxify" class="staff-panel">
<div class="staff-avatar"><img src="https://visage.surgeplay.com/full/192/d3bc99bc14ab41368d5980027e07ca62" alt="Doxify's Avatar" class=""></div>
<div class="staff-body">
<h4>Doxify</h4>
</div>
</a>
</div>

Then, you just add CSS styles to give it width, a gray background and to make sure the title sits in the right position.

What is your code skill level? Do you know CSS?

[TheGAME1264]

It looks like a customized version of Xenforo forums with some additional non-forum pages put onto it.

https://xenforo.com/community/

They also use FontAwesome for some of the CSS.

[Irantwomiles]

Hey, thanks for the reply. Yea, I took a look at that but I want it so each "box" has its own thing so if you click on it, it will take you to a different page. And my skill is quite basic. I know basic html and css, I'm more of a Java dev tbh. new territory for me.

[Irantwomiles]

Thanks for the reply. At the moment I'm not too worried about their forums. I know xenforo has a lot to offer, but I'm just not to that point of development yet.

[TheGAME1264]

I'm confused. Are you talking about a hyperlink in general? Something like <a href="some-page">(the image/div code)</a> ? Or are you talking about something more specific?

[Ronald Roe]

To change where it links to, you'l need to edit the href= part in the second line. You'll put the address there between quote marks.

[Irantwomiles]

Ok thanks. I actually figured it out and its looking nice. I have a new question. Right now everything is hardcoded and I'm simply not the type of guy to just leave it like that, I eventually need this to be automated since its going to be connected to a MySQL database. I know that I'll have to do that with PhP and this is not the right place, but I don't know how to make it so I have a list of images with gaps between them.

[TheGAME1264]

This is the general idea on how you'll retrieve data from a database and display it on a web page.

Lesson 20: Retrieve data from a databaseentutorial - HTML.net

How exactly you do it for your specific case will depend on how you structure your data, what fields you use, how you want things to display, etc.

[Ronald Roe]

Ok thanks. I actually figured it out and its looking nice. I have a new question. Right now everything is hardcoded and I'm simply not the type of guy to just leave it like that, I eventually need this to be automated since its going to be connected to a MySQL database. I know that I'll have to do that with PhP and this is not the right place, but I don't know how to make it so I have a list of images with gaps between them.

Of course this is the right place. WDF has more developers than designers, so you'll get the help you need.

The nutshell version of what you're going to do:
Store the image's location, text content and any other information you want in the database (the part GAME mentions)
Use PHP to retrieve the information and store it in an array
Use PHP to loop through the array, outputting each iteration as HTML