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

Is there a way to assign retrieved data to the $scope.variable?

I'm relatively new to both JavaScript and Angular. I have a piece of code that fetches data from an API and successfully prints it to the console, but I'm facing issues when trying to assign this data to $scope.saveData. It seems to only work wit ...

javascripthtmlangularjsweb

Using Javascript to dynamically retrieve accordion content from a dynamically generated ID

I am currently working on developing a more intricate accordion feature. The accordion will consist of 4 buttons (section 0-3) with unique content (lorem ipsum 0-3). Clicking on "section 0" should reveal "lorem ipsum 0", while clicking on "section 1" shoul ...

javascripthtmlcssaccordion

Automatically conceal a div once an iframe reaches a specific height

When a user schedules an appointment on our website, it triggers a change in the height of an iframe. I want to automatically hide the section above the iframe once the iframe's height has changed. Currently, I have implemented the following code whic ...

javascriptjqueryhtmlcssiframe

Tips for containing `overflow` within a flexbox container

I've organized my body space into three sections: header, content, and footer. To achieve a sticky footer effect at the bottom, I used the flex property in my layout. However, I'm struggling to add a scrollbar to my main container box. I've ...

htmlcssflexbox

Navigating with a Stuck Navigation Bar Using BootstrapretaF

My website has a sticky navbar with a dropdown menu that allows users to jump to different sections of the page. However, I've noticed that when I navigate to a new section, the navbar covers part of the content at the top. After inspecting the navbar ...

htmlcssbootstrap-4

React Navigation Error: navigateTo must be used within a valid router configuration

When attempting to utilize useNavigation() from react-router-dom, I encounter the following error: Error: useNavigation must be used within a data router. See https://reactrouter.com/en/main/routers/picking-a-router. NavBar src/components/NavBar.js:6 3 ...

javascripthtmlreactjsreact-router-dom

Utilizing Font-face and background images in asset-pipeline plugin: A comprehensive guide

I am currently using the asset-pipeline from CodeSleeve to handle my style sheets in my Laravel project. I have successfully downloaded the application.css file, but I have a question: how can I include images and use font-face in this setup? Here is a sn ...

csslaravellaravel-4asset-pipelinefont-face

Trouble encountered while trying to animate an SVG path

My attempt to animate an SVG is not working for some reason. https://i.stack.imgur.com/atTg3.png This is the component where I'm trying to load the SVG: import { JapanMap } from "../illustrations/japanMap"; export default function Home() ...

htmlcssnext.jscss-animations

Tips for selecting a dropdown item that shares the same data-testid

I am attempting to use Selenium to click on an option in a dropdown menu. The options all have the same 'data-testid', and the only unique identifier appears to be the link text. Does anyone know of a way to select a specific choice within the dr ...

c#htmlseleniumxpathselenium-webdriver

styling multiple elements using javascript

Recently, I created a jQuery library for managing spacing (margin and padding). Now, I am looking to convert this library to pure JavaScript with your assistance :) Below is the JavaScript code snippet: // Useful Variables let dataAttr = "[data-m], [d ...

javascriptjqueryhtmlcssvisual-studio-code

Analyze XML elements and retrieve their associated content

Analyzed below are the contents extracted from the processed XML file: <dblp> <incollection> ...

pythonhtmlxmlpython-3.x

Navigating the Foundation Topbar - Should I Toggle?

Is there a simpler way to achieve the navigation I desire, similar to the switcher for uikit? Instead of using data-toggler on each tag in my top bar, is there an easier method where I can click links in my top bar to display different content without go ...

javascripthtmlcsszurb-foundation

Transfer documents through HTML POST method, connecting to an API, Lambda function, and eventually storing them in an s3 bucket via the Amazon API Gateway protocol, labeled as

I have successfully implemented code to upload a single file to s3 using lambda/api. This works with an html post request. Originally, I followed a YouTube tutorial on Amazon API Gateway (video reference: p26). However, I now need to modify the code to h ...

htmlamazon-web-servicesapipostlambda

Custom Angular directive for collapsing sub menus with CSS

I found a helpful article on creating collapsible menus and submenus using only Bootstrap and custom code for Angular 2, 4, 5, 6. I've been able to implement the logic successfully, but I'm facing an issue with multiple menus where clicking on an ...

htmlcssangulartypescripttwitter-bootstrap-3

Angular components are not receiving the Tailwind CSS attributes applied to :root classes

In my Angular 12 project, I have integrated Tailwind CSS. The structure of the package.json is as below: { "name": "some-angular-app", "version": "0.0.0", "scripts": { "ng": "ng&quo ...

javascripthtmlcssangulartailwind-css

The container cannot contain the overflowing DIV

I have 4 different divisions named outer, inner, title, and content. My goal is to place the inner div inside the outer div, with both the title and content divs positioned within the inner div, one above the other. I have set the outer and inner divs to b ...

css

Guide for overlaying text on an image in react native

Is there a way to vertically align text over an image in react native? I came across this helpful guide, but I encountered difficulties trying to implement it. Specifically, I couldn't figure out how to nest the text tag within the Image tag. Below is ...

javascriptimagereact-nativejsx

Dropped down list failing to display JSON data

I created a website where users can easily update their wifi passwords. The important information is stored in the file data/data.json, which includes details like room number, AP name, and password. [ {"Room": "room 1", "AP nam ...

javascripthtmljson

Confirmation dialog with user-defined button text

When the confirm prompt box is used, it typically displays "ok" and "cancel" buttons. I am looking to customize the label text for the buttons to read as Agree and Not Agree instead. If you have any suggestions on how to achieve this modification, please ...

javascripthtml

Application with Single Page design has a Large DOM, leading to sluggish performance

I've been working on a single page application that heavily relies on widgets like grids and tabs from the jqWidgets library. These widgets are all loaded when the page is first opened. However, I've noticed that after interacting with the site f ...

javascripthtmlperformancedom