Decrease in internal width

Seeking assistance to adjust the internal border width for better text alignment. I've been struggling with this issue as a beginner in the web development field and would appreciate some guidance.

Link to image

Here is a snippet of my HTML code:

<!DOCTYPE html>
<html lang="pt-br">
<head>
...
...
    </script>

    // CSS Code
    #menu-main li:last-child{
        margin-left: 376px;
        padding-top: 0px;
        margin-top: 1px; 
    }

    #menu-main li:last-child{
        box-shadow:inset 0px 0px 0px 0px #none;
        box-shadow:inset 0px 0px 0px 0px #none;
        ...
    }
htmlcss

Answer №1

UPDATE (After discussing further):

In order to center the text and ensure the hover effect covers the entire button area without altering its width, make the following adjustments to the CSS:

Existing:

#menu-main li:last-child a {
    padding: 7px 19px 5px 15px;
    box-sizing: border-box;
    padding-border: 42px;
}

#menu-main li:last-child {
    box-shadow: inset 0px 0px 0px 0px #none;
    box-shadow: inset 0px 0px 0px 0px #none;
    box-shadow: inset 0px 0px 0px 0px #none;
    background-color: none;
    border-radius: 8px;
    border-radius: 8px;
    border-radius: 66px;
    border: 1px solid #ffffff;
    display: flex;
    color: #ffffff;
    padding: 0px 20px;
    text-align: center justify-content:center;
    align-items: center;
    height: 40px;
    line-height: 0px;
    width: 200px;
    box-sizing: border-box;
}

Revised version (Remove padding from button and text, apply border radius to text, match text width and height with button, and eliminate redundant/incorrect bits):

UPDATED:(Include width: 100% for navbar and use media query for float: right on button for screens sized 768px and above):

#menu-main {
    width: 100%;
}

#menu-main li:last-child a {
    padding: 0px;
    line-height: 40px;
    border-radius: 66px;
    height: 100%;
    width: 100%;
}

#menu-main li:last-child {
    border-radius: 66px;
    border: 1px solid #ffffff;
    text-align: center;
    height: 40px;
    width: 175px;
    margin-left: 20px;
    margin-top: 5px;
    margin-bottom: 5px;
}

@media only screen and (min-width: 768px) {
    #menu-main li:last-child {
        float: right;
    }
}

Happy to assist!

I assume you wish to adjust the padding value in this section?:

#menu-main li:last-child{
    box-shadow:inset 0px 0px 0px 0px #none;
    box-shadow:inset 0px 0px 0px 0px #none;
    box-shadow:inset 0px 0px 0px 0px #none;
    background-color: none;
    border-radius:1px;
    border-radius:1px;
    border-radius: 66px;
    border: 1px solid #ffffff;
    display:inline-block;
    color:#ffffff;
    //padding:1px 22px;
    padding:1px 10px;
}

You may need to experiment with the second pixel value until achieving your desired result, but 10px could be suitable.. padding:1px 10px;

When defining padding, the first value pertains to top/bottom, while the second represents left/right. Adjusting the latter will influence the amount of padding around the text.

Hoping this clarifies things, feel free to reach out for any further clarifications!

Answer №2

When you are writing rules, there is no need to repeat them twice:

#menu-main li:last-child{
    box-shadow:inset 0px 0px 0px 0px #none;
    background-color: none;
    border-radius:1px;
    border-radius:1px;
    border-radius: 66px;
    border: 1px solid #ffffff;
    display:inline-block;
    color:#ffffff;
    padding:1px 22px;
}

Instead of that repetition, you can simply use:

button{
 text-align:center
}

Another option is to utilize flexbox by adding it to the wrapper element to center its children elements:

div{
 display:flex;
 justify-content:center;
 align-items:center;
}

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

Please explain the display property used in Bootstrap input groups

I have been working on implementing a button that toggles the visibility of a datepicker when clicked. <a class="btn btn-primary btn-lg mr-5" href="../Stores/stalls.html">Check Current Operating Stalls </a> <div style="vertical-align: t ...

htmlcssbootstrap-4

Ways to fill ng-style with a CSS object

Creating a dynamic form to manipulate CSS properties in real time has been my latest project. I've managed to define the CSS property names and values within an object, but now I'm struggling to style the item elegantly on the page as the user in ...

cssangularjs

Ways to customize the default CSS styles of angularJS for elements like search box and more

Looking for a way to customize the appearance of an AngularJs search box? <div ng-controller="PersonListCtrl"> <div class="bar">Search: <input ng-model="query"> </div> <ul cl ...

cssangularjs

The @media feature is not functioning properly

I am struggling with getting my media query to function properly on a school project. Despite carefully checking my code, I cannot figure out why it is not making the desired changes when viewed on a mobile device. If anyone has any suggestions or insigh ...

cssmedia

Is there a way to show the input value in a different form while still retaining the original value?

When receiving a pagination number from user input, I store it in a variable like so: $html .= "<input type='submit' name='next' value='$next_page_number' />"; Now, I'm looking to replace the displayed text for th ...

phphtmlcss

Ways to style CSS for inactive checkboxes?

How can I easily change the CSS for disabled checkboxes in a grid to make them more visible for users? Technologies I prefer to use, ranked from most preferred to least: CSS JavaScript jQuery Other ...

htmlcsscheckbox

Ways to manipulate a div tag with CSS even when it lacks a class or ID attribute

Hey there! I've got this snippet of HTML code that I'm working with: <div class="template-page-wrapper"> <div class="templemo-content-wrapper"> <div class="templatemo-content"> <div c ...

htmlcss

What is the process for retrieving my dates from local storage and displaying them without the time?

Having an event form, I collect information and store it in local storage without using an API. However, I face a challenge when extracting the startdate and enddate out of localstorage and formatting them as dd-mm-yyyy instead of yyyy-mm-ddT00:00:00.000Z. ...

javascriptjqueryhtmlangularjsdate

Text that is selected within a contenteditable div: Find the beginning and end points of the highlighted text

<div contenteditable="true">This text is <b>Bold</b> not <i>Italic</i> right?</div> For instance, if the text appears in a bold format, but not italic and the user selects it, how can I determine the exact position ...

javascriptjqueryhtmlcss

Having trouble with changing the class using Jquery click function

Originally, I had the code in an ASP.Net project, but to troubleshoot, I moved it to a separate web server. However, I am still unable to switch between the tab panes with the buttons. Any assistance in debugging this issue would be greatly appreciated. S ...

jqueryhtml

Highest Positioned jQuery Mobile Section

Requesting something a bit out of the ordinary, I understand. I currently have a jQueryMobile page set up with simplicity: <div data-role="page" class="type-home" id="home"> <div data-role="header" data-theme="b"> <h1>Our To ...

javascriptjqueryhtmljquery-mobile

Parsing HTML to access inner content

Currently, I have integrated an onClick event to an anchor tag. When the user interacts with it, my objective is to retrieve the inner HTML without relying on the id attribute. Below is the code snippet that illustrates my approach. Any assistance in acc ...

javascripthtml

Encountering a NaN outcome when summing values from various select options

I'm working on a project that involves adding up the prices based on the surface chosen by the user. I'm struggling with calculating the partial cost when the user's choice changes. totalSum.ts num: Calculation totalAmount: number cate ...

javascripthtmlarraysangulartypescript

Leveraging Spotify's webAPI to listen to a randomly selected album by a specific artist (ID

Welcome to my little project! As I am not a developer myself, please bear with me for any silly questions that may arise. My idea is to create an "audio book machine." The concept involves using a website that showcases various artists of audiobooks. Upo ...

htmlnode.jsasp.net-web-apiraspberry-pispotify

Using PHP with Slim PHP Framework to dynamically include CSS files in the header of a document

I have developed a sleek application featuring a login form, dashboard, registration page, and account page. Each of these pages has its own unique route. To maintain consistency across all pages, I have included a shared header and footer by inserting < ...

phphtmlcssdynamicslim

What is the best way to prevent content from spilling over into the div on the right

I'm having trouble with a two column div where the text in the left column is overflowing into the right column. How can I prevent this? http://example.com <div id="wrapper-industry"> <div id="wrapper-form"> <div id="form_row"> ...

csshtml

The radio button default selection is checked, but the desired styles are not being applied

My webpage features two radio buttons, "No" and "Yes," with the default selection being "No." I have implemented CSS styles for the checked elements, but they only work once physically selected. My goal is to apply these styles immediately on page load wit ...

htmlcssradio-button

Refreshing page using jQuery following an AJAX request

My script is functioning properly, however the use of location.reload(); does not seem to be effective. I am aiming to refresh the page after deselecting the last checkbox. $(".catcf, .coursetype, .yearcf, .manthcf, .venucf").on('click' ...

htmljqueryajax

When using the .after() method to add jQuery elements, keep in mind that they will not trigger any

Here is the snippet of code provided: <s:file name="upload" id="upload"></s:file> $('input[id^="upload"]').change(function(){ alert("aa"); $(this).after('<input type="file" name="upload_3" id="upload_3"/> ...

javascriptjqueryhtmljquery-after

Display a modal when clicking on a bootstrap glyph icon

I tried following a tutorial on how to create a Bootstrap modal at https://www.w3schools.com/bootstrap/bootstrap_modal.asp However, I would like to use a glyph icon in the code snippet like this: <span class="glyphicon glyphicon-pencil" class="btn btn ...

csstwitter-bootstrap