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

Looking for a regular expression to require either a dollar sign ($) or a percentage symbol (%) but not

At the moment, I currently have this input field set up on an HTML page within my Angular 9 application: <input type="text" formControlName="amountToWithholdInput" onkeyup="this.value = this.value.replace(/[^0-9.%$]/, &ap ...

htmlregexangularcurrencypercentage

Switch the color (make it gray) of the selected tab in the navigation bar

<!-- Customizing the Navbar --> <nav class="navbar navbar-expand-sm bg-primary navbar-dark"> <a class="navbar-brand" href="<?php echo base_url('Controller_dashboard'); ?>"><strong>StuFAP MS</strong></a> ...

htmlcsssyntaxbootstrap-4

Tips on sending a form to the server with ajax technology

I'm struggling with sending a button id to my server through ajax in order to submit a form without having to constantly reload the page every time I click on a button. Unfortunately, it's not working as expected and I can't figure out why. ...

javascripthtmljquerydjangoajax

When using HTML select tags, make sure to submit the actual text of the selected option instead of just the value attribute

There seems to be an issue with a form that I am submitting via POST where the option text is being sent instead of the option value. Here is my select declaration: <select name = "newfreq"> <option val='1'>every week</option ...

phpjqueryhtmlforms

The functionality of classes containing <ul> elements is ineffective

Having recently embarked on the journey of learning html/css, I've encountered some confusion along the way. Allow me to showcase my basic web-page layout: <html> <head> <meta charset="utf-8"> <link rel = "stylesheet" type="text ...

htmlcss

Could use some assistance in developing a custom jQuery code

Assistance Needed with jQuery Script Creation <div>Base List</div> <div id="baseSection"> <ul class="selectable"> <li id="a">1</li> <li id="b">2</li> <li id="c">3</li> ...

javascripthtmljquery

Changing the Image Source in HTML with the Power of Angular2

Despite my efforts, I'm unable to display the updated image in my HTML file. In my TypeScript file, the imageUrl is updating as expected and I've verified this in the console. However, the HTML file is not reflecting these changes. In my researc ...

htmlangularimagetypescript

In Safari, there seems to be an issue where multiple URLs are not opening when clicked on from an anchor

Is there a way to open multiple URLs in Safari with just one click using window.open? I tried it, but only one URL opens in a new tab while the others do not. The version of Safari I am using is 11.0.1. onclick="window.open('URL1','_blank& ...

javascriptjqueryhtmlsafari

Utilizing AngularJS $anchorScroll for navigating to an anchor tag on a different page

On my AngularJS Home Page, I am trying to scroll to an anchor tag on another page. Both pages are loaded as partial html files into the ng-view component based on the URL. When I start the server, the home page loads and then I need to navigate to the FAQ ...

javascripthtmlangularjs

What is the syntax for indenting text inside an inline-block element?

Essentially, the checkboxes displayed here are in a graphical format to avoid using checkbox elements for accessibility reasons (only the link should be interactive). However, aligning a span next to an href and indenting the text to line up with the star ...

css

Can I use Ems instead of pixels for Chrome developer tools?

In all my style-sheets, I opt for using ems instead of px. However, in Chrome Developer Tools, the computed styles/metrics always display in px, even for elements where I specifically used ems: (Here is a screenshot of the computed lengths for a button wi ...

cssgoogle-chrome-devtoolsunits-of-measurement

What's the best approach when it comes to declaring CSS in an HTML document: should you

I have a quick question about HTML and CSS. Recently, I started using Twitter's Bootstrap framework and added this code snippet to the head of my index.html file: <link href="css/bootstrap.css" rel="stylesheet"> <link href="css/style.css" re ...

htmlcss

Tips for displaying multiple rows horizontallyALLOWING multiple rows to appear horizontally can be achieved by

This is a demonstration of my desired outcome https://i.sstatic.net/UErvL.png However, I am currently only able to show one product per row. I have attempted the following approach, but it is not functioning as expected. <ol> <?php $no = 1; ...

phphtmlcssphp-7

What is the solution to determining the width in AngularJS without taking the scrollbar size into account

How can I retrieve the window inner height without including the scrollbar size when using $window.innerHeight? ...

javascripthtmlcssangularjs

Designing the Irish flag solely with HTML and CSS: a step-by-step guide

I have successfully created the Indian flag using HTML and CSS, with the exception of the Ashok Chakra. Now, I am looking to create the Irish flag which features a vertical tricolor design, unlike the horizontal tricolor layout of the Indian flag. Can anyo ...

htmlcss

Renew the Look of Dynamic HTML with Updated Styles

In the middle of my website, there is a console that contains links to dynamically update its content using javascript. Everything works smoothly, but the new HTML added dynamically does not have any styling applied to it. Is there a way to refresh the CS ...

javascripthtmlcssajax

JavaScript function for submitting form data using AJAX and performing validation

This is the code I have been working on: $(function () { $('.contact-form').submit(function (event) { $(this).find("input , textarea").each(function () { var input = $(this); if (input.val() == "") { ...

javascriptjqueryhtmlajax

After resolving a quirky syntax error in my ejs code, I can't help but ponder what caused the issue in the first place

For my personal web development project, I've been working on a blog webpage to enhance my skills. However, I encountered an unusual syntax error while modifying the code to display different navigation bars for logged in and logged out users. Here&ap ...

htmlnode.jssyntax-errorejs

Searching in TypeScript tables with Angular's search bar

I've successfully completed a basic CRUD application, but now I need to incorporate a Search Bar that can filter my table and display rows with matching letters. I'm unsure how to approach this in my component. I've seen examples using pipe ...

javascripthtmlangulartypescriptangular-ngmodelchange

Customizing TinyMCE's font style menu options

Our platform utilizes TinyMCE as in-place editors to allow users to make live edits to content. However, a challenge arises when using a dark background with light text, as TinyMCE defaults to using this text color rather than black. (Please note: the the ...

cssreactjstypescripttinymce