I need this button to stick at the bottom right of the screen, but as you can see there's something wrong with my code. What am I missing?
Can you help?
Thanks.
html {
background: #ccc;
}
.chat {
width: 55px;
height: 55px;
position: sticky;
bottom: 20px;
right: 20px;
background: red;
border: 0;
}
<button class="chat"></button>
You can reach it with using float: right;.
html {
background: #ccc;
}
.chat {
width: 55px;
height: 55px;
position: sticky;
bottom: 20px;
right: 20px;
background: red;
border: 0;
float: right;
}
<button class="chat"></button>
Try this:
.chat {
width: 55px;
height: 55px;
position: fixed;
bottom: 20px;
left: 20px;
background: red;
border: 0;
}
position: fixed is key element.
Related
First of all Thank you for the solutions,
I want to create a progress bordered div using HTML and CSS. Similar to the attached image.
I need it with rounded borders.
:root {
--count: 60%;
}
body {
display: flex;
min-height: 100vh;
margin: 0;
}
div {
margin: auto;
width: 200px;
height: 160px;
border-radius: 20px;
position: relative;
border: 1px solid #ddd;
background-color: white;
}
div::after {
content: '';
display: block;
position: absolute;
left: -3px;
top: -3px;
right: -3px;
bottom: -3px;
background-color: transparent;
background-image: conic-gradient(orange, orange var(--count), transparent var(--count));
z-index: -100;
border-radius: 21.5px;
}
<div></div>
how can I give a location to my image that I want to be on another banner block?
#topBar{
background-color: #333333;
height: 40px;
width: 100%;
margin: 0px ;
}
#logo{
height: 50px;
width: 50px;
position: fixed;
margin-top: 10px;
}
and I want the logo to be on the topBar
If i get you correctly. this will do what you wants.
#topBar {
position: relative;
background-color: #333333;
height: 40px;
width: 100%;
margin: 0px;
}
#logo {
position: absolute;
top: 0;
right: 0;
left: 0;
margin-left: auto;
margin-right: auto;
background-color: #e6e6e6;
height: 50px;
width: 50px;
position: fixed;
margin-top: 10px;
}
<div id="topBar"></div>
<div id="logo"></div>
PS: Your question is vague. Please read tips on writing great answers.
I am having the following error when using
.high-secuity {
position: fixed;
top: 0;
background: #ff782f;
color: #fff;
width: 100%;
border-radius: 0;
margin-bottom: 0;
margin-left: -15px;
}
the issue is that the orange panels goes outside the screen. How can I fix this?Don't want to use fixed widths as it should be responsive
with width: inherit; to the orange block my example is working
body {
background-color: #ccc;
}
.container {
position: relative;
width: 300px;
background-color: #fff;
overflow: hidden;
padding: 50px 15px;
}
.high-secuity {
position: fixed;
top: 0;
background: #ff782f;
color: #fff;
width: inherit;
border-radius: 0;
margin-bottom: 0;
margin-left: -15px;
padding: 15px;
}
<div class="container">
<h1>Osloskolen</h1>
<div class="high-secuity">Your message</div>
</div>
I have been watching a tutorial on jQuery and he already had the css file made before but his output looks different than what I have when I downloaded the file
his:
The way it should be
Mine:
The code:
#navArrows {
position: relative;
width: 150px;
height: 150px;
margin: 100px auto 0;
background: #333;
-webkit-border-radius: 100px;
-moz-border-radius: 100px;
border-radius: 100px;
padding: 20px;
}
.navigationArrow {
width: 50px;
height: 50px;
line-height: 50px;
padding: 0;
margin: 0;
position: absolute;
top: 20px;
left: 20px;
background: white;
color: #222;
}
#up {
left: 50%;
margin-left: -25px;
}
#left, #right {
bottom: 50%;
margin-top: -25px;
}
#left, {
right: 20%;
left: inherit;
}
#right {
left: 20%;
right: inherit;
}
#down {
bottom: 20px;
top: inherit;
left: 50%;
margin-left: 5px;
}
.box {
height: 100px;
width: 100px;
background: #a7f;
color: white;
border: solid 4px #a1f;
line-height: 100px;
margin: 100px auto 0;
opacity: 0.5;
position: relative;
}
How do I fix this, please let me know.
ps: i added one part of the code that was missing from the original question, hope this helps.
It was better if you was add the markup as well. However see the following example and make correction according it. Hope it will work for you.
#navArrows {
position: relative;
width: 150px;
height: 150px;
margin: 100px auto 0;
background: #333;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 100px;
padding: 20px;
}
.navigationArrow {
width: 50px;
height: 50px;
line-height: 50px;
padding: 0;
margin: 0;
position: absolute;
top: 20px;
left: 20px;
background: white;
color: #222;
}
#up {
left: 50%;
margin-left: -25px;
}
#left, #right {
top: 50%; // One of the key line
margin-top: -25px;
}
#right {
left: auto;
right: 20px;
}
#down {
bottom: 20px;
top: auto;
left: 50%;
margin-left: -25px;
}
.box {
height: 100px;
width: 100px;
background: #a7f;
color: white;
border: solid 4px #a1f;
line-height: 100px;
margin: 100px auto 0;
opacity: 0.5;
position: relative;
}
<div id="navArrows">
<div class="navigationArrow" id="up"></div>
<div class="navigationArrow" id="right"></div>
<div class="navigationArrow" id="down"></div>
<div class="navigationArrow" id="left"></div>
</div>
It looks like you have a comma after the #left class try replacing it with:
#left {
right: 20%;
left: inherit;
}
Try this one
#left {
left: 0;
}
I cannot figure out why my css is creating this funky bottom margin or border I took a little video so you can see it: http://img.zobgib.com/2011-04-25_1317.swf The margin/border doesn't show except when the page is resized to pretty small. My css is pretty standard, and I have not inline styling or JS styling that would cause it. What would cause this weird margin?
Here is my CSS
html {
}
body {
}
#content {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
#drawn {
background: #fff !important;
}
#content > * {
}
#toolcontainer {
left: 0;
right: 0;
height: 50px;
min-width: 940px;
}
#toolcontainer > * {
display: inline-block;
vertical-align: middle;
margin-right: 10px;
margin-left: 10px;
}
#slidescontainer {
position: absolute;
left: 0;
bottom: 0;
top: 52px;
width: 130px;
min-height: 658px;
}
#newslide {
background: url(/static/img/new_slide.png) !important;
border: 1px solid #FFFFFF;
}
#slidescontainer canvas {
position: relative;
}
#slidescontainer > * {
height: 80px;
width: 106px;
margin: 10px;
background: #ffffff;
border: 1px solid #000;
}
#container {
position: absolute;
min-height:608px;
min-width: 810px;
/* height: 608px;
width: 810px;*/
background-color: #fff;
background-image: none;
top: 52px;
bottom: 0;
right: 0px;
left: 132px;
background: #d5d5d5;
border: 10px solid #000;
}
#container canvas {
/* left: 50%;
margin-left: -405px;
top: 50%;
margin-top: -304px;*/
}
#debug {
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 100px;
overflow: auto;
border: 1px solid black;
background: black;
color: #34e338;
z-index: 50;
}
canvas {
position: absolute;
}
#colorSelector {
position: relative;
width: 46px;
height: 46px;
}
#colorSelector div {
position: absolute;
border: 1px solid #FFFFFF;
background: #000000;
width: 46px;
height: 46px;
}
You are using a lot of browser-specific CSS, and it looks like you were accessing it in an unsupported browser (Firefox doesn't support Microsoft markup, for obvious reasons). I'd recommend trying CSS3 selectors and rules instead of the browser-specific rules.
Try adding style = "overflow:hidden" to your html tag like this:
<html xmlns="http://www.w3.org/1999/xhtml" style = "overflow:hidden">
If it is an issue with page height, that may clear it up
I fixed it by changing the min-height in #container to 638px.