After referencing this link, I attempted to create an image gallery. However, the code aligned the images to the left side of the page. With a total of 9 images in the gallery, my objective is to arrange them in a 3x3 grid at the center of the page, with equal margins on both sides. Despite multiple attempts, I have not been successful in achieving this layout.
Give this a shot . . modify the width of the #container element
<!DOCTYPE html>
<html>
<head>
<style>
#container{
width: 700px;
margin: 0 auto;
}
div.img {
margin: 10px;
padding: 10px;
border: 2px solid #ff0000;
height: auto;
width: auto;
float: left;
text-align: center;
}
div.img img {
display: inline;
margin: 10px;
border: 2px solid #ffff00;
}
div.img a:hover img {
border: 2px solid #ff0000;
}
div.desc {
text-align: center;
font-weight: normal;
width: 150px;
margin: 10px;
}
</style>
</head>
<body>
<div id="container">
<div class="img">
<a target="_blank" href="sunflower_big.htm"><img src="sunflower_small.jpg" alt="Sunflower" width="120" height="100"></a>
<div class="desc">Include an image description here</div>
</div>
<div class="img">
<a target="_blank" href="tulip_big.htm"><img src="tulip_small.jpg" alt="Tulip" width="120" height="100"></a>
<div class="desc">Include an image description here</div>
</div>
<div class="img">
<a target="_blank" href="rose_big.htm"><img src="rose_small.jpg" alt="Rose" width="120" height="100"></a>
<div class="desc">Include an image description here</div>
</div>
<div class="img">
<a target="_blank" href="daisy_big.htm"><img src="daisy_small.jpg" alt="Daisy" width="120" height="100"></a>
<div class="desc">Include an image description here</div>
</div>
<div>
</body>
</html>
In the process of developing a Chrome extension, I encountered a specific web page where there is a table with commented out information. I am seeking a way to eliminate the comment syntax in order to display the hidden information within the table. What ...
I have been using Bootstrap to design a expandable card that can be expanded when clicked. I am currently using the collapse feature, but I am facing an issue where the button remains in its original position, whereas I want it to move to the bottom of the ...
Is there a way to ensure that an image always loads, even if the initial load fails? I have tried using the following code snippet: <img class="small" src="VTVFile4.jpg" onload="this.onload=null; this.src='VTVFile4.jpg?' + new Date();" alt=" ...
I recently implemented a sticky footer design on my website, following the guidance of Ben Frain's book "Responsive Web Design with HTML5 and CSS3" (second edition). While it works flawlessly on most modern browsers, I encountered an issue with the Sa ...
Currently, I am in the process of building a basic Website using the MEAN stack, but I'm facing an issue with an ng-repeat that is failing to display any content. Oddly enough, when I attempt something similar in another project, it works perfectly fi ...
Can someone help me find the issue in my code? I have checked the back end and can't seem to identify the logic error. The form submission shows as successful but does not insert the values into the database. I'm still learning how to use ajax, s ...
I'm struggling to select an element within a nested <ul>. In this code snippet, my goal is to pinpoint the <a> tag that follows the parent <li> <ul class="wc-block-product-categories-list wc-block-product-categories-list--dept ...
Hello there, I've been working on a project where I need to create a responsive grid of cards, like news articles, that maintain their proportions even when the browser's width changes. To achieve this, I decided to use an aspect-ratio hack by s ...
Can I ensure that all flex items have the same width? Currently, my code looks like this: .video-container { background-color: blue; min-height: 90vh; display: flex; flex-wrap: wrap; } .video { flex: 1 0 25%; } <div class="video-contain ...
I've created a function that generates a table of specified size with predetermined content in each cell, and displays it within a designated div ID. generate_table(4, 4, 'Cell Content', 'display') To test this function, I added a ...
Is it possible to implement the LESS preprocessor in my create-react-app project? In my React code, I have the following: ReactDOM.render( <form> <input type="email" data-info="Enter Email" pattern="/\S+@\S+\.\S+/ ...
I'm looking to make my input box dynamic, where it can read the current value from the database and allow users to change that value. Currently, when I enter a number like 1000 into the input box, it posts fine. The PHP results show: Data updated: c ...
I encountered an issue while working on a login form that communicates with the database using PHP at the backend. Even though I have verified the correctness of my login credentials, I am facing an error related to undefined array keys 'email and pas ...
Previously, @ADyson provided a solution on how to display returns on a new page. I appreciate the help, but I would prefer to see it under the contact form on that specific contact page. I was advised to use an echo statement and an if statement, which I&a ...
One issue I'm facing is that the CSS code intended for one table is affecting all the other tables on my website. Here is an example of the CSS code: tr:last-child td:last-child { border-bottom-right-radius:3px; } /*effects map*/ td { background: ...
I am facing an issue while trying to execute a basic ajax call to fetch data from a file on a server. Even though I can access the file via the web browser and have diligently followed tutorials related to this topic, I have hit a dead end. Here is the sn ...
I am currently developing a request portal that involves dynamic checkboxes, labels, and textboxes that are dependent on an option list. As a beginner in javascript, I am facing challenges with creating conditional statements. I have managed to make progr ...
Looking for a way to create a textarea with dynamic height that adjusts as the user adds new content? The resize property is set to none and overflow is hidden. It seems to be working correctly in Chrome, but Firefox is presenting some mysterious issues wi ...
In my project, I am currently utilizing JQuery version 2.1.1 and JQuery UI version 1.11.0. My aim is to open a modal dialog within another modal dialog, with the primary (parent) dialog being disabled. While both dialogs have their modal properties set to ...
I am trying to incorporate a dropdown profile into my navbar, but it is not appearing where it should be located: pic1 <link href="https://bootswatch.com/4/materia/bootstrap.min.css" rel="stylesheet"/> <script src="https://code.jquery.com/j ...