Combining multiple images into one CSS image sprite to create 4 clickable

Could someone please review this segment of the CSS to ensure its accuracy?

CSS

#nav-list {
    list-style-type: none;
    background-repeat: no-repeat;
    background-image:url("../_img/Footersprite.png") 
}

#nav-list li, #nav-footer a {
    height: 40px;
    display: block;
}

#nav-list li {
    float: left;
    list-style: none;
    display: inline;
    text-indent: -9999em;
}

#nav-list-why-repair-01 { width: 98px; }
#nav-list-savings-02 { width: 131px; }
#nav-list-enviromental-03 { width: 123px; }
#nav-advantage-04 { width: 138px; }

#nav-list-why-repair-01 a:hover { background:url(./_img/Footersprite.png) 0px -40px no-repeat; }
#nav-list-savings-02 a:hover { background:url(./_img/Footersprite.png) -98px -40px no-repeat; }
#nav-list-enviromental-03 a:hover { background:url(./_img/Footersprite.png) -229px -40px no-repeat; }
#nav-list-advantage-04 a:hover { background:url(./_img/Footersprite.png) -352px -40px no-repeat; }

HTML

<ul id="nav-footer"
<a class="whyroofrepair" href="/why-roof-repair.html">Why Roof Repair?</a>
<a class="Savings" href="/savings.html">Savings</a>
<a class="EnvironmentalBenefits" href="/environmental-benefits.html">Environmental Benefits</a>
<a class="RoofRxAdvantage" href="/roof-rx-advantage.html">Roof Rx Advantage</a>
</ul>

I require assistance with the HTML. Can anyone offer advice on how to rephrase this correctly without altering the provided CSS assuming it is correct?

htmlcss

Answer №1

If you're uncertain about the appearance of the links, you can align the HTML with the CSS provided by structuring it like this:

<ul id="nav-list">
    <li><a class="whyroofrepair" href="/why-roof-repair.html">Why Roof Repair?</a></li>
    <li><a class="Savings" href="/savings.html">Savings</a></li>
    <li><a class="EnvironmentalBenefits" href="/environmental-benefits.html">Environmental Benefits</a></li>
    <li><a class="RoofRxAdvantage" href="/roof-rx-advantage.html">Roof Rx Advantage</a></li>
</ul>

It may be necessary to eliminate the text-indent: -9999em; from the CSS if visibility of the link text is desired.

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

Is it possible to modify the CSS styling in React using the following demonstration?

I am attempting to create an interactive feature where a ball moves to the location where the mouse is clicked. Although the X and Y coordinates are being logged successfully, the ball itself is not moving. Can anyone help me identify what I might be overl ...

javascriptcssreactjstypescript

What are the best practices for implementing the CSS id selector?

As someone new to web development, I am facing an issue with my code where the CSS id selector is not functioning as expected: li { border: 3px solid red; } h3 { background: green; } #special { color: green; } <h3>Todo List</h3> < ...

htmlcss

Is it possible to stack navbar items in CSS?

I'm facing an issue with my navbar menu items overlapping on top of each other. What could be the reason behind this? Codepen Link: https://codepen.io/ogonzales/pen/mdeNNLB Code Snippet: <nav class="navbar navbar-expand-md navbar-light fixed-t ...

htmlcss

When the window is resized, the div shifts position

I recently added a div to my website with the following code: <div id="div"></div> #div { height: 400px; width: 300px; position: absolute; right: 59%; text-align: left; } Howe ...

htmlcss

Self-moving button container

I have a challenge involving a button and a sliding div. When the button is clicked, I want the div to slide. The problem arises when I place the button inside the sliding div - it ceases to slide. I understand the issue at hand, but I'm unsure of ho ...

javascriptjqueryhtml

Step-by-step guide on integrating node.js and MySQL to store data from an online form in a database

Currently, I am attempting to insert data into a MySQL database using node.js by clicking the submit button. However, an error message has appeared and despite understanding it somewhat, I am unsure of how to proceed. Any assistance would be greatly apprec ...

javascripthtmlmysqlnode.js

When you zoom in or out, HTML5 elements styled with CSS will dynamically adjust

Hey everyone, I have a question about a problem I'm facing with my HTML and CSS page. The issue is that when I zoom in, the "Section" part moves underneath the nav bar, and when I zoom out, the footer moves next to the section part... Below is a sni ...

csshtmlcss-position

Limiting zero is ineffective when it comes to pop-up issues

Hey there, I'm looking to prevent users from inputting zero and dot in a specific field, which is currently working fine. However, when the field is within a pop-up, the code below doesn't seem to work. <script> $('#name').keyp ...

javascriptjqueryhtmlcss

The picture is not visible outside the parent container - why is it hidden?

Currently, I am working on project cards and using materialize css's image card to style them. One of the features that I particularly like is how it resizes the picture when included inside a container. This allows me to set a fixed height without wo ...

htmlcsstwitter-bootstrapmaterialize

Change to a dark theme using React hooks in typescript

Hello, I am new to React and English is not my first language, so please excuse any mistakes. I have been trying to enable a dark mode feature on my website. Most examples I have found involve toggling between dark and light modes where you need to specify ...

javascriptcssreactjstypescript

HTML - Selecting Different Values in One Drop Down Based on Another Drop Down

When selecting "First Year" in the initial drop-down menu, the options "Sem1" and "Sem2" should be displayed in the second drop-down menu. Similarly, when choosing "Second Year" in the first drop-down menu, the choices "Sem3" and "Sem4" should appear in th ...

javascriptphpjqueryhtml

Issues with the functionality of the submit button (html, js, php)

Seeking assistance with a submit button functionality issue - I have a simple submit button that allows visitors to enter their email address. Upon clicking the button, it should add their email to a CSV file and display a pop-up thank you message. The pr ...

javascriptphphtmlsubmit-button

Using the <li dir="..."> tag can cause list indicators to break

Is there a method to utilize dir tags for <li> elements without disrupting the list indicators? Logically, they should all align on the same side and RTL <li> elements in an otherwise LTR document should either be left-aligned if it's only ...

htmlcsshtml-listsdirection

I prefer showcasing the contents at the top of the page instead of the bottom

Is there a way to show the message for the $myGame variable after submitting a post? <!DOCTYPE HTML> <html> <head> </head> <body> <?php $myGame = ""; if ($_SERVER["REQUEST_METHOD"] ...

phphtmlpost

What is the best way to implement a gradual decrease in padding as the viewport resizes using JavaScript

My goal is to create a responsive design where the padding-left of my box gradually decreases as the website width changes. I want the decrease in padding to stop once it reaches 0. For instance, if the screen size changes by 1px, then the padding-left sh ...

javascriptcss

After attempting to refresh the webpage with the F5 key, I noticed that the jQuery progress bar was not functioning properly. Additionally, the webpage failed to display any

Trying to implement a web loading bar using jQuery on my website was initially successful, but I encountered an issue when reloading the page with F5. The progress bar would not work and the webpage displayed only a white background. Below is the code snip ...

javascripthtmljquerycss

JavaScript button for displaying and hiding all content in one click

I came across a tutorial on W3Schools that showed how to create collapsibles, and I thought it would be great to have buttons that could expand or collapse all at once. I've been trying to implement this feature using the code provided in the tutorial ...

javascripthtmlcss

I am currently attempting to design a blurred background with text overlay, where the text seems to clear up the blur effect of the background. However, I am facing

Goal: I want to achieve a visually appealing effect by overlaying text on a blurred background image, making it appear as though the text is transparent and revealing the clear background image behind it. Status: I have successfully created a layout with ...

htmlcss

Unable to place within div

Utilizing HTML5 to implement the "DnD" function. There is a button that adds divs. I want to be able to drag items into these newly added divs. Currently, I can only drag into existing divs and not the ones added later. How can I resolve this issue ...

javascriptjqueryhtml

Learn how to center content and stretch a column using Vuetify frameworks

Looking for a layout with 2 columns of equal height and centered content vertically? Here's how to achieve it using Vuetify! Check out the code snippet below: <div id="app"> <v-app> <v-row align="center"> ...

htmlcssvue.jsvuetify.js