It appears that the HTML links are non-responsive and appear to be arranged in an

I have a fairly straightforward website set up. It utilizes php to scan for images and then displays them one by one with navigation buttons at the top. These buttons allow users to switch back and forth between the images. At the top of the page, there are several links, but for some reason, I am unable to click on them. When I try to double-click, the image gets highlighted instead of the text I am trying to access. I have attempted to troubleshoot this by removing any javascript and php, but the issue persists.

I don't have a lot of experience with HTML. I suspect it may have something to do with the z-index, but I haven't been able to resolve it.

body {
  background-color: #FFFFFFf
}

.menup1 {
  float: left;
  padding-left: 5.5%;
  box-sizing: border-box;
  font-size: 35px;
  background: #fffff;
  color: black;
}

a {
  color: black;
  cursor: pointer;
}

p {
  color: black;
}

.listelemt {}

ul {
  float: left;
  font-size: 40px;
  padding-top: 10px;
}

ul li {
  padding-top: 15px;
}

.container {
  position: relative;
  width: 100%;
  padding-top: 200px;
}

.container .btnF {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(600%, -50%);
  -ms-transform: translate(-50%, -50%);
  background-color: #555;
  color: white;
  font-size: 16px;
  padding: 6px 12px;
  border: none;
  cursor: pointer;
  border-radius: 1px;
  height: 50px;
  width: 50px;
}

.container .btnB {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-675%, -50%);
  -ms-transform: translate(105%, -50%);
  background-color: #555;
  color: white;
  font-size: 16px;
  padding: 6px 12px;
  border: none;
  cursor: pointer;
  border-radius: 1px;
  height: 50px;
  width: 50px;
}
<div class="menup1"><a href="google.com">Appetizer</a></div>
<div class="menup1"><a href="../../../Soups">Soups</a></div>
<div class="menup1"><a href="../../../Desserts">Desserts</a></div>
<div class="menup1"><a href="../../../Cakes">Cakes</a></div>
<div class="menup1"><a href="../../../MainCourses">Main Courses</a></div>
<div class="menup1"><a href="../../../Pastry">Pastry</a></div>
<div class="container">
  <img id="recipe" src="1.jpg" height=auto width=100%/>
  <button class="btnF" id="btnF">+</button>
  <button class="btnB" id="btnB">-</button>
</div>

I am hopeful that you can assist me with this issue. While I have been able to navigate through the javascript and php components, dealing with languages that don't adhere to the standard programming rules is not my strong suit.

htmlcss

Answer №1

The box above the links is not displaying properly due to the floats not being cleared. This causes the box containing the links to collapse, hence the need for additional padding. To make the links clickable, adding clear: both to the container will resolve the issue.

To maintain the current layout, it is recommended to wrap the menu in a container with position: relative and give it a higher z-index than the parent container. The menu buttons, set as position: absolute, should also have a higher z-index.

.menu {
  position: relative;
  z-index: 2;
}

.menup1 {
  float: left;
  padding-left: 5.5%;
  box-sizing: border-box;
  font-size: 35px;
  background: #fffff;
  color: black;
}

a {
  color: black;
  cursor: pointer;
}

p {
  color: black;
}

.listelemt {}

ul {
  float: left;
  font-size: 40px;
  padding-top: 10px;
}

ul li {
  padding-top: 15px;
}

.container {
  position: relative;
  z-index: 1;
  width: 100%;
  padding-top: 200px;
}

.container .btnF {
  position: absolute;
  z-index: 3;
  top: 50%;
  left: 50%;
  transform: translate(600%, -50%);
  -ms-transform: translate(-50%, -50%);
  background-color: #555;
  color: white;
  font-size: 16px;
  padding: 6px 12px;
  border: none;
  cursor: pointer;
  border-radius: 1px;
  height: 50px;
  width: 50px;
}

.container .btnB {
  position: absolute;
  z-index: 4;
  top: 50%;
  left: 50%;
  transform: translate(-675%, -50%);
  -ms-transform: translate(105%, -50%);
  background-color: #555;
  color: white;
  font-size: 16px;
  padding: 6px 12px;
  border: none;
  cursor: pointer;
  border-radius: 1px;
  height: 50px;
  width: 50px;
}
  <div class="menu">
    <div class="menup1"><a href="google.com">Vorspeise</a></div>
    <div class="menup1"><a href="../../../Suppen">Suppen</a></div>
    <div class="menup1"><a href="../../../Dessert">Dessert</a></div>
    <div class="menup1"><a href="../../../Kuchen">Kuchen</a></div>
    <div class="menup1"><a href="../../../Hauptgänge">Hauptgänge</a></div>
    <div class="menup1"><a href="../../../Konditorei">Konditorei</a></div>
  </div>
  <div class="container">
    <img id="rezept" src="1.jpg" height=auto width=100%/>
    <button class="btnF" id="btnF">+</button>
    <button class="btnB" id="btnB">-</button>
  </div>

Answer №2

The issue does not lie with the z-index property, rather your problem stems from the container overlapping your menu items. To fix this, replace padding-top: 200px with margin-top: 200px, and apply float: left to the container. Another option is to avoid adding any 'offset' with your container by clearing the float before initializing it with clear: left on the container.

It's important to note that both your body and .menup1 had incorrect background-color values; when using hex codes, you must specify three, four, or six characters. Five characters are invalid.

Both of these issues have been corrected in the following updated code:

body {
  background-color: #ffffff;
}

.menup1 {
  float: left;
  padding-left: 5.5%;
  box-sizing: border-box;
  font-size: 35px;
  background: #ffffff;
  color: black;
}

a {
  color: black;
  cursor: pointer;
}

p {
  color: black;
}

.listelemt {}

ul {
  float: left;
  font-size: 40px;
  padding-top: 10px;
}

ul li {
  padding-top: 15px;
}

.container {
  position: relative;
  float: left;
  width: 100%;
  margin-top: 200px;
}

.container .btnF {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(600%, -50%);
  -ms-transform: translate(-50%, -50%);
  background-color: #555;
  color: white;
  font-size: 16px;
  padding: 6px 12px;
  border: none;
  cursor: pointer;
  border-radius: 1px;
  height: 50px;
  width: 50px;
}

.container .btnB {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-675%, -50%);
  -ms-transform: translate(105%, -50%);
  background-color: #555;
  color: white;
  font-size: 16px;
  padding: 6px 12px;
  border: none;
  cursor: pointer;
  border-radius: 1px;
  height: 50px;
  width: 50px;
}
<div class="menup1"><a href="google.com">Appetizer</a></div>
<div class="menup1"><a href="../../../Soups">Soups</a></div>
<div class="menup1"><a href="../../../Desserts">Desserts</a></div>
<div class="menup1"><a href="../../../Cakes">Cakes</a></div>
<div class="menup1"><a href="../../../MainDishes">Main Dishes</a></div>
<div class="menup1"><a href="../../../Pastry">Pastry</a></div>
<div class="container">
  <img id="recipe" src="1.jpg" height=auto width=100%/>
  <button class="btnF" id="btnF">+</button>
  <button class="btnB" id="btnB">-</button>
</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

Effortlessly glide to a specific div ID upon page load using the URL address

One way to implement smooth scrolling to an anchor on page load is by using jQuery. Here's an example code snippet: $(function(){ $('html, body').animate({ scrollTop: $( $('#anchor1').attr('href') ).offset(). ...

javascriptjquerycss

Creating a circular frame for your image to use as a Facebook profile picture

In the process of developing an input feature that allows users to upload file images for avatar changes, similar to Facebook's functionality. However, I am aware that Facebook utilizes a circular area for avatars and enables users to adjust the image ...

javascripthtmlcssreactjs

Stack div on top of div

It seems like I'm facing a simple problem that needs a solution. I have two container divs .topwrap{ position:relative; top:100px; background:#00C; } </i> and .lowerwrap{ position:relative; ...

htmlcssposition

Automated resizing for various monitor dimensions in HTML

Is there a way to dynamically adjust the zoom level on an HTML webpage based on the monitor size? For instance, an image that appears large on a laptop screen may look small on a PC monitor. Is there a solution available to scale the picture size as the mo ...

javascripthtmlzooming

Why is it that the vertical square bar is not appearing on my website?

I've been attempting to add a vertical bar that stays fixed to the top right corner of my screen, but for some reason, it's not showing up no matter what I try. Here is the CSS code I'm using for my site, everything seems normal except that ...

htmlcss

Are section elements aware of their positional order in the document structure?

For the Terms of Service page, I decided to incorporate both the ol element and the section element for two specific reasons: Ensuring each item is guaranteed in sequential order Allowing each part to be sectioned off individually ol { list-style ...

htmllanguage-lawyeraccessibility

Show a notification when utilizing AJAX requests

I consist of two separate files: one written in PHP and the other one in JavaScript and HTML. PHP file : <?php session_start(); //start session $_SESSION['data'] = "The content should be displayed as alert in the JS file"; JS/HTML File: & ...

javascriptphpjqueryhtmlajax

How can we utilize CSS floats to achieve maximum widths?

I currently have 5 divs that I need to structure in a specific way: Each div must have a minimum size of 100px The parent container should display as many divs as possible on the first row, with any remaining divs wrapping to new rows if necessary If the ...

javascripthtmlcsscss-float

Scrapy Library's Response.css function fails to retrieve data from API, resulting in an empty list

scrapy shell 'https://www.samsung.com/in/smartphones/galaxy-m/' fetch('https://searchapi.samsung.com/v6/front/b2c/product/finder/gpv2?type=01010000&siteCode=in&start=1&num=12&sort=onlineavailability&onlyFilterInfoYN=N& ...

pythoncssweb-scrapingscrapyresponse

Is it possible to submit a HTML5 form and have it displayed again on the same page?

Is it possible to simply reload the sidebar of a page containing an HTML5 form upon submission, or is it necessary to load a duplicate page with only the sidebar changed? I am unsure of how to tackle this situation; firstly, if it is achievable in this m ...

javascriptjqueryhtmlforms

Increase the size of the image while ensuring the content on the right remains proportionate

I have a challenge with managing two different sizes of images (vertical and horizontal) that need to remain the same size. I am attempting to create a container that can hold the image without affecting the surrounding content, while also possibly using o ...

phphtmlcss

Troubleshooting a Problem with the Horizontal Scrollbar in Dynamic jqGrid

Currently, I am working on an ASP.net MVC project where I have implemented both dynamic and static jq grids. However, I am encountering an issue with the horizontal scroll bar in my application. To address this problem, I attempted to modify the overflow ...

javascriptjquerycssasp.net-mvc-4jqgrid

Having trouble scaling image with CSS, not reacting to size properties

I have little experience in web development, but a small business client has me working on their website while I handle other tasks for them. I've created a home page design that is almost ready to be turned into a template for the chosen CMS. Things ...

htmlcssimage

What is the best way to vertically align text that is positioned absolutely in the center?

I'm looking to implement a hover hide effect. Check out my inspiration on CodePen * { box-sizing: border-box; margin: 0; padding: 0; } body { background-color: #123456; } #object { background-color: cornsilk; border: #333 3px solid; ...

htmlcss

Having trouble resolving the signature of a class decorator when invoked as an expression with @Injectable in Angular

Error Message: Unable to resolve the signature of a class decorator when called as an expression. The argument type 'ClassDecoratorContext' is not compatible with the parameter type 'string | symbol | undefined'. After creating a book ...

javascripthtmlangulartypescriptngrx

Sending form array information using jQuery AJAX

My form allows for the addition of multiple listings simultaneously. Additionally, there is a requirement to pass through an md5check. For example: <select name="master_id"></select> <select name="id2[]"></select> <select nam ...

phphtmljquery

The contents of my div extend beyond the border-radius

Here is the issue I'm facing: My challenge involves having an <h1> nested inside a <div>. However, when I apply a border-radius to the <div>, the <h1> appears outside of the div. Below is the code snippet: <div class="test ...

htmlcss

Form using Ajax technology, including two drop-down menus sourced externally

Is there a way to automatically populate a second drop-down list with all models once a selection is made in the first drop-down on a form? Below is the code snippet: <form> <div class="landing_quote_left"> ...

phphtmlajaxformsjquery

Best practices for aligning the widths of input-group-addon elements

Hey there, I'm working with an HTML file that has 3 input options. Here's a snippet: <script type="text/ng-template" id="dashboard_assigngroup_popup.html"> <div class="modal-header modal-header2"> <h3 class="modal-tit ...

javascriptcssangularjshtml

Mozilla Firefox's webpage controls adapt according to the type of authentication being used

On my .NET MVC web page, I have 3 radio buttons for selecting a value on a form. However, in a specific test environment with two authentication methods (user/password or certificate), the radio buttons mysteriously change to checkboxes when the page loads ...

css.nethtmlfirefox