Why is it that the vertical square bar is not appearing on my website?

I've been attempting to add a vertical bar that stays fixed to the top right corner of my screen, but for some reason, it's not showing up no matter what I try. Here is the CSS code I'm using for my site, everything seems normal except that the bar doesn't appear where it's supposed to be. Even though the CSS indicates it should be at the top, it shows up at the bottom of the site according to the inspect element feature. Take a look at the last few lines of the CSS code related to the bar.

body {
    /* CSS styling */
}

/* Other CSS classes and styles */

#gradient-bar {
    background: linear-gradient(to right, #000000, #ffffff);
    height: 20px;
    width: 100%;
}

Answer №1

Explanation: The div with the class 'back' has a height of '100vh' (Vertical Height), causing the following div with static positioning to be placed just below it.

Resolution: By reorganizing your code, the content will be visible just under the blue bar.

<div class="bar">
    <p>
        Eaglercraft.xyz Launcher
    </p>
</div>
<div id="close-button">&times;</div>
<div id="gradient-bar">
    <p>aaseasea</p>
</div>
<div class="back">
    <pi></pi>
</div>

To position it at the top of the page, I modified the code as follows:
HTML:

<div id="gradient-bar">
    <p>aaseasea</p>
</div>
<div class="bar">
    <div id="close-button" style="top: 20px">&times;</div>
    <!-- Added style attribute to adjust the position of the cross -->
    <p>
        Eaglercraft.xyz Launcher
    </p>
</div>
<div class="back">
    <pi></pi>
</div>

CSS:

#gradient-bar p {
    margin-top: 0;
    position: relative;
}

To reduce the width in half, you can set #gradient-bar width to 50%.
To position it in the top right corner, you can use the following:

#gradient-bar {
    position: absolute;
    right: 0;
}

I hope this information is helpful!

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

Message displayed within Ng-repeat loop

Having trouble implementing a tooltip within an ng-repeat for each item in a td element. Whenever the mouse hovers over an item inside the td, I want a tooltip to display with more details. The code below shows my setup, using ng-if to prevent displaying e ...

Problems with CSS text scrolling

We have a client who wants a marquee-style scrolling text banner, and I tried using CSS animations to achieve it. However, I encountered some quirks that I'm struggling to fix. If you want to take a look at the issue, here is the link: https://jsfidd ...

When I attempt to view my calendar in a modal popup, the opening action causes it

Recently, I encountered an issue with the bootstrap datepicker in a modal pop-up. The problem arises when it gets cut off unexpectedly. I am seeking suggestions or solutions to resolve this inconvenience. <input id="doohMediaStartDate" name="startDate" ...

How to create a personalized attribute for a form in Yii2

Currently, I am working on an active form and I would like to include a custom attribute. This is a standard form field: <?= $form->field($model, 'password')->textInput() ?> I want it to appear as: <label class="input"> < ...

What's the best way to avoid global application of stylesheets imported for svelte carbon components?

My dilemma lies in wanting to utilize the DatePicker feature from carbon-components-svelte. Unfortunately, when I do so, the global application of styles from carbon-components ends up causing some conflicts with my own custom styles. As per the documenta ...

Tips for creating a horizontal bar with CSS using the float property

Looking to create a horizontal scroll layout using CSS and floats? Here's my attempt, but I'm not getting the desired result. Flexbox isn't an option as it needs to be supported on IE. Take a look at my code and point out where I might have ...

What is the best way to conceal the main list but still show the nested list within?

I'm looking for a way to conceal the main parent of a sub-list while still displaying the nested list. Furthermore, I need to ensure that the parent element doesn't occupy any space on the page when hidden. HTML <ul> <li class="par ...

Tips for sending images as properties in an array of objects in React

I've been experimenting with various methods to display a background image underneath the "box" in styled components. How can I pass an image as a prop into the background image of the box with the image stored in the array of objects? I'm unsure ...

Having trouble making "jQuery.inArray" function properly in my code

Recently, I made a small interaction where list items are displayed and rotated when clicked - check it out here: http://jsfiddle.net/S79qp/430/ Lately, due to compatibility issues with IE8, I had to switch from using .indexOf() to jQuery.inArray. However ...

Is there a way to synchronize the autohide duration for both the LinearProgress MUI and SnackBar components?

Can someone help me align my SnackBar with the LinearProgress so that they both have an auto-hide duration of 4 seconds? I've been struggling to figure it out for hours and haven't found a solution yet. Could the issue be in the useEffect part of ...

Use Angular to change the style of multiple element groups at the same time when hovering

When hovering over an element with a common attribute, such as a class name, I want to change the style of all elements that share that attribute. Achieving this effect is simple with jQuery: $(function() { $('.bookId4').hover( function(){ ...

Switching out CSS files on the fly in ASP.NET

Looking to dynamically change the CSS file being used in my ASP.NET Web Application when it's running. Imagine I have two CSS files, red.css and blue.css. I attempted the following method: In the Master Page, I have this link: <link rel="Styles ...

Is it possible to create an HTML dropdown menu with integer values?

What is the best way to create a dropdown menu in HTML with integer values ranging from 1 to 12? How can I ensure that when a value is selected, it gets saved into a variable? All I need is a simple select field in HTML that displays options from 1 to 12 ...

`Div Elements Overlapping`

Lately, I have been working on my personal portfolio and I encountered an issue with the contact form overlapping the footer. Can anyone provide some guidance on how to resolve this? Any help is greatly appreciated. https://i.stack.imgur.com/neIbs.gif ...

Deletion of input is not permitted

Currently, I have a telephone input field on my form that only allows numbers. I have implemented a simple JavaScript code to enforce this validation. However, the issue I am facing now is that the input box cannot be deleted. <form id="aylikal" action ...

What is the method for customizing the scroll highlight color within bookdown by modifying the style.css file?

One interesting aspect of Bookdown is its built-in feature that automatically highlights in blue the section in the sidebar that you are currently scrolling past or reading. However, I'm having trouble changing the color in the style.css page. Using a ...

Create a visual representation by converting it into an HTML table

Check out my JSFiddle here: http://jsfiddle.net/0r16e802/4/ I'm attempting to display an image as an HTML table, but I'm facing two major issues with my algorithm: Only the first image is loaded in the first row and I need to figure out how to ...

What is the best way to showcase React Components in a inline format?

I'm attempting to place multiple React Components in the same line so that I can scroll through them later. Unfortunately, React and Material UI are not cooperating. The Card Components consist of a standard div element with text and an image inside. ...

Even after dynamically removing the class from the element, the Click event can still be detected

My buttons have a design like this: <a class="h-modal-btn branch-modal-btn"> Buy Now </a> The issue arises when I need to remove certain classes and add attributes to these buttons based on the query string in the URL. Skipping ahead ...

What is the best way to make this CSS arrow see-through?

My goal is to achieve this desired outcome: https://i.sstatic.net/4eTpE.png Currently, I have the following (focusing only on the left element for now): https://i.sstatic.net/nUFp1.png I am struggling to make the left arrow transparent and I can't ...