As the tittle, is it possible to echo entire html and css?
I am using if's and each match needs to generate a different page.
Also, in the html code in the html code I need to echo variable that is enclosed inside a div and styled.
Any thoughts how I can achieve this?
I get the following error syntax error, unexpected T_STRING, expecting
Thanks
echo '<!DOCTYPE html><html lang="mk">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<style type="text/css">
#import url(http://fonts.googleapis.com/css?family=Roboto&subset=cyrillic);
#import url(http://fonts.googleapis.com/css?family=Open+Sans&subset=cyrillic);
#import url(http://fonts.googleapis.com/css?family=Fjalla+One);
*:focus { outline: none; }
::-webkit-scrollbar { width: 0; }
.animate { -webkit-transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; -o-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out; }
body { min-width: 300px; width: auto; max-width: 1100px; height: auto; margin: 0 auto; padding: 0; background-color: white; }
div#container {
position: relative; float: left; clear: none;
width: 100%; height: auto; margin: -3px 0 30px 0; padding: 0 0 50px 0;
background-image: url(guide.jpg); background-position: center bottom; background-repeat: no-repeat; background-size: cover;
background-color: pink;
-webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px;
}
html body div#container form {
position: relative; float: left; clear: none;
width: 100%; height: auto; margin: 40px 0 0 0; padding: 0;
}
html body div#container form div#email-container {
position: relative; float: left; clear: none; display: block;
width: 100%; height: auto; margin: 0 auto; padding: 0; overflow: hidden;
text-align: center;
}
html body div#container form div#email-container div#email-input {
position: relative; float: none; clear: none; display: inline-block;
width: auto; height: auto; margin: 0 auto; padding: 25px 40px;
font-family: 'Fjalla One', sans-serif; font-weight: 400; font-size: 40px; letter-spacing: normal;
-webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px;
background-color: rgba(26, 60, 88, 0.9); color: #ffffff;
cursor: default;
}
label.styled {
position: relative; float: left; clear: none; display: block;
width: auto; height: auto; margin: 0; padding: 10px 20px; overflow: hidden;
font-family: 'Roboto', sans-serif; font-weight: 400; font-size: 15px; letter-spacing: normal;
-webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px;
background-color: #ffffff; color: rgba(128, 130, 132, 1); box-shadow: inset 0 0 0 2px #b6b6b8;
cursor: pointer;
}
label.styled:before {
position: absolute; float: none; clear: both; top: 0; left: 0; display: block;
width: 40px; height: 40px; margin: 0 0 0 10px; padding: 0;
content: '✔';
font-size: 60px;
opacity: 0;
}
input.styled {
display: none;
}
input.styled:checked ~ label.styled {
padding-left: 50px;
opacity: 1;
background-color: rgba(128, 130, 132, 0.9); color: #ffffff; box-shadow: inset 0 0 0 2px rgba(128, 130, 132, 0.9);;
}
input.styled:checked ~ label.styled:before {
top: -10px; left: -2px;
opacity: 1; color: rgba(255, 255, 255, 0.4);
}
</style>
</head>
<body>
<div id="container" class="animate">
<form method="post" action="$action" class="animate">
<input type="hidden" name="mode_login">
<input type="hidden" name="redirect" value="$redirect">
<input type="hidden" name="accept_terms" value="yes">
<div id="email-container">
<div id="email-input">' . $_POST['fes-email'] . '</div>
</div>
</div>
<input type="checkbox" class="styled animate" id="checkbox-tnc-accept">
<label class="styled animate" for="checkbox-tnc-accept">Ги прифаќам Условите и правилата <br> за користење на овој сервис</label>
<button type="submit" value="Enter">Продолжи</button>
</form>
</body>
</html>';
I would recommend you to not print html stuff with php, just close the php tags and write normal html, so here i removed the big echo statement and wrote normal html. This makes the code more clean and you see better what is html and where is PHP.
So your php code:
<div id="email-input">' . $_POST['fes-email'] . '</div>
If you don't have it in a echo statement just use this:
<div id="email-input"><?= $_POST['fes-email'] ?></div>
This is pretty much the same as:
<div id="email-input"><?php echo $_POST['fes-email']; ?></div>
Also for useful error messages you can turn on error reporting with this lines:
<?php
ini_set("display_errors", 1);
error_reporting(E_ALL);
?>
You can just put them on top of your php files and make sure that they are only turned on in staging!
The entire code should look something like this:
<!DOCTYPE html>
<html lang="mk">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<style type="text/css">
#import url(http://fonts.googleapis.com/css?family=Roboto&subset=cyrillic);
#import url(http://fonts.googleapis.com/css?family=Open+Sans&subset=cyrillic);
#import url(http://fonts.googleapis.com/css?family=Fjalla+One);
*:focus { outline: none; }
::-webkit-scrollbar { width: 0; }
.animate { -webkit-transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; -o-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out; }
body { min-width: 300px; width: auto; max-width: 1100px; height: auto; margin: 0 auto; padding: 0; background-color: white; }
div#container {
position: relative; float: left; clear: none;
width: 100%; height: auto; margin: -3px 0 30px 0; padding: 0 0 50px 0;
background-image: url(guide.jpg); background-position: center bottom; background-repeat: no-repeat; background-size: cover;
background-color: pink;
-webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px;
}
html body div#container form {
position: relative; float: left; clear: none;
width: 100%; height: auto; margin: 40px 0 0 0; padding: 0;
}
html body div#container form div#email-container {
position: relative; float: left; clear: none; display: block;
width: 100%; height: auto; margin: 0 auto; padding: 0; overflow: hidden;
text-align: center;
}
html body div#container form div#email-container div#email-input {
position: relative; float: none; clear: none; display: inline-block;
width: auto; height: auto; margin: 0 auto; padding: 25px 40px;
font-family: 'Fjalla One', sans-serif; font-weight: 400; font-size: 40px; letter-spacing: normal;
-webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px;
background-color: rgba(26, 60, 88, 0.9); color: #ffffff;
cursor: default;
}
label.styled {
position: relative; float: left; clear: none; display: block;
width: auto; height: auto; margin: 0; padding: 10px 20px; overflow: hidden;
font-family: 'Roboto', sans-serif; font-weight: 400; font-size: 15px; letter-spacing: normal;
-webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px;
background-color: #ffffff; color: rgba(128, 130, 132, 1); box-shadow: inset 0 0 0 2px #b6b6b8;
cursor: pointer;
}
label.styled:before {
position: absolute; float: none; clear: both; top: 0; left: 0; display: block;
width: 40px; height: 40px; margin: 0 0 0 10px; padding: 0;
content: '✔';
font-size: 60px;
opacity: 0;
}
input.styled {
display: none;
}
input.styled:checked ~ label.styled {
padding-left: 50px;
opacity: 1;
background-color: rgba(128, 130, 132, 0.9); color: #ffffff; box-shadow: inset 0 0 0 2px rgba(128, 130, 132, 0.9);;
}
input.styled:checked ~ label.styled:before {
top: -10px; left: -2px;
opacity: 1; color: rgba(255, 255, 255, 0.4);
}
</style>
</head>
<body>
<div id="container" class="animate">
<form method="post" action="$action" class="animate">
<input type="hidden" name="mode_login">
<input type="hidden" name="redirect" value="$redirect">
<input type="hidden" name="accept_terms" value="yes">
<div id="email-container">
<div id="email-input"><?= $_POST['fes-email'] ?></div>
</div>
</div>
<input type="checkbox" class="styled animate" id="checkbox-tnc-accept">
<label class="styled animate" for="checkbox-tnc-accept">Ги прифаќам Условите и правилата <br> за користење на овој сервис</label>
<button type="submit" value="Enter">Продолжи</button>
</form>
</body>
</html>
EDIT:
If you have this echo statement in a if statement you still don't need to print it that way :D
As a example (Pseudo Code):
<?php
if(condition) {
echo "<div>HTML STUFF</div>"; //Don't do it that way
} else {
?>
<div>Put your HTML stuff here</div>
<?php
}
?>
Also if you have to concatenate stuff:
//v Your variable here
"String is here" . $myVariable . " string goes further"
//^String start ^ ^Concatenate ^ ^ ^String ends
// |Break the string |
And for more information about concatenation see the manual: http://php.net/manual/en/language.operators.string.php
I would also recommend you to not write CSS inline or in style tags. You can write your own CSS files with *.css and then include them in the html head tag with this:
<link rel="stylesheet" type="text/css" href="yourCssFile.css">
echo '...assuming the previous part of the entire code are also present...
<form>
<div id="email-input">' . $_POST['fes-email']; . '</div>
</form>
...';
Take notice that before $_POST I've removed the echo; If you're already echoing there's no reason to start the echo. When you post ' . $_POST['fes-email'] . ' You're just allowing a variable; it's been running the echo the whole time, so all the new echo does is confuse it. If you have to have it this way then it might be better to have something along the lines of
htdocs(folder)
index.php(file)
includes(folder)
includes/YourForm.php
Then within YourForm.php add the HTML that you want to have then within index.php add
require_once("includes/YourForm.php");
While I don't agree with the way you're doing it right now what I posted should work.
Not sure why the require isn't formatting as code.. Sorry.
Why do you echo HTML in a PHP file . what you can do is , you can include HTML files in your condition . example :-
if(condition 1)
{
include "one.php";
}
else if(condition 2)
{
include "two.php";
}
in your one.php and two.php you have your HTML , in your case your all HTML will go to one of these files . in that file you can echo your variable
<div id="email-input"><?php echo $_POST['fes-email']; ?></div>
Related
I want do create a multilanguage site (English and German). The toggle works but I don't know how to get the language in order to select the language and to show the words in the right language.
How can I get the value of the toggle (if posible using PHP and not Javascript)?
Thanks in advance for any help.
--------------------------------
<!DOCTYPE HTML>
<html lang="de" html>
<head>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="switch">
<input id="language-toggle" class="check-toggle check-toggle-round-flat" type="checkbox">
<label for="language-toggle"></label>
<span id="de" class="on">DE</span>
<span id="en" class="off">EN</span>
</div>
<?php
$lang = "en";
require_once("Language/lang.".$lang.".php");
?>
<p style="font-size:30px;"><?php echo $language["text1"]; ?></p>
</body>
</html>
---------------lang.de.php-------------------
<?php
$language['text1'] = 'Willkommen';
?>
---------------lang.en.php-------------------
<?php
$language['text1'] = 'Welcome';
?>
---------------------style.css-----------------------
.switch {
position: relative;
display: inline-block;
margin: -4px 0px;
line-height:45px;
}
.switch > span {
position: absolute;
top: 0px;
pointer-events: none;
font-family: 'Helvetica', Arial, sans-serif;
font-weight: bold;
font-size: 12px;
text-transform: uppercase;
text-shadow: 0 1px 0 rgba(0, 0, 0, .06);
width: 50%;
line-height:45px;
text-align: center;
}
input.check-toggle-round-flat:checked ~ .off {
color: #333;
}
input.check-toggle-round-flat:checked ~ .on {
color: #fff;
}
.switch > span.on {
left: 0;
padding-left: 2px;
color: #333;
}
.switch > span.off {
right: 0;
padding-right: 4px;
color: #fff;
}
.check-toggle {
position: absolute;
margin-left: -9999px;
visibility: hidden;
}
.check-toggle + label {
display: block;
position: relative;
cursor: pointer;
outline: none;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
input.check-toggle-round-flat + label {
padding: 2px;
width: 97px;
height: 35px;
background-color: #333;
-webkit-border-radius: 60px;
-moz-border-radius: 60px;
-ms-border-radius: 60px;
-o-border-radius: 60px;
border-radius: 60px;
}
input.check-toggle-round-flat + label:before, input.check-toggle-round-flat + label:after {
display: block;
position: absolute;
content: "";
}
input.check-toggle-round-flat + label:before {
top: 2px;
left: 2px;
bottom: 2px;
right: 2px;
background-color: #333;
-webkit-moz-border-radius: 60px;
-ms-border-radius: 60px;
-o-border-radius: 60px;
border-radius: 60px;
}
input.check-toggle-round-flat + label:after {
top: 4px;
left: 4px;
bottom: 4px;
width: 48px;
background-color: #fff;
-webkit-border-radius: 52px;
-moz-border-radius: 52px;
-ms-border-radius: 52px;
-o-border-radius: 52px;
border-radius: 52px;
-webkit-transition: margin 0.2s;
-moz-transition: margin 0.2s;
-o-transition: margin 0.2s;
transition: margin 0.2s;
}
input.check-toggle-round-flat:checked + label {
}
input.check-toggle-round-flat:checked + label:after {
margin-left: 44px;
}
I am working on a simple login page with a login form. When i added < !DOCTYPE HTML>, the input field sketched further than the container when set to 100% width. I have searched for solution and noticed questions asked consider doctype messing up css is regarding a specific problem.
Below are my codes;
.loginbox {
width: 320px;
height: 440px;
background: #000;
color: #fff;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
box-sizing: border-box;
padding: 70px 30px;
}
#media only screen and (min-device-width: 768px) and (max-device-width: 1024px) {
.loginbox {
width: 450px;
height: 480px;
padding: 90px 30px;
}
.inputContainer input {
margin-bottom: 30px;
}
}
.loginavatar {
width: 100px;
height: 100px;
border-radius: 50%;
position: absolute;
top: -50px;
left: calc(50% - 50px);
}
.loginbox h1 {
font-size: 22px;
text-align: center;
margin: 0;
padding: 0 0 20px;
}
.inputContainer input {
margin-bottom: 20px;
}
input:-webkit-autofill {
-webkit-text-fill-color: #ffffff !important;
transition: background-color 5000s ease-in-out 0s;
-webkit-transition: background-color 5000s ease-in-out 0s;
}
.inputContainer input[type="text"],
input[type="password"] {
width: 100%;
height: 42px;
background: transparent;
color: #fff;
font-size: 14px;
font-family: inherit;
font-weight: 400;
border: none;
border-bottom: 1px solid #333;
outline: none;
padding-left: 25px;
}
.logico {
position: absolute;
top: 20%;
}
.usernithicon,
.passnithicon {
position: relative;
}
.inputContainer input[type="text"]:hover,
input[type="password"]:hover,
input[type="text"]:focus,
input[type="password"]:focus {
border-bottom: 1px solid #bc2333;
}
.inputContainer .inputBox label {
position: absolute;
top: 0;
left: 10%;
padding: 15px 0 0 0;
font-size: 14px;
pointer-events: none;
transition: .5s;
}
.inputContainer .inputBox input:focus~label,
.inputContainer .inputBox input:valid~label {
top: -18px;
left: 10%;
font-size: 12px;
color: #bc2333;
}
input[type=checkbox]+label {
display: block;
margin: 3px 3px 20px;
cursor: pointer;
padding: 0;
}
input[type=checkbox] {
display: none;
}
input[type=checkbox]+label:before {
content: "\2714";
border: 1px solid #fff;
border-radius: 0.2em;
display: inline-block;
width: 1em;
height: 1em;
padding-left: 0.2em;
padding-bottom: 0.3em;
margin-right: 0.2em;
vertical-align: bottom;
color: transparent;
transition: .2s;
}
input[type=checkbox]+label:active:before {
transform: scale(0);
}
input[type=checkbox]:checked+label:before {
background-color: #bc2333;
border-color: #bc2333;
color: #fff;
}
input[type=checkbox]:checked:disabled+label:before {
transform: scale(1);
background-color: #bc2333;
border-color: #bc2333;
opacity: 0.5;
}
input[type=checkbox]:disabled+label:before {
transform: scale(1);
border-color: #fff;
opacity: 0.2;
}
.inputContainer input[type="submit"] {
width: 100%;
height: 48px;
background: #bc2333;
color: #fff;
font-size: 16px;
font-weight: 500;
font-family: inherit;
border: 0;
outline: none;
}
.inputContainer input[type="submit"]:hover {
cursor: pointer;
background: #7a091f;
transition: .3s ease;
}
.inputContainer a {
color: #fff;
display: block;
text-decoration: none;
text-align: center;
}
.inputContainer a:hover {
color: #f4f4f4;
transition: .2s ease;
}
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="application-name" content="">
<title>Member Login</title>
<link rel="stylesheet" href="fonts/FontAwesome/css/fontawesome-all.min.css">
<link rel="stylesheet" type="text/css" href="assets/css/login.css">
</head>
<body>
<div class="loginbox">
<img class="loginavatar" src="assets/images/user.png" draggable="false" />
<h1>Login Form</h1>
<div class="inputContainer">
<form method="POST" action="">
<!--<p>Username</p>-->
<div class="usernithicon inputBox">
<i class="fa fa-user logico"></i>
<input type="text" id="usern" name="username" required><label for="usern">Username</label></div>
<!--<p>Password</p>-->
<div class="passnithicon inputBox">
<i class="fa fa-lock logico"></i>
<input type="password" id="pswrd" name="password" required><label for="pswrd">Password</label></div>
<input type="checkbox" id="remberme" name="remember"><label for="remberme">Remeber Me</label>
<input type="submit" name="" value="Login">
Forgot password?<br>
Create An Account
</form>
</div>
</div>
</body>
</html>
When this renders in browser the username and password input field will become stretched and i was able to use width:90%;, which works fine but i would love to have it set to width:100%; (which works perfectly without added the doctype tag) but when the doctype code is added, it becomes stretched.
Additional Issue: The background image i added to the body wont cover the whole screen, it breaks in the middle and repeat. i tried adding background-repeat:none; but didn't work. but if i remove the doctype tag, the background fills up the page as expected.
How do i solve this?
base on what you want i added display: inline-flex; in your input wrappers
Try this
.loginbox {
width: 320px;
height: 440px;
background: #000;
color: #fff;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
box-sizing: border-box;
padding: 70px 30px;
}
#media only screen and (min-device-width: 768px) and (max-device-width: 1024px) {
.loginbox {
width: 450px;
height: 480px;
padding: 90px 30px;
}
.inputContainer input {
margin-bottom: 30px;
}
}
.loginavatar {
width: 100px;
height: 100px;
border-radius: 50%;
position: absolute;
top: -50px;
left: calc(50% - 50px);
}
.loginbox h1 {
font-size: 22px;
text-align: center;
margin: 0;
padding: 0 0 20px;
}
.inputContainer input {
margin-bottom: 20px;
}
input:-webkit-autofill {
-webkit-text-fill-color: #ffffff !important;
transition: background-color 5000s ease-in-out 0s;
-webkit-transition: background-color 5000s ease-in-out 0s;
}
.inputContainer input[type="text"],
input[type="password"] {
width: 100%;
height: 42px;
background: transparent;
color: #fff;
font-size: 14px;
font-family: inherit;
font-weight: 400;
border: none;
border-bottom: 1px solid #333;
outline: none;
padding-left: 20px;
}
.logico {
position: absolute;
top: 20%;
}
.usernithicon,
.passnithicon {
position: relative;
display: inline-flex;
align-items: baseline;
width: 100%;
}
.inputContainer input[type="text"]:hover,
input[type="password"]:hover,
input[type="text"]:focus,
input[type="password"]:focus {
border-bottom: 1px solid #bc2333;
}
.inputContainer .inputBox label {
position: absolute;
top: 0;
left: 10%;
padding: 15px 0 0 0;
font-size: 14px;
pointer-events: none;
transition: .5s;
}
.inputContainer .inputBox input:focus~label,
.inputContainer .inputBox input:valid~label {
top: -22px;
left: 10%;
font-size: 12px;
color: #bc2333;
}
input[type=checkbox]+label {
display: block;
margin: 3px 3px 20px;
cursor: pointer;
padding: 0;
}
input[type=checkbox] {
display: none;
}
input[type=checkbox]+label:before {
content: "\2714";
border: 1px solid #fff;
border-radius: 0.2em;
display: inline-block;
width: 1em;
height: 1em;
padding-left: 0.2em;
padding-bottom: 0.3em;
margin-right: 0.2em;
vertical-align: bottom;
color: transparent;
transition: .2s;
}
input[type=checkbox]+label:active:before {
transform: scale(0);
}
input[type=checkbox]:checked+label:before {
background-color: #bc2333;
border-color: #bc2333;
color: #fff;
}
input[type=checkbox]:checked:disabled+label:before {
transform: scale(1);
background-color: #bc2333;
border-color: #bc2333;
opacity: 0.5;
}
input[type=checkbox]:disabled+label:before {
transform: scale(1);
border-color: #fff;
opacity: 0.2;
}
.inputContainer input[type="submit"] {
width: 100%;
height: 48px;
background: #bc2333;
color: #fff;
font-size: 16px;
font-weight: 500;
font-family: inherit;
border: 0;
outline: none;
}
.inputContainer input[type="submit"]:hover {
cursor: pointer;
background: #7a091f;
transition: .3s ease;
}
.inputContainer a {
color: #fff;
display: block;
text-decoration: none;
text-align: center;
}
.inputContainer a:hover {
color: #f4f4f4;
transition: .2s ease;
}
For the background try this
body, html{
height: 100%;
background-image: url('your_image_path')
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
As you can see in the images, the text "English" isn't vertically centered in the WordPress version of the site I'm building but with the same code as I used in the HTML version it works perfectly. Any ideas why?
HTML
<div class="right-bar">
<a class="language">
<img src="img/flags/EN-us.png" alt="English / US">
<span>English</span>
</a>
<a class="search-btn">
<i class="fa fa-search"></i>
</a>
</div>
SASS
.right-bar {
background: #1f1f1f;
float: right;
height: 100%;
padding: 32px 20px 0;
position: relative;
&::after {
position: absolute;
top: 0;
right: 100%;
content: "";
width: 0;
height: 0;
border-style: solid;
border-width: 0 0 98px 83px;
border-color: transparent transparent #1f1f1f;
}
.language {
border: 1px solid #363636;
border-radius: 40px;
color: #898989;
display: block;
float: left;
height: 34px;
font-size: 10px;
font-weight: 700;
line-height: 30px;
padding: 0 20px;
position: relative;
text-transform: uppercase;
z-index: 99;
}
.search-btn {
float: left;
display: block;
margin: 0 0 0 30px;
color: #fff;
font-size: 26px;
font-weight: 400;
transition: color .2s;
&:active {
color:#8eb82f;
}
}
}
SCSS
.language{
img{
vertical-align:middle;
}
}
This may help you.
Long story short I was using in-line CSS directly in the page for the longest time, but decided to put it all in one file for my own sanity. I have tried the typical
<link rel="stylesheet" href="URL">
method and it loaded, but looked extremely weird, so I decided to include it with a PHP like
<?php include("assets/style.php"); ?>
and it works perfectly fine on all of my desktop browser like Chrome and IE, but on mobile safari the entire page is a mess.
This is my page.
<!DOCTYPE html>
<html>
<head>
<title>EPICMC</title>
<meta http-equiv=Content-Type content="text/html;charset=UTF-8">
<meta name="description" content="EPICMC is a service that lets you interact with your favorite servers in a new and exciting way.">
<meta name="keywords" content="epicmc,epic mc,epicmc server,epicmc/register,epicmc mcpe,epicmc vote,epicmcs vote,epicmc twitter,epicmc register,epicmcgaming,epicmc mcpe,epicmcpixels,epicmc donate,epicmcs donate,epic mc admin,epic mc builds">
<meta name=viewport content="width=device-width, user-scalable=no">
<link href="https://fonts.googleapis.com/css?family=Days+One&text=EPICM" rel="stylesheet">
<link href='https://fonts.googleapis.com/css?family=Numans' rel='stylesheet' type='text/css'>
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<link href="https://epicmc.us/dist/css/ripples.min.css" rel="stylesheet">
<link href="https://epicmc.us/dist/css/material-wfont.min.css" rel="stylesheet">
<?php include("assets/style.php"); ?>
</head>
<body>
<?php include("assets/header.php"); ?>
<hgroup>
<h1 class="logo">EPIC<font color="#00aa00">MC</font></h1>
</hgroup>
<form id="statsform" action="stats.php" method="GET">
<div class="group">
<input type="text" name="player" id="CAPSINPUT" placeholder="USERNAME" autocomplete="off"><span class="bar"></span>
</div>
<center><input type="submit" value="CHECK STATS" class="load-more"></a></center>
</form>
</div>
</div>
</div>
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- BANNER -->
<center><ins class="adsbygoogle"
style="display:inline-block;width:320px;height:50px"
data-ad-client="ca-pub-4863164385597709"
data-ad-slot="3088967678"></ins></center>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
<script src="//code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<script src="https://epicmc.us/dist/js/textbox.js"></script>
<script src="https://epicmc.us/dist/js/loadingbutton.js"></script>
<script src="https://epicmc.us/dist/js/ripples.min.js"></script>
<script src="https://epicmc.us/dist/js/material.min.js"></script>
<script>
$(document).ready(function() {
$.material.init();
});
</script>
</body>
</html>
This is my style.php
<style type="text/css">
#charset "UTF-8";
* { box-sizing: border-box;
}
p {
display: inline;
}
form {
width: 300px;
margin: 4em auto;
padding: 3em 2em 2em 2em;
border: 1px solid #ebebeb;
box-shadow: rgba(0,0,0,0.14902) 0px 1px 1px 0px,rgba(0,0,0,0.09804) 0px 1px 2px 0px;
}
.group {
position: relative;
margin-bottom: 45px;
}
input {
font-size: 18px;
font-family: 'Numans', sans-serif;
padding: 10px 10px 10px 5px;
-webkit-appearance: none;
display: block;
color: #636363;
width: 100%;
border: none;
border-radius: 0;
border-bottom: 1px solid #757575;
background: transparent;
}
input:focus {
outline: none;
}
input:focus ~ label, input.used ~ label {
top: -20px;
transform: scale(.75);
left: -2px;
color: #00aa00;
}
.bar {
position: relative;
display: block;
width: 100%;
}
.bar:before, .bar:after {
content: '';
height: 2px;
width: 0;
bottom: 1px;
position: absolute;
background: #00aa00;
transition: all 0.2s ease;
}
.bar:before {
left: 50%;
}
.bar:after {
right: 50%;
}
input:focus ~ .bar:before, input:focus ~ .bar:after {
width: 50%;
}
.highlight {
position: absolute;
height: 60%;
width: 100px;
top: 25%;
left: 0;
pointer-events: none;
opacity: 0.5;
}
a:link,a:visited,a:hover,a:active {
color: #636363;
text-decoration: none;
}
body {
font-family: 'Numans', sans-serif;
background: #eee;
-webkit-font-smoothing: antialiased;
}
hgroup {
text-align: center;
margin-top: 4em;
}
h1 {
color: #636363;
}
h2 {
font-family: 'Numans', sans-serif;
font-size: 12px;
}
#error {
font-family: 'Numans', sans-serif;
font-size: 15px;
text-align: center;
margin-top: -15px;
margin-bottom: 20px;
}
#username, h5 {
font-family: 'Numans',sans-serif;
font-size: 18px;
text-align: center;
margin-top: 20px;
margin-bottom: 20px;
text-transform: uppercase;
}
.logo {
font-family: 'Days One', sans-serif;
font-weight: lighter;
font-size: 48px;
margin-bottom: 35px;
text-align: center;
}
.alert-info, .alert-danger, .alert-warning, .alert-success {
margin-top: -20px;
background-color: #323232;
}
.container {
text-align: center;
}
.load-more {
background-color: #00aa00;
color: #ffffff;
display: block;
font-family: 'Numans', sans-serif;
font-weight: lighter;
height: 3em;
line-height: 3em;
overflow: hidden;
padding: 0 3em;
text-align: center;
text-decoration: none;
border-bottom: none;
}
.load-more.load-more--loading {
background-color: transparent;
border: .3em solid #e1e1e1;
border-radius: 1.5em;
border-top-color: #00aa00;
box-sizing: border-box;
height: 3em;
color: transparent;
padding: 0;
pointer-events: none;
width: 3em;
-webkit-animation: rotation 2s infinite linear;
}
#-webkit-keyframes rotation {
from {
-webkit-transform: rotate(0deg);
}
to {
-webkit-transform: rotate(359deg);
};
}
#CAPSINPUT, .CAPSINPUT {
text-transform: uppercase;
}
#stats {
width: 300px;
margin: 4em auto;
padding: 1.5em 1.5em 1.5em 1.5em;
background: #fafafa;
border: 1px solid #ebebeb;
box-shadow: rgba(0,0,0,0.14902) 0px 1px 1px 0px,rgba(0,0,0,0.09804) 0px 1px 2px 0px;
}
#statsform {
background: #fafafa;
}
#search {
background: transparent;
}
table {
color: #333;
border-collapse: collapse;
border-spacing: 0;
border: 2px solid #ebebeb;
cursor: pointer;
}
td, th {
border: 1px solid transparent;
/* No more visible border */
height: 30px;
transition: all 0.3s;
/* Simple transition for hover effect */;
}
th {
background: #DFDFDF;
/* Darken header a bit */
font-weight: bold;
}
td {
background: #FAFAFA;
text-align: center;
width: 33.33%;
border-left: 2px solid #ebebeb;
}
/* Cells in even rows (2,4,6...) are one color */
tr:nth-child(even) td {
background: #FEFEFE;
}
/* Cells in odd rows (1,3,5...) are another (excludes header cells) */
tr:nth-child(odd) td {
background: #F1F1F1;
}
tr td:hover {
background: #666;
color: #FFF;
} /* Hover cell effect! */
.fa-stack {
color: #00aa00;
}
#container-avatar img {
background: url('https://epicmc.us/images/herobrine.png');
background-repeat: no-repeat;
background-position: center;
display: block;
height: 85px;
width: 85px;
pointer-events: none;
}
#container-avatar #badge {
font-size: 12px;
margin: -22px 0 0 130px;
position: absolute;
text-align: center;
width: 68px;
}
</style>
the href should be "style.css" and rename the style.php to style.css and remove the tag
I'm currently learning php by project I'am trying to implement a 3 column website. 1 column is the main column. Other two column is set to display:none. They appear onmouseover event, when pointer comes over twitter or facebook icon. how do I fit these columns in firefox alongside with chrome
here is a link http://slavesofdestiny.com/yenisite/
//style.css
.main-part h1{
font-weight: 500;
letter-spacing: 0.8px;
}
p, h1, a{
font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
color: rgba(255,255,255,0.75);
}
p{
font-size: 16px;
}
body{
background-attachment: fixed;
background-position: center;
background-color: black;
background-image: url(http://www.slavesofdestiny.com/imgs/sodarkaplan.jpg);
}
// navigator
.navigator{
margin-left: auto;
margin-right: auto;
text-align: center;
background-color: black;
border: 2px solid white;
}
.header-image{
background-size: cover;
margin-left: auto;
margin-right: auto;
text-align: center;
width: 100%;
height: auto;
}
/* Navigation Items */
ul ul {
display: none;
}
ul li:hover > ul {
display: block;
}
ul {
border: 1px solid black;
font-size: 20px;
display: block;
background: rgba(0,0,0,1);
background: linear-gradient(top, rgba(7, 3, 7, 0.9) 100%, rgba(27, 30, 31, 0.9));
background: -moz-linear-gradient(top, rgba(7, 3, 7, 0.9) 100%, rgba(27, 30, 31, 0.9));
background: -webkit-linear-gradient(top, rgba(7, 3, 7, 0.9) 100%, rgba(27, 30, 31, 0.9));
box-shadow: 0px 0px 9px rgba(0,0,0,0.15);
padding: 2px;
border-radius: 5px;
list-style: none;
position: relative;
display: inline-table;
}
ul:after {
content: "";
clear: both;
display: block;
}
ul li {
display: block;
float: left;
}
ul li:hover {
border-radius: 10px;
background: rgba(95, 0, 0, 0.4);
background: linear-gradient(top, rgba(0,0,0, 0.4) 0%, rgba(95, 0, 0, 0.4) 45%);
background: -moz-linear-gradient(top, rgba(0,0,0, 0.4) 0%, rgba(95, 0, 0, 0.4) 45%);
background: -webkit-linear-gradient(top, rgba(0,0,0, 0.4) 0%, rgba(95, 0, 0, 0.4) 45%);
}
ul li:hover a {
color: rgba(255, 255, 255, 1);
}
ul li a {
display: block;
padding: 10px 15px;
color: white;
text-decoration: none;
}
.social-media{
padding: 0px;
padding-left: 3px;
padding-right: 3px;
padding-top: 4.7px;
padding-bottom: 4.7px;
}
/*Content Part*/
.body-part{
margin-left: auto;
margin-right: auto;
text-align: center;
margin-top: 0px;
width: 1200;
min-height: 800px;
border-radius: 5px;
}
.container{
float: left;
position: relative;
text-align: center;
display: inline-block;
margin-top: -20px;
width: 800px;
min-height: 800px;
background-color: rgba(0,0,0,0.6);
padding: 0;
//border-radius: 10px;
}
#sideBarRight{
position: relative;
float: right;
width: 200px;
display: none;
vertical-align: top;
}
#sideBarLeft{
position: relative;
float: left;
width: 200px;
vertical-align: top;
}
.side-bar{
display: inline-block;
position: relative;
min-height: 50px;
vertical-align: top;
}
.main-part{
display: inline-block;
padding-top: 10px;
width: 780px;
min-height: 800px;
margin: auto;
padding-bottom: 10px;
}
.main-part div{
width: auto;
background-color:rgba(150,150,150,0.36);
border: 1px solid black;
//border-radius: 20px;
padding: 15px;
margin-left: auto;
margin-right: auto;
margin-bottom: 20px;
box-shadow: 8px 8px 5px #000000;
}
.main-part div img{
//max-height: 600px;
max-width: 800px;
}
.main-part h1{
padding: 10px;
}
.main-part p{
padding: 10px;
}
#facebook-div{
background-color: #ffffff;
display: none;
}
//index.php
<?php
?>
<body>
<div class="navigator">
<?php include 'header.php'; ?>
</div>
<div class="body-part" >
<div id="sideBarLeft" class="side-bar" style="float: left;">
<div id="facebook-div" style="float: left;">
<?php include 'leftSideBar.php'; ?>
</div>
</div>
<div class="container" onmouseover="document.getElementById('sideBarRight').style.display = 'none'; document.getElementById('facebook-div').style.display = 'none';">
<div class="main-part">
<?php include 'postSelect.php' ?>
</div>
<?php include 'footer.php';?>
</div>
<div id="sideBarRight" class="side-bar">
<?php include 'sidebar.php';?>
</div>
</div><!--end body-part-->
</body>
A couple things that might help:
Your <head> tag is inside your <body> tag as of right now. Especially when using templates, it's important to check your resulting html code. Take a look at this: http://html5.validator.nu/?doc=http%3A%2F%2Fslavesofdestiny.com%2Fyenisite%2Findex.php
Try position: absolute on your sidebars. If you give their parent a position:relative, you should be able to put them exactly where you want them with the top, left, and right style attributes.