maximum distance a button can respond to in a CSS layout

I'm trying to figure out why my CSS button has such a large clickable area. Is there a way to reduce it? When I hover over the button, the clickable area extends beyond the text, which is not ideal. Any suggestions on how to fix this without altering the CSS directly would be helpful.

Thank you.

CSS:

/*BUTTONS*/


#button-container {
    width: 900px;
    height: 35px;
}
.button-text {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 16px;
    line-height: 10px;
    color: #FFF;
    padding-top: 0px;
    padding-bottom: 0px;
    margin-left: 10px;
}

.menu,
.menu ul,
.menu li,
.menu a {
    margin: 0;
    padding: 0;
    border: none;
    outline: none;

}

.menu {
    height: 31px;
    width: 900px;

}

.menu li {
    position: relative;
    list-style: none;
    float: right;
    display: block;
    height: 21px;

}

.menu li a {
    display: block;
    padding: 0 0px;
    padding-right: 15px;
    margin: 25px -59px;
    margin-right: 12px;
    line-height: 22px;
    text-decoration: none;
    background-image: url (button-background.png);
     background-repeat:no-repeat;
  background-position:center;
  height:27px;
  width:105px;
  background-position:46px -1px;
  background-size:69px 24px;




    font-family: Helvetica, Arial, sans-serif;
    font-weight: bold;
    font-size: 14px;

    color: #000000;

    -webkit-transition: color .2s ease-in-out;
    -moz-transition: color .2s ease-in-out;
    -o-transition: color .2s ease-in-out;
    -ms-transition: color .2s ease-in-out;
    transition: color .2s ease-in-out;
    text-align: right;
    text-align: right;
    text-align: right;
    text-align: right;
}

.menu li:first-child a { border-left: none; }
.menu li:last-child a{ border-right: none; }

.menu li:hover > a {
    color: #FF6C6C;
}

.menu ul {
    position: absolute;
    top: -109px;
    left: 0;

    opacity: 0;
    background: #1f2024;

    -webkit-border-radius: 0 0 5px 5px;
    -moz-border-radius: 0 0 5px 5px;
    border-radius: 0 0 5px 5px;

    -webkit-transition: opacity .10s ease .1s;
    -moz-transition: opacity .10s ease .1s;
    -o-transition: opacity .10s ease .1s;
    -ms-transition: opacity .10s ease .1s;
    transition: opacity .10s ease .1s;
}

.menu li:hover > ul { opacity: 1; }

.menu ul li {
    height: 0;
    overflow: hidden;
    padding: 0;


}

.menu li:hover > ul li {
    height: 36px;
    overflow: visible;
    padding: 0;
}

.menu ul li a {
    width: 36px;
    padding: 10px 0 1px 10px;
    margin: 0;

    border: none;
    border-bottom: 0px solid #353539;
}

.menu ul li:last-child a { border: none; }

HTML

<div class="button-container"><ul class="menu">
  <li><a href="/index">INDEX</a></li>
  <li><a href="/category/2/">DINO</a></li>
 <li><a href="/category/1/">LIONS</a></li>


</ul>
</div>

EXAMPLE:

http://jsfiddle.net/#&togetherjs=vSgITe2BmT

Thanks !!

htmlcss

Answer №1

I recently made some adjustments to the link definitions by moving them from the a Tag to the li Tag and changing padding to margin.

You can add this code snippet to your CSS:

.menu-blogsuperior li {
  height:27px;
  width:105px;   
  padding: 0 0px;
  margin: 25px -59px;
  margin-right: 27px;
  background-image: url (boton-fondo-probar.png);
  background-repeat:no-repeat;
  background-position:center;
  background-position:46px -1px;
  background-size:69px 24px;
  text-align: right;
}

Make sure to update your CSS with this definition to match mine exactly:

.menu-blogsuperior li a {

  text-decoration: none;

  font-family: Helvetica, Arial, sans-serif;
  font-weight: bold;
  font-size: 14px;

  color: #000000;

  -webkit-transition: color .2s ease-in-out;
  -moz-transition: color .2s ease-in-out;
  -o-transition: color .2s ease-in-out;
  -ms-transition: color .2s ease-in-out;
  transition: color .2s ease-in-out;

}

This worked for me in the fiddle I was working on.

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

A PHP function with multiple parameters

I am currently in the process of updating a row on Parse using PHP and have created the following function: if (isset($_GET['updateHistory'])) { updateHistory($_GET['updateHistory']); } if (isset($_GET['ye ...

phphtmlparse-platform

The media does not need to be applied to the ".nav__btn" class

How can I hide an element with the ".nav__btn" class by setting its display to none when the screen width is at least 768px? I tried the following media code but it doesn't work. Media Code @media (min-width: 768px) { .nav__btn { display: ...

cssmedia-queries

Unable to modify div style using a JS function

I am attempting to show different divs based on the button clicked, with all starting with a display style of "none" except for one default div called "atualizacoes". After clicking a button, all divs should be set to display="none", and then the specific ...

javascripthtmlcss

How can I make my Grid items in React and Material-UI occupy the entire horizontal space without wrapping to the next row?

I am currently utilizing Material-UI within a React 16.10 project. My goal is to create a table where the left column consists of an icon, while the right column displays a label and address stacked on top of each other. I want the items in the right colum ...

cssreactjsgridmaterial-uiwidth

Tips for displaying multiple XML datasets on an HTML webpage

I came across an example on W3schools that I'm trying to replicate: http://www.w3schools.com/xml/tryit.asp?filename=tryxml_app_first However, the example only displays one CD. My goal is to showcase all the data (in this case CDs) in the XML file. H ...

javascripthtmlxml

Guide on accessing a local image while setting the background image using JavaScript

I am trying to set a background image from a local source on my computer. Below are two lines of code, one that works and one that does not: (the local one fails) _html.style.backgroundImage = 'url("urlsourceblahblahblah")'; _html.style.backgro ...

javascripthtmlcssangularjsimage

Bringing the Jquery cursor into focus following the addition of an emoji

Looking to add emojis in a contenteditable div but facing an issue with the cursor placement. Here is a DEMO created on codepen.io. The demo includes a tree emoji example where clicking on the emoji adds it to the #text contenteditable div. However, after ...

javascriptjqueryhtmlcss

Layer one image on top of another using z-index

I'm having trouble layering one image on top of another in my code. Here is my code: body { background: #000000 50% 50%; height: 100% width:100%; overflow-x: hidden; overflow-y: hidden; } .neer { z-index: 100; position: absolute; } ...

javascripthtmlcssimageoverlay

How to effectively use flexbox to resize child elements in a CSS layout

My goal is to create a layout where a child element fills the entire flex box of a flex layout. Here is an example of the HTML structure I am using: <div class="parent"> <div class="child1"> should have 100px height </div&g ...

htmlcssflexbox

Adjusting the size of a bug while hovering over a specific div

Having recently started learning HTML & CSS, I have a question regarding creating a box that scales from 1.0 to 0.8 when hovered over with the mouse. The scaling works perfectly when hovering in the middle (0.0 to 0.8) of the box. However, when hover ...

htmlcsshover

What causes the unset width or height to impact object-fit, and is there a workaround for this issue?

Query Beginnings Encountering unexpected behavior while using the value unset with the rule object-fit led me to question if there might be a rationale or workaround for this peculiar issue. Demonstration .block { &__img { width: 100%; hei ...

csssass

Send back alternate HTML content if the request is not made via AJAX

Last time I asked this question, I received several negative responses. This time, I will try to be more clear. Here is the structure of a website: Mainpage (Containing all resources and scripts) All Other pages (HTML only consists of elements of that ...

javascriptphpjqueryhtmlajax

Updating the contents of one specific div without affecting all other divs with the same class

Below is the HTML code snippet in question: <a class="btn test-btn test-btn-1"> <span>Content 1</span> </a> This particular code block appears multiple times on the page. The number at the end of test-btn- is dynamically generat ...

javascriptjqueryhtmlcss

What is the best way to assess a scope object within an ng-Class directive?

Whenever I click a button, it moves to the next item in an array. Once it reaches the last item in the array, I want to assign the "endButton" class to the button tag. I plan to use the ng-class directive within the HTML code to evaluate the expression. T ...

javascripthtmlangularjs

Issue with if statement when checking element.checked

Hey everyone, I'm currently working on a calculator app and running into an issue. I have set up 3 radio buttons and I would like to check them using an 'if statement' in my JS file. However, the problem is that the 'main' element ...

javascripthtml

Eliminate unnecessary spacing from the sticky container

Trying to implement a sticky menu in an angular 14 project using angular material 14 has been quite challenging for me. Initially, I attempted to use the 'fixed' position, but encountered issues where the menu would consistently return to the to ...

htmlcssangularangular-material

Steps for designing a stationary footer in HTML and CSS

I have implemented a static footer on my website: HTML <div class="card fixedFooter"> <div class="card-body space-around"> <button type="button" class="buttonFooter" routerLink="/myRouter" > <i class ...

htmlcssbootstrap-4footer

What is the way to retrieve an array property in a typescript interface?

Imagine a scenario with three interfaces structured as follows: registration-pivot.ts export interface RegistrationPivot { THead: RegistrationPivotRow; TBody: RegistrationPivotRow[]; } registration-pivot-row.ts export interface RegistrationPivotR ...

javascripthtmlcssangulartypescript

The placeholder text is not displaying with bullets in Internet Explorer. However, it is functioning correctly in Chrome

I need assistance displaying the placeholder text in IE8 as shown below: "Any relevant reference numbers, such as Direct Debits: - Name of the Branch (if applicable) - What was the original problem - Date the problem occurred " While it appears correct ...

javascriptcsshtml

Latest Chrome Update Resolves Fixed Positioning Bug

I am currently facing an issue with setting the second background image in the "Great people providing great service" section to a fixed position. You can view the website here: While the fixed position works in Safari and Firefox, it used to work in Chro ...

htmlcssgoogle-chromepositioning