Adjust the position of the hover background and font downwards

I am experiencing an issue with the hover effect on my navigation bar. When I hover over the different elements in the nav bar, the text and background appear to be moved up slightly and are not aligned with the nav bar.

Here is a screenshot:

https://i.sstatic.net/uBWSW.jpg

Below is the code snippet:

body {
    background-image: linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3)), url('tape-measure.jpg');
    background-size: cover;
    height: 1000px;
    color: #000305;
    font-size: 100%;
    font-family: 'Coming Soon', 'Lucida Sans Unicode', cursive;
    line-height: 1.5;
}

a {
    text-decoration: none;
}

... (code continues)


<!DOCTYPE html>
<html lang="de">
    <head>
<title>Couture Anni</title>
<meta charset="utf-8">

        <link rel="stylesheet" type="text/css" href="resources/css/style.css">
        <link href="https://fonts.googleapis.com/css?family=Coming+Soon" rel="stylesheet">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
    </head>
    <body>
<header class="mainHeader">
<img class="Logo" src="resources/img/Content%5Cvariation_800_e.png" alt="Logo">
<img class="Margrit" src="resources/img/IMG_5347_small.jpg" alt="Annamaria Hofstetter">

... (code continues)

</html>

I have included this extra text to provide more context and details in order to meet the required post guidelines.

htmlcss

Answer №1

body {
  background-image: linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3)), url('tape-measure.jpg');
  background-size: cover;
  height: 1000px;
  color: #000305;
  font-size: 100%;
  font-family: 'Coming Soon', 'Lucida Sans Unicode', cursive;
  line-height: 1.5;
}

a {
  text-decoration: none;
}

a:link,
a:visited {
  color: #CF5C3F;
}

a:hover,
a:active {
  background-color: #CF5C3F;
  color: #fff;
}

.mainHeader {
  width: 90%;
  margin: 0 auto;
}

.mainHeader nav {
  width: 100%;
  background-color: #9cb34f;
  height: 40px;
  border-radius: 5px;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
}

.mainHeader nav ul {
  list-style: none;
}

.mainHeader nav ul li {
  text-align: center;
  display: inline-block;
  width: 23%;
  position: relative;
  top: 8px;
}

.mainHeader nav a:link,
.mainHeader nav a:visited {
  color: #fff;
}

.mainHeader nav a:hover,
.mainHeader nav a.Home:link,
.mainHeader nav a.Home:visited {
  background-color: #CF5C3F;
  text-shadow: none;
  padding: 8px 20px;
}

.mainHeader nav ul li a {
  border-radius: 5px;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
}
<!DOCTYPE html>
<html lang="de">

<head>
  <title>Couture Anni</title>
  <meta charset="utf-8">

  <link rel="stylesheet" type="text/css" href="resources/css/style.css">
  <link href="https://fonts.googleapis.com/css?family=Coming+Soon" rel="stylesheet">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>

<body>
  <header class="mainHeader">
    <img class="Logo" src="resources/img/Content%5Cvariation_800_e.png" alt="Logo">
    <img class="Margrit" src="resources/img/IMG_5347_small.jpg" alt="Annamaria Hofstetter">

    <nav>

      <ul>
        <li><a class="Home" href="#">Home</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Portfolio</a></li>
        <li><a href="#">Kontakt</a></li>
      </ul>

    </nav>


    <p class="inBearbeitung"><strong>Diese Seite ist in<br>Bearbeitung.<br> Bis demnächst!</strong></p>
  </header>



  <footer class="mainFooter">

    <p>Copyright © <a href="#" title="couture-anni">couture-anni.ch</a></p>

  </footer>

</body>


</html>

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

How can we align the top edge of a div to the center of a circle within a separate div in a responsive manner?

I want to create 2 stacked divs: the first div contains a circular image, and the second div contains text. I want the second div to always cover half of the circle, with its upper edge positioned at the center point of the circle. This is my code: .cov ...

javascripthtmlcssbootstrap-4

What is the best way to address background-image overflow on a webpage?

I'm facing a challenge in removing the overflow from a background-image within a div. There are 4 divs with similar images that combine to form one background image (I adjust the position of each image so they align across the 4 divs). Essentially, I ...

javascriptjqueryhtmlcss

Listen for the chosen choice

What is the best way to display a chosen option in PHP? I have set up an HTML menu list with options for "Buy" and "Sell". I need to output 'I want to buy the book' if someone selects "buy", or 'I want to sell the book' if someone pick ...

phphtml

Using the context_processors variable within a Django "if" condition

Developing themes for my Django website is my current project, and one of my goals is to adjust the HTML text color based on a context_processors variable. The context_processors variable options are : Datasystems or Cameroun (I currently have two themes, ...

pythonhtmldjango

Weird Javascript behavior when classes are manipulated during mouse scrolling

Searching for a Javascript expert to assist in solving a particular issue. I have a simple function that I need help with. The goal is to add a bounceDown class when scrolling down by 1px, have it run for 5 seconds, and then remove the class for future use ...

javascriptjqueryhtmlcss

Adjusting the size of images in a Bootstrap lightbox gallery

I am currently working on a website for an artist, making the galleries a key aspect. The website is built using Bootstrap, with the Lightbox for Bootstrap plugin being used for the galleries. Everything seems to be working well in terms of adjusting the i ...

javascripthtmlcsstwitter-bootstrap

"How to automatically populate an input field with a value when the page loads in an

I need assistance with setting the input value to 1 when the page is loaded, but for some reason, it remains empty. Can someone help me troubleshoot this issue? <tr *ngFor="let item of cartItems; let i=index"> <td class="cart_pr ...

javascripthtmlangular

showing errors in case the username does not match the specified pattern

As I work with symfony, one of the challenges is displaying errors when the username does not fit the specified pattern. How can this be achieved? {{ form_widget(form.username, {'attr':{'pattern': '[a-zA-Z]*'} }) }} ...

angularjsregexhtmlsymfony

I tried moving the onchange(this) function from HTML to JavaScript, but I seem to have missed a parameter. The code ends

I'm currently building a website for a fictional ice cream shop to enhance my JavaScript skills. function hideAAndB() { var pickupDiv = document.getElementById("pickupDiv"); var deliveryDiv = document.getElementById("deliveryDiv"); pickupDi ...

javascripthtmldomparameters

Pictures failing to display in their designated location

Having trouble with my social media icons on the page. They either get hidden by other divs despite having a higher z-index or appear below the top section. I want them to be positioned to the right of the church image. I've tried different approaches ...

htmlcss

duplicate styling for individual table cells

I am in need of a span element inside a td tag that I am generating within a table. In order to ensure the span fills the td, I have set it as an inline-block with a width and height of 100%. However, when pressing the delete key in the last cell, it star ...

htmlcss

CSS in flexbox nested with no overflow utilized

I have created a basic "table" layout using flexbox. I want to implement horizontal scrolling for a specific part of the table by using overflow-x property. When you look at the provided code snippet, you'll notice that the CSS styles are only visib ...

htmlcssflexbox

Tips on how to align several divs within another div

I've been attempting to center multiple div blocks within another div or HTML document, but I haven't had any success with the methods I've found on StOv. Here's an image of what I'm aiming for: https://i.stack.imgur.com/DB7uQ.jp ...

jqueryhtmlcss

"Enhance your website with the ability to dynamically load and display

I am facing a little issue and need suggestions because I am struggling with inserting data into an HTML page using the append jQuery function and AJAX request. Within my HTML block, under ul elements, there are some images that I directly insert into the ...

jqueryhtmlajaxappendinstagram

What is the best way to refresh templates (html) when deploying a new version of a SPA?

I'm facing an issue with caching of HTML templates in the browser when releasing new versions of my Single Page Application (SPA). My SPA is built with Angular 1.5, ocLazyload, and ui-router. I have set up gulp tasks to implement cache-busting using ...

htmlangularjsbrowser-cacheoclazyload

Shift content from side to side with a click

I've been attempting to shift content left and right using an onclick event and I need it to stop at the margins on the left or right. The list-items are generated dynamically. Here's the code I've tried so far, but it's not quite worki ...

javascriptjqueryhtmlonclick

The title element is persistently appearing on the same line

As a beginner, I've created a document with a 3x3 checkerboard using HTML and CSS. However, I'm facing an issue where the heading element is not displaying on a separate line as expected. I believe the problem lies in the CSS styling, specifical ...

htmlcsspositioncss-float

Minifying HTML, CSS, and JS files

Are there any tools or suites that can minify HTML, JavaScript, and CSS all at once? Ideally, these tools should be able to: Identify links from the HTML document and minify the associated JavaScript and CSS. Remove any unused JavaScript functions and CS ...

javascripthtmlcssminify

Obtain information about a div element while scrolling

Looking to enhance my social feed page by adding a view count feature for each post. The challenge is figuring out how to keep track of views as the user scrolls down the page. Any suggestions? ...

javascriptjqueryhtml

Adjust the size of the image as needed in order to fit within a container of fixed

Is there a clever way to use CSS and/or JavaScript/jQuery to adjust the size of images only when necessary for them to fit within a fixed-height container alongside the remaining content? Upon reviewing the images in the 'new this week' and &apos ...

javascriptjqueryhtmlcss