I have a button within a div. The div parent has position:absolute and is positioned fully to the left in the browser window. The child button has position:fixed, because I want the child button to always be a certain distance from the bottom of the browser window (regardless of the parent div).
What I want is to horizontally center the parent div in the browser window (best way to do that?); however, the child button is then in the wrong x-location, since it should be relative to the div but is fixed. Essentially the x-location for the button should be relative to the parent div, whereas the y location should be relative to the browser window (i.e., fixed).
How can I accomplish this?
http://jsfiddle.net/YfWWH/
<body>
<div class="viewport">
<button id="t">T</button>
</div>
</body>
.viewport {
background: white;
height: 1024px;
height: 900px;
width: 768px;
margin: 0em auto;
overflow: hidden;
position: absolute;
}
#t{
height: 2.2em;
text-align: center;
background: #CA6161;
border: thin solid #943232;
color: #FFF;
position: fixed;
bottom: 0.3em;
left: 57.7em;
border-bottom: thin solid #FFF;
border-top: thin solid #CFCFCF;
border-left: thin solid #CFCFCF;
border-right: thin solid #FFF;
border-radius: 5px;
}
http://jsfiddle.net/YfWWH/8/
Just remove the absolute property from the parent and the left property from the child.
.viewport {
background: white;
height: 1024px;
height: 900px;
width: 50px;
margin: 0 auto;
overflow: hidden;
}
#t{
height: 2.2em;
text-align: center;
background: #CA6161;
border: thin solid #943232;
color: #FFF;
position: fixed;
bottom: 0.3em;
border-bottom: thin solid #FFF;
border-top: thin solid #CFCFCF;
border-left: thin solid #CFCFCF;
border-right: thin solid #FFF;
border-radius: 5px;
}
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
I had implemented an auto-complete functionality for my search box, but autocomplete is moving for different screen sizes it is static for above 600px. I want that to be below my search bar.
Mobile view
Desktop View
CSS for auto complete
.autocomplete-items {
border: 1px solid #d4d4d4;
border-bottom: none;
border-top: none;
z-index: 99;
/*position the autocomplete items to be the same width as the container:*/
top: 100%;
left: 0;
right: 0;
position: relative;
display: flex;
align-items:center;
flex-direction: column;
}
.autocomplete-items div {
padding: 10px;
box-shadow: 0 2px 2px 0 rgba(0,0,0,0.16), 0 0 0 1px rgba(0,0,0,0.08);
box-sizing: border-box;
cursor: pointer;
background-color: #fff;
border-bottom: 1px solid #d4d4d4;
width: 70%;
max-width: 630px;
position: relative;
right: 64px;
text-align: left;
}
/*when hovering an item:*/
.autocomplete-items div:hover {
background-color: #e9e9e9;
}
Search bar CSS
.mainSection .searchContainer .searchBox {
border: none;
box-shadow: 0 2px 2px 0 rgba(0,0,0,0.16), 0 0 0 1px rgba(0,0,0,0.08);
height: 44px;
border-radius: 2px;
outline: none;
padding: 10px;
box-sizing: border-box;
font-size: 16px;
width: 70%;
max-width: 630px;
color: #000;
}
I am pretty sure that width: 70%; is causing the problem. % always depends on the container size and therefore such problems can happen. Try it with using Pixels instead.
I'm trying to get better at JS and CSS, so I'm making a fake iPhone and am trying the simulate the look of when a text bubble pops on and off screen.
This is what it looks like so far, and this is the HTML for the phone itself:
<div id="iPhone">
<div id="screen"></div>
<div id="me" class="bubble"></div>
<div id="homeButton" class="circle"></div>
</div>
As well as the style sheet:
#iPhone {
position: fixed;
width: 250px;
height: 500px;
background-color: black;
border-radius: 25px;
top: 50%;
right: 30%;
transform: translate(-50%, -50%);
-webkit-filter: blur(3px);
box-shadow: 0 0 40px 20px white;
border: solid 2px white;
}
#me {
background-color: #1D62F0;
margin-top: 130%;
margin-left: 25%;
}
#me::after{
content: "";
position: absolute;
right: 0em;
bottom: 0;
width: 0.5em;
height: 1em;
border-left: 0.5em solid #1D62F0;
border-bottom-left-radius: 1em 0.5em;
}
#screen {
position: fixed;
width: 241px;
height: 370px;
background-color: white;
border-radius: 0px;
top: 8%;
left: 1%;
-webkit-filter: blur(3px);
border: solid 2px black;
}
Right now, there's no JS governing it. How do I make it naturally slide onto the "screen" div and then disappear off the top, just like a real text message?
Thanks!
You need to put the overflow: hidden property on the message container div, then simply push new message boxes beneath the already existing ones, so they disappear eventually.
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>
i m trying to make a pop up table which happens next to the biggest div that i have(right side) when the user clicks on the white button. But i m kinda out of ideas about how to do it. Is there any way to do it with bootstrap? If not still any tipps would be greatly appreciated !
https://jsfiddle.net/e97ut32r/
<div id ="a">
<div id ="b"></div>
<button></button>
</div>
#a {
border: 2px solid #a1a1a1;
padding: 10px 40px;
background: #dddddd;
width: 300px;
height: 300px;
border-radius: 25px;
}
#b {
border: 2px solid #a1a1a1;
padding: 20px 100px;
background-color: white;
width: 10%;
height: 50%;
border-radius: 25px;
float: left;
margin: 5px;
}
button{
margin-left: 1cm;
margin-top: 20%;
}
You can use modals, basically is an overall div where you can put any kind of content.
http://getbootstrap.com/javascript/#modals