I've added a grey box to my site. i want the box to follow the bottom of my page as more pictures are uploaded to my site. How do I make that work.
.GreyBG {
background: #595959;
position: absolute;
border-style: solid;
width: 50%;
//578px;
height: 70%;
border: 1px solid rgba(0, 0, 0, .2);
top: 220px;
left: 0px;
right: 0px;
border-width: 1px;
border-color: #21262c;
border-radius: 1px;
margin-left: auto;
margin-right: auto;
z-index: -1;
}
<div class="GreyBG"></div>
It depends on the parent element and its display parameters, but in general just remove position: absolute;, which will make it static and scroll with the rest.
Change top:220px to bottom :0;
This will stick the div to bottom of the page.
Update
Change the css to this:
.GreyBG {
background: #595959;
position: absolute;
border-style: solid;
width: 50%;
//578px;
height: 70%;
border: 1px solid rgba(0, 0, 0, .2);
top: 220px;
left: 0px;
right: 0px;
border-width: 1px;
border-color: #21262c;
border-radius: 1px;
margin-left: auto;
margin-right: auto;
z-index: -1;
max-height: 100%;
overflow-x: hidden;
}
.GreyBG img {
width: initial;
height: inherit;
}
Related
I have an absolutely positioned CSS banner that has a responsive width and height based on viewport size. The element is centered on desktop and tablet devices, but not on mobile (when the banner's width starts to shrink).
I can't use the classic margin: 0 auto; trick because the margins have to be set to a fixed value for the banner to work.
The code is below:
HTML:
<h1 class="banner">A Simple CSS Banner</h1>
CSS:
#import url(https://fonts.googleapis.com/css?family=Rye);
body
{ background: #eee; }
.banner {
position: absolute;
left: 50%;
display: block;
margin: 100px -200px;
width: 400px;
max-width: calc(100% - 150px);
height: 60px;
border: 1px solid #8a1;
font: normal 30px/60px 'Rye';
text-align: center;
color: #451;
background: #9b2;
border-radius: 4px;
box-shadow: 0 0 30px rgba(0,0,0,.15) inset,
0 6px 10px rgba(0,0,0,.15);
}
.banner::before,
.banner::after {
content: '';
position: absolute;
z-index: -1;
left: -70px;
top: 24px;
display: block;
width: 40px;
height: 0px;
border: 30px solid #9b2;
border-right: 20px solid #791;
border-bottom-color: #94b81e;
border-left-color: transparent;
transform: rotate(-5deg);
}
.banner::after {
left: auto;
right: -70px;
border-left: 20px solid #791;
border-right: 30px solid transparent;
transform: rotate(5deg);
}
#media (max-width: 475px) {
.banner {
height: 90px;
line-height: 45px;
}
.banner::before,
.banner::after {
border-width: 45px;
border-right-width: 30px;
}
.banner::after {
border-left-width: 30px;
border-right-width: 45px;
}
}
Link to working codepen: https://codepen.io/Adam0410/pen/QZOKdV
Thanks for the help!
Check if this helps you.
#import url(https://fonts.googleapis.com/css?family=Rye);
body {
background: #eee;
}
.banner {
position: absolute;
left: 50%;
transform: translate(-50%);
display: block;
margin: 100px 0;
width: 400px;
max-width: calc(100% - 150px);
min-height: 60px;
}
.banner span {
display: block;
position: relative;
z-index: 1;
border: 1px solid #8a1;
font: normal 30px/60px "Rye";
text-align: center;
color: #451;
background: #9b2;
border-radius: 4px;
box-shadow: 0 0 30px rgba(0, 0, 0, 0.15) inset, 0 6px 10px rgba(0, 0, 0, 0.15);
}
.banner::before,
.banner::after {
content: "";
position: absolute;
z-index: -1;
left: -70px;
bottom: -24px;
display: block;
width: 40px;
height: 0px;
border: 30px solid #9b2;
border-right: 20px solid #791;
border-bottom-color: #94b81e;
border-left-color: transparent;
transform: rotate(-5deg);
}
.banner::after {
left: auto;
right: -70px;
border-left: 20px solid #791;
border-right: 30px solid transparent;
transform: rotate(5deg);
}
#media (max-width: 475px) {
.banner {
min-height: 90px;
line-height: 45px;
}
.banner::before,
.banner::after {
border-width: 45px;
border-right-width: 30px;
}
.banner::after {
border-left-width: 30px;
border-right-width: 45px;
}
}
<h1 class="banner"><span>A Simple CSS Banner</span></h1>
You can simply use Media queries and adapt Width and margin.
something like:
media (max-width: 475px) {
.banner{
width: 200px;
margin:100px -100px;
}
}
This way you keep the top and bottom margin:
left: 0; right: 0;
margin: 100px auto;
If you want to center an absolute or fixed element you should :
position: absolute;
left: 0%;
right:0%;
margin: 0 auto;
Trying to create a "chat bubble" type of thing and here is my code. The little triangle is made via a pseudo element ::after but I can't make it show.
Any ideas what I am doing wrong?
.playernamechat.self-message {
width: auto;
background-color: blue;
border-radius: 12px;
padding: 5px 10px;
margin-left: 5px;
display: inline-block;
max-width: 280px;
overflow: hidden;
float: left;
position: relative;
color: white;
}
.self-message::after {
content: "";
position: absolute;
top: 50%;
right: 100%;
margin-top: -5px;
border-width: 5px;
border-style: solid;
border-color: #555 transparent transparent transparent;
}
<span class="playernamechat self-message">hello</span>
Actually, it is showing but hidden. In your CSS remove overflow: hidden;. See below:
.playernamechat.self-message {
width: auto;
background-color: blue;
border-radius: 12px;
padding: 5px 10px;
margin-left: 5px;
display: inline-block;
max-width: 280px;
/*overflow: hidden;*/
float: left;
position: relative;
color: white;
}
.self-message::after {
content: "";
position: absolute;
top: 50%;
right: 100%;
margin-top: -5px;
border-width: 5px;
border-style: solid;
border-color: #555 transparent transparent transparent;
}
<span class="playernamechat self-message">hello</span>
I am trying to make a div look a little like a speech box with a triangle at the top left, currently I have this:
.bubble
{
position: relative;
width: 240px;
height: 120px;
padding: 12px;
background: brown;
-webkit-border-radius: 0px;
-moz-border-radius: 0px;
border-radius: 0px;
margin-left: 30px;
margin-top: 30px;
}
.bubble:after
{
content: '';
position: absolute;
border-style: solid;
border-width: 17px 23px 17px 0;
border-color: transparent brown;
display: block;
width: 0;
z-index: 1;
left: -23px;
top: 0px;
}
<div class="bubble"></div>
And I am looking to have it like:
.bubble
{
position: relative;
width: 240px;
height: 120px;
padding: 12px;
background: brown;
-webkit-border-radius: 0px;
-moz-border-radius: 0px;
border-radius: 0px;
margin-left: 30px;
margin-top: 30px;
}
.bubble:after
{
content: '';
position: absolute;
border-style: solid;
border-width: 0px 23px 17px 0;
border-color: transparent brown;
display: block;
width: 0;
z-index: 1;
left: -23px;
top: 0px;
}
<div class="bubble"></div>
Here try this one, i removed the border-top in your style, so it goes like this, border-width: 0px 23px 17px 0;. Let me know if this is what youre aiming for.
EDIT: By the way if you want to make some adjustments to that triangle you can adjust the border-right and border-bottom to make it look like what you've shown in your image.
I am trying to set a div inside trapezoid shaped div.
But the inner div is invisible in anyway.
I also tried z-indexes.
.trapezoid
{
border-color: transparent transparent rgba(255,0,0,0.2) transparent;
border-width: 0px 10px 38px 10px;
border-style: solid;
height: 0;
width: 40px;
background-size: 430px;
overflow: hidden;
background-repeat: no-repeat;
display: block;
text-indent: -99999px;
margin-top: 25px;
margin-bottom: 25px;
margin-left: 25px;
margin-right: 25px;
cursor: pointer;
}
.innerIcon
{
width: 100%;
height: 38px;
border-radius: 16px;
background-color: rgba(0,0,0,0.4);
}
<div class="trapezoid" title="Fire Range Down">
<!-- This inner div is invisible -->
<div class="innerIcon"></div>
</div>
Please give me some solution.
The trapezoid is made up of just border, so it does not have a height ( height:0px specified in css). so overflow:hidden was causing the problem which is removed . Setting position:absolute to inner div and postion:relative to trapezoid will do the trick.
Here is the updated code:
.trapezoid {
border-color: transparent transparent rgba(255, 0, 0, 0.2) transparent;
border-width: 0px 10px 38px 10px;
border-style: solid;
height: 0;
width: 40px;
background-size: 430px;
/*overflow: hidden;*/
background-repeat: no-repeat;
display: block;
text-indent: -99999px;
margin-top: 25px;
margin-bottom: 25px;
margin-left: 25px;
margin-right: 25px;
cursor: pointer;
/*New Css */
position: relative;
}
.innerIcon {
width: 100%;
height: 38px;
border-radius: 16px;
background-color: rgba(0, 0, 0, 0.4);
position: absolute;
top: 0px;
}
<div class="trapezoid" title="Fire Range Down">
<!-- This inner div is invisible -->
<div class="innerIcon"></div>
</div>
Try this css
.innerIcon
{
position: absolute;
width: 39px;
height: 38px;
border-radius: 16px;
background-color: rgba(0,0,0,0.4);
}
I'm trying to draw a navigation arrow using css only, I wrote this code
<span class="outer">
<span class="inner"></span>
</span>
with the style
.outer {
width: 40px;
height: 40px;
border: 2px solid #000;
border-radius: 30px;
display: block;
position: relative;
}
.inner {
width: 0px;
height: 0px;
border-style: solid;
border-width: 10px 15px 10px 0;
border-color: transparent #000 transparent transparent;
position: absolute;
right: 35%;
top: 24%;
}
but i want the inner triangle be like this <, not as play button. i shared my code on JSFiddle
You could use a pseudo element to get this sort of shape.
The only drawback being you would need to know the top and left values; they aren't relative to the size of .inner.
.outer {
width: 40px;
height: 40px;
border: 2px solid #000;
border-radius: 30px;
display: block;
position: relative;
}
.inner {
width: 0px;
height: 0px;
border-style: solid;
border-width: 10px 15px 10px 0;
border-color: transparent #000 transparent transparent;
position: absolute;
right: 35%;
top: 24%;
}
.inner:after{
content:'';
width: 0px;
height: 0px;
border-style: solid;
border-width: 10px 15px 10px 0;
border-color: transparent #FFF transparent transparent;
position: absolute;
left: 5px;
top: -10px;
}
<span class="outer">
<span class="inner"></span>
</span>
This simply places the same sized arrow on top of .inner, but nudged over a few pixels. Increase the left style to make the arrow 'thicker'.