Switch the position of the tab from the left side of the page to the right side

I currently have a tab positioned on the left side of my screen, but I am now looking to move it to the right side and adjust its vertical positioning. Below is the code that places the tab on the left side:

CSS

#feedback {
        position: fixed;
        left: 0;
        bottom: 0;
        height: 250px;
        margin-left: -3px;
        margin-bottom: -3px;
    }

    #feedback-tab {
        float: right;
        color: #fff;
        font-size: 20px;
        cursor: pointer;
        text-align: center;
        width: 120px;
        height: 42px;
        background-color: rgba(0,0,0,0.5);
        margin-top: 60px;
        margin-left: -42px;
        padding-top: 5px;
        -moz-border-radius: 3px;
        -webkit-border-radius: 3px;
        border-radius: 3px;
        -webkit-transform: rotate(90deg);
        -moz-transform: rotate(90deg);
        -ms-transform: rotate(90deg);
        -o-transform: rotate(90deg);
        transform: rotate(90deg);
    }

    #feedback-tab:hover {
        background-color: rgba(0,0,0,0.4);
    }

HTML

<div id="feedback">
    <div id="feedback-tab">Feedback</div>
</div>
htmlcsstwitter-bootstrap

Answer №1

Perhaps this is the solution you are seeking.

Here is the CSS code snippet:

#comment-section {
        position: absolute;
        right: 0;
        top: 200px;
        height: 300px;
        margin-left: -5px;
        margin-top: -5px;
    }

    #comment-tab {
        float: right;
        color: #000;
        font-size: 24px;
        cursor: pointer;
        text-align: center;
        width: 140px;
        height: 52px;
        background-color: rgba(255,255,255,0.7);
        margin-bottom: 75px;
        padding-top: 10px;
        border-radius: 4px;
        transform: rotate(-90deg);
    }

    #comment-tab:hover {
        background-color: rgba(255,255,255,0.9);
    }

Additionally, here is the corresponding HTML code:

<div id="comment-section">
    <div id="comment-tab">Leave Comment</div>
</div>

Answer №2

Here's a suggestion: 

#comment {
            position: fixed;
            right: 0;
            bottom: 0;
            height: 200px;
            margin-right: -2px;
            margin-bottom: -2px;
        }

Additionally, the lack of knowledge regarding the parent element can complicate finding a solution, in my view.

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

Achieving Vertical Alignment of Text with CSS

Can you figure out what's wrong with the placement of content outside the <footer> tag in this HTML? Also, why is the text not perfectly vertically middle-aligned? <html> <head> <style> body { ...

csshtmllayoutcss-float

What is the process for designing a menu with animated scaling effects?

I have a design file in PSD format that looks like this. https://i.sstatic.net/R46Ko.jpg My goal is to create a website similar to , where when a user hovers over a link, a circle will appear around it. I am using Bootstrap 4.5 for this project. Here is ...

htmlcssbootstrap-4

Ways to customize the appearance of the navigation bar when hovering

Is there a way to customize the hover state of a navigation bar? I would like to highlight certain menu items in a different color when they are hovered over, such as making "menu1" stand out. Any help with this would be greatly appreciated! <div cla ...

cssruby-on-rails

CSS that relies on the presence of a specific class

I'm a CSS novice and I have encountered a scenario where I need to apply a CSS class only when another class is not present. <div class="border-solid p-2 bg-white mt-1 h-fit" [ngClass]="SOME_CONDITION ? 'tile-con ...

cssangulartailwind-css

Having issues with callbacks not running properly when using Bootstrap alongside $.post and $.ajax functions

I have implemented a Bootstrap registration form and the following AJAX code: $.ajax({ type: "POST", url: 'process/register.php', data: $(this).serialize(), dataType: "html", success: function(msg){ alert('23'); ...

javascriptjqueryajaxtwitter-bootstrap

Does Vue.js interfere with classList.remove functionality?

When working with Vue.js, I encountered an issue where elements would briefly flash curly braces to the user before being hidden. To combat this problem, I implemented the following solution: HTML: <div class="main hide-me" id="my-vue-element"> ...

cssdomvue.js

What if there was a magical jQuery method that could automatically trigger a callback function? What could it possibly be named?

Is there a way to load only images and iframes, similar to the .load() function? I want to automatically add a selector element into the "this" variable for this purpose. $('document').ready(function({ $('a').<Something to trigg ...

javascriptjqueryhtmlcss

Is it possible to align divs so that they touch when they wrap to a new line, creating a grid-like appearance?

My React board component consists of an array of divs that I want to arrange in a grid-like map. The issue is, when the div wraps to a new line, there is significant space between each row. I aim to have the divs close together with no gaps. GameMap state ...

javascriptcssreactjsflexbox

div with fixed position and scrollable content

I'm exploring ways to create a simple webpage layout inspired by the traditional index setup. The idea is to have a fixed header/navbar div that is 200px in height, with a second div below it containing scrollable content that fills the remaining vert ...

htmlcssscrollable

How can I horizontally center an element in CSS/HTML if auto-margin does not produce the desired result?

This is a snippet of the CSS code I'm using for my menu: ul { text-align: left; display: inline; margin: auto; width: 50%; position: fixed; top: 0; list-style: none; } I've attempted to use auto-margin left and right ...

htmlcss

Tips for removing a section of HTML code within a PHP script

I attempted to remove a "Search" button located in the top left corner of a website. While searching for a solution, I stumbled upon a helpful tip at this link: Best way to find out which php file has generated an html line of code in WordPress Even afte ...

phphtmlwordpressstorefrontchild-theming

ScrollReveal.js won't function as intended

https://i.stack.imgur.com/SOQEk.png Looking to utilize the popular ScrollReveal.js created by Julian Lloyd (ScrollReveal) Despite following instructions from various sources, the script is not producing the intended effect. Steps taken to make it work: ...

javascriptcss

Avoiding line wrapping can be achieved by hiding elements using the d-none class from Bootstrap

During the development of a responsive website, I encountered an issue with the topbar menu. The menu contains numerous options, which is ideal for larger screens. However, on smaller viewports like cellphones, the buttons start wrapping rather than fittin ...

htmlcsstwitter-bootstrapresponsive-designbootstrap-5

Tips for hiding a bootstrap modal in Angular4 when it has no content

I am currently working on an Angular 4 e-commerce application. One of the requirements is to hide a bootstrap modal when there are no products in the cart. When a user selects some products, they are added to the mycart modal screen. The user also has the ...

angularhtmltypescriptbootstrap-4

Exploring Zend Framework's headLink() helper with HTML5

I have set the doctype to HTML 5 by using the following code: $view->doctype('HTML5'); Next, I added a stylesheet in this manner: $view->headLink()->appendStylesheet($view->baseUrl().'/css/reset.css'); This code results ...

phphtmlzend-framework

Incorporating Past Projects into an Angular 2 Website

Some time ago, I built a Javascript game utilizing the HTML canvas element for image rendering. Now that I have a personal website created with Angular 2, I am unsure of how to properly embed my game into my site. Due to Angular 2 removing the script tag ...

javascripthtmlangularwebhtml5-canvas

Is it possible to manipulate an image tag's image using only CSS?

Is it possible to hide an image from the src attribute of an <img> tag and instead set a background image on the tag using CSS? One idea could be adjusting the positioning or text-indent of the actual image to move it out of view, and then applying ...

htmlcssimagebackground-image

Determining the Size and Color of Squares in a Treemap Based on Content with D3.js

I encountered an issue with a treemap visualization. I came across an example that is similar to my situation, which can be viewed here: In the demo, you can see that the size of each square in the treemap is determined by the content size. However, all s ...

javascriptjquerycssd3.jstreemap

Apply a style to the div element that contains a TextInput component

As a beginner in the world of React and Material UI, I am currently working with Material UI version "1.0.0-beta.17", React 15.6.2, styled-components 2.0.0, and styled-components-breakpoint 1.0.1. Within a div element, I have two TextInput fields. const ...

javascriptcssreactjsmaterial-uistyled-components

Tips for setting up the Top Menu and Left Side Menu in your system

You're looking to incorporate both the Top Menu and Left Side Menu. The top menu should remain fixed at the top of the page. Implementing the Left Side Menu below the Top Menu has been a challenge. It's currently covering the top menu, which is ...

javascripthtmlcssbootstrap-5