The css cropping issue with sprite image is not being resolved

I'm currently working on creating a sprite image for the bottom links on our media page, but I seem to be having trouble getting the image to crop correctly. Can anyone point out where I may be making a mistake?

CSS

.footer{
    position:absolute;
    bottom:0px;
    margin:5px;
    border:2px solid grey;
    width:200px;
    height:55px;
    overflow:hidden;
    display:block;
}

#twitter{
    background:url('http://unifiedforunifat.com/redesign/resources/social.jpg') no-repeat;
    height:50px;
    width:50px;
    background-position: 0 0;
    display:block;
}

#twitter a:hover{
    background:url('http://unifiedforunifat.com/redesign/resources/social.jpg');
    background-position: 0 50px;
}

HTML:

<div class="footer">
<a href="https://twitter.com/unified4unifat" id="twitter" class="imglink" >
<img src="http://unifiedforunifat.com/redesign/resources/social.jpg" alt="U4U's Twitter"
/>
</a>
</div>
htmlcssimagemenusprite

Answer №1

I managed to make it work by following these steps (although the !important tag may not be necessary): http://jsfiddle.net/NV6zw/6/

<div class="footer">
<a href="https://twitter.com/unified4unifat" id="twitter" class="imglink" ></a>


.footer{

margin:5px;
border:2px solid grey;
width:200px;
height:55px;
overflow:hidden;
display:block;
}
#twitter{
    background:url('http://unifiedforunifat.com/redesign/resources/social.jpg') no-repeat;
    height:50px;
    width:50px;
    background-position: 0 0;
    display:block;
}
#twitter:hover{
    background:url('http://unifiedforunifat.com/redesign/resources/social.jpg');
    background-position: -50px 0 !important;
}

Answer №2

In order for only one of the Twitter pictures to be displayed in the footer with the appropriate class, you must adjust the width of .footer to 50px instead of the entire 200px of the image.

Answer №3

<!DOCTYPE html>
<html>
<head>
  <title></title>
  <style type="text/css">
    .footer{
    position:absolute;
    bottom:0px;
    margin:5px;
    border:2px solid grey;
    height:55px;
    overflow:hidden;
    display:block;
   }

   #twitter{
     background:url('http://unifiedforunifat.com/redesign/resources/social.jpg') no-
     repeat;
     height:50px;
     width:50px;
     background-position: 0 0;
     display:block;
   }

   #twitter a:hover{
   background:url('http://unifiedforunifat.com/redesign/resources/social.jpg');
   background-position: 0 50px;
  }
  </style>
</head>
<body>
  <div class="footer">
    <a href="https://twitter.com/unified4unifat" id="twitter" class="imglink" >
    <!--<img src="http://unifiedforunifat.com/redesign/resources/social.jpg" alt="U4U's     
    Twitter"-->
    <!--/>-->
       <div style="background:  
         url('http://unifiedforunifat.com/redesign/resources/social.jpg');width: 
         50px;height:50px; background-repeat: no-repeat"></div>
    </a>
  </div>
 </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

Tips for fetching individual item information from Firebase real-time database using Angular 9 and displaying it in an HTML format

product.component.ts import { AngularFireDatabase } from '@angular/fire/database'; import { ProductService } from './../product.service'; import { ActivatedRoute } from '@angular/router'; import { Component, OnInit} from &apo ...

htmlangulartypescriptobjectfirebase-realtime-database

Guide to "flashing" an image momentarily on the screen using PHP

I'm looking for a way to display an image on my simple website for 3 seconds and then prompt the user to indicate if they recognized the image or not by clicking a button. I don't need help with the button, just how to create the timer. While I ...

phpjqueryhtmlimagetimer

What is the best way to display HTML content in a Jupyter Notebook?

While exploring my file system on a jupyter notebook server, I noticed that I can access and modify HTML and text files along with ipynb files. However, I am interested in viewing the files as rendered HTML rather than editable HTML. In simpler terms, is ...

pythonhtmljupyter

modern marquee

I have implemented a marquee tag that displays news from my database. In order to keep the marquee up-to-date without refreshing the entire page, I utilized ajax (update_panel + timer). However, I am encountering an issue where the marquee does not continu ...

asp.nethtmlajaxjquery

As you minimize the browser window, you may notice a white space appearing when scrolling over

Encountering an issue with my webpage where, upon minimizing the browser horizontally and causing overflow, scrolling over to view the hidden section results in a blank page. Any idea why this is happening? I have set my divs to a specific height (e.g. 9 ...

htmlcssstylesheet

Using a URL in the fill property is a simple process that involves specifying

Here is the snippet of the code I'm working with: <?xml version="1.0" standalone="no"?> <html> <head> <style> .someClass { fill:"url(#Pattern)"; } </style> ...

jqueryhtmlcsssvg

Bespoke Video Player using HTML5 with "Nerdy Stats" Feature

I have been given the task of creating a streaming video testing framework for internal metrics and measurement purposes. Essentially, I am looking to develop an HTML5 player that can handle streams and provide performance data related to: - Average Bitr ...

htmlvideo

What is the proper way to include a URL when submitting an AJAX form?

When I try to call a servlet using HTML, jQuery and Ajax by submitting a form, I keep getting a 404 error saying the resource cannot be found. My project is built with Maven. The Servlet is located in the src/main/java package under : com.mycompany.sample ...

javajavascriptjqueryhtmlajax

Display user's name in navigation bar using asp.net mvc

When working on an ASP.NET MVC project, I wanted to include a short message for the user, such as 'Hello, username!' In the navigation bar, specifically when the user is signed in, I encountered some display issues with the standard bootstrap la ...

htmlcssasp.netasp.net-mvctwitter-bootstrap

Arrange Raphael Objects in Their Relative Positions

I've been experimenting with Raphael.js recently and I've encountered an issue related to the positioning of each Raphael object. My goal is to create multiple 'canvases' without having them overlap within a predefined div on the page. ...

javascripthtmlcsssvgraphael

Reactively responsive table view

I am new to CSS and recently discovered a responsive table on this website that I would like to incorporate into my application. My challenge is figuring out how to switch the table layout from left to right (headers on the right and values on the left) w ...

cssresponsive-designright-to-left

Passing a variable to the render method in a PDF document

I'm currently working on a project with Django where I need to convert an HTML monthly report into a PDF. The data for the report is retrieved from a database based on the selected month. I am facing an issue in sending the selected month from the HTM ...

htmlcssdjangoclasspdf

CSS - Adding a Distinctive "Line" to a Navigation Bar

I am attempting to design a unique navbar layout with two "lines". The first line should consist of several links, while the second line would include an HTML select field with a submit button. The following code will generate the desired navbar visual ou ...

css

Designing a unique customized top navigation bar in Magento 1.9.2

I recently attempted to create a unique top menu in magento 1.9.2 by modifying the Navigation.php file located at app/code/core/Mage/catalog/Block/. I added some custom classes in an effort to customize the menu. In order to achieve this customization, I ...

phpcsstwitter-bootstrapmagento

Maintaining CSS elements in position

Hello everyone, I have a project at work where I need to create a map with specific cities pinpointed. I've completed it on my computer and now I'm trying to ensure that when I transfer it to another device, like a laptop, the points remain in t ...

htmlcss

What's the best way to update the fill color of an SVG dynamically?

Is it possible to change the color of an SVG image dynamically without using inline SVG tags? I want to create a code that allows users to specify the source for the SVG tag and a hexadecimal color value, enabling them to customize any SVG image with their ...

javascripthtmlcssreactjssvg

before sending the url with fetch(url), it is adjusted

My front end code is currently fetching a URL from a local node.js server using the following snippet: fetch('http://localhost:3000/search/house') .then(.... Upon checking what is being sent to the server (via the network tab in Firefox dev ...

javascripthtml

Adjust the width of an element as its content dynamically shifts

I have a container that contains 6 input fields. Two of them are initially hidden (display: none), but when I click on a checkbox, these two inputs become visible (display: inline). I need the width of the container to adjust and increase when the other tw ...

htmlcss

Expanding the foundation of the HTML problem

I have my main page located at index.html and I am trying to transfer my template to base.html. In the index.html file, I used {% extends 'base.html' %}, but it is showing an error of *Unresolved template reference ''base.html'&apo ...

pythonhtmldjangojinja2

Design an arrangement using div elements and CSS styling

Creating a layout for a website can be challenging. I am using three div tags - container, left, and right. My goal is to have the left side fixed-width for navigation, while the right side displays dynamic content loaded from a database. However, I'm ...

htmlcssweb