Fixing issues with internal web page connections (#x) present in the HTML code (href="#x" id="x")

Can anyone come up with a brilliant solution as to why my internal links are not functioning properly on a webpage? I've coded the HTML with the usual

<a href="#link"><button>Some Text</button></a>
....
bunch of content
....
<div id="link"></div>

Take a look at the codepen link provided: http://codepen.io/Cornucopia/pen/vyrPWw?editors=1100#0

For some inexplicable reason, this setup was not working until I started eliminating pieces of code and pinpointed the line causing the issue. It turns out that one of the linked CSS files contained a "float: left;" rule for the li elements. This style is not directly related to the button link, so it's puzzling why it would affect the hyperlink functionality. Nevertheless, once I commented out " .grid .tile {float: left;} ", the link started working again.

htmlcss

Answer №1

the outcome you are receiving is completely accurate.

Scenario 1: 

/*.grid .tile {float: left;} */
<div id="link" style="width:100%;height:30px;background:yellow;"></div>

Outcome:

https://i.sstatic.net/hX5SD.png

Furthermore, when your button is clicked, you are redirected to this location.

Scenario 2: 

.grid .tile {float: left;} 
<div id="link" style="width:100%;height:30px;background:yellow;"></div>

Outcome:

https://i.sstatic.net/aG3BC.png

Observe how the position of the div has changed (yellow background)

Therefore, the hyperlink is functioning correctly. There are no issues with browser rendering, html, or JavaScript.

Cause of Error in 2nd Scenario

You have a partial understanding of float. It displays an element with a combination of behaviors similar to (display:inline + Position absolute). This signifies that first ---> it no longer retains its height and does not allocate space for the next element. Second, it no longer affects the other elements' locations on the Y-axis, specifically their heights.

As a result, all your list items (which are set to float:left) do not contribute to vertical spacing or height. Consequently, the Div has shifted upwards (similar to how position:absolute elements do not impact other elements).

By removing this aspect, you will achieve your intended outcome.

I trust this explanation clarifies things for you!

Answer №2

The issue lies in the fact that all elements are floated left except for the 

<div id="link"></div>
. I experimented with the following solution and it appears to resolve the problem.

.grid .tile { float: left;} /*cause of issue*/
#link { clear:left;} /* include this */

By adding clear:left;, the float is reset and the div returns to its original position. Afterward, the floats resume normally. :)

An important consideration is whether you want a break between the images. If you prefer everything to line up seamlessly, such as the male pictures and car pictures, consider using #link { float:left; }. However, given the differing types of images, the break may be more suitable.

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

Tips for incorporating a Python script into a online project

I've been working on a Python code that detects faces and eyes using face recognition. When the code runs in PyCharm, it displays a camera window. Now I'm trying to figure out how to integrate this window into a webpage project written in HTML, C ...

javascriptpythonhtmlcss

Having trouble with displaying the logo on the navigation bar (using bootstrap and django)?

Hello, I am struggling to include a logo in my navbar and it's not being displayed. Despite researching similar queries from others, I still can't figure out why the image won't show up. I'm uncertain whether the issue lies within my co ...

htmlcssbootstrap-5

Combining Javascript and Django for a powerful web development solution

Having trouble setting up JS on my Django web app, despite reading through the documentation and previous queries. Using the Django dev server with the following file structure: mysite/ __init__.py MySiteDB manage.py settings.py ...

javascriptpythoncssdjango

in vuejs, a legendary row is added to the table every 25 or 50 records

VueJS v-for is functioning properly: <tr v-for="request in requests"> <td>{{request.name}}</td> <td> .. etc .. </td> </tr> Now, I want to insert a legend row after every 25 or 50 records. Here's what I tri ...

htmlvue.jsv-for

Importing .js files from the static folder in Nuxt.js: a step-by-step guide

I'm in the process of transitioning my website, which is currently built using html/css/js, to Nuxt.js so that I can automatically update it from an API. To maintain the same website structure, I have broken down my code into components and imported ...

javascriptcssvue.jsimportnuxt.js

flexbox layout with a fixed sidebar that stays in place

Is there a way to make the sidebars in the holy grail layout sticky using flexbox? Specifically, I want the aside and nav sections of the HTML to stop scrolling down further once the last element is reached. I've tried various methods but with limited ...

cssflexbox

Incorporate Web-GL sandbox effects into an HTML webpage

I am searching for a method to showcase a Web-gl shader obtained from GLSL Sandbox on the background of an HTML page. Yet, it seems there is no simple embeddable API available. How can I accomplish this task? Can I integrate this specific Shader into an H ...

javascripthtmlglslwebgl

JavaScript | Calculating total and separate scores by moving one div onto another div

I have a fun project in progress involving HTML and Javascript. It's a virtual zoo where you can drag and drop different animals into their designated cages. As you move the animals, the total count of animals in the zoo updates automatically with the ...

javascripthtmlcountdrag-and-dropdrop

Ways to incorporate CSS padding into a website displayed in a webView

I have been trying to figure out a way to apply padding-bottom (Custom CSS) to a webpage fetched from RemoteConfig (URL provided). Unfortunately, I do not have direct access to the webpage's source files for editing. Below is the code snippet in ques ...

javaandroidcssandroid-webview

Aligning table data elements within a division

Currently working on revamping a tech night website for my school. I made some changes to the navbar, switching it from the side to the top. However, I'm struggling to get the table data and menu to center properly within the div. If you'd like ...

htmlcssmenunavbarnav

A division of text is colliding with a division that holds a list with no particular

Hello everyone, I am new to HTML/CSS and I am facing an issue that I believe can be easily resolved. Currently, my code has four sections, with the last three displaying as expected in a consecutive manner. However, the second section is overlapping on t ...

htmlcss

css table cells with overflow

I need help with a table where I have text in one of the td cells that goes beyond the right border and wraps to the next line. What I want is for the overflowing text to be hidden when it reaches the border, showing only the last 3 visible characters repl ...

cssoverflow

CSS for Centering Text and ImageAchieving the perfect alignment

I have a footer positioned at the bottom of my webpage containing some text along with a few PNG images. I am attempting to center everything within the footer. I tried using margin: 0 auto, but it didn't work due to the footer not being a block elem ...

htmlcsscentering

How to Resolve File Paths in CSS Using Angular 7 CLI

My assets folder contains an image named toolbar-bg.svg, and I am attempting to use it as the background image for an element. When I use background: url('assets/toolbar-bg.svg'), the build fails because postcss is unable to resolve the file. How ...

cssangularsasscommand-line-interfaceassets

Dynamic table that collapses/expands in Python's Flask framework

I am currently working on developing a table in Flask with collapsible rows. I have encountered an issue where, while hardcoding values works perfectly, populating the table using a loop with data from a Python dictionary results in only the first child of ...

pythonjqueryhtmlflask

What is the best way to convert my JSON data to HTML using JavaScript?

My dilemma seems to be rooted in the use of backticks. Strangely, an error keeps popping up whenever I try to employ them in my IDE (Brackets). I attempted solutions by testing directly in my Browser and through NotePad++, but unfortunately, nothing seeme ...

javascripthtmljson

Add to and subsequently remove the possibility of deleting that element

I encountered an issue while moving elements from one div (x) to another div (y). The problem is that the elements in div x are deletable, but once they are copied to div y, they cannot be deleted. Here is the initial state: https://i.sstatic.net/4yQ6U.pn ...

javascriptjqueryhtmlcss

The CSS background fails to expand to the entire height of the element

I'm encountering an issue where an element with 100% height is extending beyond its boundaries when there are multiple blocks. For a demonstration, you can refer to this jsfiddle example: http://jsfiddle.net/yPqKa/ Any suggestions on how to resolve ...

htmlcss

Creating interactive buttons within a card in Ionic 2

I created a card in Ionic 2 with the following structure. Upon clicking the card, it navigates to another page. <ion-content padding class="item item-text-wrap"> <ion-list> <ion-item *ngFor='let topic of topicList' text-wr ...

htmlangularionic2

The Prev and Next controls on the web carousel have mysteriously vanished

I managed to successfully create a carousel in the picture below, but I'm facing an issue where the next button is positioned on the white side of the page. Despite trying to enlarge the carousel's size, it ends up going below the category contai ...

htmlcarousel