I am trying to create a banner in the top left corner that stays put and does not disappear or get cut off when the window shrinks. This is the site: indigolubricants.com and it can be accessed with the password: indigodenver . This is a squarespace site and some things behave differently than regular html and css.
HTML:
<div class="corner-ribbon top-left sticky red shadow">Hover over symbols to see product categories</div>
This is the css with the position as fixed. The problem with this is that I want the ribbon to scroll with the rest of the page. Please let me know of any solutions. Either css or javascript. I have already tried changing the position properties. If the element is absolute then I can't move it. Other elements get cut off when the page is resized.
CSS:
/* The ribbons */
.corner-ribbon{
width: 1000px;
background: #DAA520;
position:fixed;
top: 0px;
left: 100px;
text-align: center;
line-height: 50px;
letter-spacing: 1px;
color: #f0f0f0;
transform: rotate(-45deg);
-webkit-transform: rotate(-45deg);
}
.corner-ribbon.shadow{
box-shadow: 0 0 3px rgba(0,0,0,.3);
}
/* Different positions */
.corner-ribbon.top-left{
top: 200px;
left: -300px;
transform: rotate(-45deg);
-webkit-transform: rotate(-45deg);
}
Try applying these styles to the element you want to fix. You can change the height and width accordingly.
height: 20vh;
width: 10vw;
top: 0;
position: fixed;
Related
im looking about how to put a watermark text in my webpages in left top corner over all the content
that is, independently of the content of the pages, have always a watermark text
have readed about brianium/watermarkjs but seems this for iamges watermarking.
I just made this code on codepen so you can see it.
codepen
<div id="watermark">
<p>Watermark</p>
</div>
#watermark {
color: #d0d0d0;
font-size: 20pt;
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
position: absolute;
width: 100%;
height: 100%;
margin: 0;
z-index: -1;
left:-45px;
top: -500px;
}
I'm not sure if this is really solvable/possible but...
I'm trying to implement a particular animation where my screen is divided in 2 vertically on the first page, but after doing some sort of event (wheel, scroll, click, etc), the layout will animate smoothly to divide the screen horizontally.
If you hover over the first example, I tried to just rotate both inner elements, and then tried to resize the elements based on the new, rotated position. This did not work well.
As you can see, as the elements rotate, there are several issues:
They don't rotate perfectly in sync
You can see the ugly whitespace of the container behind it as it rotates
After rotating, the elements do not fill the container perfectly
I have tried many different things, like using z-index, absolute positioning, tried putting the inner elements in another nested container and then rotating the container, then adding height and width, but again the sizes didn't fit the container. I cannot seem to figure out how to make this work (without Javscript, if possible).
Essentially, the animation I have in mind would make the transition from the Initial Stage to the Final Stage seamless (ie. You wouldn't be able to see the whitespace in the background of the container, and the starting vertical line of separation would just slowly rotate to a horizontal line, while changing the position of the inner elements)
I hope this makes sense? I've been trying to get this animation to work for days...and I am exhausted of options/not creative enough/don't have the knowledge I need; help would be greatly appreciated.
.container {
display: flex;
border: 1px solid black;
width: 425px;
height: 500px;
margin: 5% auto;
}
.container:hover .left {
transform-origin: 100% 50%;
transform: rotate(90deg);
width: 100%;
}
.container:hover .right {
transform-origin: 0 50%;
transform: rotate(90deg);
width: 100%;
}
.left {
background-color: purple;
height: 100%;
width: 50%;
transition: all 2s;
}
.right {
background-color: yellow;
height: 100%;
width: 50%;
transition: all 2s;
}
.container2 {
display: flex;
flex-direction: column;
border: 1px solid black;
width: 425px;
height: 500px;
margin: 5% auto;
}
.left2 {
background-color: purple;
height: 50%;
width: 100%;
}
.right2 {
background-color: yellow;
height: 50%;
width: 100%;
}
Initial Stage
<p>(width of the container is the viewport; I don't care about if the element extends outside of the viewport during the transtion, but at the final stage, the element must be within it's container perfectly)</p>
<div class="container">
<div class="left"></div>
<div class="right"></div>
</div>
Final Stage
<p>(width of the container is the viewport; I don't care about if the element extends outside of the viewport during the transtion, but at the final stage, the element must be within it's container perfectly)</p>
<div class="container2">
<div class="left2">
I have content in here that I need fit within this container
</div>
<div class="right2">
I have content in here that I need fit within this container
</div>
</div>
Instead of adding transition to left/ right divs add it to the container div
.container {
display: flex;
border: 1px solid black;
width: 425px;
height: 500px;
margin: 5% auto;
transition: all 2s;
transform: rotate(0deg);
}
.container:hover {
transform: rotate(90deg);
width: 100%;
}
Also Remove transitions and transforms from left right divs
I have an image which goes from one side off the screen to other. However, when I open the HTML on a different sized computer/laptop, it does not fit and looks out of place. How do I fix this?
CODE:
body {
text-align: center;
}
div.container {
text-align: left;
width: 710px;
margin: 0 auto;
border: 12px solid black;
border-radius: 10px;
}
div.content {
width: 700px;
min-height: 400px;
background-color: white;
padding: 5px;
}
#-webkit-keyframes mini {
from {
left: 410px;
}
}
.mini {
position: absolute;
top: 280px;
left: 950px;
width: 166px;
height: 70px;
z-index: 10000;
-webkit-animation: mini 3s;
animation: mini 8s;
}
<div class="container">
<div class="content">
<img src="Media/buscartoon.jpg" class="mini" />
</div>
</div>
maybe set initial left and top values
.imganim {
width:100px;
height:60px;
position:absolute;
-webkit-animation:myfirst 5s;
animation:myfirst 5s;
left: 0;
top: 0;
}
Your .content and .container have no position set, so I guess it's defaulting to the next parent element that does have these set.
Pop this on your .content div:
position: relative;
the image is still going to go over the limits because of left: 100% but adding a relative position to the container may well help you get to the next problem.
If you want the image to sit flush with the edge of the container rather than running over, you can also change your left: 100% to:
left: calc(100% - 100px)
...where 100px is the width of the element.
edit: jsfiddle example https://jsfiddle.net/w56r2xnr/
Try the following css classes that i have ammended. I have kept the top at 5px which makes room for the 5px padding within the content div. Also the 50% transformation formal includes the left 100% - (width of the image + right-padding).
You can now adjust the top to make it as you see fit.
CSS changes:
div.content {
width: 700px; min-height: 400px;
background-color: white; padding: 5px;
position: relative;
}
/* Chrome, Safari, Opera */
#-webkit-keyframes myfirst
{
0% {left:0%; top:5px;}
50% {left: calc(100% - 105px);}
100% {left:0%; top:5px;}
}
/* Standard syntax */
#keyframes myfirst
{
0% { left:0%; top:5px;}
50% {left: calc(100% - 105px);}
100% {left:0%; top:5px;}
}
Sample: http://codepen.io/Nasir_T/pen/ZBpjpw
Hope this helps.
[Edit - Code changed in question]
I think in both scenarios you will need to set the content div with position:relative to keep the image contained within it as the image itself is position:absolute. Along with that you need to use percentage values for the left and top in order for the animation and the position to be in the right place regardless of the size of the screen.
For the updated code in question please check the following code sample:
http://codepen.io/Nasir_T/pen/ObRwmO
Just adjust the key frame left percentage according to your need.
I'm trying to create a remote control app using Cordova.
There should be 2 vertical sliders (<input type="range">, with my customizations (height, width, color, etc.). One should be on the left, positioned at 25% of the page width; and the other on the right, at 75% of the page width.
The sliders also should be centered on the correct point (ex. calc(25% - 20px); for the slider on the left if it is 40px wide, which it will be).
The only other requirement is that this webpage works on iOS Safari (really Cordova, but it uses Apple's WebKit which is basically the same). Opera/Firefox would also be nice. It does not have to be IE compatible (you're welcome).
I don't mind using Javascript/jQuery, but I would prefer CSS.
Also, for reasons unexplained, the sliders go off the top of the page, which must be fixed. One last bug with what I currently have is that applying position: fixed; left: 0px; to a slider does not move it completely to the left, so the centerInViewport() function is offset.
Here's a JSFiddle: https://jsfiddle.net/Coder256/6zjnk3qt/
I already tried -webkit-appearance: slider-vertical. It doesn't allow styling. For sliders, any -webkit-appearance value aside from none that I've tried doesn't let you style anything.
UPDATE: Sorry if I wasn't clear. The question is: How do I correctly position the sliders while keeping my customization, correctly being not too far up off the page and at the correct x position as described above?
The trick is to set margin-topto half of the sliders width to keep the sliders from being too far up off the page.
Same principle is for the x position. Use calc to set left to 25% / 75% minus half of the sliders width to get the correct position.
html, body {margin: 0; padding: 0; width: 100%; height: 100%}
h1 {
text-align: center;
}
.app {
width: 100%;
}
.sliders {
position: relative;
}
input[type=range].vslider {
-webkit-appearance: none;
transform: rotate(270deg) translateY(-50%);
margin-top: 200px; /* 50% of the width because of the transformation */
width: 400px;
height: 40px;
outline: none;
position: absolute;
}
input[type=range].vslider::-webkit-slider-thumb {
-webkit-appearance: none;
background-color: #777;
opacity: 0.75;
width: 25px;
height: 40px;
transform: translateY(-10px);
}
input[type=range].vslider::-webkit-slider-runnable-track {
-webkit-appearance: none;
background-color: #444;
color: #444;
height: 20px;
width: 400px;
}
#LSlider {
left: calc(25% - 200px); /* 50% of the width because of the transformation */
}
#RSlider {
left: calc(75% - 200px); /* 50% of the width because of the transformation */
}
<div class="app">
<h1>RC Car Test</h1>
<div id="sliders">
<input type="range" min="-256" max="256" step="1" defaultValue="0" class="vslider" id="LSlider" />
<input type="range" min="-256" max="256" step="1" defaultValue="0" class="vslider" id="RSlider" />
</div>
</div>
For my html page I would like to be able to shade the whole page to indicate temporary disablement of all items in the page, the way it is when (for example) when one opens the "Insert Image" dialog box in the "Ask question" section here (as shown in the snapshot below).
The only thing I can think of is setting the page’s bgcolor attribute to grey, but that's not quite what I want because the shading should appear on top of the page items, not behind them. What is the correct way to do it ?
Apply a disabled class to your body and define this style
body.disabled:before {
content: "";
position: fixed;
height: 100%;
width: 100%;
left: 0;
top: 0;
z-index: ... /* choose a z-index so that no other element can overlap it */
background: rgba(0,0,0, .8);
}
Example
body.disabled:before {
content: "";
position: fixed;
z-index: 1;
min-height: 100vh;
width: 100%;
left: 0;
top: 0;
background: rgba(0,0,0, .5);
}
.popup {
position: fixed;
z-index: 2;
background: #fff;
border: 2px #ccc solid;
padding: 30px;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
<body class="disabled">
I'm the body
<div class="popup">I'm the popup</div>
</body>
If you use a pseudolement you won't need to use empty markup only for styling purpose.
When the user interaction has completed, just remove the disabled class (via js)
You could add a div over the rest of your page
<div id="overlay"></div>
#overlay{
position:fixed;
z-index:10;
top:0;
left:0;
bottom:0;
right:0;
background-color:[what ever you want]
}
N.b. however I prefer the :before option (assuming you don't need legacy IE support)