Tips for adjusting the menu format to prevent text overlapping with the color bars

I'm having trouble adjusting the spacing between the text of the menu items and the color bars. I've tried various methods but can't seem to get it right in both Chrome and IE11.

  .smenu a {
      display: block;
      color: black;
      padding: 16px 1px;
      margin: 9px 5px;
      text-decoration:none;
      width: 4px;
      background: #18dcff;
  }
<div class="smenu">
  <div>
    <div class="item" id="messages">
      <div class="smenu">
        <a href="#a>New</a>
        <a href="#a">Sent Items</a>
        <a href="#a">&lp;Spam</a>
      </div>
    </div>
  </div>
</div>

htmlcss

Answer №1

If you are looking to add a "colored border," make sure to utilize the border property in conjunction with padding to achieve the desired outcome. Adjust the padding values to control the distance from the border.

.smenu a {
      display: block;
      color: black;
      padding: 16px 20px; /* adjust padding to change distance */
      margin: 9px 5px;
      text-decoration:none;
      border-left:4px solid #18dcff;
}
<div class="smenu">
  <div>
    <div class="item" id="messages">
      <div class="smenu">
        <a href="#a">New</a>
        <a href="#a">Sent Items</a>
        <a href="#a">Spam</a>
      </div>
    </div>
  </div>
</div>

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

Accessing QML Functions from JavaScript

Currently, I am faced with a challenge in my app development using Qt. I need to trigger a QML function from JavaScript when a specific event is triggered from my HTML page. I attempted the following method: app.html <html> <head><title& ...

javascripthtmlfunctionqml

Center align three spans with different heights within a div

When faced with this particular set of HTML: <div class="wrapper"> <span class="left"></span> <span class="middle"></span> <span class="right"></span> </div> The .left and .right elements have fixed heights ...

csshtmlvertical-alignment

Looping Angular Components are executed

I am currently developing an Angular application and encountering an issue with my navbar getting looped. The problem arises when I navigate to the /home route, causing the navbar.component.html components to duplicate and appear stacked on top of each oth ...

htmlangulartypescriptcomponents

Checkbox's checked attribute fails to toggle

Encountered a peculiar issue while trying to implement jQuery functionality triggered by a checkbox. The checkbox seems to be toggling the check mark visually on click, but the "checked" attribute remains unchanged. For a demo of the problem, check out: h ...

jqueryhtmlcheckboxchecked

What is the method for creating a transparent background for Material UI v1.0 Dialogs?

I'm attempting to place a CircularProgress component inside a dialog box. However, I'm facing an issue where the background of the dialog box is white and cannot be set to transparent like in previous versions of Material UI (v0.2). style={{ ...

cssreactjsdialogmaterial-ui

On the x-axis of the D3 graph, each data point is precisely the width of a date

I am currently trying to visualize data based on dates, and I am aiming for something similar to the following: My goal is to create rectangles that represent each day's data. Here is how I am drawing the rectangles: svg.selectAll(".my_class") .data ...

javascriptcssd3.js

Learn the process of sending information to a MySQL table using a select tag in PHP

I am attempting to use a select tag to submit data to a MySQL table using PHP. I have been successful in inserting data using the text type with the following code: <td> <label class="control-label">Image Type </label> </td> &l ...

phphtml

Unable to confirm authenticity of dynamic form using PHP

I seem to be encountering an issue while attempting to validate my dynamic HTML form using a PHP script. Upon clicking submit, I receive an error stating that there is an undefined index, even though the index is clearly defined. What sets my query apart f ...

phpjqueryhtml

"Border-radius becomes less prominent on pointer interaction in Chrome and Safari due to WebKit's behavior

Having an issue with a list inside a div. The problem arises when there is a div containing a list, which limits the visibility of items for users. If the limit is exceeded, a scroll bar appears inside the div to allow users to see more items. Additionally ...

google-chromesafariwebkitcss

Adding an image or icon inside a tooltip using ChakraUI or CSS in a React project

Looking to enhance my tooltip using the Chakra UI library by adding an image/icon directly into it. Instead of just displaying the label, I want the MdWarningAmber Icon to be visible within the tooltip itself, rather than next to the button that triggers t ...

javascripthtmlcssreactjschakra-ui

Transitioning in Vue.js can be triggered by changing a value up or down

My current transition block component is set up like this: <div v-if="!surveyResultIsReady" class="vh-md-40 position-relative" > <transition name="custom-classes-transition" enter-active-class="animated slideInRight" ...

javascriptcssvue.jsvuejs2vue-transitions

"The issue with the nested nth-child property is that it only affects the first element it is applied to

Having trouble with the nth-child property. The issue lies with the #subnav element. I'm unsure why nth-child isn't working as expected (supposed to change border color and width). Here's the problem and code snippet : <div class=" ...

htmlcsssass

Guide to positioning Bootstrap 5 toast messages at the center of an ASP.NET Web Form

I have integrated a Bootstrap toast element within an ASP.NET web form as shown below: <asp:Content ID="ctMain" ContentPlaceHolderID="cpMain" runat="server"> <div aria-live="polite" aria-atomic="tru ...

htmlcsstwitter-bootstrapbootstrap-5bootstrap-toast

Can sound be triggered from a JS file within Django's HTML template without using Ajax?

I'm currently in the process of transitioning a website to utilize the Django framework. Most of the JS scripts are functioning properly, except for those that involve sound. Specifically, I have a play/pause button for a song and some sounds that sh ...

javascripthtmldjangoajax

On the iPad, CSS styling will not be visible if an element's width exceeds 920 pixels

I recently developed a website optimized for monitors, but when I viewed it on an iPad, the right corner was missing some CSS styles. Take a look: Here is the HTML code: <div id="nav-top"> <div class="wrapper"> <!-- To ...

htmlcssipadios-simulator

Adjust the viewing area dimensions on a web browser

Recently, while testing a web application page I developed with Selenium, I came across an interesting issue. After using the JavaScriptExecutor in Selenium to get the viewport size, I found that it was different for Chrome, IE, and Firefox. The sizes wer ...

javascripthtmlseleniumselenium-webdriver

Tips for adjusting the text color of input fields while scrolling down

I am currently working on my website which features a search box at the top of every page in white color. I am interested in changing the color of the search box to match the background color of each individual page. Each page has its own unique background ...

javascripthtmlcsswordpress

What is the best way to select an ID element using JQuery?

Everything is going smoothly, could you please assist me with a question. Here is the HTML form code I am working with: <html> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <scri ...

htmlajax

Show text and image side by side on the same row

I am looking to showcase both image and text on the same line, similar to how it's done on tripadvisor.in/ <div style="display:inline-block"> <div style="display:inline;float:left"> <a href="CollegeProfile.php" class="white"> <h ...

css

The form does not allow for editing in the input fields

I am experiencing an issue with my simple form where I can only click and type into the input fields below the menu. The CSS and JS in this snippet may be a bit all over the place, but it closely resembles my app's structure. I'm baffled by why t ...

javascripthtmlcss