I'm trying to make a tab float vertically in a page with dynamic generated content and overlap the right border the page content container with the left border of the floating div.
Here is a representation of what I'm trying to achieve:
In the following fiddle there's a basic skeleton of my page and an example of what is happening.
jsFiddle here
If I add position: absolute to this class the floating tab is correctly positioned but the page will not grow correctly as the content is appended nor will the footer be correctly positioned. On the other hand, if I remove the position absolute then the tab is not correctly positioned.
#page-content
{
border: 1px solid lightblue;
display: inline-block;
width: 180px;
padding: 10px;
min-height: 100px;
/*position: absolute;*/
}
How can I place the floating tab correctly overlapping the container border?
Notes: I cannot change much of the page structure (wrapping div and footer) but if needs be, the floating div can be appended after the #inner div.
Try this FIDDLE
Just add this rules to your .floating-tab:
margin-left: -1px;
z-index: 999;
float: left;
and float: left to your selector #page-content
Something like this:
#inner
{
text-align: left;
margin-right: auto;
margin-left: auto;
display: inline-block;
width: 200px;
position: relative; /* positoning context */
}
.floating-tab
{
position: absolute;
border-left: 1px solid #fff;
border-top: 1px solid lightblue;
border-right: 1px solid lightblue;
border-bottom: 1px solid lightblue;
width: 32px;
text-align: center;
top: 10px;
left:100%; /* fully left */
margin-left: 1px; /* width of border */
z-index:2;
}
$(function($) {
var element = $(".floating-tab"), originalY = element.offset().top, topMargin = 10;
$(window).on("scroll", function(event) {
var scrollTop = $(this).scrollTop();
element.stop(false, false).animate({ top: scrollTop < originalY ? topMargin : scrollTop - originalY + topMargin }, 300);
});
$("#B1").on("click", function() {
$("#innercontent").append("<p>text 1</p><p>text 2</p><p>text 3</p><p>text 4</p><p>text 5</p><p>text 6</p><p>text 7</p><p>text 8</p><p>text 9</p><p>text 10</p>");
});
});
.floating-tab
{
position: absolute;
border-left: 1px solid #fff;
border-top: 1px solid lightblue;
border-right: 1px solid lightblue;
border-bottom: 1px solid lightblue;
width: 32px;
text-align: center;
top: 10px;
left:100%;
margin-left: 1px;
z-index:2;
}
.floating-tab span
{
width: 24px;
height: 24px;
margin: 2px;
}
#page-content
{
border: 1px solid lightblue;
display: inline-block;
width: 180px;
padding: 10px;
min-height: 100px;
}
#inner
{
text-align: left;
margin-right: auto;
margin-left: auto;
display: inline-block;
width: 200px;
position: relative;
}
#outer
{
width: 100%;
padding-top: 10px;
display: block;
text-align: center;
}
#footer
{
margin-top: 17px;
background-color: lightblue;
border-top: 1px solid gray;
height: 48px;
}
#pagewrapper
{
min-height: 100%;
margin-bottom: -66px;
}
html, body, form
{
height:100%;
}
html
{
overflow: initial !important;
}
*, *::after, *::before
{
padding: 0px;
margin: 0px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="pagewrapper">
<div id="outer">
<div id="inner">
<div id="page-content">
<input type="button" value="add content" id="B1" />
<div id="innercontent"></div>
</div>
<div class="floating-tab">
<span>A</span>
<span>B</span>
<span>C</span>
<div>
</div>
</div>
</div>
<div id="footer">FOOTER</div>
Related
I have this div that shows a top red bar. I've been trying to move this bar to the left side and make it look like a border left, but not having any luck. Does anyone know how to make it look like a border left using this code? Thanks in advance!
.container {
position: relative;
width: 100%;
padding: 18px;
margin-bottom: 16px;
border-radius: 8px;
border: solid 2px #e1e4e8;
overflow: hidden;
}
.container::after {
content: '';
position: absolute;
display: block;
height: 6px;
width: 100%;
top: 0;
left: 0;
background-color: red;
}
<div class = "container">this is a text</div>
This example adjusted position of ::after to make the red border appear on the left, hopefully close to the desired result.
.container {
position: relative;
width: 100%;
padding: 18px;
margin-bottom: 16px;
border-radius: 8px;
border: solid 2px #e1e4e8;
overflow: hidden;
}
.container::after {
content: '';
position: absolute;
display: block;
width: 6px;
inset: 0;
background-color: red;
}
<div class = "container">this is a text</div>
Perhaps just simplify it to a border?
.container {
position: relative;
width: 100%;
padding: 18px;
margin-bottom: 16px;
border-radius: 8px;
border: solid 2px #e1e4e8;
border-left: solid 8px red;
overflow: hidden;
}
<div class = "container">this is a text</div>
You can set border-left: 6px solid red; on the container class and remove background-color: red; from .container::after
Additionally, if you want to keep the grey border, just apply that style to each other sides of the container like so:
border-top: 2px solid #e1e4e8;
border-bottom: 2px solid #e1e4e8;
border-right: 2px solid #e1e4e8;
See snippet below:
.container {
position: absolute;
display: block;
width: 100%;
padding: 18px;
margin-bottom: 16px;
border-radius: 8px;
border-left: 6px solid red;
border-top: 2px solid #e1e4e8;
border-bottom: 2px solid #e1e4e8;
border-right: 2px solid #e1e4e8;
overflow: hidden;
}
.container::after {
content: '';
position: absolute;
display: block;
height: 6px;
width: 100%;
top: 0;
left: 0;
}
<div class = "container">this is a text</div>
You can also use a mixed border style and use hidden for the top, bottom, and right.
usage is described at W3Schools
This question already has an answer here:
Row-wrap center align in flexbox
(1 answer)
Closed 4 years ago.
So I have this which is supposed to be side by side in the middle before the media query hits and then when it hits it should stack on top of each other.
I have no idea why it's behaving th way it is.
I tried making it centered when ti's at its full width but it doesnt want to center and when I make the browser less than 400px they stack weirdly, they do stack on top but not centered.
.wrapper {
margin-top: 15%;
border : 2px solid #000;
overflow:hidden;
}
.wrapper div {
min-height: 300px;
padding: 10px;
}
#one {
background-color: orange;
float:left;
display: inline;
margin-left: 30%;
height: 400px;
width:250px;
border-right:2px solid #000;
}
#two {
background-color: orange;
float:left;
margin-right:30px;
height: 400px;
width:250px;
border-right:2px solid #000;
}
#media screen and (max-width: 400px) {
#one {
float: none;
margin-right:0;
bottom: 10%;
border:0;
}
#two {
float: none;
margin-right:0;
bottom: 10%;
border:0;
}
}
<div class="wrapper">
<div id="one">one</div>
<div id="two">two</div>
</div>
Use flexbox and you can easily do this without the need of media query:
.wrapper {
margin-top: 15%;
border: 2px solid #000;
display: flex;
justify-content: center; /*center the element*/
flex-wrap: wrap; /*make them above each other when they cannot fit in one row*/
}
.wrapper div {
min-height: 300px;
padding: 10px;
background-color: orange;
height: 400px;
width: 250px;
border: 2px solid #000;
}
<div class="wrapper">
<div id="one">one</div>
<div id="two">two</div>
</div>
You can also use inline-block instead of float:
.wrapper {
margin-top: 15%;
border: 2px solid #000;
overflow: hidden;
text-align:center;
}
.wrapper div {
min-height: 300px;
padding: 10px;
}
#one {
background-color: orange;
display: inline-block;
height: 400px;
width: 250px;
border-right: 2px solid #000;
}
#two {
background-color: orange;
display: inline-block;
height: 400px;
width: 250px;
border-right: 2px solid #000;
}
<div class="wrapper">
<div id="one">one</div><div id="two">two</div>
</div>
I am trying to create a time diagram which displays lab usage time using HTML CSS divs. I put something together, but it is not turning out as well as I thought.
div {
height: 30px;
margin-top: 20px;
}
.alloted {
background-color: blue;
border: 2px solid black;
text-align: left;
height: 80px;
width: 70%;
position: absolute;
opacity: 0.5;
}
.actual {
opacity: 0.6;
background-color: gray;
border: 2px solid black;
text-align: left;
height: 60px;
width: 65%;
margin-left: 2%;
margin-top: 40px;
position: absolute;
}
.bringUp {
background-color: orange;
border: 2px solid black;
text-align: left;
width: 10%;
display: inline-block;
float: left;
}
.idle {
background-color: brown;
border: 2px solid black;
text-align: left;
width: 10%;
display: inline-block;
float: left;
}
.lost {
background-color: red;
border: 2px solid black;
text-align: left;
width: 5%;
display: inline-block;
float: left;
}
.used {
background-color: green;
border: 2px solid black;
text-align: left;
width: 55%;
display: inline-block;
float: left;
}
<div class="actual">
Actual Time Used
<div class="bringUp">
Bring Up
</div>
<div class="idle">
Idle
</div>
<div class="lost">
Lost
</div>
<div class="used">
Used
</div>
</div>
<div class="alloted">
Alloted Lab Shot
</div>
What I am trying to achieve is creating a block of "actual" time which is made up of several blocks in line (Bringup, idle, lost, used). I also need to create another block which can move inside or outside of the actual time block to represent allotted time. The behavior is very similar to a stack bar chart, but not quite the same. The widths are hard coded in the CSS above, but the idea is the values would be based upon user input.
Any advice to achieve this would be great!
You could do it like that:
Set margins that are inherited from the parent to 0
Set heights manually is the easiest way in this case
Place "Actual Time Used" in a absolute positioned span
div {
box-sizing: border-box;
height: 30px;
margin-top: 20px;
}
.alloted {
background-color: blue;
border: 2px solid black;
text-align: left;
height: 80px;
width: 100%;
position: absolute;
opacity: 0.5;
}
.actual {
opacity: 0.6;
background-color: gray;
border: 2px solid black;
text-align: left;
height: 60px;
width: 65%;
margin-left: 2%;
margin-top: 40px;
position: absolute;
}
.actual span {
position: absolute;
bottom: 20px;
right: 50%;
}
.bringUp {
margin: 0;
height: 58px;
background-color: orange;
border: 2px solid black;
text-align: left;
width: 10%;
display: inline-block;
float: left;
}
.idle {
margin: 0;
height: 58px;
background-color: brown;
border: 2px solid black;
text-align: left;
width: 10%;
display: inline-block;
float: left;
}
.lost {
margin: 0;
height: 58px;
background-color: red;
border: 2px solid black;
text-align: left;
width: 5%;
display: inline-block;
float: left;
}
.used {
margin: 0;
height: 58px;
background-color: green;
border: 2px solid black;
text-align: left;
width: 55%;
display: inline-block;
float: left;
}
<div class="actual">
<span>Actual Time Used</span>
<div class="bringUp">
Bring Up
</div>
<div class="idle">
Idle
</div>
<div class="lost">
Lost
</div>
<div class="used">
Used
</div>
</div>
<div class="alloted">
Alloted Lab Shot
</div>
How can we draw a benchmark like this using html,css and js
Benchmark of user score with Jee Mains and Advance:
A small demo to get started, but don't expect to get everything from this site. Explore for yourself:
You have to modify the left and width properties to manipulate the diagram.
This is just the layout; CSS, images and other stuff you have to discover.
* {
box-sizing: border-box;
}
.outer {
background-color: #ccc;
width: 100%;
height: 50px;
}
.inner {
background-color: yellow;
width: 65%;
height: 50px;
float: left;
position: absolute;
}
.flag-1 {
border-left: 2px solid #777;
height: 70px;
position: absolute;
left: 30%;
float: left;
padding-top: 60px;
padding-bottom: 20px;
padding-left: 5px;
}
.flag-2 {
border-left: 2px solid #777;
height: 70px;
position: absolute;
left: 80%;
float: left;
padding-top: 60px;
padding-bottom: 20px;
padding-left: 5px;
}
<div class="outer">
<div class="inner">
</div>
<div class="flag-1">
This is one
</div>
<div class="flag-2">
This is two
</div>
</div>
I have a canvas on div a and a gif image on div b. What I want to do is to hide my canvas without using display: none; by putting the div b over div a.
I achieve it before by using display none to hide div a. But now I want div ato stay there while div b floats above it.
This is the current scenario: JSFiddle
try it with position absolute on div a. note that
margin: 0 auto;
will not work here. so use 'left' and 'margin-left' to fix that.
jsfiddle
I would wrap the two elements you want stacked in a container div and absolutely position div .b over div .a.
.a, .b {
width: 200px;
height: 30px;
text-align: center;
}
.wrap{
position: relative;
margin: 0 auto;
width: 200px;
height: 30px;
}
.a {
border: 1px solid red;
background: red;
}
.b {
border: 1px solid green;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: blue;
}
.container {
width: 300px;
height: 200px;
border: 1px solid #000;
}
.xtra {
width: 100%;
height: 150px;
background: #000;
}
<div class="container">
<div class="xtra"></div>
<div class="wrap">
<div class="a">div a</div>
<div class="b">div b</div>
</div>
</div>
UPDATED FIDDLE
You could position them both absolute and set z-index to .b.
.a, .b {
margin: 0 auto;
width: 200px;
height: 30px;
text-align: center;
}
.a {
border: 1px solid red;
position: absolute;
}
.b {
border: 1px solid green;
position: absolute;
z-index: 1;
}
.container {
width: 300px;
height: 200px;
border: 1px solid #000;
}
.xtra {
width: 100%;
height: 150px;
background: #000;
}
<div class="container">
<div class="xtra"></div>
<div class="a">div a</div>
<div class="b">div b</div>
</div>