Related
Following is the css that I'm using to show a button.
.btn {
background: #3D94F6;
background-image: -webkit-linear-gradient(top, #3D94F6, #1E62D0);
background-image: -moz-linear-gradient(top, #3D94F6, #1E62D0);
background-image: -ms-linear-gradient(top, #3D94F6, #1E62D0);
background-image: -o-linear-gradient(top, #3D94F6, #1E62D0);
background-image: linear-gradient(to bottom, #3D94F6, #1E62D0);
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
border-radius: 20px;
color: #FFFFFF;
font-family: Arial;
font-size: 20px;
font-weight: 100;
padding: 40px;
box-shadow: 1px 1px 20px 0px #000000;
-webkit-box-shadow: 1px 1px 20px 0px #000000;
-moz-box-shadow: 1px 1px 20px 0px #000000;
text-shadow: 1px 1px 20px #000000;
border: solid #337FED 1px;
text-decoration: none;
display: inline-block;
cursor: pointer;
text-align: center;
}
.btn:hover {
border: solid #2BC4AD 1px;
background: #1E62D0;
background-image: -webkit-linear-gradient(top, #1E62D0, #30E3CB);
background-image: -moz-linear-gradient(top, #1E62D0, #30E3CB);
background-image: -ms-linear-gradient(top, #1E62D0, #30E3CB);
background-image: -o-linear-gradient(top, #1E62D0, #30E3CB);
background-image: linear-gradient(to bottom, #1E62D0, #30E3CB);
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
border-radius: 20px;
text-decoration: none;
}
Unfortunately, CSS lint throws a bunch of error such as " character 1Missing vendor-prefixed CSS gradients for Old Webkit (Safari 4+, Chrome), Standard property 'box-shadow' should come after vendor-prefixed property '-moz-box-shadow'., Values of 0 shouldn't have units specified."
also, the button is not visible. why?
I've used this button code in my Atom software with the Linter enabled, which shows me the same error code when I save the stylesheet. The solution I found was to delete all the text that tells specific browsers what to do. Anything with "webkit" or "moz" ect. Here's a copy of the clean "error free" version of the code:
.btn {
background: #11cdd4;
background-image: linear-gradient(top, #11cdd4, #11999e);
background-image: linear-gradient(to bottom, #11cdd4, #11999e);
border-radius: 8px;
font-family: Arial;
color: #ffffff;
font-size: 20px;
padding: 10px 20px 10px 20px;
text-decoration: none;
}
.btn:hover {
background: #30e3cb;
background-image: linear-gradient(top, #30e3cb, #2bc4ad);
background-image: linear-gradient(to bottom, #30e3cb, #2bc4ad);
text-decoration: none;
}
A little bit of playing around and that's what I was able to come up with. I think the text editor was just calling out all the duplicate information as unnecessary.
I am also currently having the same error.
as for the visibility of button, this code seems to work.
.btn {
background: #11CDD4;
background-image: -webkit-linear-gradient(top, #11CDD3, #11999E);
background-image: -moz-linear-gradient(top, #11CDD4, #11999E);
background-image: -ms-linear-gradient(top, #11CDD4, #11999E);
background-image: -o-linear-gradient(top, #11CDD4, #11999E);
background-image: linear-gradient(to bottom, #11CDD4, #11999E);
-webkit-border-radius: 8;
-moz-border-radius: 8;
border-radius: 8px;
font-family: 'Montserrat', sans-serif;
color: #FFFFFF;
font-size: 20px;
padding: 10px 20px 10px 20px;
text-decoration: none;
}
.btn:hover {
background: #30E3CB;
background-image: -webkit-linear-gradient(top, #30E3CB, #2BC4AD);
background-image: -moz-linear-gradient(top, #30E3CB, #2BC4AD);
background-image: -ms-linear-gradient(top, #30E3CB, #2BC4AD);
background-image: -o-linear-gradient(top, #30E3CB, #2BC4AD);
background-image: linear-gradient(top, #30E3CB, #2BC4AD);
text-decoration: none;
}
The orange scroll block goes up and down but I wanted the default position of that orange icon to be more toward the bottom of the screen below the title Odyssey. I am new to css so just needed some help for the same.
/* Home Style */
#tf-home{
background: url(../images/OdysseyTitleImage.jpg);
background-size: cover;
background-position: center;
background-attachment: fixed;
background-repeat: no-repeat;
color: #cfcfcf;
}
#tf-home .overlay{
background: -moz-linear-gradient(top, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0.73) 17%, rgba(0,0,0,0.66) 35%, rgba(0,0,0,0.55) 62%, rgba(0,0,0,0.4) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,0,0,0.8)), color-stop(17%,rgba(0,0,0,0.73)), color-stop(35%,rgba(0,0,0,0.66)), color-stop(62%,rgba(0,0,0,0.55)), color-stop(100%,rgba(0,0,0,0.4))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(0,0,0,0.8) 0%,rgba(0,0,0,0.73) 17%,rgba(0,0,0,0.66) 35%,rgba(0,0,0,0.55) 62%,rgba(0,0,0,0.4) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(0,0,0,0.8) 0%,rgba(0,0,0,0.73) 17%,rgba(0,0,0,0.66) 35%,rgba(0,0,0,0.55) 62%,rgba(0,0,0,0.4) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, rgba(0,0,0,0.8) 0%,rgba(0,0,0,0.73) 17%,rgba(0,0,0,0.66) 35%,rgba(0,0,0,0.55) 62%,rgba(0,0,0,0.4) 100%); /* IE10+ */
background: linear-gradient(to bottom, rgba(0,0,0,0.8) 0%,rgba(0,0,0,0.73) 17%,rgba(0,0,0,0.66) 35%,rgba(0,0,0,0.55) 62%,rgba(0,0,0,0.4) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#cc000000', endColorstr='#66000000',GradientType=0 ); /* IE6-9 */
height: 100%;
background-attachment: fixed;
}
.home-lead{
color: #fff;
padding: 10px 15px;
background-color: rgba(51, 51, 51, 0.9);
font-size: 21px;
}
.content{
position: relative;
padding: 15% 0 0;
}
.content-game{
position: relative;
padding: 5% 0 5%;
}
.color{
color: #ff6300;
}
a.fa.fa-angle-down {
padding: 10px 15px;
color: #fff;
border: 2px solid #b4b4b4;
border-radius: 50%;
font-size: 24px;
margin-top: 100px;
transition: all 0.5s;
}
a.fa.fa-angle-down:hover{
background: #ff6300;
color: #ffffff;
border: 2px solid #ff6300;
}
.home-heading{
font-size: 56px;
font-weight:normal;
}
and this is the html
<div id="tf-home" class="text-center">
<div class="overlay">
<div class="content">
<div>Watch the trailer</div>
</div>
</div>
</div>
I think it could just change the padding-top in this lines:
.content{
position: relative;
padding: 15% 0 0;
}
You can try something like padding: 30% 0 0;
I was doing a tutorial on tuts+ premium when the person who uploaded the series did not upload an exercise file. When I copied everything from his tutorial video into a CSS document EXACTLY, the CSS list items won't float left. I tried and tried everything but I couldn't. Here is the HTML:
<!doctype HTML>
<html>
<head>
<title>CSS3 Transitions</title>
<link rel="stylesheet" href="css/normalize.css" />
<link rel="stylesheet" href="css/lesson02.css" />
</head>
<body>
<nav class="main-nav">
<ul class="top-nav">
<li>home</li>
<li>about</li>
<li>products</li>
<li>contact</li>
</ul>
</nav>
</body>
And the copied CSS code from the tutorial:
/********** TOP NAV *************/
nav.main-nav {
background: #333;
background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#2f2f2f), to(#4f4f4f));
background-image: -webkit-linear-gradient(top, #2f2f2f, #4f4f4f);
background-image: -moz-linear-gradient(top, #2f2f2f, #4f4f4f);
background-image: -ms-linear-gradient(top, #2f2f2f, #4f4f4f);
background-image: -o-linear-gradient(top, #2f2f2f, #4f4f4f);
background-image: linear-gradient(top, #2f2f2f, #4f4f4f);
width: 100%
}
.top-nav {
border-bottom: 2px solid #111;
height: 30px;
list-style-type: none;
margin: 0;
padding-left: 0;
width: 100px;
}
.top-nav li {
background: #333;
background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#2f2f2f), to(#4f4f4f));
background-image: -webkit-linear-gradient(top, #2f2f2f, #4f4f4f);
background-image: -moz-linear-gradient(top, #2f2f2f, #4f4f4f);
background-image: -ms-linear-gradient(top, #2f2f2f, #4f4f4f);
background-image: -o-linear-gradient(top, #2f2f2f, #4f4f4f);
background-image: linear-gradient(top, #2f2f2f, #4f4f4f);
border-bottom: 2px solid #111;
border-right: 1px solid #555;
float: left;
font-size: 14px;
height: 20px;
padding-top: 10px;
position: relative;
text-align: center;
width: 150px;
}
.top-nav li a {
color: #aaa;
padding-top: 5px;
position: absolute;
top: 0;
left: 0;
width: 150px;
height: 25px;
text-decoration: none;
}
The other CSS file can be found here which was found on the tuts+ premium tutorial too: Normalize CSS v2.1.1
Please I need help if anyone
The menu items are indeed floated, however, their parent container is restricted to a width of 100px thus making them wrap under each other.
Just remove width: 100px from .top-nav
/********** TOP NAV *************/
nav.main-nav {
background: #333;
background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#2f2f2f), to(#4f4f4f));
background-image: -webkit-linear-gradient(top, #2f2f2f, #4f4f4f);
background-image: -moz-linear-gradient(top, #2f2f2f, #4f4f4f);
background-image: -ms-linear-gradient(top, #2f2f2f, #4f4f4f);
background-image: -o-linear-gradient(top, #2f2f2f, #4f4f4f);
background-image: linear-gradient(top, #2f2f2f, #4f4f4f);
width: 100%
}
.top-nav {
border-bottom: 2px solid #111;
height: 30px;
list-style-type: none;
margin: 0;
padding-left: 0;
}
.top-nav li {
background: #333;
background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#2f2f2f), to(#4f4f4f));
background-image: -webkit-linear-gradient(top, #2f2f2f, #4f4f4f);
background-image: -moz-linear-gradient(top, #2f2f2f, #4f4f4f);
background-image: -ms-linear-gradient(top, #2f2f2f, #4f4f4f);
background-image: -o-linear-gradient(top, #2f2f2f, #4f4f4f);
background-image: linear-gradient(top, #2f2f2f, #4f4f4f);
border-bottom: 2px solid #111;
border-right: 1px solid #555;
float: left;
font-size: 14px;
height: 20px;
padding-top: 10px;
position: relative;
text-align: center;
width: 150px;
}
.top-nav li a {
color: #aaa;
padding-top: 5px;
position: absolute;
top: 0;
left: 0;
width: 150px;
height: 25px;
text-decoration: none;
}
<nav class="main-nav">
<ul class="top-nav">
<li>home</li>
<li>about</li>
<li>products</li>
<li>contact</li>
</ul>
</nav>
For some reason the form I created has a lot of space between each input type. I tried doing form{ padding: 0px; margin: 0px; border: none; } but that did not work. I am not sure how to quite solve this issue if anyone can help. I added a JSFiddle to show everyone what I am talking about. Thank you for the help in advance.
http://jsfiddle.net/dyZ8B/
HTML Code:
<body>
<div class="header">Our Really Cool Banking App</div>
<div id="leftcolumn">
<!-- Creating Buttons here -->
<div id="nav">
<ul>
<li>Home</li>
<li>Checking</li>
<li>Savings</li>
<li>Create Account</li>
<li>Create Loan</li>
</ul>
</div>
</div>
<div id="checking" class="toggle" style="display:none">show the stuff1</div>
<div id="savings" class="toggle" style="display:none">show the stuff2</div>
<div id="createaccount" class="toggle" style="display:none">show the stuff3</div>
<div id="createloan" class="toggle" style="display:none">show the stuff3</div>
<div class="inputBox">
<form method="post" action="<?php echo htmlspecialchars($_SERVER["PHP_SELF"]);?>">
Username: <input type="text" name="username"><br>
Amount: <input type="text" name="amount"><br>
Type: <input type="radio" name="accounttype" value="Checking">Checking
<input type="radio" name="accounttype" value="Savings">Savings<br>
Action: <input type="radio" name="bankaction" value="Deposit">Deposit
<input type="radio" name="bankaction" value="Withdraw">Withdraw<br>
<input type="submit" value="Submit">
</form>
</div>
<?php
//To Test
var_dump($_POST);
?>
</body>
CSS Code:
.header {
position: relative;
width: 1265px;
line-height:68px;
background: -moz-linear-gradient(top, rgba(20,82,159,1) 0%, rgba(0,119,230,1) 100%);
/* styles under are just for fun */
border-radius: 5px 5px 0 0;
text-indent: 20px;
text-transform: uppercase;
font-family: arial;
font-weight: bold;
color: white;
}
/* making backgrounds compatible */
.header {
background: rgba(20,82,159,1);
background: -moz-linear-gradient(top, rgba(20,82,159,1) 0%, rgba(0,119,230,1) 100%);
background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(20,82,159,1)), color-stop(100%, rgba(0,119,230,1)));
background: -webkit-linear-gradient(top, rgba(20,82,159,1) 0%, rgba(0,119,230,1) 100%);
background: -o-linear-gradient(top, rgba(20,82,159,1) 0%, rgba(0,119,230,1) 100%);
background: -ms-linear-gradient(top, rgba(20,82,159,1) 0%, rgba(0,119,230,1) 100%);
background: linear-gradient(to bottom, rgba(20,82,159,1) 0%, rgba(0,119,230,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#14529f', endColorstr='#0077e6', GradientType=0 );
}
#leftcolumn{
float: left;
width: 200px; /*Width of left column*/
height: 650px;
margin-top: -16px;
background: -moz-linear-gradient(top, rgba(20,82,159,1) 0%, rgba(0,119,230,1) 100%);
color: white;
}
#leftcolumn {
background: rgba(20,82,159,1);
background: -moz-linear-gradient(top, rgba(20,82,159,1) 0%, rgba(0,119,230,1) 100%);
background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(20,82,159,1)), color-stop(100%, rgba(0,119,230,1)));
background: -webkit-linear-gradient(top, rgba(20,82,159,1) 0%, rgba(0,119,230,1) 100%);
background: -o-linear-gradient(top, rgba(20,82,159,1) 0%, rgba(0,119,230,1) 100%);
background: -ms-linear-gradient(top, rgba(20,82,159,1) 0%, rgba(0,119,230,1) 100%);
background: linear-gradient(to bottom, rgba(20,82,159,1) 0%, rgba(0,119,230,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#14529f', endColorstr='#0077e6', GradientType=0 );
}
#nav {
color: white;
}
#nav ul {
padding-top: 40px;
padding-left: 15px;
}
#nav ul li {
list-style-type: none;
text-decoration: none;
font-size: 18px;
font-family: Verdana;
margin: 0px 0 40px 0;
}
a:link {color:white;}
a:visited {color:white;}
a:active {color:white;}
a:hover {color:rgb(152,152,152);}
.inputBox {
position: relative;
width: 500px;
line-height:100px;
margin-top: 25px;
margin-left: 450px;
padding-bottom: 10px;
/* styles under are just for fun */
border-radius: 5px 5px 0 0;
text-indent: 20px;
text-transform: uppercase;
font-family: arial;
font-weight: none;
font-size:12px;
color: white;
text-align: center;
}
form{
padding: 0px;
margin: 0px;
border: none;
}
.inputBox {
background: rgba(20,82,159,1);
background: -moz-linear-gradient(top, rgba(20,82,159,1) 0%, rgba(0,119,230,1) 100%);
background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(20,82,159,1)), color-stop(100%, rgba(0,119,230,1)));
background: -webkit-linear-gradient(top, rgba(20,82,159,1) 0%, rgba(0,119,230,1) 100%);
background: -o-linear-gradient(top, rgba(20,82,159,1) 0%, rgba(0,119,230,1) 100%);
background: -ms-linear-gradient(top, rgba(20,82,159,1) 0%, rgba(0,119,230,1) 100%);
background: linear-gradient(to bottom, rgba(20,82,159,1) 0%, rgba(0,119,230,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#14529f', endColorstr='#0077e6', GradientType=0 );
}
It's because of the line-height set on the .inputBox elements.
Updated Example Here
.inputBox {
position: relative;
width: 500px;
line-height:100px; /* Remove or reduce this value */
}
I'm not sure what's going on here, but I'm trying to get it so the "Welcome to blabla" is on the right side of my thead. But it seems to glitch out?
screenshot: http://i.imgur.com/mCGCE8B.png
CSS Code:
body {
background-image: url('images/bg.png');
background-repeat: repeat;
padding: 0px;
margin: 0 0;
}
.content {
max-width: 1200px;
height: 800px;
margin: 0px auto;
background: #B9B9B9;
border-top-right-radius: 4px;
border-top-left-radius: 4px;
box-shadow: 0px 5px 5px #000;
}
#navBack {
max-width: 1200px;
height: 30px;
background: rgb(30,87,153);
background: rgb(69,72,77);
background: rgb(246,248,249);
background: -moz-linear-gradient(top, rgba(246,248,249,1) 0%, rgba(229,235,238,1) 50%, rgba(215,222,227,1) 51%, rgba(245,247,249,1) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(246,248,249,1)), color-stop(50%,rgba(229,235,238,1)), color-stop(51%,rgba(215,222,227,1)), color-stop(100%,rgba(245,247,249,1)));
background: -webkit-linear-gradient(top, rgba(246,248,249,1) 0%,rgba(229,235,238,1) 50%,rgba(215,222,227,1) 51%,rgba(245,247,249,1) 100%);
background: -o-linear-gradient(top, rgba(246,248,249,1) 0%,rgba(229,235,238,1) 50%,rgba(215,222,227,1) 51%,rgba(245,247,249,1) 100%);
background: -ms-linear-gradient(top, rgba(246,248,249,1) 0%,rgba(229,235,238,1) 50%,rgba(215,222,227,1) 51%,rgba(245,247,249,1) 100%);
background: linear-gradient(to bottom, rgba(246,248,249,1) 0%,rgba(229,235,238,1) 50%,rgba(215,222,227,1) 51%,rgba(245,247,249,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f6f8f9', endColorstr='#f5f7f9',GradientType=0 );
margin: 0px auto;
border-bottom: solid #424242;
}
#navBack ul {
list-style-type: none;
height: 80px;
max-width: 1200px;
margin: auto;
}
#navBack li {
list-style-type: none;
height: 80px;
width: 100px;
margin: 0;
text-align: center;
float: left;
}
#navBack ul a {
background-image: url(images/nav_sep.png);
background-repeat: no-repeat;
background-position: right;
padding-right: 0px;
padding-left: 0px;
display: block;
line-height: 30px;
text-decoration: none;
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 16px;
color: #000;
}
#navBack ul a:hover {
color: #fff;
}
.copyright {
max-width: 1200px;
height: 30px;
background: rgb(246,248,249);
background: -moz-linear-gradient(top, rgba(246,248,249,1) 0%, rgba(229,235,238,1) 50%, rgba(215,222,227,1) 51%, rgba(245,247,249,1) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(246,248,249,1)), color-stop(50%,rgba(229,235,238,1)), color-stop(51%,rgba(215,222,227,1)), color-stop(100%,rgba(245,247,249,1)));
background: -webkit-linear-gradient(top, rgba(246,248,249,1) 0%,rgba(229,235,238,1) 50%,rgba(215,222,227,1) 51%,rgba(245,247,249,1) 100%);
background: -o-linear-gradient(top, rgba(246,248,249,1) 0%,rgba(229,235,238,1) 50%,rgba(215,222,227,1) 51%,rgba(245,247,249,1) 100%);
background: -ms-linear-gradient(top, rgba(246,248,249,1) 0%,rgba(229,235,238,1) 50%,rgba(215,222,227,1) 51%,rgba(245,247,249,1) 100%);
background: linear-gradient(to bottom, rgba(246,248,249,1) 0%,rgba(229,235,238,1) 50%,rgba(215,222,227,1) 51%,rgba(245,247,249,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f6f8f9', endColorstr='#f5f7f9',GradientType=0 );
margin: 0px auto;
border-top: solid #424242;
text-align: center;
line-height: 30px;
box-shadow: 0px 3px 3px #000;
}
.copyright a {
color: green;
}
#theadTitle {
max-width: 1200px;
height: 30px;
background: rgb(246,248,249);
background: -moz-linear-gradient(top, rgba(246,248,249,1) 0%, rgba(229,235,238,1) 50%, rgba(215,222,227,1) 51%, rgba(245,247,249,1) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(246,248,249,1)), color-stop(50%,rgba(229,235,238,1)), color-stop(51%,rgba(215,222,227,1)), color-stop(100%,rgba(245,247,249,1)));
background: -webkit-linear-gradient(top, rgba(246,248,249,1) 0%,rgba(229,235,238,1) 50%,rgba(215,222,227,1) 51%,rgba(245,247,249,1) 100%);
background: -o-linear-gradient(top, rgba(246,248,249,1) 0%,rgba(229,235,238,1) 50%,rgba(215,222,227,1) 51%,rgba(245,247,249,1) 100%);
background: -ms-linear-gradient(top, rgba(246,248,249,1) 0%,rgba(229,235,238,1) 50%,rgba(215,222,227,1) 51%,rgba(245,247,249,1) 100%);
background: linear-gradient(to bottom, rgba(246,248,249,1) 0%,rgba(229,235,238,1) 50%,rgba(215,222,227,1) 51%,rgba(245,247,249,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f6f8f9', endColorstr='#f5f7f9',GradientType=0 );
border-bottom: solid #424242;
}
#thead {
max-width: 1200px;
height: 400px;
background-color: #CBCBCB;
margin: 20px 20px;
box-shadow: 0px 0px 3px #000;
}
HTML Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Noszscape - Home</title>
<LINK href="style.css" rel="stylesheet" type="text/css">
</head>
<body>
<div class="content">
<div id="navBack">
<ul>
<li>Home</li>
<li>Forums</li>
<li>Play Now</li>
<li>Download</li>
<li>Vote</li>
<li>Donate</li>
</ul>
</div>
<div id="thead" style="width: 75%">
<div id="theadTitle" > Welcome to Naszscape! </div>
</div>
</div>
<div class="copyright">
<span style="font-style:italic"><strong>All rights reserved ©</span> <span style="color: skyblue">317 Delta Coder</span> <span style="font-style:italic">2014</strong></span>
</div>
</body>
</html>
You have an inline style of width: 75% which is pushing the text off the side.
I would remove that and the max-width: 1200px; and add text-align: right; to the #theadTitle element.
See this fiddle.