Two horizontal lines placed side by side on one line

Just getting started with CSS and HTML for a school project here. I currently have 2 vertical lines set up like this.

<hr class="topline" width=58% size=3 NOSHADE>            
<hr class="verticalline" width=0.15% size=1000 NOSHADE>

I've applied some CSS to move the left vertical line all the way to the left to create a margin for styling purposes. However, even though it's positioned to the left of the line above, it isn't moving upwards as desired.

I'm aiming to position that left line right alongside the horizontal one at the top. Any suggestions on how to achieve this?

htmlcss

Answer №1

It is common for that to be the default line style. To adjust this, consider adding a margin-top style with a negative value (meaning inverted).

Give this a try:

<hr style="margin-left:0px;" class="topline" width="58%" size="3" NOSHADE>
<hr style="margin-left:0px;margin-top:-10px" class="verticalline" width="0.15%" size="1000" NOSHADE>

If you want it to be centered, simply remove the margin-left:0px; from the style.

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

Switching from real pixels to CSS pixels

The details provided in Mozilla's documentation on elementFromPoint clarify that the coordinates are specified in "CSS pixels" rather than physical pixels. This raises a question about what exactly CSS pixels entail. Many assume that a pixel in CSS is ...

css

Is there a way to adjust the selected color of a TextField?

I'm currently working with the Material-UI React library and I am trying to customize the border color of a TextField when it is clicked or in focus. This is my attempt so far: const useStyles = makeStyles((theme) => ({ input: { borderWidth: ...

cssreactjsmaterial-ui

Guide to adding a Scrollable Navbar

Is the term "scroll bar" really accurate? I want to create a scrollable feature where users can easily select a city using their mouse wheel (or swipe on a smartphone) and then choose from possible cities within that country in a second window. Something s ...

javascriptjquerycss

Ensure the footer remains at the bottom of the page without utilizing a minimum height of 100

When trying to address the common issue of making the footer stay at the bottom of a page, one popular solution is to enclose everything in a div with position:relative and min-height:100%, as explained in this helpful tutorial here. The challenge arises ...

htmlcss

What is the method to capture the change event in a datalist element?

Currently working with a datalist, I am in need of detecting when a user selects an option from the drop-down list. Although a similar question has been brought up, my requirement is for the event to only trigger when the user actually makes a selection fr ...

javascriptjqueryhtmlhtml-datalist

Generate an overlay div that does not impact the content of the top div

My website has a specific requirement where I need an overlay div to cover the entire body when hovering over the menu. <header><menu><ul><li class="new-menu">menu1</li></menu></header> <div id="myNav" class= ...

jqueryhtmlcss

Javascript-generated HTML elements are invisible

I am attempting to create a "circle of fifths" using html, css, and javascript. I am following this tutorial: https://blog.logrocket.com/interactive-svg-circle-of-fifths/ Although I am using the astro framework, I don't believe my issue is related to ...

javascripthtmlcssastrojs

Styling a horizontal navigation bar with CSS: Using list items (`li`) versus div elements (`div`)

Is it more semantically correct to float li elements within a ul, or should we opt for floating divs inside an external 'outer' div? ...

css

Ways to make logo image go over/out of header

I am attempting to create a design where the logo image extends beyond the header and into the content as you scroll, giving the impression that the logo is oversized for the header and protruding from the bottom. Visit the website: For an example of a s ...

css

Designing a toggle button interface with Material UI

Looking to add a toggle button to my page. Here is an image of what I have in mind: https://i.sstatic.net/tiQAP.png Unable to find any material-ui component or API for this specific toggle button design. Considering building a custom toggle button with CS ...

javascriptcssreactjsmaterial-ui

Image broken despite accurate file path in next.js and tailwind

https://i.stack.imgur.com/2ZqPa.png In my components folder, specifically in navbar.js, I have a path to the image folder <img className="block lg:hidden h-8 w-auto" src='../images/logo_injoy.png' alt="Logo" /> U ...

htmlnext.js

Utilize Bootstrap to allow a div's background to seamlessly spread into neighboring div elements

I am looking to create a visual effect where one splat of paint merges with another splat of paint. I currently have 4 columns, each with a different splat background. Is there a way to make these backgrounds interact with each other to create a random sp ...

htmlcssbootstrap-4

Having trouble with the functionality of CSS and JavaScript on styled input buttons in modern browsers? (IE 8/9, FF 9)

I am currently developing a website that includes input buttons styled with CSS as part of a form. For example, check out the sample code below: <input type="submit" name="buttonSave" value="save" id="buttonsavejs" class="button_image button_style"/> ...

jquerycssinternet-explorercross-browser

Issue with displaying list items in Ajax Accordion with CSS

I have implemented an accordion control extender on my webpage, and it is functioning properly. I added a CSS file to display it as a list, which is working perfectly in all browsers except for IE compatibility view. In IE compatibility view, the list-styl ...

asp.netcssajaxajaxcontroltoolkit

Chrome geolocation feature does not display the permission popup for JavaScript

After the latest Chrome update, we have noticed that the popup to Allow/Block accessing a user's location from a website is no longer appearing. We tested this on Edge, Firefox, and different mobile devices, where it seems to be working fine. Current ...

javascripthtmlgoogle-chromegeolocation

What is the proper location to store an external SVG file in order to be linked by CSS?

I'm currently facing an issue with referencing SVG filters from CSS, where both are external files. While it works perfectly fine when the SVG filter defs are inline, I encounter problems when they are in an external file. I prefer not to have the SV ...

htmlcsssvg

Ways to alter the color of an icon when hovering over it

Is there a way to change the color of a material icon inside an IconButton material component when hovering over the IconButton? I've tried adding a class directly to the icon, but it only works when hovering over the icon itself and not the IconButto ...

javascripthtmlcssreactjsmaterial-ui

Show a pop-up when the user clicks the "Choose Options" button in WooCommerce

I have a Pizza ordering WordPress page with pizza category products that are 'Simple products'. I am using the Gravity Form addon to allow users to add extra toppings. Currently, under each pizza product on the shop page, there is a button labele ...

phpcsswordpresswoocommerceproduct

Image-switching button

I'm new to JavaScript and struggling with my first code. I've been staring at it for two days now, but can't figure out what's wrong. The goal is to create an HTML page where the user can change an image by clicking on a button, and th ...

javascripthtml

The ng-tagsInput feature seems to be malfunctioning

JavaScript var app = angular.module('plunker', ['ngTagsInput']); //'ngTagsInput' app.controller('MainCtrl', function($scope, $http) { $scope.tags = []; $scope.loadTags = function(query) { return $http.get( ...

javascripthtmlangularjsng-tags-input