I was trying to create an input field with a transition effect to the placeholder, for that I used a <span> tag to hold the placeholder and transitioned it using the :focus CSS selector
It works pretty well but the problem is after we input the text and click anywhere outside the input area/text field area, the placeholder transitions back and overlaps with the text inputted.
I want the placeholder to not transition back if the text area currently has text in it.
Also, there is one more issue that the text field doesn't get selected if the placeholder is clicked.
How can I clear these bugs?
I've provided the code below:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Input</title>
<style>
body {
margin: 0px;
}
#top-heading {
padding: 1rem;
text-align: center;
margin: auto;
margin-bottom: 1rem;
}
textarea {
width: 85%;
display: block;
height: 10vh;
margin: 1.5rem;
margin-top: 0rem;
padding: 0.5rem;
font-size: large;
}
span {
position: absolute;
top: 6rem;
padding-left: 2.7rem;
color: rgb(121, 120, 120);
font-size: larger;
}
textarea:focus~span {
color: black;
font-size: 1.091rem;
transition: .6s ease;
transform: translate3d(-1.15rem, -1.9rem, 2rem);
}
</style>
</head>
<body>
<h1 id="top-heading">Input</h1>
<textarea id="txt-input"></textarea>
<span>Enter the input</span>
</body>
</html>
Can you please check the below code? Hope it will work for you. You need to give transition: .6s ease; property to span tag instead of textarea:focus~span.
Please refer to this link: https://jsfiddle.net/yudizsolutions/kjfc0z37/
<!DOCTYPE html>
<html lang="en">
<head>
<title>Input</title>
<style>
body {
margin: 0px;
}
#top-heading {
padding: 1rem;
text-align: center;
margin: auto;
margin-bottom: 1rem;
}
textarea {
width: 85%;
display: block;
height: 10vh;
margin: 1.5rem;
margin-top: 0rem;
padding: 0.5rem;
font-size: large;
}
span {
position: absolute;
top: 6rem;
padding-left: 2.7rem;
color: rgb(121, 120, 120);
font-size: larger;
transition: .6s ease;
}
textarea:focus~span {
color: black;
font-size: 1.091rem;
transform: translate3d(-1.15rem, -1.9rem, 2rem);
}
</style>
</head>
<body>
<h1 id="top-heading">Input</h1>
<textarea id="txt-input"></textarea>
<span>Enter the input</span>
</body>
</html>
Related
I have been working on a search bar here that I've played around with the text sizes and such. However, I have noticed that the font size of the text typed in shrunk down in size after being typed in the size that I prefered. I'm not exactly sure how to have the text stay the size it was typed in as.
Here's my HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
</head>
<body>
<section style="background-color: lightgrey;">
<input type="text" placeholder="Search Fennec Tech..." id="Search_Bar" onclick="Search()" class="Search-bar">
</section>
</body>
</html>
Here's my CSS:
*
section {
place-content: center;
scroll-snap-align: start;
block-size: 100vh;
padding: 100px;
font-family: sans-serif;
font-size: 50px;
}
#Search_Bar {
background-color: transparent;
border: none;
border-left: solid 5px blue;
border-bottom: solid 5px blue;
color: blue;
}
.Search-bar {
height: 200px;
width: 1250px;
font-size: 20px;
placeholder-text-color: red;
}
#Search_Bar:focus {
animation-name: Search-anim;
animation-duration: 2s;
font-size: 75px;
}
#keyframes Search-anim {
from {
background-color: transparent;
color: green;
}
to {
background-color: white;
color: blue;
}
}
::placeholder {
color: red;
font-size: 75px;
opacity: 0.5;
}
How is it possible to do this? I'm quite stuck on this.
Why you have two different sizes.
.Search-bar {
font-size: 20px; /* THE SIZE WHEN NOT IN FOCUS */
}
#Search_Bar:focus {
font-size: 75px; /* THE SIZE WHEN IN FOCUS */
}
So it you want big text all the time set the big text on the class.
I'm a novice coder and I'm building my first proper website. I have a column of button links down the right hand side of my page. However, they're only visible if the window is full-screen. If I use my mouse to shrink the size of the window, the buttons disappear. Is there any way that I can make the buttons stay visible if the window changes size?
Here's the HTML code:
/* Scroll down to the bit that says ALL MY BUTTONS for the relevant CSS. */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html {
background-color: #fff;
color: #555;
font-weight: 300;
font-size: 20px;
text-rendering: optimizeLegibility;
}
.row {
max-width: 1140px;
//margin: 0 auto;
}
header {
background-image: url(img/joshua-earle-183442.jpg);
background: no-repeat center center cover;
height: 100vh;
background-size: cover;
background-position: center;
}
.hero-text-box {
position: absolute;
width: 1140px;
top: 5%;
left 50%;
font-family: 'Orbitron', 'Arial', sans-serif;
margin-left: 15px;
word-spacing: 15px;
font-weight: 300;
}
h1 {
margin-top: 0;
color: #ef872e;
}
/****ALL MY BUTTONS***/
.quizzes {
position: absolute;
display: inline-block;
margin-left: 1730px;
margin-bottom: 10px;
top: 50%;
text-decoration: none;
color: #ef872e;
font-family: 'Orbitron';
padding: 10px;
border-style: solid;
border-width: 1px;
border-radius: 10px;
border-color: #ef872e;
}
.calculators {
position: absolute;
display: inline-block;
margin-top: 20px;
margin-left: 1692px;
top: 55%;
color: #ef872e;
text-decoration: none;
font-family: 'Orbitron';
padding: 10px;
border-style: solid;
border-width: 1px;
border-radius: 10px;
border-color: #ef872e;
}
.solarsystem {
position: absolute;
width: 230px;
display: inline-block;
margin-top: 40px;
margin-left: 1612px;
top: 60%;
color: #ef872e;
text-decoration: none;
font-family: 'Orbitron';
padding: 10px;
border-style: solid;
border-width: 1px;
border-radius: 10px;
border-color: #ef872e;
}
.mysteries {
position: absolute;
width: 240px;
display: inline-block;
margin-top: 60px;
margin-left: 1602px;
top: 65%;
color: #ef872e;
text-decoration: none;
font-family: 'Orbitron';
padding: 10px;
padding-right: 10px;
border-style: solid;
border-width: 1px;
border-radius: 10px;
border-color: #ef872e;
}
.otherresources {
position: absolute;
width: 220px;
display: inline-block;
margin-top: 30px;
margin-left: 1623px;
top: 75%;
color: #ef872e;
text-decoration: none;
font-family: 'Orbitron';
padding: 10px;
border-style: solid;
border-width: 1px;
border-radius: 10px;
border-color: #ef872e;
}
.full:hover,
.full:active {
background-color: #e97512;
color: #fff;
transition: background-color 0.3s;
transition: color 0.3s;
}
.ghost:hover,
.ghost:active {
border-color: #e97512;
background-color: #e97512;
color: #fff;
transition: background-color 0.3s;
transition: color 0.3s;
}
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" type="text/css" href="vendors/css/normalize.css">
<link rel="stylesheet" type="text/css" href="vendors/css/grid.css">
<link rel="stylesheet" type="text/css" href="resources/css/style.css">
<link href="https://fonts.googleapis.com/css?family=Lato|Orbitron:400,500" rel="stylesheet" type=text/css>
<title>Interactive Galaxy</title>
</head>
<body>
<header>
<div class="hero-text-box">
<h1>Explore the universe, or whatever...</h1>
</div>
<a class="quizzes full" href="#">Quizzes</a>
<a class="calculators ghost" href="#">Calculators</a>
<a class="solarsystem ghost" href="#">The Solar System</a>
<a class="mysteries ghost" href="#">Mysteries of Space</a>
<a class="otherresources ghost" href="#">Other Resources</a>
</header>
</body>
</html>
Remove all the margin-left from your links. surround all your links by a div like this:
<div class="links">
<a class="quizzes full" href="#">Quizzes</a>
<a class="calculators ghost" href="#">Calculators</a>
<a class="solarsystem ghost" href="#">The Solar System</a>
<a class="mysteries ghost" href="#">Mysteries of Space</a>
<a class="otherresources ghost" href="#">Other Resources</a>
</div>
and then change the links container style like this :
.links {
float: right;
}
I think the reason is your margin-left property, simply, the window is not enough to display these many pixels. better set:
display: inline-block;
float: right;
Also, better put your buttons in the list for better view and controls in styling.
Your margin-left property is defined by a set number of pixels:
margin-left: 1730px;
Even when the screen is smaller, that rule will still apply by pixel count. To make your page more responsive, change the margin to a percentage, like:
margin-left: 80%; /* 80% is just an example */
or use #VaxoBasilidze's idea of applying float: right;.
The solution is simple.
You used a top: in % , so when you resize the window. css calculates the stated % according to window current width.
so to solve this; update your top: to px; like top: 555px; so when you resize the window your buttons will be visible.
tl;dr - How can I center the blue div found in the third image in the white space, not the page?
I've been experiencing quite the headache recently. I've created a website with two distinct columns, but, is achieved with only one div element. This can be seen below.
It's pretty obvious from the picture that the first column is to be regarded as a sidebar, and hence, has the class .sidebar. .sidebar has a fixed width property of 400px. The rest of the page is simply the rest of the div with the class .container, which extends to 100% on both its width and height
properties. As I would image this is hard to image from just reading this text, I've found a way to illustrate how the page is setup.
Gray is the html element.
White is the body element.
The aqua on white is the div with the class .container.
The following aqua is the div with the class .sidebar.
Let's now insert the div that's giving me issues.
As you can see, a single blue div has been added. This has the class .test, and which simply sets the width, height, and margin properties. As you can now see, when the margin is set to 0 auto, the div is centered to the window and not the white space. Obviously this is the expected action.
The issue I'm facing is that I have no idea how I can center the blue div in the white space. I'm not sure how I would create anything the exact width of the white space, and hence, don't know how margin: 0 auto would be any use. How would I center my test element in the white space? Can this be achieved through CSS and HTML?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Welcome.</title>
<link href='https://fonts.googleapis.com/css?family=Open+Sans:300|Raleway' rel='stylesheet' type='text/css'>
<link href="https://www.codekaufman.com/assets/css/core.css" rel="stylesheet" type="text/css" />
<link href="https://www.codekaufman.com/assets/css/alerts.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="banner-alert">Please excuse the mess. I'm currently working to improve the site. Thanks.
</div>
<div class="container">
<div class="side-bar">
<div class="temp-logo"></div>
<ul class="nav">
<li class="nav-button-disabled">About</li>
<li class="nav-button-disabled">GitHub</li>
<li class="nav-button-disabled">Contact</li>
</ul>
<div class="emphasis-button-disabled">Support</div>
<div class="legal">Copyright © 2015 Jeffrey Kaufman. All Rights Reserved.</div>
</div>
<div class="test"></div>
</div>
</body>
</html>
#charset "utf-8";
* {
margin: 0;
padding: 0;
font-family: "Raleway", sans-serif;
color: #000;
}
html, body {
width: 100%;
height: 100%;
}
a {
text-decoration: none;
color: inherit;
}
.container {
height: 100%;
}
.side-bar {
position: fixed;
top: 0;
left: 0;
width: 400px;
height: 100%;
background: #EEE;
}
.temp-logo {
width: 200px;
height: 200px;
margin: 0 auto;
margin-top: 150px;
background: #000;
}
.nav {
width: 200px;
margin: 0 auto;
margin-top: 75px;
list-style-type: none;
}
.nav-button {
margin-top: 20px;
margin-bottom: 20px;
font-size: 1.6em;
cursor: pointer;
transition: 0.5s;
}
.nav-button:hover {
margin-left: 20px;
}
.nav-button-disabled {
margin-top: 20px;
margin-bottom: 20px;
font-size: 1.6em;
cursor: default;
color: #AAA;
}
.nav-category {
margin-top: 40px;
margin-bottom: 20px;
font-size: 2em;
cursor: default;
border-bottom: 1px #000 solid;
}
.emphasis-button {
text-align: center;
position: absolute;
width: 120px;
height: 45px;
left: 138px;
line-height: 45px;
bottom: 70px;
border-radius: 5px;
border: 1px solid #C30;
color: #C30;
transition: 0.4s;
cursor: pointer;
}
.emphasis-button-enabled {
text-align: center;
position: absolute;
width: 120px;
height: 45px;
left: 138px;
line-height: 45px;
bottom: 70px;
border-radius: 5px;
border: 1px solid #C30;
transition: 0.4s;
cursor: pointer;
color: #EEE;
background: #C30;
}
.emphasis-button-disabled {
text-align: center;
position: absolute;
width: 120px;
height: 45px;
line-height: 45px;
left: 138px;
bottom: 70px;
border-radius: 5px;
border: 1px solid #AAA;
color: #AAA;
cursor: default;
}
.emphasis-button:hover {
color: #EEE;
background: #C30;
}
.legal {
font-family: 'Open Sans', sans-serif;
position: absolute;
font-size: 0.85em;
text-align: center;
width: 400px;
height: 20px;
left: 0;
bottom: 20px;
}
.test {
width: 600px;
height: 200%;
background: blue;
margin: 0 auto;
}
Wrap it in another element with position=absolute, a right, top and bottom value of 0 and a left value of 400px:
<div style="position:absolute;right:0;top:0;bottom:0;left:400px;">
<div class="test"></div>
</div>
Your side bar already have position fixed, so please add padding left to your container it will work
.container {
height: 100%;
padding-left: 400px; /*width of your .sidebar*/
}
try changing the width for a percentage and adding a new div that covers the rest of the white space so you can center the blue element on that new div.
.side-bar {
position: fixed;
top: 0;
left: 0;
width: 20%;
height: 100%;
background: #EEE;
}
.new-div{width:80%;float:left;}
Set the test inside the new div
<div class="new-div"><div class="test"></div></div>
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.
I am having trouble with finding my link. When I open up my html and css in the file, I cannot visibly see it (I believe it is stuck under my div, even though the z-index is higher?) I am not entirely sure why, any help would be greatly appreciated!
HTML:
<!DOCTYPE html>
<html>
<head>
<link type="text/css" rel="Stylesheet" href="Stylesheet.css" />
<title>Derpycats.com</title>
</head>
<body>
<!--Background (Carbon Fibre)-->
<body background="background.jpg" alt="Background" />
<!--Header-->
<h1 id="header">DerpyCats.com</h1>
<div id="headerdiv"></div>
<!---Links-->
Home
</body>
</html>
CSS:
/* Sets the pixel density to "fill browser" */
* {
width: 100%;
height: 100%;
}
/* Heading */
#header {
float:left;
margin-left: 5px;
padding-top: 5px;
font-size: 16px;
font-family: Verdana, sans-serif;
color: #D9411E;
z-index: 2;
position: fixed;
font-size: 50px;
bottom: -50px;
}
/* CSS for the heading div */
#headerdiv {
border-radius: 5px;
z-index: 1;
position: fixed;
width: 99%;
margin-top: -20px;
height: 100px;
background-color: white;
margin-bottom: 10px;
}
/* Css for the links */
a {
z-index: 3;
font-family: Verdana, sans-serif;
}
/* CSS for the normal paragraphs */
.paragraph {
color: white;
font-family: Courier, serif;
}
P.S. I don't believe this matters, but I am on OSX using sublime text 2.
I didnt understand what are you trying to do but, #headerdiv overlays your link.
You can give z-index = -1 value to your #headerdiv to send it back.
little Change in css will work here
#headerdiv {
border-radius: 5px;
z-index: 1;
/*position: fixed; this is creating problem*/
width: 99%;
margin-top: -20px;
height: 100px;
background-color: white;
margin-bottom: 10px;
}