Html – nth-of-type from 4 to 7 only
I am trying to create a hover:before and a hover:after for my menu navbar. The menu contain 7 items: menu 1, menu 2, menu 3 (these will use hover:before) logo in the middle (in place of menu 4) menu 5,…
Html – Have double border left and right css
I would like my double border with one line shorter than the other left and right. the left is current only 1 line missing the smaller one .double-border { --b: 2px; /* thickness */ --c: #3CD5AF; height: 100%; border-right: var(--b)…
Html – Div is not floating right, problem seems to be linked to the CSS already in the code
I am currently attempting to make a simple header with HTML and CSS. I have encountered a problem where my button list is not floating to the right, giving the site an odd appearance. I tried floating the list to…
Html – CSS: Center table column, but align content to the left inside a block in the column
I am trying to align content in a table column, across multiple cells and rows, so that they are centered blocks and then left aligned inside that block. I have found how to do it inside a div, but is…
Html – CSS rotating box on hover with light under cursor
I have the following html file: const container = document.querySelector('.container'); const box = document.querySelector('.box'); const light = document.querySelector('.light'); container.addEventListener('mousemove', moveLight); function moveLight(event) { const containerRect = container.getBoundingClientRect(); light.style.left = event.clientX - containerRect.left + 'px'; light.style.top = event.clientY - containerRect.top +…
Html – I Want Two Boxes Side By Side
What am I doing wrong? * { margin: 0; padding: 0; box-sizing: border-box; } #plate { height: 100%; width: 750px; margin: 10px auto; } .sidebar { border-radius: 25px; background: rgba(214, 245, 245, 0.7); text-align: center; align-items: center; float: left; width:…
Html – One line with a button and img overlapping
I'm trying to make a button that fills the whole width and has an icon on the right side. We're using a shared library for buttons that doesn't allow icons within the element, so I have to use some negative…
Html – How do I interpret space characters in a text input as underscores when filtering options in a datalist?
I have an input element where the user is meant to type their time zone or select it from a dropdown menu. The time zone list consists of official TZ identifiers. These identifiers follow a specific format that uses underscores…
Html – Adding accessibility for text elements
I am working on adding accessibility to a website. Now I know that aria-labels, aria-labelledby, etc are meant to give accessible names to interactive type of elements as clearly mentioned in this blog. Hence, they may not work consistently with…
Jquery – Content Overflows Outside Page Boundaries Using transformX
I have a simple project. In that project, I have a drawer that works with translateX. My problem is that when I open that drawer, my main content goes outside the page. this issue is showed in these two pictures…