Issues with unresponsive links (HTML5/CSS)

As a beginner, I've encountered an issue where my previously working links are no longer functioning. Can anyone help identify what could be going wrong?

Below is the HTML code:

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="portfoliostyles.css">
<title>Home</title>
</head>

<body>
    <div class="header"><a href="home.html"><img class="hoofd" src="images/leaugeau.png" alt="logo"></a>  
        <ul>
           <li><a href="contact.html">Contact</a></li>
           <li><a href="about.html">About</a></li>
        </ul>
    </div>

    <img class="line" src="images/line.jpg" alt="lijn" width='95%' height='2px'>

    <div class=content>
       <img class="image" src="images/thumbnails/watrgatrthumb.jpg" alt="watrgatr" width=400px height=400px>
       <img class="image" src="images/thumbnails/typhlotrainerthumb.jpg" alt="watrgatr" width=400px height=400px>
       <img class="image" src="images/thumbnails/anneketrainerthumb.jpg" alt="watrgatr" width=400px height=400px>
    </div>

</body>
</html>

Here is the CSS code:

@charset "UTF-8";
/* CSS Document */

html,body
{
        height: 150%;
        width: 100%;
        margin:  0px 0px 0px 0px;
}

.hoofd
{
        float:  left;
        margin:  0px 0px 0px 0px;
        padding:  0px 0px 0px 0px;
}

.header
{
        height: 216px;
        width: 99%;
        position: fixed;
        background-color: #FFFFFF;
}

.line
{
        margin: 0px 0px 15px 0px;
        padding-top: 216px;
        position:fixed;
}

ul
{
        list-style-type:none;
        margin-right:5%;
        padding:0;
        text-align:center;     
}

li
{
        display:inline;
        float:right;
        margin-right:2%;
        font-size:45px;
        line-height: 280px;

}

.content
{
        padding: 230px 0 0 1.5%;
}

a
{
        font-family: "HelveticaNeue-light";
        text-decoration: none;
        color: #000000;
}


a:hover
{
        font-family: "HelveticaNeue-light";
        color: #E8DA62;
}

h1
{
        font-family: "HelveticaNeue-thin";
        font-size:      24px;
}

p
{
        font-family: "HelveticaNeue-thin";


 font-size: 12px;
}

To clarify, my pages were located in the root folder so there shouldn't be any issues with linking folders. Fortunately, the problem has been resolved now. Thank you for the assistance! I still need to figure out how to address the fixed-line issue, but I'll work on it.

Answer №1

There seems to be an issue with the CSS code where fixed position is being used on certain classes.

It would improve if you eliminate position: fixed; from these two classes below.

To understand better, please refer to the Demo.

.header
{
    height: 216px;
    width: 99%;
    position: fixed; /*Delete this line; so anchor tag can function properly*/
    background-color: #FFFFFF;
}

.line
{
    margin: 0px 0px 15px 0px;
    padding-top: 216px;
    position:fixed;/*Delete this line; so anchor tag can function properly*/

}

Answer №2

an issue arises due to position:fixed overlapping

solution: eliminate it from

.line

Example

Answer №3

Without a real-life example, it can be quite challenging to visualize, but it seems like your .line element is overlapping with other elements. If my assumption is correct:

Since it has a position:fixed property, it is layering on top of everything else, and then you have added a padding-top:216px; which extends the space it covers from the top, potentially causing it to overlap with your header and navigation menu.

To resolve this issue, consider finding an alternative way to position the .line element where you intend it to be. You might want to use top:216px:

.line {
    margin: 0px 0px 15px 0px;
    top: 216px;
    position:fixed;
}

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

The issue of incomplete post content display on WordPress pages persists despite making modifications to the style.css file

click here for image descriptionI attempted to make some adjustments in the style.css file but encountered a problem. Now, all the posts on the site are displaying "[...]" after a brief and unformatted snippet of content. Any assistance would be greatly ...

What impact will splitting a single file into multiple files have on the overall performance of the website?

Imagine having an index.php file that includes multiple other files: Contents of index.php --------------------------- include('header.php'); include('footer.php'); --------------------------- Contents of header.php ------------------ ...

Cannot render <Image> inside <Section> component

As a beginner in React, I am attempting to create an app following a tutorial. In my component, I utilized the figure tag but it's not showing up when inspecting element in Chrome. Here are the code snippets: The tutorial includes a div tag as a chil ...

Exploring an Array Based on User's Input with JavaScript

Looking to implement a search functionality for an array using AJAX. The array is pre-populated with values, and the user will input a value in a HTML text box. If the entered value is found in the array, it should display "Value found", otherwise "not f ...

Issue with the radio button functionality: it can be clicked on but does not change the background

I'm having trouble with creating inline radio buttons using bootstrap. Neither of the options are being selected. I've attempted various solutions such as adjusting the attributes for, name, and trying different ways to call the bootstrap functi ...

What is the reason behind an inline element being able to have an explicit width when floating?

When trying to set the width for an inline element <span> within a table-row containing multiple span elements, I encountered difficulty. However, after adding float: left, I was finally able to adjust the width. What is the reason behind the initia ...

Missing arrow icon in Bootstrap 4 navbar menu and sub menu

I am attempting to use the navbar component from Twitter Bootstrap 4 with a nested sub menu, but the arrow in the menu item that has a sub menu is not appearing at all, and I am unsure why. Here is where the arrow appears: https://i.sstatic.net/J6xI4.jpg ...

Any suggestions on how to repair this Node.js login interface?

Currently grappling with setting up a Node.js application with a MySQL database to create a basic login functionality. Encountering an issue: Cannot POST /login <body class="hero-image"> <div id="container"> <div ...

Transferring class titles between div elements

I would like to implement a feature where class names on div elements shift after a brief delay, perhaps 10 seconds. My goal is for the 3 classes listed below to cycle through the div elements and start over once it reaches the last one. For instance: & ...

Turn off automatic zooming for mobile device input

One common issue observed in mobile browsers is that they tend to zoom in on an input field or select drop-down when focused. After exploring various solutions, the most elegant one I came across involves setting the font-size of the input field to 16px. W ...

Dynamically resizing a property in the DOM with Angular

Could someone help me with an issue I'm having regarding resizing items on the screen in Angular when the browser window size changes? Here is my code snippet: // TS File height: number = 2.5; objHeight:number; screenHeight:number = window.innerHeig ...

Having trouble retrieving the value of the hidden field using ng-model

Hello, I'm currently learning AngularJS and facing some challenges with accessing hidden field values using ng-model. Specifically, I am working on an editing modal where I need to retrieve the ID for each record. Below is my controller code snippet: ...

Is there a way to prevent the imported JQuery from causing issues with current code implementations?

Being a novice developer in Html/Javascript/CSS/Jquery coding, I recently encountered an issue while integrating Jquery into my project. When I imported Jquery, the styling of simple buttons went haywire. Jquery worked perfectly fine when using its classes ...

Adding border color and width to an ion-avatar element can be achieved by using CSS properties

I've been struggling to add a border color and width to an ion-avatar element in Ionic 4. I've attempted to use various CSS3 code snippets, but nothing seems to work. This is what I have tried: .ion-avatar img{ width: 90px !important; h ...

Issue with onClientClick not functioning properly when performing a jQuery function call

How can I make a jQuery form appear when an ASP.NET server-side button is clicked by the user? Currently, when I click on the button during runtime, the page reloads quickly without displaying the jQuery form. I am aiming to achieve a similar effect show ...

Inserting a border both above and below an element may result in the parent overflowing

I am facing an issue similar to the following: div.parent { height: 100px; padding: 20px; box-sizing: border-box; overflow: auto; } div.parent div.thing { height: 20px; width: 90%; border: 1px solid black; } <div class="parent"> ...

Transforming data from an HTML form into a PDF document - Tips for generating multiple outputs

As a newcomer to coding, I am facing a challenge in passing input data from a form to a PHP response page and then displaying it in the browser. I have created a functionality where the user can click on a button to save the HTML element to PDF. However, I ...

An advanced password checker that notifies the user of any spaces in their password

I need help fixing my JavaScript code. The program should prompt the user for a password using a dialogue box, and then validate that the input has no spaces. If a space is detected, the program should stop and display an alert saying "Invalid, contains a ...

encountering a Zend Framework error

Looking for help with printing data after an inner join of two tables in table format. I encountered the following error in the code below: Parse error: syntax error, unexpected end of file in /home/bina/public_html/studentzend/application/views/scri ...

What are some solutions for repairing the issue of horizontal collapse?

I am currently using Bootstrap 5 to create my website template, and I have encountered a problem: After clicking the "Menu" button, not all of the sidebar elements fade out as expected (I'm attempting to use the horizontal collapsing plugin where the ...