html div elements may not align correctly

Currently, I am in the process of coding a website that contains numerous images. To assist me in organizing and arranging these images, I have turned to angularjs.

Initially, everything was progressing smoothly until this issue arose:

https://i.sstatic.net/L61KV.jpg

The layout is structured in a grid format with three columns width and six columns height.

(I had to describe the layout since I couldn't provide a large enough picture for reference)

The challenge lies in using only one div and ng-repeat to position these elements.

Please review the CSS code snippet provided below and let me know if there are any discrepancies or oversights on my end.

htmlcssangularjs

Answer №1

There are multiple approaches to resolving your problem, but with minimal adjustments to your code, I will exclusively reposition the h2 text. Your issue should be resolved.

I strongly recommend utilizing flexbox for layouts of this nature.

.container-body .container-cityDisplay {
margin: 2% 0 0 2%;
}

.container-body .container-cityDisplay .cityDisplay {
display: inline-block;
width: 28%;
height: 200px;
padding: 1%;
margin: 1%;
background-color: #f4f4f4;
  position: relative; /* Modifying cityDisplay Relative */
}

.container-body .container-cityDisplay .cityDisplay img {
width: 100%;
height: 100%;
opacity: .2;
}

.container-body .container-cityDisplay .cityDisplay img:hover {
opacity: 1;
}

.container-body .container-cityDisplay .cityDisplay h2 {
/* margin: -50% 0 0 0; */
 position: absolute; /* Utilizing Position for absolute text positioning*/
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
text-align: center;
font-size: 1em;
letter-spacing: 6px;
text-shadow: 2px 2px 4px #bdbdbd;
}

.container-body .container-cityDisplay .cityDisplay:hover h2 {
color: transparent;
text-shadow: none;
}

.container-body .container-cityDisplay .cityDisplay span {
display: block;
font-size: 1.3em;
letter-spacing: 14px;
margin: 10% 0 0 1%;
}
<div class="container-body">
  <div class="container-cityDisplay">
  <div class="cityDisplay">
    <img src="http://placehold.it/400x400">
    <h2>City Name<span>Country</span></h2>
  </div>
  <div class="cityDisplay">
    <img src="http://placehold.it/400x400">
    <h2>City Name<span>Country name is really long</span></h2>
  </div>
  <div class="cityDisplay">
    <img src="http://placehold.it/400x400">
    <h2>City Name<span>Country</span></h2>
  </div>
  <div class="cityDisplay">
    <img src="http://placehold.it/400x400">
    <h2>City Name<span>Country</span></h2>
  </div>
  <div class="cityDisplay">
    <img src="http://placehold.it/400x400">
    <h2>City Name <span>Country</span></h2>
  </div>
  <div class="cityDisplay">
    <img src="http://placehold.it/400x400">
    <h2>City Name<span>Country</span></h2>
  </div>
  <div class="cityDisplay">
    <img src="http://placehold.it/400x400">
    <h2>City Name<span>Country</span></h2>
  </div>
</div>
</div>

Answer №2

I implemented flexbox for 

.container-body .container-cityDisplay
.

.container-body .container-cityDisplay {
  margin: 2% 0 0 2%;
  display: flex;
}

.container-body .container-cityDisplay .cityDisplay {
  display: inline;
  width: 28%;
  height: 200px;
  padding: 1%;
  margin: 1%;
  background-color: #f4f4f4;
}

.container-body .container-cityDisplay .cityDisplay img {
  width: 100%;
  height: 100%;
  opacity: .2;
}

.container-body .container-cityDisplay .cityDisplay img:hover {
  opacity: 1;
}

.container-body .container-cityDisplay .cityDisplay h2 {
  margin: -50% 0 0 0;
  text-align: center;
  font-size: 1em;
  letter-spacing: 6px;
  text-shadow: 2px 2px 4px #bdbdbd;
}

.container-body .container-cityDisplay .cityDisplay:hover h2 {
  color: transparent;
  text-shadow: none;
}

.container-body .container-cityDisplay .cityDisplay span {
  display: block;
  font-size: 1.3em;
  letter-spacing: 14px;
  margin: 10% 0 0 1%;
}
<div class="container-body">
  <div class="container-cityDisplay" ng-hide="hideCard2">
    <div class="cityDisplay" ng-repeat="city in cities | unique: 'city' 
        | orderBy: 'city'">
      <img src="http://placehold.it/200">
      <h2>City<span>Country</span></h2>
    </div>
    <div class="cityDisplay" ng-repeat="city in cities | unique: 'city' 
        | orderBy: 'city'">
      <img src="http://placehold.it/200">
      <h2>City<span>Country</span></h2>
    </div>
    <div class="cityDisplay" ng-repeat="city in cities | unique: 'city' 
        | orderBy: 'city'">
      <img src="http://placehold.it/200">
      <h2>City<span>Country</span></h2>
    </div>
  </div>
</div>

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

Enhancing an Image Gallery using CSS

Currently in the process of building a website for an upcoming event, and naturally, I need to create an event calendar. For inspiration, I have been referencing this example for its gallery layout and hover effects. However, I am hoping to customize thi ...

jquerycssimagexhtmlgallery

I am having trouble getting my footer to align properly in a vertical position

My goal is to have my li elements remain on the same line, but unfortunately, they are not cooperating (they are aligning horizontally, but that's all). Here is the code snippet: <footer> <div class="container"> <div id="coi ...

htmlcssbootstrap-4

Maintain the active menu open when navigating to a different page on the website

My website has a dropdown menu, but whenever I click on a submenu link, the new page opens and the menu closes. However, I want the active menu to remain open on the new page of the website! To demonstrate what I have tried in a simple way, I created an e ...

javascriptjqueryhtmlcssajax

Is there a way to change the background color of product blocks on Shopify in a dynamic

Is there a way to customize the background colors of product blocks on Shopify by modifying the shop code? Take a look at this example: Mockup showing alternating block backgrounds Currently, all product blocks in the grid have a black background with wh ...

htmlcssshopify

Splitting elements into two categories with Angular.JS: Comparing ng-hide and filter

My task is to take an object with data and display it in two separate lists. The structure of the object is as follows: var data = [ {name: "Something 1", active: 1, datetime: "goes", author: "here"}, {name: "Something 2", active: 0, datetime: "goes ...

javascriptangularjs

How to retrieve Angular directive name using TypeScript

I have successfully implemented the following AngularJS directive: export module Directives { export class PasswordsMatch implements ng.IDirective { public static Factory(name: string) : ng.IDirectiveFactory { return () => new ...

angularjsangularjs-directivetypescript

Creating a Self Closing Alert Message in AngularJS: A Step-by-Step Guide

Just getting started with AngularJS and looking to create a self-closing message. How can this be accomplished? I'm aiming for similar results as the question found here: How to Automatically Close Alerts using Twitter Bootstrap However, I want to ...

javascriptangularjs

Combining CSS Selectors

Can you combine these selectors into one for ul#footer_navigate: ul#social_footer li a:link, ul#social_footer li a:visited {} I would like the same selector to apply for both anchor states on the ul with ID #footer_navigate. Is there a different approac ...

csscss-selectors

Refreshing the Span Element using Ajax and php

Hello there, Stack Overflow community! I have a basic PHP script (countsomething.php) that retrieves a number and displays it using echo. How can I use AJAX to automatically update a simple span element on my HTML page? I've attempted to trigger th ...

javascriptphphtmlajax

When attempting to download a file in AngularJS from an API REST, the file ends up becoming corrupted

I have created an Excel report using the REST API and sent it to the front-end (AngularJS). When I directly access the URL from the browser, everything works fine. However, when I try to download it from AngularJS, the file is downloaded but then cannot be ...

angularjsrestdownloadreport

Customize the appearance of each TreeItem in JavaFX using CSS to assign unique

I am looking for a way to color individual Tree Items in a treeView based on specific conditions. I found a promising answer, but unfortunately, I am struggling to implement it. You can check out the answer here. My main obstacle is understanding how to u ...

cssjavafxtreeview

Eliminate any unnecessary spaces in the text of a link following the breaking of a word

While working on a navigation menu, I noticed that in large screens the navigation looks fine but in laptop view, the words are breaking up and it's acceptable. However, I want to remove the extra spacing after the text. In the large screen: https:/ ...

cssmaterial-uitypography

Unfinished card or cut-off content within a bootstrap accordion

Greetings to the StackOverflow community! I am facing an issue with my accordion and card setup, where the card is not fully displayed within the button at the bottom. The following image illustrates the problem: https://i.sstatic.net/aSFsc.png Here is ...

jquerycssbootstrap-4

Activate the 'swipe back' feature within ion-item upon selecting ion-option-button

In my Ionic project, I created an ion-list with ion-items and added ion-option-buttons: <ion-list> <ion-item class="item " ng-repeat="exercise in exercises" on-double-tap="sendToChangeExercise"> <p><h2>{{exercise. ...

javascriptangularjsionic-framework

Determining When to Apply max-height / max-width for Images in CSS

At what point should one consider using max-height or max-width for an image? Is it beneficial if I refrain from mentioning the specific dimensions of the image due to uncertainty? ...

htmlcss

Customizing the appearance of columns in an antd table

Below is the table column configuration I am working with, where notes are rendered using a custom function: fieldDefs: (results, isJsonData) => [ { title: 'Notes', name: 'notesHTML', table: { render: SectionNotes, sear ...

javascripthtmlcssreactjsantd

Could we incorporate a backwards typewriter animation?

Is there a way to delay this animation for 2 seconds before playing in reverse? I came across this online and made some edits, but I'm still new to this (early stages). Can this be achieved using CSS, HTML, and JavaScript? I plan to use this as an ale ...

htmlcss

What is the best way to update information within a <tbody> tag?

Can someone assist me with replacing content in an HTML table? Please review my code below: <html> <head> <script type="text/javascript"> function changeRows() { var htmlString="<tr><td>bhanu</td><t ...

jqueryhtml

issue with mark.js scrolling to selected sections

Our document searching functionality utilizes mark.js to highlight text and navigate to the results. You can see an example of this in action here. If you search for "Lorem ipsum" -> the highlighting works perfectly, but the navigation jumps to fragmen ...

javascripthtmljquerymark.js

Accessing JavaScript results in PHP

Hello everyone! I am working on creating a dropdown menu for selecting time using JavaScript to get the computer's current time. My goal is to have an output that automatically selects the option in the dropdown if it matches the computer's time. ...

phpjavascripthtml