For some reason I can't get the Text to hide while it transitions off the screen.
Example, I have a rectangle hidden off screen, but even after the page should end (sides of the page) the rectangle is still visible which is very odd. I've solved this issue before but I forgot.
Code:
<!DOCTYPE html>
<html>
<header>
<title>RNS|Blog</title>
</header>
<head>
</head>
<body>
<style>
#tuti {
margin-left: 1000px;
margin-right: 0;
}
#tuti:hover {
width: 600px;
padding: 0px;
}
#tuti a {
float: left;
overflow: hidden;
padding-left: 45px;
white-space: nowrap;
font-size: 1.5em;
}
#tuti {
width: 30px;
height: 75px;
background-color: #655655;
-webkit-transition: width 2s; /* For Safari 3.1 to 6.0 */
transition: width 2s;
opacity: 0.5;
margin: 0;
padding: 0;
border: 0;
color: white;
font-weight: 300;
margin-top: 30px;
}
.right {
float: right;
}
}
</style>
<h1 class="right", id="tuti"><a>really nice server I blog</a></h1>
</body>
<footer>
</footer>
</html>
JSFiddle: https://jsfiddle.net/eobwtvxL/
The main reason is that the text within the a tag has width and the h1 tag should be set to overflow:hidden. Also, setting position:absolute on the h1 will take it out of document flow and allow you to place it anywhere without affecting adjacent elements. Here is the cleaned up CSS:
#tuti {
overflow:hidden;
position:absolute;
right:30px;
top:30px;
width: 30px;
height: 75px;
background-color: #655655;
-webkit-transition: width 2s;
/* For Safari 3.1 to 6.0 */
transition: width 2s;
opacity: 0.5;
margin: 0;
padding: 0;
border: 0;
color: white;
font-weight: 300;
}
#tuti:hover {
width: 600px;
padding: 0px;
}
#tuti a {
position:absolute;
overflow: hidden;
padding-left: 45px;
white-space: nowrap;
font-size: 1.5em;
}
Cleaned up fiddle:
https://jsfiddle.net/eobwtvxL/1/
You also need to fix this:
<h1 class="right", id="tuti">
No comma:
<h1 class="right" id="tuti">
Make sure to assign overflow:hidden; to any element that contains the pullout bar. In your jsfiddle add this #tuti {overflow:hidden;} and you will see it will work.
Related
I want to rotate entire body 90 degree counterclockwise. Here is what I did:
body, html {
position: relative;
padding: 0;
margin: 0;
height: 100%;
min-height: 100%;
max-height: 100%;
background: black;
}
.msg {
color: white;
font-size: 350%;
text-shadow: 4px 4px 15px gray;
margin: 10px 10px 10px 10px;
z-index: 1;
bottom: 0;
direction: ltr; /* lang */
position: absolute;
text-align: center;
width: 100%
}
.wrapper{
transform: rotate(-90deg);
transform-origin:bottom right;
position:absolute;
top:-100vw;
height:100vw;
width:100vh;
background-color:#000;
color:#fff;
overflow:auto;
}
<body id="body">
<div class='wrapper'>
<div id="caption" class="msg"> Heloooooo</div>
</div>
</body>
However the result is like the image below and the contents are off located towards the left by almost 50%. What am I missing?
You are missing right 0:
.rotate90counterclockwise{
transform: rotate(-90deg);
transform-origin:bottom right;
position:absolute;
top:-100vw;
right:0;
height:100vw;
width:100vh;
}
body, html {
position: relative;
padding: 0;
margin: 0;
height: 100%;
min-height: 100%;
max-height: 100%;
background: black;
}
.msg {
color: white;
font-size: 350%;
text-shadow: 4px 4px 15px gray;
margin: 10px 10px 10px 10px;
z-index: 1;
bottom: 0;
direction: ltr; /* lang */
position: absolute;
text-align: center;
width: 100%
}
<body id="body">
<div class='rotate90counterclockwise'>
<div id="caption" class="msg"> Heloooooo</div>
</div>
</body>
It's difficult what you are trying to do. I think you want to make some all page rotation effect for that. You want to rotate the body to be more easy to control. But it's tricky what you are trying to make. It's more safe to rotate individual elements because, if you rotate the body, it will not be like an image. We talk about coding and you need to change all the page code. Width is ok to control but the height is the tricky one because height is the whole web page.
This is what works for me but maybe just for one text message. When you have more complex things, it will be hard to control it. This is my point.
<!DOCTYPE html>
<html>
<head>
<title>Test page</title>
<style>
body {
transform: rotate(-90deg);
transform-origin: bottom right;
position: absolute;
top: -75vmax;
left: -50vmax;
height: 100vh;
width: 100vw;
background-color: black;
overflow: auto;
}
h1.red {
text-align: center;
color: red;
}
</style>
</head>
<!-- BODY -->
<body>
<h1 class="red">TEST TXT!</h1>
</body>
</html>
SS of how is look on my screen
You rotated the body 90 degrees, anything in the body will also be rotated 90 degrees.
What are you trying to do? Why not just rotate the elements in the body 90 degrees.
Thanks for the help. I will look for more clear questions in the future.
Anyways, got it to work on code pen using the method I mentioned above. Code and link below.
HTML:
<body id="body">
<div class='wrapper'>
<div id="caption" class="msg">
<p>Site Banner</p>
</div>
</div>
<main></main>
</body>
CSS:
body, html {
padding: 0;
margin: 0;
height: 100%;
background-color: #000;
font-family:Lucida Console;
}
.msg {
float: right;
}
.msg > p {
margin: 0px;
padding: 0px;
overflow: visible;
transform: rotate(-90deg) translate(-120px, 120px);
color: white;
font-size: 60px;
text-shadow: 4px 4px 15px gray;
margin: 10px 10px 10px 10px;
direction: ltr; /* lang */
text-align: right;
}
.wrapper{
display: block;
background-color: #000;
width: 100%;
height: 100vh;
overflow: hidden;
}
main{
display: block;
height: 600px;
width: 100%;
background-color: #222222;
}
CodePen: Site Banner Upper Right
I have two text fields inside a 100% width flex row. One is positioned on the left and the other on the right. I want the text on the right to overlap/cover the text on the left when the container (window) is resized (smaller) from the right.
Solutions must not use absolute positioning. The left-text has a left margin that the right-text must stop at. The text container is purposefully a row of 100% width.
Fiddle is not the best platform for layout and resizing testing, but https://jsfiddle.net/Lcjcyp4g/6/
The position:abs solution is commented out in the flex code below for completeness. Please ignore the behavior on resize-right -- our only focus is text overlap on resize-left.
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div class="container">
<div class="container--text">
<div class="left">Left Text</div>
<!-- <div class="container--right"> -->
<div class="right">Right Text</div>
<!-- </div> -->
</div>
</div>
</body>
</html>
html, body {
height: 100vh;
width:100%;
background-color: #D7CCC8;
overflow: hidden;
margin: 0;
padding: 0;
}
.container {
min-width:100%;
width:100%;
margin-left:20px;
height: 14px;
max-height:14px;
}
.container--text {
height: 14px;
max-height:14px;
width:100%;
display: flex;
flex-flow: row nowrap;
padding: 10px 0;
}
.left {
white-space: nowrap;
color: #000000;
font-size: 14px;
font-weight: bold;
text-overflow: ellipsis;
flex-shrink:1;
}
/* This is not a viable soln because there is no boundary left for the pos:absolute element without JS*/
.container--right {
/*height: 14px;
background-color: #D7CCC8;
position:absolute;
right:0;
*/
}
.right {
white-space: nowrap;
justify-self:flex-end;
margin-left:auto;
margin-right:20px;
background-color:#BCAAA4;
color: #616161;
font-size: 12px;
}
A solution is to add width: 0;min-width: 0; to the left text to make the left part with no size thus the text will overflow. Then due to white-space:nowrap you won't see any visual changes but the right text will be able to cover it.
html,
body {
margin: 0;
padding: 0;
}
.container--text {
display: flex;
flex-flow: row nowrap;
padding: 10px 0;
animation: change 2s infinite linear alternate;
}
.left {
white-space: nowrap;
width: 0;
min-width: 0;
color: #000000;
font-weight: bold;
}
.right {
white-space: nowrap;
margin-left: auto;
margin-right: 20px;
background-color: #BCAAA4;
color: #616161;
}
#keyframes change {
from{width:500px;}
to{width:230px;}
}
<div class="container--text">
<div class="left">Leeeeeeeeeeeft Text</div>
<div class="right">Rigggggggggggggggght Text</div>
</div>
Or you can omit the width:0 and use overflow:hidden to hide the text when its container will shrink:
html,
body {
margin: 0;
padding: 0;
}
.container--text {
display: flex;
flex-flow: row nowrap;
padding: 10px 0;
animation: change 2s infinite linear alternate;
}
.left {
white-space: nowrap;
overflow:hidden;
text-overflow:ellipsis;
min-width: 0;
color: #000000;
font-weight: bold;
}
.right {
white-space: nowrap;
margin-left: auto;
margin-right: 20px;
background-color: #BCAAA4;
color: #616161;
}
#keyframes change {
from { width: 500px;}
to { width: 230px; }
}
<div class="container--text">
<div class="left">Leeeeeeeeeeeft Text</div>
<div class="right">Rigggggggggggggggght Text</div>
</div>
So I wanted to center vertically the config button (#config) I tried too many options but not even one that I would like and understand. So here is my CodePen:
http://codepen.io/fenwil/pen/ONRXwz
This is the most important part of the code to modify:
HTML
<header id="cabecera">
<img id="logo" alt="Mayor Igual a Siete" src="http://imgh.us/logo_207.svg">
<h3 id="user">Username</h3>
<img alt="Configuracion" src="http://imgh.us/config.svg" id="config">
</header>
CSS
#config {
transition: all 0.5s ease;
height: 20px;
width: 20px;
}
Thanks in advance! And if you see something else badly donde let me know please!
and if you add a new line with this?
#config{
margin-top: 15px;
}
Remove the floats and use display:inline-block and vertical-align:middle.
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body,
html {
font-family: 'Roboto', sans-serif;
height: 100%;
overflow-y: hidden;
}
a {
text-decoration: none;
}
#cabecera {
text-align: right;
margin-top:50px; /* for demo only */
}
#cabecera,
a {
color: #FFFFFF;
}
#cabecera {
background-color: #393E46;
line-height: 50px;
height: 50px;
}
#cabecera * {
margin: 0px 4px 0px 4px;
}
#user,
#config {
display: inline-block;
vertical-align: middle;
}
#logo {
height: 50px;
width: 55px;
float: left;
}
#config {
transition: all 0.5s ease;
height: 20px;
width: 20px;
}
#config:hover {
transform: rotate(90deg);
}
#user {
font-weight: 100;
font-size: 18px;
}
<header id="cabecera">
<img id="logo" alt="Mayor Igual a Siete" src="http://imgh.us/logo_207.svg">
<h3 id="user">Username</h3>
<a href="perfil.html">
<img alt="Configuracion" src="http://imgh.us/config.svg" id="config">
</a>
</header>
To center just about anything:
.wrapper
{
position: relative;
}
.content
{
position: relative;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
remove unneeded directions
How it works: top/left percentage positioning work on the size of the parent, causing the upper left corner of the inner element to be moved to the center of the parent element. To really center the element you then have to transform: translate the element by -50%, which skales on the size of the element itself resulting in a perfect center
I have an Image on the page. I have put a Div on footer with a heading and a paragraph inside the Div. I have made the Div's background transparent like this way , background-color: rgba(0,0,0,.6);.
But I need to implement this like this way , background-color:black; opacity:0.6".
The problem is, if I am doing it using opacity then the heading and paragraph is also getting blur with the Div's colour. How can I solve it?
Below is my full code.
CSS
<style type="text/css">
.div1 {
max-width: 100%;
height: auto;
text-align: center;
display: block;
border: none;
}
.feature-text-overlay {
background-color: rgba(0,0,0,.3);
bottom: 0;
padding: .6em 0 .8em;
position: absolute;
text-align: center;
width: 100%;
}
.feature-title {
font-size: .875em;
margin: 0;
text-transform: uppercase;
color:white;
}
.feature-description {
line-height: 1.2;
margin: 0 2em;
color:white;
}
</style>
Html
<div class="div1">
<img src="~/Content/Image/rendering-graphics-in-resolution-222734.jpg" />
<div class="feature-text-overlay" style="height:52.599999277954px; min-height:1px;">
<h4 class="feature-title">Enterprise Mobility Suite</h4>
<p class="feature-description">Manages Users, Devices and Data</p>
</div>
</div>
css
.feature-text-overlay {
bottom: 0;
padding: .6em 0 .8em;
position: absolute;
text-align: center;
width: 100%;
position:relative; /* add this to specify position */
}
/* create pseudo css element */
.feature-text-overlay:before {
content:"";
background-color: #000;
opacity:0.3;
bottom: 0;
top:0;
right:0;
left:0;
position: absolute;
}
Demo
edit as per comment demo 2
Up until a couple days ago using position:absolute; and bottom:-36px was enough to hide the controls down the page, and they would popup whenever the mouse was hovered over the player. Now I'm able to scroll down to see them. How can I fix this while keeping the same slide-up effect?
Also, one more thing... I set the controls div with line-height:36px expecting it to be 36px in height but it is actually 38px (making bottom:-36px kind of useless since 2px are visible). The timer and the P, M and F divs get two extra px on the top and the seek bar gets them on the bottom. Where are these extra px coming from?
Sample
Any help on how to fix these issues and understand what's going on will be greatly appreciated. Thank you.
EDIT1:
Thanks to Fahad I managed to solve my first issue. The snippet didn't work outside of codepen but I fixed it adding position:relative; to the parent div. It still is unclear to me why line-height adds those extra px, though.
Giving the parent div a relative position raised another problem, don't ask me why but sometimes I need to scroll inside the "player" (well, you can ask) and when I do the controls don't stay at the bottom. Please see for yourselves:
Sample
EDIT2:
Apparently that can be easily solved by replacing position:absolute; with position:fixed; in the controls div. I'm still testing just in case this little change is messing with anything else.
You can assign overflow-y: hidden; to your body tag using CSS (to disable vertical scrolling) and change the bottom value to -38px.
html,
body {
font-family: Verdana, Helvetica, Arial, sans-serif;
color: #EEE;
margin: 0;
overflow-y: hidden;
}
#player {
background-color: #333;
text-align: center;
height: 100vh;
}
#toggle {
margin: auto;
width: 500px;
font-size: 24px;
line-height: 60px;
background-color: #B83B3B;
}
#toggle:hover + #controls {
bottom: 0;
}
#controls {
position: absolute;
left: 0;
right: 0;
bottom: -38px;
line-height: 36px;
background-color: #B83B3B;
transition: bottom 0.3s ease;
}
#left {
float: left;
}
#right {
float: right;
}
#curTime {
font-size: 13px;
font-weight: bold;
margin: 0px 8px;
display: inline-block;
vertical-align: middle;
}
#center {
overflow: hidden;
}
#seekBar {
-webkit-appearance: none;
outline: none;
background-color: #1F7783;
height: 6px;
margin: 0;
width: 100%;
}
#seekBar::-webkit-slider-thumb {
-webkit-appearance: none;
background-color: #EEE;
height: 12px;
width: 12px;
border-radius: 12px;
cursor: pointer;
opacity: 0.8;
}
.button {
margin: 0px 8px;
font-size: 24px;
display: inline-block;
vertical-align: middle;
}
<div id="player">
<div id="toggle">Hover to show controls.</div>
<div id="controls">
<div id="left">
<div class="button">P</div>
<span id="curTime">0:01</span>
</div>
<div id="right">
<div class="button">M</div>
<div class="button">F</div>
</div>
<div id="center">
<input type="range" id="seekBar" step="any">
</div>
</div>
</div>
Here's the example on CodePen.