For some reason, one of the sections of my page becomes the last section of my page despite having more sections below it in the HTML document. If the section is removed the other sections are shown. Is there something in the HTMl or CSS that affected my page? I need the rest of the page to be shown because it contains important information.
The HTML:
<!-- ===========================================================================
START NATURAL LANGUAGE MARKUP
=========================================================================== -->
<section id="nlmarkup">
<div class="inner">
<h2>Who I am. <i class="title_line"></i> </h2>
<p class="lead">The most important thing to me is
<br>building products people love.</p>
<form id="nl-form" class="nl-form">"I feel like making a
<select>
<option value="1" selected>app</option>
<option value="2">website</option>
<option value="3">mockup</option>
</select>
<br />that is
<input type="text" value="" placeholder="(adjective)" data-subline="For example: <em>Responsive</em> or <em>Cool</em>"
/>within
<br />the next
<select>
<option value="1" selected>week</option>
<option value="1">two weeks</option>
<option value="2">month</option>
<option value="3">six months</option>
<option vlaue="4">year</option>
</select>and
<br>delivered to me via
<select>
<option value="1" selected>email</option>
<option value="1">dribbble</option>
<option value="2">behance</option>
</select>."
<div class="nl-overlay"></div>
</form>
</div>
</div>
</section>
The CSS:
#font-face {
font-family: 'nlicons';
src:url('../fonts/nlicons/nlicons.eot');
src:url('../fonts/nlicons/nlicons.eot?#iefix') format('embedded-opentype'),
url('../fonts/nlicons/nlicons.woff') format('woff'),
url('../fonts/nlicons/nlicons.ttf') format('truetype'),
url('../fonts/nlicons/nlicons.svg#nlicons') format('svg');
font-weight: normal;
font-style: normal;
}
/* general style for the form */
.nl-form {
width: 100%;
margin: 0.3em auto 0 auto;
font-size: 4em;
line-height: 1.5;
}
.nl-form ul {
list-style: none;
margin: 0;
padding: 0;
}
/* normalize the input elements, make them look like everything else */
.nl-form input,
.nl-form select,
.nl-form button {
border: none;
background: transparent;
font-family: inherit;
font-size: inherit;
color: inherit;
font-weight: inherit;
line-height: inherit;
display: inline-block;
padding: 0;
margin: 0;
-webkit-appearance: none;
-moz-appearance: none;
}
.nl-form input:focus {
outline: none;
}
/* custom field (drop-down, text element) styling */
.nl-field {
display: inline-block;
position: relative;
}
.nl-field.nl-field-open {
z-index: 10000;
}
/* the toggle is the visible part in the form */
.nl-field-toggle,
.nl-form input,
.nl-form select {
line-height: inherit;
display: inline-block;
color: #b14943;
cursor: pointer;
border-bottom: 1px dashed #b14943;
}
/* drop-down list / text element */
.nl-field ul {
position: absolute;
visibility: hidden;
background: #00aed7;
left: -0.5em;
top: 50%;
font-size: 80%;
opacity: 0;
-webkit-transform: translateY(-40%) scale(0.9);
-moz-transform: translateY(-40%) scale(0.9);
transform: translateY(-40%) scale(0.9);
-webkit-transition: visibility 0s 0.3s, opacity 0.3s, -webkit-transform 0.3s;
-moz-transition: visibility 0s 0.3s, opacity 0.3s, -moz-transform 0.3s;
transition: visibility 0s 0.3s, opacity 0.3s, transform 0.3s;
}
.nl-field.nl-field-open ul {
visibility: visible;
opacity: 1;
-webkit-transform: translateY(-50%) scale(1);
-moz-transform: translateY(-50%) scale(1);
transform: translateY(-50%) scale(1);
-webkit-transition: visibility 0s 0s, opacity 0.3s, -webkit-transform 0.3s;
-moz-transition: visibility 0s 0s, opacity 0.3s, -moz-transform 0.3s;
transition: visibility 0s 0s, opacity 0.3s, transform 0.3s;
}
.nl-field ul li {
color: #fff;
position: relative;
}
.nl-dd ul li {
padding: 0 1.5em 0 0.5em;
cursor: pointer;
white-space: nowrap;
}
.nl-dd ul li.nl-dd-checked {
color: #478982;
}
.no-touch .nl-dd ul li:hover {
background: rgba(0,0,0,0.05);
}
.no-touch .nl-dd ul li:hover:active {
color: #478982;
}
/* icons for some elements */
.nl-dd ul li.nl-dd-checked:before,
.nl-submit:before,
.nl-field-go:before {
font-family: 'nlicons';
speak: none;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
-webkit-font-smoothing: antialiased;
}
.nl-dd ul li.nl-dd-checked:before {
content: "\e000";
position: absolute;
right: 1em;
font-size: 50%;
line-height: 3;
}
.nl-ti-text ul {
min-width: 8em;
}
.nl-ti-text ul li.nl-ti-input input {
width: 100%;
padding: 0.2em 2em 0.2em 0.5em;
border-bottom: none;
color: #fff;
}
.nl-form .nl-field-go {
position: absolute;
right: 0;
top: 0;
height: 100%;
cursor: pointer;
background: rgba(0,0,0,0.1);
width: 1.8em;
text-align: center;
color: transparent;
}
.nl-field-go:before {
content: "\e001";
font-size: 75%;
color: #fff;
width: 100%;
line-height: 2.5;
display: block;
}
/* custom placeholder color */
input::-webkit-input-placeholder {
color: rgba(255,255,255,0.8);
}
input:active::-webkit-input-placeholder ,
input:focus::-webkit-input-placeholder {
color: rgba(255,255,255,0.2);
}
input::-moz-placeholder {
color: rgba(255,255,255,0.8);
}
input:active::-moz-placeholder,
input:focus::-moz-placeholder {
color: rgba(255,255,255,0.2);
}
input:-ms-input-placeholder {
color: rgba(255,255,255,0.8);
}
input:active::-ms-input-placeholder ,
input:focus::-ms-input-placeholder {
color: rgba(255,255,255,0.2);
}
/* example field below text input */
.nl-ti-text ul li.nl-ti-example {
font-size: 40%;
font-style: italic;
font-weight: 400;
padding: 0.4em 1em;
color: rgba(0,0,0,0.2);
border-top: 1px dashed rgba(255,255,255,0.7);
}
.nl-ti-text ul li.nl-ti-example em {
color: #fff
}
/* submit button */
.nl-submit-wrap {
margin-top: 0.4em;
}
/* overlay becomes visible when a field is opened */
.nl-overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0,0,0,0.5);
opacity: 0;
z-index: 9999;
visibility: hidden;
-webkit-transition: visibility 0s 0.3s, opacity 0.3s;
-moz-transition: visibility 0s 0.3s, opacity 0.3s;
transition: visibility 0s 0.3s, opacity 0.3s;
}
.nl-field.nl-field-open ~ .nl-overlay {
opacity: 1;
visibility: visible;
-webkit-transition-delay: 0s;
-moz-transition-delay: 0s;
transition-delay: 0s;
}
#media screen and (max-width: 45em) {
.nl-form {
font-size: 3em;
}
}
#media screen and (max-width: 25em) {
.nl-form {
font-size: 2em;
}
}
An additional </div> towards the bottom which has no opening <div>.
You open a section but you close a div.
Any decent IDE / Text editor could warn you about it. It's time to get one or it will become a pain.
Related
I've just created a button. I've found a problem where my content doesn't fit on it's place.
Here is my code:
.btn-red {
display: inline-block;
padding: 13px 20px;
color: #fff;
text-decoration: none;
position: relative;
background: #f42f2c;
font: 10px "Oswald", sans-serif;
letter-spacing: 0.4em;
text-align: center;
text-indent: 2px;
text-transform: uppercase;
transition: color 0.1s linear 0.05s;
border-radius: 0;
border: 1px solid #f42f2c;
}
.btn-red:focus {
box-shadow:none !important;
}
.btn-red::before {
content: "READ MORE";
display: block;
position: absolute;
top: 50%;
left: 0;
width: 100%;
height: 1px;
background: #f9f9ff;
color:#f42f2c !important;
z-index: 1;
opacity: 0;
transition: height 0.2s ease, top 0.2s ease, opacity 0s linear 0.2s;
}
.btn-red::after {
transition: border 0.1s linear 0.05s;
}
.btn-red .btn-red-inner {
position: relative;
z-index: 2;
}
.btn-red:hover {
transition: color 0.1s linear 0s;
text-decoration: none;
color: #f42f2c !important;
}
.btn-red:hover::before {
top: 0;
height: 100%;
opacity: 1;
transition: height 0.2s ease, top 0.2s ease, opacity 0s linear 0s;
}
.btn-red:hover::after {
transition: border 0.1s linear 0s;
}
<a href="o-nas.php" class="btn-red">
<span class="btn-inner">READ MORE</span>
</a>
I tried to add padding: 13px 20px to .btn-red::before, but it has some bugs and I don't know how to solve this.
I think I achieve the same thing that you wanted without using :before to control the button text. Look below:
.btn-red {
position: relative;
display: inline-flex;
box-sizing: border-box;
padding: 13px 20px;
text-decoration: none;
background-color: #f42f2c;
border: 1px solid #f42f2c;
}
.btn-red:before {
position: absolute;
top: 50%;
left: 0;
width: 100%;
height: 0;
content: "";
background-color: #fff;
transform: translateY(-50%);
transition: height 0.2s ease-in-out;
}
.btn-red .btn-inner {
font: 10px "Oswald", sans-serif;
color: #fff;
line-height: 1em;
letter-spacing: 0.4em;
text-transform: uppercase;
z-index: 1;
transition: color 0.2s ease-in-out;
}
.btn-red:hover:before {
height: 100%;
}
.btn-red:hover .btn-inner {
color: #f42f2c;
}
<a class="btn-red" href="#" title="Read More">
<span class="btn-inner">Read more</span>
</a>
Hope this can help you anyway. If you have any doubt about the code, please, just let me know :)
Cheers!
I'm doing a material design input but I'm having this issue with the label text, when is empty the label text should appear in the input field as placeholder, but when I assign a default value in the input, the label doesn't disappear when I clear the input.
.group {
position: relative;
margin-bottom: 45px;
}
input {
font-size: 18px;
padding: 10px 10px 10px 5px;
display: block;
width: 300px;
border: none;
border-bottom: 1px solid #757575;
}
input:focus {
outline: none;
}
/* LABEL ======================================= */
label {
color: #999;
font-size: 18px;
font-weight: normal;
position: absolute;
pointer-events: none;
left: 5px;
top: 10px;
transition: 0.2s ease all;
-moz-transition: 0.2s ease all;
-webkit-transition: 0.2s ease all;
}
/* active state */
input:focus~label,
input:valid~label {
top: -20px;
font-size: 14px;
color: #5264AE;
}
/* BOTTOM BARS ================================= */
.bar {
position: relative;
display: block;
width: 300px;
}
.bar:before,
.bar:after {
content: '';
height: 2px;
width: 0;
bottom: 1px;
position: absolute;
background: #5264AE;
transition: 0.2s ease all;
-moz-transition: 0.2s ease all;
-webkit-transition: 0.2s ease all;
}
.bar:before {
left: 50%;
}
.bar:after {
right: 50%;
}
/* active state */
input:focus~.bar:before,
input:focus~.bar:after {
width: 50%;
}
/* HIGHLIGHTER ================================== */
.highlight {
position: absolute;
height: 60%;
width: 100px;
top: 25%;
left: 0;
pointer-events: none;
opacity: 0.5;
}
/* active state */
input:focus~.highlight {
-webkit-animation: inputHighlighter 0.3s ease;
-moz-animation: inputHighlighter 0.3s ease;
animation: inputHighlighter 0.3s ease;
}
/* ANIMATIONS ================ */
#-webkit-keyframes inputHighlighter {
from {
background: #5264AE;
}
to {
width: 0;
background: transparent;
}
}
#-moz-keyframes inputHighlighter {
from {
background: #5264AE;
}
to {
width: 0;
background: transparent;
}
}
#keyframes inputHighlighter {
from {
background: #5264AE;
}
to {
width: 0;
background: transparent;
}
}
<div class="group">
<input type="text" value="default value">
<span class="highlight"></span>
<span class="bar"></span>
<label>Name</label>
</div>
made a pen to show this behaviour:
https://codepen.io/anon/pen/djKvYL
That's because in the html, you are using value="". You should use <input type="text" placeholder="default value"> instead.
.group {
position: absolute;
margin-bottom: 45px;
}
input {
font-size: 18px;
padding: 10px 10px 10px 5px;
display: block;
width: 300px;
border: none;
border-bottom: 1px solid #757575;
}
input:focus {
outline: none;
}
/* LABEL ======================================= */
label {
color: #999;
font-size: 18px;
font-weight: normal;
pointer-events: none;
left: 5px;
top: 10px;
transition: 0.2s ease all;
-moz-transition: 0.2s ease all;
-webkit-transition: 0.2s ease all;
}
/* active state */
input:focus~label,
input:valid~label {
top: -20px;
font-size: 14px;
color: #5264AE;
}
/* BOTTOM BARS ================================= */
.bar {
position: relative;
display: block;
width: 300px;
}
.bar:before,
.bar:after {
content: '';
height: 2px;
width: 0;
bottom: 1px;
position: absolute;
background: #5264AE;
transition: 0.2s ease all;
-moz-transition: 0.2s ease all;
-webkit-transition: 0.2s ease all;
}
.bar:before {
left: 50%;
}
.bar:after {
right: 50%;
}
/* active state */
input:focus~.bar:before,
input:focus~.bar:after {
width: 50%;
}
/* HIGHLIGHTER ================================== */
.highlight {
position: absolute;
height: 60%;
width: 100px;
top: 25%;
left: 0;
pointer-events: none;
opacity: 0.5;
}
/* active state */
input:focus~.highlight {
-webkit-animation: inputHighlighter 0.3s ease;
-moz-animation: inputHighlighter 0.3s ease;
animation: inputHighlighter 0.3s ease;
}
/* ANIMATIONS ================ */
#-webkit-keyframes inputHighlighter {
from {
background: #5264AE;
}
to {
width: 0;
background: transparent;
}
}
#-moz-keyframes inputHighlighter {
from {
background: #5264AE;
}
to {
width: 0;
background: transparent;
}
}
#keyframes inputHighlighter {
from {
background: #5264AE;
}
to {
width: 0;
background: transparent;
}
}
<div class="group">
<label>Name</label>
<input type="text" placeholder="default value">
<span class="highlight"></span>
<span class="bar"></span>
</div>
Set required for your input type in html which should solve your issue. We do it for :valid psuedo class to check if something is typed into the input box or not. As the whole thing is done in pure CSS, this required is necessary. Else JavaScript should have to be used for that material effect.
Also, when there will be no valid input in the textbox, shadow appears in some browsers. So, in your CSS, put box-shadow: none; for the input. That should solve the problem(JSFiddle):
body {
margin: 40px;
}
.group {
position: relative;
margin-bottom: 45px;
}
input {
font-size: 18px;
padding: 10px 10px 10px 5px;
display: block;
width: 300px;
border: none;
border-bottom: 1px solid #757575;
box-shadow: none;
}
label {
color: #999;
font-size: 18px;
font-weight: normal;
position: absolute;
pointer-events: none;
left: 5px;
top: 10px;
transition: 0.2s ease all;
}
input:focus~label,
input:valid~label {
top: -20px;
font-size: 14px;
color: #5264AE;
}
<div class="group">
<input type="text" value="default value" required>
<label>Name</label>
</div>
I want to make the sliding underline to run from left to right when i hover, and also set up the width of the line from the 1st letter to the last, and not bigger. How can i do that?
.nav-bar a:hover {
color: #000;
}
.nav-bar a:before {
content: "";
position: absolute;
width: 100%;
height: 1px;
bottom: 0;
left: 0;
background-color: #000;
visibility: hidden;
-webkit-transform: scaleX(0);
transform: scaleX(0);
-webkit-transition: all 0.3s ease-in-out 0s;
transition: all 0.3s ease-in-out 0s;
}
.nav-bar a:hover:before {
visibility: visible;
-webkit-transform: scaleX(1);
transform: scaleX(1);
}
<div class="nav-bar">
<ul>
<li>RETROSPECTIVE SHOW /2006/</li>
<li>TEXTS</li>
<li>BIBLOGRAPHY</li>
</ul>
</div>
You can use display: inline-block; to keep the fixed width. And for underlining you can use pseudo-classes like :before and :after.
Have a look at the snippet below:
/* LEFT TO RIGHT */
.sliding-left-to-right {
display: inline-block;
margin: 0;
}
.sliding-left-to-right:after {
content: '';
display: block;
height: 3px;
width: 0;
background: transparent;
transition: width .5s ease, background-color .5s ease;
}
.sliding-left-to-right:hover:after {
width: 100%;
background: blue;
}
/* LAYOUT STYLING */
body {
margin: 20px;
}
a {
text-decoration: none;
font-size: 20px;
font-weight: bold;
color: blue;
}
a:hover {
color: blue;
text-decoration: none;
cursor: pointer;
}
<a class="sliding-left-to-right">Underline – Left to Right</a>
Hope this helps!
I'm trying to implement a menu nav bar that on hover highlights the menu item with an underline animation from LEFT to RIGHT.
Currently I have the underline animating from the center of the menu item to the outside.
I have tried searchng for a solution to this but can't figure out what I'm doing wrong.
Here is a link to the project on codepen http://codepen.io/anon/pen/JowgqP
HTML
<menu>
<p><strong>Home</strong>
<strong>About</strong>
<strong>Portfolio</strong>
<strong>Contact</strong> <strong>
<p class="note">This is a recreation of the link hover effect from factmag.com</small>
</menu>
CSS (SCSS)
#import url(http://fonts.googleapis.com/css?family=Noto+Serif:400,700,400italic);
$link-color: #E71818;
$text-color: black;
$article-font: Noto serif, serif;
menu {
color: $text-color;
font-family: $article-font;
max-width: 30em;
}
p {
font-size: 18px;
line-height: 1.5;
}
menu a {
#extend %fancy-link;
}
.note {
display: inline-block;
border-top: 1px solid $link-color;
color: #777;
font-size: .8em;
font-style: italic;
margin-top: 2em;
padding-top: 1em;
}
%fancy-link {
color: $link-color;
position: relative;
text-decoration: none;
transition: all 0.15s ease-out;
&:before {
content: "";
position: absolute;
width: 100%;
height: 1px;
bottom: 0px;
left: 0;
background: #f00;
visibility: hidden;
transform: scaleX(0);
transition: all 0.3s ease-in-out 0s;
}
&:hover {
transition: all 0.15s ease-out;
&:before {
visibility: visible;
transform: scaleX(1);
}
}
}
The default transformation point is center center...or rather 50% 50% for ease of reference. (For 2 dimensions...we'll leave out z offsets for now.)
You would have to amend this so that the origin is now center left
&:before {
content: "";
position: absolute;
width: 100%;
height: 1px;
bottom: 0px;
left: 0;
background: #f00;
visibility: hidden;
transform: scaleX(0);
transform-origin: center left; /* here */
transition: all 0.3s ease-in-out 0s;
}
Codepen Demo
Transform-Origin # MDN
I am using a button I found on the internet but I cannot manage to work this out:
The button has a hover effect that brings down an image, the only way I can get it to show an image instead of text is with the attribute.
.icon-cart:before {
content: url("http://twiki.org/p/pub/TWiki/TWikiDocGraphics/facebook.gif");
}
Is there a way to either style this image or replace it with a standard img or div?
Here is the JS-Fiddle
Check this working fiddle.
HTML
<button class="btn btn-5 btn-5a icon-cart"><span class='fbtext'>Facebook</span><img class='fbimage' src='http://twiki.org/p/pub/TWiki/TWikiDocGraphics/facebook.gif'/></button>
CSS
.btn {
border: none;
font-family: Arial;
font-size: inherit;
color: inherit;
background: none;
cursor: pointer;
padding: 25px 80px;
display: inline-block;
margin: 15px 30px;
text-transform: uppercase;
letter-spacing: 1px;
font-weight: 700;
outline: none;
position: relative;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
transition: all 0.3s;
}
/* Button 5 */
.btn-5 {
background: #000;
color: #fff;
position:relative;
height: 70px;
min-width: 260px;
line-height: 24px;
font-size: 16px;
overflow: hidden;
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
backface-visibility: hidden;
}
.btn-5 .fbimage{
position:absolute;
left:50%;
bottom:100%;
margin-left:-8px;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
transition: all 0.3s;
}
.btn-5:hover .fbimage{
bottom:50%;
margin-bottom:-8px;
}
.btn-5:active {
background: #0F0F0F;
}
.btn-5 span {
display: inline-block;
width: 100%;
height: 100%;
-webkit-transition: all 0.3s;
-webkit-backface-visibility: hidden;
-moz-transition: all 0.3s;
-moz-backface-visibility: hidden;
transition: all 0.3s;
backface-visibility: hidden;
}
/* Button 5a */
.btn-5a:hover span {
-webkit-transform: translateY(300%);
-moz-transform: translateY(300%);
-ms-transform: translateY(300%);
transform: translateY(300%);
}