What is the best way to reposition my boxes to sit below the diamond DIV instead of behind it?

I've been learning HTML5 and CSS, but I'm encountering an issue where the divs are appearing behind other divs. My goal is to have diamonds separated by boxes, with the boxes displayed below the diamonds. Clicking on a diamond should jump to the corresponding part of the page, although I'm still working on that functionality. Can anyone provide assistance with this problem? I've been stuck on it for hours and suspect there's an error in the CSS, but I can't seem to find it. Any help would be greatly appreciated. Thank you.

htmlcss

Answer №1

Make sure to include padding-top in the #container CSS, like this: padding-top:350px;

/* CSS layout for body page */
*{
    margin:0;
    padding:0;
    background-color: #000;
    font-family: poppins, sans-serif;
}

/* Diamonds cover page top */
.main-nav{
    position: absolute;
    top:50%;
    left:50%;
    transform: translate(-50%, -50%);
    margin:0;
    padding: 0;
    width:600px;
    height:150px;
}

.main-nav li{
    list-style: none;
    position: absolute;
    width: 200px;
    height: 200px;
    transform:rotate(45deg);
    transition: 0.5s;
    margin: -100px;
    overflow: hidden;
    opacity: 0.6;
    border-color: rgb(236, 39, 236);
    border: solid rgb(236, 39, 236)
}

.main-nav li:hover{
    opacity: 1;
    cursor: pointer;
}

/* About me button */
.main-nav li.item1{
    top: 0;
    left: 0;
    color: white;
    font-size: 47px;
    -webkit-text-stroke: 1px #6531a8;
    text-shadow: 0px 2px 4px #8c31b6;
}

.main-nav li.item2{
    bottom: 0;
    left: 25%;
    color: white;
    font-size: 47px;
    
}

.main-nav li.item3{
    top:0;
    left: 50%;
    color: white;
    font-size: 47px;
}

.main-nav li.item4{
    top: 100%;
    left: 75%;
    color: white;
    font-size: 47px;
}

.main-nav li.item5{
    top: 0%;
    left: 100%;
    color: white;
    font-size: 47px;
    
}

.main-nav li.bg{
    width: 100%;
    height: 100%;
    transform: scale(1.1);;
}

.title{
    background-color: rgb(192, 183, 183);
    top: 0;
    width: 75px;
    height: 0;
    margin: 70px;
    transform: rotate(-45deg);
    justify-content: center;
    display: flex;
    text-align: center;
    font-family: popping, sans-serif;
    font-size: x-large;
    font-weight: 700;
    position: relative;
    left: -40px;
}


.main-nav li.item1 .bg{
    background-size:cover;
    background-position: center;
}


.nav-title{
    border-radius: 25%;
    border: solid 2px rgb(236, 39, 236);
    height: 71%;
    width: 386px;
    align-content: center;
    color: white;
    display: inline;
}

.nav-title:nth-child(n + 2){
    margin-left: -1px;
}


/* Border lines for Diamonds bottom page */
#container{
    padding:5px;
padding-top:350px; /* Make edits here */
width:100%;
height:500px;
}

.row{
    min-height:50px;
    margin-top:25px;
    width:90%;
    margin-left:auto;
    margin-right:auto;
    padding:2%; 
}

.half-row{
    display:inline-block;
    width:50%;
    margin:1%;
    height:25%;
    color:white;
    border: 2px solid yellow;
    border-radius: 25px;
}

.textting{
  color:white;
  height: auto;
  width: auto;
}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Home Page Jump</title>
</head>

<body>

    <ul class="main-nav">
        <button onclick=""> <!-- Jump to first section box -->
            <!-- First is selected -->
            <li class="item1">
                <div class="bg">
                    <div class="title">
                        First
                    </div>
                </div>
            </li>
        </button>

        <button onclick=""> <!-- Jump to second section box -->
            <li class="item2">
                <div class="bg">
                    <div class="title">
                        Second
                    </div>
                </div>
            </li>
        </button>

        <button onclick=""> <!-- Jump to third section box -->
            <li class="item3">
                <div class="bg">
                    <div class="title">
                        Third
                    </div>
                </div>
            </li>
        </button>

        <button onclick=""> <!-- Jump to fourth section box -->
            <li class="item4">
                <div class="bg">
                    <div class="title">
                        Fourth
                    </div>
                </div>
            </li>
        </button>

        <button onclick=""> <!-- Jump to fifth section box -->
            <li class="item5">
                <div class="bg">
                    <div class="title">
                        Fifth
                    </div>
                </div>
            </li>
        </button>
    </ul>

    <div id="container"> 
        <div class="row">
            <div class="half-row" style="width:15%;">
             <div class="textting">
               <h1>
                 First Info
               </h1>
             
             </div>
             
            </div>
            <div class="half-row">
              <h3>
                blah blah blah blah blah blah blah blah blah blah 
                blah blah blah blah blah blah blah blah blah blah
              </h3>
            </div>
        </div>

        <!-- Repeat the above row for other sections as needed -->

    </div>

</body>

<script>


</script>

</html>

Answer №2

When positioning your diamonds using position: absolute, they will be positioned relative to the body element by default. However, if you want them to be positioned relative to a specific div, you can wrap the diamonds in a div and style that container using position: relative. This way, the positioning of the diamonds will be based on the container div. Make sure to also add a margin-top to the container div if you are using transform: translate to push the diamonds up.

Below is an example that demonstrates the CSS styling for the container div and the diamonds:

/* CSS styling for positioning diamonds */

* {
  margin: 0;
  padding: 0;
  background-color: #000;
  font-family: poppins, sans-serif;
}

.ul-container {
  position: relative;
  margin-top: 300px;
}

/* Main navigation styling */

.main-nav {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  margin: 0;
  padding: 0;
  width: 600px;
  height: 150px;
}

/* Individual diamond styling */

.main-nav li {
  list-style: none;
  position: absolute;
  width: 200px;
  height: 200px;
  transform: rotate(45deg);
  transition: 0.5s;
  margin: -100px;
  overflow: hidden;
  opacity: 0.6;
  border-color: rgb(236, 39, 236);
  border: solid rgb(236, 39, 236)
}

/* Styling for hover effect on diamonds */

.main-nav li:hover {
  opacity: 1;
  cursor: pointer;
}

/* More styling for individual diamond items */

.main-nav li.item1 {
  /* Specific styling for first diamond */
}

/* Repeat the above styling for other diamond items */

/* Additional CSS styling continues... */


<div class="ul-container">
  <ul class="main-nav">
    <li class="item1">
      <div class="bg">
        <div class="title">
          First
        </div>
      </div>
    </li>
    <!-- Add more diamond items as needed -->
  </ul>
</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

Role="presentation" containing a <form> element within

<nav> <ul class="nav nav-pills pull-right"> <li role="presentation"> <form action="/logout" method="POST" id="logout-form"> <a href="#" onClick="document.getElementById('logout-form&ap ...

javascripthtmlbootstrap-4

My CSS seems to be causing an issue and preventing the function from running correctly. Now I just need to

I'm currently working on a project and following a tutorial to help me create a navigation bar. The tutorial I am using can be found here: https://www.youtube.com/watch?v=gXkqy0b4M5g. So far, I have only reached the 22:05 mark in the video. I have su ...

javascriptcssonclicktoggle

React Side Panels that Collapse and Expand

Apologies if this task seems simple, as I am new to transitioning to React. My current application is primarily built with JavaScript, CSS, and HTML, and I am now looking to migrate it to React. There is a full-length horizontal side panel that is initiall ...

javascripthtmlcssreactjs

various image proportions in HTML

I have an image with a ratio of 16:9 that I want to use on my website. On one of the pages, I display a list of products with images having a ratio of 340x265. When a user clicks on an item in the list, it takes them to the product page where the same im ...

htmlcsswebresponsive-designmedia-queries

Tips for preserving dynamically generated HTML through Javascript during page reload

I have a straightforward question, but I haven't been able to find a suitable answer. Here's my situation: On my HTML page, I have a form. Using jQuery and AJAX, I submit the form and then use some JavaScript code to change the content of a spec ...

javascriptjqueryhtmlajaxcodeigniter

How can you create a blurred effect on a navbar?

Looking to achieve a unique blur effect in the background of my navbar component. The standard CSS blur effect isn't giving me the desired result, so I'm seeking some guidance on how to customize it. For example: https://i.sstatic.net/bPEXZ.png ...

htmlcss

I'm trying to determine which jQuery event would be more beneficial for my needs - should I go with

I'm facing a dilemma On my website, I need to capture the value of a span within a modal. The value changes when the modal is opened and reverts to the old value when closed. This particular value represents the cart total in my online store. Wheneve ...

javascriptjquerycssevents

Is there a way to make a table row clickable? I tried finding solutions online, but none of them seemed to work for me

Having trouble opening a new page when tapping on a cell (TR) using Javascript. Despite trying various online tutorials, I still can't get it to work properly. Any assistance would be greatly appreciated. Thank you. Below is the code snippet: fun ...

javascripthtmljquerycsstr

augmentable form that can be expanded flexibly

Perhaps I'm missing something really simple here, but I just can't seem to figure this out. I'm attempting to create a form that can dynamically extend. The issue I'm facing is that I can't get this particular code to function: & ...

javascriptphphtml

Tips for handling an incorrect date entry when a field loses focus in AngularJS

If I have an <input> field with the type='date' attribute in its untouched state, it displays mm/dd/yyyy as the date format. I am looking to see if there is a way to utilize AngularJS ng-blur directive to reset the field to this original fo ...

javascriptangularjshtmldate

Designing links within a web application

Currently, I am developing a web application that will contain a high volume of clickable elements. The challenge lies in maintaining a visually appealing design while adhering to web best practices such as using different colors and underlines for links. ...

htmlcssweb-applicationsuser-interfaceuser-experience

ETags for webpages generated on the server-side and equipped with a CSP nonce

I have successfully implemented ETags in my server-side-rendered React app using Node/Express, allowing for client-side caching. The HTML is generated with inlined fragments of render-blocking CSS and JS for faster first renders according to Google's ...

htmlexpressbrowser-cachecontent-security-policyetag

What is the process for invoking a JavaScript function and storing form data in a text file within an HTML document?

My HTML code is here..... <!DOCTYPE html> <html> <title>Plot</title> <head> <script type="text/javascript" src="d3.min.js"></script> <script> function filter() { var choice = document.ge ...

javascripthtml

Show another default value once an option has been chosen

I am looking to create a functionality where, after a user selects an option, the input will change to display "select another option" instead of showing the name of the selected option. For example: <select> <option value="" selected&g ...

javascripthtmlreactjs

Unlocking the Power of Transition: Effortlessly Submitting a Form Post

After the modal finishes fading out, I want my form to be submitted and sent to the email file "refreshform.php". However, currently after the modal fades out, the form does not submit or post anything to the PHP file for sending the email. It simply fades ...

javascriptphpjqueryhtmlcss

Receiving an unexpected value from the input attribute

Currently, I am facing a challenge in retrieving data from another component by using the selector in the HTML file of the parent component. Here is how I implemented it: <app-graphs [module]="module" hidden></app-graphs> In the chi ...

htmlangulartypescriptinputparent-child

Guide on making a button display an image, then switch back to the initial image when clicked again

Currently, I have this neat feature on my website where there's a button that toggles the image/background color - kind of like a dark mode switch. The background change is working fine, but I'm encountering some challenges with organizing the im ...

javascripthtmlcss

Best placement for <img> tag in HTML for creating a background image using CSS (excluding CSS3)

I am currently working on a programming project called Broadway through Codeacademy. I have been given the task of adding a background image to the webpage. It seems like an easy task to accomplish. The simplest way to achieve this effect is by using the f ...

htmlcsstwitter-bootstrap

Creating CSS rounded corners with pseudo-elements

Take a look at this fiddle: https://jsfiddle.net/xnr7tqm1/ This is the html code I'm working with: <div class="media-container"> <iframe width="365" height="200" src="https://www.youtube.com/embed/JqjIb6FhU_k" frameborder="0" al ...

htmlcss

The table is overflowing its parent element by exceeding 100% width. How can this issue be resolved using only CSS?

My root div has a width of 100% and I need to ensure that all children do not overlap (overflow:hidden) or exceed the 100% width. While this works well with inner <div>s, using <table>s often causes the table to extend beyond the parent 100% d ...

htmlcsshtml-table