HTML and CSS link conflict

As a beginner in CSS, I am experimenting with creating a simple website using HTML and CSS. However, I have encountered an issue where the links on the left side of my page are being interfered with by a paragraph in the middle section. This causes some of the links to be unclickable.

I have included my CSS code below. Can someone please help me identify what I am doing wrong?

body  {
  color: white;
  background-color: black;
  font-family: Verdana, Geneva, sans-serif;
}

header {
  border: 5px solid blue;
}

table, th, td {
  border: 1px solid white;
}

section {
  font-family: arial;
  font-size: 15px;
  text-align: center;
  padding: 70px;
  left: 0; 
  margin: auto;
  margin-top: -100px;
  position: absolute;
  top: 50%;
  width: 100%;
}

nav ul {
  padding: 15px;
  line-height: 3em;
  list-style-type: none;
}

nav ul li a {
  color: white;
  color: rgba(255, 255, 255, 0.5);
  text-decoration: none;
}

nav ul li:hover {
  list-style-image: url(download.png);
}

nav ul li a:hover {
  color: rgba(255, 255, 255, 1);
}

Answer №1

http://codepen.io/davidatthepark/pen/jVLNbv?editors=1100

Feel free to click on the link I shared above. I added borders for better visualization purposes. In case you haven't noticed yet, the section was actually overlapping the nav. To align elements next to each other, using display: inline-block is a great technique. It's important to understand the display property when working with CSS. Essentially, I adjusted the width of the nav to 30%, the section to 65% to ensure they fit within the total width, and applied display: inline-block to both. Hopefully that explanation clarifies things!

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 link text does not appear in black color

Can anyone assist in modifying this code snippet? I'm trying to make the text appear black, but it's showing up as light grey on the Dreamweaver preview screen even though the CSS says it should be black. View Fiddle Below is my HTML code: < ...

What distinctions are there between placing a `<link rel="stylesheet" href=..video.scss>` in the index.html versus utilizing `import '../video.scss'`?

As a newcomer to React.js, I've observed that there are different ways to include stylesheets in a React Component. Some developers use the import method like this: import '../../styles/video.scss while others prefer to link the stylesheet dire ...

What are the steps to properly centralize a "brief biography"?

I've been struggling to align my short bio on my webpage. I used Bootstrap to create a column layout with a picture and text, but I can't seem to center it properly. Various attempts were made, including using float: left and float: right, as we ...

What is the best way to create a fully clickable navbar item for the Bootstrap dropdown feature?

I'm struggling to make a button in a navbar fully clickable for the dropdown to open. Even when I try adding margin instead of padding, it only makes things worse. Can someone help me figure out what mistake I'm making here? Essentially, my goal ...

Unpredictable hues in a headline

Can the text in an H1 tag have each word appear in a different random color, and then refresh to show new random colors? I have 5 specific colors in mind that I'd like to use. How would I go about coding this? ...

Having trouble with changing the selected value in JQuery?

I'm attempting to use jQuery to set the select option, but I'm encountering an issue. It is setting the value properly, but the text is not being updated. I've experimented with .prop('selected',true), .attr('selected',t ...

Display a spinning wheel or progress bar while the website is in the process of loading

Looking to construct a treeview using the jquery-treeview plugin but noticing it's quite time-consuming (about 5-7 seconds). I'm interested in adding a spinning wheel or progress bar to indicate loading while the page is processing. Any suggestio ...

Canvas with a button placed on top

I am working with a canvas and trying to position an HTML element over it using CSS. My goal is for the button to remain in place on the canvas even when resizing the entire page. Here is the code I am currently using. https://jsfiddle.net/z4fhrhLc/ #but ...

Guide on including a JavaScript file in HTML during execution on Node.js

I have developed a basic nodeJs server with the following code in my server.js file: var http = require('http'); var fs = require('fs'); var path = require('path'); var server = http.createServer(function(req, resp){ // P ...

How can I retrieve the selected value from an Angular 2 dropdown menu when it changes, in order to utilize it within a function?

I am currently working on creating a dropdown menu with multiple options. When a user selects an option, I need to make an API call that requires an ID parameter. Inside my component.ts file, I have defined an array containing the values like this: valu ...

How can I deactivate Bootstrap specifically within a certain block of content?

Is there a way to deactivate Bootstrap within a specific section? I want the styles from Bootstrap's CSS file to be overridden inside this div. ...

Embed the aspx file within the background-image attribute similar to how an image source is

Within my asp.net application, there is an image tag linking to another aspx file in the src attribute, displaying a picture. <img src="/picture.aspx?Param=3" alt="picture"/> I need to convert the image tag into a div with a background-image proper ...

Adjust the height of the div container and implement a vertical scroll feature on the fixed element

I created a fiddle and was hoping to enable scrolling, but I have been unable to find a solution. http://jsfiddle.net/sq181h3h/3/ I tried both of these options, but nothing seems to be working: #league_chat { overflow-y:scroll; } #league_chat { ...

Swap out the variables in your function with the values selected from the dropdown menu

I've recently started delving into writing JS functions and I'm facing a challenge with the following scenario: On an HTML page, I want to change a variable within a lodash function based on the value of a dropdown and display the result in a HT ...

What are the indicators of JSON in a response?

When using ReactJS to make a fetch request to an API, the JSON body response includes the following: { "place": <a href=\"http:\/\/place.com\/ search?q=%23MILKYDOG\" target=\"_blank\">#milkydog<&b ...

Is there a way to center a particular flex item horizontally within its parent container?

Having a flex container with two items, I wish to align the first item to flex-start, and the second item to the center of the flex container. I am particularly concerned about maintaining align-items: center to ensure that all flex items are vertically ce ...

Obtaining data attributes in Angular 8

I'm working with Angular 8 and I came across an issue. In my code snippet, there are two data attributes assigned to a button element, but only one attribute is showing up. Is this a syntax error or a bug? <button [attr.data-popolamento]="all" [a ...

Using the cordova-plugin-file to access and play video files stored on an external SD

I am in need of assistance with displaying an image and playing a video file from the root directory of an external SD card in my Cordova wrapped HTML project. I couldn't find a suitable place to ask these questions on the GitHub page for the cordova- ...

Prevent Image Distortion in HTML and CSS

Is there a way to prevent a background image from stretching in html/css? Take a look at the current code below, where the image behind a button appears like this: #backImage6{ /*@editable*/background-image:url(https://images.unsplash.com/phot ...

Tips for inserting a rotated image using CSS

I've created the following code snippet. However, there is a new requirement stating that the image needs to be rotated by 180 degrees. How can I make this happen? #cell { background-image: url("../images/logo.PNG"); background-attachment: fixed; b ...