What is the method for incorporating a dotted line preceding the menu options?

I am currently working on an asp.net menu that looks like this:

<div id="left">
            <div id="menus" runat="server">
                <div id="left_menu">
                    <div class="abc">
                    </div>
                    <div id="os">
                    </div>
                    <div class="btm">
                    </div>
                </div>
                <div id="left_menu">
                    <div class="cde">
                    </div>
                    <div id="l">
                    </div>
                    <div class="G">
                    </div>
                </div>
            </div>
        

My goal is to add a dotted line in front of each menu item, with the line being as long as the menu itself. I have the CSS code for the dotted line ready:

#horizontal_dotted_line
        {
            border-top: 1px dotted #f00;
            color: black;
            background-color: #fff;   
            height: 1px;   
            width:50%;
        }
        

However, I am unsure where to place the div tag horizontal_dotted_line so that it appears in front of the menu items. Any help or guidance on this issue would be greatly appreciated.

Answer №1

Do you find it puzzling that your menu is vertical while your line is horizontal, yet you desire for the length of your line to match that of your menu?

Instead of a horizontal line, have you considered opting for a vertical one? Simply modify the target ID of the CSS class from horizontal_dotted_line to menus and switch the border style from top to left. (For .NET control, ensure it targets a class rather than an ID to accommodate the differing .NET ID)

#menus {
    border-left: 1px dotted #f00;
    color: black;
    background-color: #fff;   
    height: 1px;   
    width:50%;
}

Answer №2

Give this a shot:

<div id="left">
    <div id="vertical-dotted-line">
        <div id="menus" runat="server">

Use this CSS style:

#vertical-dotted-line{
    border-left: 1px dotted #f00;
    overflow: hidden;
}

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

Tips for converting PSD template into HTML/CSS code

Currently, I am in the process of converting a PSD template into HTML/CSS. The file contains around 50 layers that have been exported to PNG using a Photoshop script. To begin, I structured the code like this: <div id="container_1"> <div id="co ...

Having trouble with the image resizing in Bootstrap 5 on Safari?

I am facing an issue with a website: There are four images under the section "Serviceangebote" that appear as square icons representing circles. I have no trouble viewing them correctly on Windows (Chrome, Firefox, Edge) and Android devices. The images ar ...

What is the best method to align a form in three columns from each side without relying on Bootstrap?

Is there a way to center the form inside a card with 3 columns on each side, so that the form appears in the middle occupying about 6 columns without relying on Bootstrap, Materialize or any similar framework? Thanks! <div class="card"> & ...

Do you know of a more streamlined approach to formatting this SCSS code?

Currently working on a Saleor Site and diving into the world of Django and SASS for the first time. While crafting my own styling rules in SCSS files, I've noticed some repetitive code that could potentially be streamlined. It seems like there should ...

tips on setting the chosen culture in the InitializeCulture() function

On my login page, users can choose their language using a radio button. Once logged in, they are redirected to Default.aspx where I am utilizing the following method to set the page culture: <%@ Page Title="Home Page" Language="C#" MasterPageFile="~/Si ...

Is it possible to insert a button into a specific column of an ngx-datatable within an Angular 8 application?

I am having trouble with this particular HTML code. <ngx-datatable-column name="Option" prop="option" [draggable]="false" [resizeable]="false [width]="250"> <span> <button class="optionButton" type="button" data-to ...

Setting up the Bootstrap grid structure

Struggling to find the right configuration for this Bootstrap 3 setup... https://i.stack.imgur.com/ZsTdI.png I have an input field, but I'm having trouble placing the image in that position. <div class="row"> <div class="col-sm-4 col-m ...

Align the text at the center within a relative div without specifying its size

In the structure of my HTML, I have the following simplified layout: <table> <tr> <td> <div class="PromptContainer"> <span class="Prompt">Prompt text</span> </div> <input type="t ...

The Label in Material UI TextField is appearing on top of the border,

Incorporating Material UI TextField and Material UI Tab, I have encountered an issue. There are two tabs, each containing a text field. Upon clicking on the TextField, the label's border is supposed to open, but this behavior only occurs if the curren ...

Is there a way to modify the location of the datepicker/calendar icon within my bootstrap form?

When using react-bootstrap with the <Form.Control type="date"> element, I noticed that the calendar icon or date picker is automatically positioned to the right side/end of the form field. However, I am interested in moving the calendar ico ...

Click the closest checkbox when the value equals the Jquery datatable

I am facing an issue where I need to add a class and click on a specific element in each row of my jQuery datatable if a certain value is equal. However, I am unable to successfully add the class to that element and trigger a click event. <table id="us ...

Can parameters be included in the HTML class attribute?

Is it possible to embed specific information into HTML elements, like images, without disrupting valid HTML markup? Would the following example be considered valid HTML? <img src="..." class="isearcher:tags(paris+hilton,gary+suneese)" > The idea is ...

Why does my navbar toggler automatically display the navbar items?

I am perplexed as to why the navigation items keep appearing every time I refresh the page in mobile view. Despite checking that aria-expanded is set to false, it still does not seem to work. Below is the code snippet: <html lang="en"> & ...

Generating a header each time a table is printed across multiple pages

A table has been created in a webform using C#. The goal is to only print the table when the user clicks the print button on the webform. Javascript has been implemented in ASP.NET to only print the content within a specific div. While this method works, ...

Troubleshooting a Custom Menu Control in HTML

Would you mind taking a look at the menu I have set up in this fiddle: http://jsfiddle.net/Gk_999/mtfhptwo/3 (function ($) { $.fn.menumaker = function (options) { var cssmenu = $(this), settings = $.extend({ title: "Menu", ...

Incorporate a PowerPoint presentation into an Iframe

Can you confirm if this code is correct? Is there another way to achieve the same result? Could you please provide some assistance with the code? I would like to show my PowerPoint file in an iframe when I click on a link. <html> <head> < ...

Display all elements on a webpage using Javascript without the need for scrolling

I'm looking for a way to ensure all items on a webpage load immediately, without having to scroll down multiple times before running a script to find a specific item. Is there a method to have all items load at once without the need to manually scroll ...

ASP.NET in combination with an ajax response

My main web page ("Base Page") initiates an ajax request to a server-side page ("Ajax Page"), which is an ASP.NET web form. Due to the use of a GridView to display data in the ajax response, the <form runat="server"> tag must be included. However, I ...

issues arising from a growing css division

I am facing an issue where the tiles on my webpage expand on hover, but some of them are partially covered by neighboring tiles. How can I resolve this problem? Here is the CSS code snippet: .tile { position: absolute; width: 86px; background-color ...

The appearance of my sidebar items' right border varies depending on the web browser being used

My sidebar item's right border appears differently in Mozilla and Chrome. How can I resolve this issue? Here are the images from both browsers: https://i.stack.imgur.com/YGkkz.png https://i.stack.imgur.com/JxNs3.png "use client"; import { ...