PHP code for displaying images on the same level

Is there a way to position images side by side in PHP? For example:

image image image image.

Currently, with the following code:

print "</h2><br><a href='form.php'><img src=***.jpg width=100 height=100  /><br>
House Specifications </a><br><div>";
echo "<br>";
print "</h2><br><a href='devices.php'><img src=***.jpg width=100 height=100  /><br>Devices  </a><br>";
echo "<br>";
echo "</h2><br><a href='new_info.php'><img src=***.jpg width=100 height=100  /><br>
Change Contact Info</a><br>";
echo "<br>";
echo "</h2><br><a href='events.php'><img src=***.jpgwidth=100 height=100  /><br>
Events</a><br>";
echo "<br>";
echo "<br>";
echo "<br>";
print "<br></h2><br><div align= 'center'><a href='logout.php'><img src=***.jpg width=100 height=100  /><br>Logout</a><br>";

;the output appears as follows:

image

image

image

image.

I would appreciate any assistance regarding this matter.

Answer №1

To fix the broken HTML, remove all tags that are creating newlines in the browser. This is a CSS / HTML question, not related to PHP.

You can update the code like this:

// Create container div
echo "<div>";
// Display each image on a separate line
echo "<a href='form.php'><img src='img1.jpg' width='100' height='100' /></a>";
echo "<a href='form.php'><img src='img2.jpg' width='100' height='100'  /></a>";
echo "<a href='form.php'><img src='img3.jpg' width='100' height='100'  /></a>";
echo "<a href='form.php'><img src='img4.jpg' width='100' height='100' /></a>";
echo "</div>";

By the way, you don't necessarily need PHP for these tasks.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Freezing Columns and Rows for a Spacious Scrollable Table

After extensive effort, I have been diligently striving to create a solution that allows a table's column headers to scroll with the body horizontally and the first column to scroll with the rows vertically. While I've come across solutions that ...

Increase the spacing between elements in a row using Bootstrap's margin utility

I am working with Bootstrap and have a row class containing three different elements. I want to create a margin of 20px between each element in the row container while keeping them all on the same line. Currently, when I add a margin class with a parameter ...

React-Toolbox: Attempting to horizontally align the Cards side by side

When working with React-Toolbox, I encountered an issue with aligning Card elements horizontally. I attempted using display: inline-block, which successfully separated them into three distinct cards as desired. However, they did not align next to one ano ...

Improper transformation of raw RGB depth image into grayscale

Working with a Python simulation that includes a depth sensor and C++ visualization has been quite challenging for me. The sensor provides an image that needs to be converted to grayscale. https://i.stack.imgur.com/Dmoqm.png To achieve the conversion, I ...

What is the best way to activate a post function using a hyperlink?

I'm struggling to figure out how to call my post function using a link within my navbar. The issue is that I'm working with links in the navbar code, and not sure how to integrate calling the post function with them. Below is the code for my pos ...

Can certain parts of an MP4 file be accessed remotely through a network connection?

With modern MP4 players, you have the ability to skip to any part of a video without needing to download the entire file. Take a look at this example video: You can navigate to any point in the video before it finishes downloading. I am curious if there ...

Image not showing up on HTML page following navigation integration

Having trouble with my responsive website setup - the background image for ".hero-image" isn't showing up after adding the navigation. Google Chrome console is throwing a "Failed to load resource: the server responded with a status of 404 (Not Found)" ...

Alternate. (individually)

Issue with Running Program I've been struggling to get my program to run correctly. The task at hand is to have the program display only one question at a time. But no matter what I try, clicking on all questions displays all the answers simultaneous ...

Connecting an external SVG file to its corresponding HTML code

Can I connect my SVG file to my CSS file for a line animation? I'm uncertain about including the SVG code directly in my HTML file. ...

Guide on transferring a WordPress website to a new domain

I manage a WordPress blog on my main domain, but I am looking to duplicate the entire blog onto a secondary "dummy" domain so I can experiment with significant changes without impacting my primary domain. My main domain is and my dummy domain is Althoug ...

Refreshing a HTML table by retrieving data from a session variable

I'm still learning the ropes when it comes to JSP, jQuery, and AJAX. I have a JSP page that utilizes a table populated with values from a List variable stored in session. Below is the code snippet: <table id="someData" class="display" width="95%"& ...

Struggling to activate the upload dialog feature

Currently in the process of developing a straightforward website, and I've come across this issue: <form action="upload.php" method="post"> <input type="file" name="image" accept="image/*"> <input type="submit"> </form> Altho ...

When using Firefox to scale down a div with CSS `moz-transform`, the border details are unfortunately not retained

When viewing the following HTML in Firefox, you may notice that the right and bottom border is missing. However, Chrome and Internet Explorer display it correctly. Is this a bug in Firefox, or is there another method I can use to make it look consistent ...

What could be the reason for my CSS animation with :hover @keyframes not functioning?

As a newcomer, I am struggling to understand why this code isn't functioning correctly. My goal is to create the illusion of a flying bird. This is my HTML: <img src="http://dl.dropboxusercontent.com/u/105046436/tw.png" /> <br> <div c ...

Resources for Vue.js stylesheets

Vue.js is my latest discovery and I have been experimenting with the single file component architecture. A small issue I encountered was that all of my components' styles were being loaded on the page, even if they weren't currently active. Is t ...

Tips on Importing a Javascript Module from an external javascript file into an <script> tag within an HTML file

I'm facing an issue while attempting to import the 'JSZip' module from an external node package called JSZip in my HTML File. The usual method of importing it directly using the import command is not working: <script> import ...

What is the correct way to write the syntax for wp_register_style function in

I'm attempting to include a cache-buster version in my CSS file. The guides mention: <?php wp_register_style( $handle, $src, $deps, $ver, $media ); ?> However, I've scoured Google and Stack Overflow for the correct formatting of these var ...

Input various colored text within an HTML element attribute

In my asp.net project, I am looking to dynamically change the text color of a table cell based on a certain parameter. Here's an example scenario: TableCell dataCell = new TableCell(); foreach (var o in results) { ...

Is it feasible to transition a mobile webpage seamlessly without using jqm?

I'm currently developing a Phonegap app and I am trying to steer clear of jqm in my project. I find that the css is causing some issues with the html code. As a workaround, I can transition between pages using: window.location = "profiles.html"; How ...

Attempting to align content in the middle of the page across all web browsers

I need assistance with centering all the content on my website across different screen sizes and browsers. Currently, everything appears off-center and aligned to the left on various screens I have tested. You can view the HTML and CSS code in this link. H ...