So I just learned about the include function, I made a:
include ("header.php"); and
include ("mainSection.php"); but they seem to overlap each other.
is it something with my css or html?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="style.css">
<title>Chocoot</title>
</head>
<body>
<div id="wrapper">
<?php
include ("header.php");
include ("mainSection.php");
?>
</div>
</body>
</html>
The header.php
<header id="logoheader">
<h1 id="logo">Chocoot</h1>
<div id="orangeborder1">
<nav>
<ul>
<li>Home</li>
<li>Chocolate</li>
<li>Beans</li>
<li>History</li>
<li>Contact</li>
</ul>
</nav>
</div>
<div id="slider"></div>
<div id="orangeborder2"></div>
</header>
The mainSection.php
<section id="midSection">
</section>
CSS:
*{
margin: 0px;
padding: 0px;
}
#logoheader{
width: 1366px;
height: 30px;
background-color: #2b292a;
}
body{
background-color: #171515;
}
#wrapper{
width: 1366px;
height: auto;
margin: auto;
background-color:#2b292a;
}
header{
width: 1366px;
height: 475px;
float: left;
}
#logo{
font-family: Georgia;
font-weight: bold;
font-style: italic;
font-size: 32px;
color: white;
margin-left: 28px;
margin-top: -3px;
margin-bottom: -3px;
float: left;
}
#orangeborder1{
width: 1366px;
height: 30px;
float: left;
background-color: #2b292a;
}
#orangeborder1{
width: 1366px;
height: 86px;
background-color: #9b3210;
float: left;
}
nav ul li{
float: left;
list-style: none;
margin-top: 28px;
}
nav ul li a{
font-family: Georgia;
font-size: 24px;
font-style: italic;
font-weight: bold;
color: #fff;
}
nav ul li:first-child{
margin-left: 250px;
}
nav ul li:nth-child(2){
margin-left: 64px;
}
nav ul li:nth-child(3){
margin-left: 90px;
}
nav ul li:nth-child(4){
margin-left: 63px;
}
nav ul li:nth-child(5){
margin-left: 50px;
}
a{
text-decoration: none;
}
#slider{
width: 1366px;
height: 301px;
float: left;
background-color: black;
color: white;
}
#slider2{
width: 1366px;
height: 301px;
float: left;
background-color: black;
color: white;
}
#orangeborder2{
width: 1366px;
height: 59px;
background-color: #9B3210;
float: left;
}
#midSection{
width: 1366px;
height: 570px;
background-color: #2b292a;
float: left;
}
#pictureContainer{
width: 250px;
height: 570px;
float: left;
}
footer{
width: 1366px;
height: 155px;
background-color: #433f40;
float: left;
}
I hope you can help me :s
Delete the 'height: 30px;' in the #logoheader block of your css. So it looks like this:
#logoheader {
width: 1366px;
background-color: #2b292a;
}
Does that do anything? You should not have to tell elements how far to start down on a page. By default they will stack on each other unless otherwise told.
Related
I need to make tabbed layout using HTML in my php page. Lets say welcome.php and all I need to show my page at the beginning as follows,
I need to make three tabs as below and each of this tab should be clickable. For details1 and details2, when I clicked that button it should popup a vertical menu.
Then I need the nature as follows,
When someone clicked Mainview, content should be displayed in the white space. If someone clicked Deatils1 then popup the menu if someone clicked item1 the content inside item1 should be show in whitespace likewise I need to navigate the content.
I have tried upto this level.Here is my try.
<?php
session_start();
// Check if the user is logged in, if not then redirect him to login page
if(!isset($_SESSION["loggedin"]) || $_SESSION["loggedin"] !== true){
header("location: login.php");
exit;
}
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Dashboard</title>
<link rel="stylesheet" href="./project/styles.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>
<div class="wrapper">
<div class="sidebar">
<h2 style="font-family: Verdana;">Dashboard</h2>
<ul>
<li><i class="fa fa-home"></i> Home</li>
<li><i class="fa fa-paper-plane"></i> Page 1</li>
<li><i class="fa fa-mobile"></i> Page 2</li>
<li><i class="fa fa-phone"></i> Page 3</li>
<li><i class="fa fa-plug"></i> Page 4</li>
<li><i class="fa fa-user"></i> Page 5</li>>
</ul>
</div>
<div class="main_content">
<?php
include "adminHeader.php";
?>
<div class="info">
</div>
</div>
</div>
</div>
From above code I could get Side bar and Admin Header as below,
can someone help me to achieve what I need? Any help is appreciated.
Thanks in advance!
Here is my current css styles,
#import url('https://fonts.googleapis.com/css?family=Josefin+Sans&display=swap');
*{
margin: 0;
padding: 0;
box-sizing: border-box;
list-style: none;
text-decoration: none;
font-family: 'Josefin Sans', sans-serif;
}
body{
background-color: #f3f5f9;
}
.wrapper{
display: flex;
position: relative;
display: flex;
width: 100%;
height: 100%
}
.wrapper .sidebar{
width: 220px;
height: 100%;
background: #4b4276;
padding: 30px 0px;
position: fixed;
font-size: 15px;
display: block;
height: 100%;
flex-shrink: 0;
}
.wrapper .sidebar h2{
color: #fff;
text-transform: uppercase;
text-align: center;
margin-bottom: 30px;
font-family: Helvetica;
}
.wrapper .sidebar ul li{
padding: 15px;
border-bottom: 1px solid #bdb8d7;
border-bottom: 1px solid rgba(0,0,0,0.05);
border-top: 1px solid rgba(255,255,255,0.05);
}
.wrapper .sidebar ul li a{
color: #bdb8d7;
display: block;
}
.wrapper .sidebar ul li a .fas{
width: 25px;
}
.wrapper .sidebar ul li:hover{
background-color: #594f8d;
}
.wrapper .sidebar ul li:hover a{
color: #fff;
}
.wrapper .sidebar .social_media{
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%);
display: flex;
}
.wrapper .sidebar .social_media a{
display: block;
width: 40px;
background: #594f8d;
height: 40px;
line-height: 45px;
text-align: center;
margin: 0 5px;
color: #bdb8d7;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
}
.wrapper .main_content{
margin-left: 220px;
width: calc(100% - 200px);
display: block ;
}
.hidden{
display :none;
}
.wrapper .main_content .header{
padding: 20px;
background: #fff;
color: #717171;
border-bottom: 1px solid #e0e4e8;
display: flex;
justify-content: space-between;
position: relative;
width: 100% ;
}
.wrapper .main_content .info{
margin: 10px;
color: #717171;
line-height: 25px;
}
.wrapper .main_content .info div{
margin-bottom: 20px;
}
.error {
color: red;
}
.vega-actions {display: none}
h3 {
font-family: 'Source Code Pro', sans-serif;
font-weight: 50;
font-size: 10px;
margin-top:0px;
display: block;
color: #404040;
text-align: right;
border-top:3px solid #000;
}
.main_content .info .card .card-body h3 {
font-size: 15px;
}
.card {
display: flex;
justify-content: center;
}
.flex {
display: flex;
justify-content: space-between;
}
.wrapper {
display: flex;
width: 100%;
height: 100%
}
.yellowBg {
background-color: #0ff;
}
Just a quick overview of what you want trying to achieve. Just check and run the code below. Hope it gives you idea.
document.querySelector(".has-sub").onclick = function() {
children = this.children[1];
if ( children.classList.contains("open") ) {
children.classList.remove("open");
} else {
children.classList.add("open");
}
}
.has-sub,
a {
text-decoration: none;
padding: 5px;
display: inline-block;
}
.nav {
display: grid;
grid-template-columns: repeat(3, 1fr);
}
.has-sub,
.nav-menu {
border: 1px solid green;
text-align: center;
}
.has-sub {
cursor: pointer;
position: relative;
}
.sub {
position: absolute;
left: 0;
top: 0;
width: 100%;
margin-top: 30px;
display: none;
background: gray;
}
.open {
display: block;
}
<div class="nav">
<div class="nav-menu">
<a href="#">
main view
</a>
</div>
<div class="has-sub">
<span>detail 1</span>
<ul class="sub">
<li>sub detail 1</li>
<li>sub detail 2</li>
</ul>
</div>
<div class="nav-menu">
<a href="#">
detail 2
</a>
</div>
</div>
The button and text fields on my login page are unresponsive / I am unable to click or interact with them. It worked fine yesterday and is linked to a PHP database. I have no idea what code I changed but it was possibly CSS that has stopped it working. Any advice would be great as I am lost.
I have tried editing CSS but to avail.
<!DOCTYPE HTML>
<html lang="en">
<head>
<title>Maoine in Eirinn (MIE) Wild Atlantic Gaeltacht Properties</title>
<meta charset="utf-8">
<link rel="stylesheet" href="css/styles.css">
</head>
<body>
<div id="container">
<?php include("includes/header.html");?>
<?php include("includes/nav.html");?>
<div id="content">
<?php
if (empty($_SESSION))
session_start();
if (isset($_SESSION['errors'])) {
echo "<div class='form-errors'>";
foreach($_SESSION['errors'] as $error)
{
echo "<p>";
echo $error;
echo "</p>";
}
echo "</div>";
}
unset($_SESSION['errors']);
?>
<div id="login">
<h3> Login </h3>
<form action="login_action.php" method="POST">
<p>
Username: <input type="text" name="adminname" required="required">
</p><p>
Password: <input type="password" name="password" required="required">
</p><p>
<input type="submit" value="Login">
</p>
</form>
</div>
</div>
<?php include("includes/footer.html");?>
</div>
</body>
</html>
body{background-color: #EEEEEE; }
#container{margin: auto;
width: 100%;
background-color: #EEEEEE;
border: 10px solid #EEEEEE;
}
#header{
background-color: #449966;
height: 110px;
margin-top: 38px;
}
#nav{background-color: #000000;
clear: left;
}
#moira{
float:right;
padding-right: 50px;
position: relative;
margin-left: 50px;
}
#martin{
float:right;
padding-right: 50px;
position: relative;
margin-left: 50px;
}
#openinghours{`
width: 30%;
float:left;
margin-left: 100px;}
#contactus{width: 50%;
float:left;
margin-bottom: 200px;}
#content{background-color: #EEEEEE;
padding: 50px;
min-height: 500px;
text-align: center;
}
#content a {background-color: #449966; color: white; text-decoration:none; padding:5px;}
#content a:hover {background-color: #878787; color: white;}
#footer{background-color: #449966;
height: 50px;
padding: 10px;
display: flex;
margin-top: 200px;
bottom: 0;
width: 100%;
position: fixed;
}
#comments {width: 70%; float: left;}
.container{
position: relative;
border-radius: 8px;
width: 90%;
height: 500px;
overflow: hidden;
}
#login{z-index: 100;}
#logo {float:left;}
#copyright {float:left;}
#footer ul{ text-align: center;
width: 50%;
margin: auto;}
#footer a{ color:#449966; }
#socialMedia{float:right; width: 150px; display: flex;}
#sitename{text-align: center;
width: 100%;}
#languageimage img{
border: 1px solid #ddd;
border-radius: 50%;
float:right;
display: flex;
vertical-align: top;}
table td {padding: 10px;}
table {width: 100%}
table tr:nth-child(1) {
background-color: #449966;
}
table tr {
background-color:#FFFFFF;
}
#displayproperties{width: 75%;}
#addtestimonial{width: 25%; margin-left: 50px; float: right;}
#addtestimonial table {border: 0px;}
#addtestimonial table tr td {padding: 0px; border: 0px;}
#addtestimonial table tr {background-color: #c6e1e0; border: 0px;}
.show {display:block;}
#commentform {
font-family: Arial;
width: auto;
}
label { float:left;
width: 50px;
clear: left;
text-align: left;
padding-right: 15px;
margin-top: 10px;
}
input, textarea {margin-top: 10px; }
#mysubmit { margin-left:65px;
padding-bottom: 10px;
}
body {margin:0;font-family:Arial}
.topnav {
overflow: hidden;
background-color: #333;
position: fixed;
top: 0;
width: 100%;
}
.topnav a {
float: left;
display: block;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
.active {
background-color: #449966;
color: white;
}
.topnav .icon {
display: none;
}
.dropdown {
float: left;
overflow: hidden;
}
.dropdown .dropbtn {
font-size: 17px;
border: none;
outline: none;
color: white;
padding: 14px 16px;
background-color: inherit;
font-family: inherit;
margin: 0;
}
.dropdown-content {
display: none;
position: fixed;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown-content a {
float: none;
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
#youtubewaw{margin-bottom: 200px;}
.topnav a:hover, .dropdown:hover .dropbtn {
background-color: #449966;
color: white;
}
.dropdown-content a:hover {
background-color: #449966;
color: black;
}
.dropdown:hover .dropdown-content {
display: block;
}
#media only screen and (max-width: 1200px) {
#openinghours{float:none;}
#addtestimonial{float:none;}
#media only screen and (max-width: 768px) {
body{font-size:90%;}
#displayproducts td:nth-child(1){display:none;}
#commentform{width: auto; font-size: 80%;}
#mysubmit{margin-left: 0;}
#openinghours{float:none;}
td:nth-of-type(4){display:none;}
#content{ padding: 0px;}}
#media screen and (max-width: 768px) {
#sitename{display:none;}
.topnav a:not(:first-child), .dropdown .dropbtn {
display: none;
}
.topnav a.icon {
float: right;
display: block;
}
}
#media screen and (max-width: 768px) {
#sitename{display:none;}
.topnav.responsive {position: relative;}
.topnav.responsive .icon {
position: absolute;
right: 0;
top: 0;
}
.topnav.responsive a {
float: none;
display: block;
text-align: left;
}
.topnav.responsive .dropdown {float: none;}
.topnav.responsive .dropdown-content {position: relative;}
.topnav.responsive .dropdown .dropbtn {
display: block;
width: 100%;
text-align: left;
}
}
I noticed you have an accidental ` character.
#openinghours{`
width: 30%;
float:left;
margin-left: 100px;}
Also you've got some id called #mysubmit but your submit input doesn't use that ID.
I removed the below and everything works again. I don't understand why but I am fairly new to this
.container{
position: relative;
php
and im beginner with with php,html and css
for example i want to change the logo to be in top center but it does not change
i use xampp to run my php file im not sure if i use the right way to link
css to php file
<?php include('server.php'); ?>
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Home page</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="http://code.jquery.com/jquery-3.3.1.js"></script>
<link href="https://fonts.googleapis.com/css?family=Poppins:200,300,400,500,600" rel="stylesheet">
<link rel="stylesheet" href="StyleIndex.css">
</head>
<body>
<header class="Logo">
<a href="index.php">
<img alt="logo" src="logo3.jpg" />
</a>
</header>
<nav>
<div>
<i class="fa fa-bars"></i>
</div>
<ul>
<li>Home</li>
<li>Drop 1 <i class="fa fa-sort-desc"></i>
<ul>
<li>m 1</li>
<li>m 2</li>
<li>m 3</li>
<li>m 4</li>
</ul>
</li>
<li>Drop 2 <i class="fa fa-sort-desc"></i>
<ul>
<li>m 1</li>
<li>m 2</li>
<li>m 3</li>
<li>m 4</li>
</ul>
</li>
<li>About</li>
<li>Logout</li>
</ul>
</nav>
<script type="text/javascript">
$("nav div").click(function() {
$("ul").slideToggle();
$("ul ul").css("display", "none");
});
$("ul li").click(function() {
$("ul ul").slideUp();
$(this).find('ul').slideToggle();
});
$(window).resize(function() {
if($(window).width() > 768) {
$("ul").removeAttr('style');
}
});
</script>
<div class="semiProfile">
<div class="avatar">
<img src="avatar.png" />
</div>
<div class="Username">
<?php if (isset($_SESSION['username'])) : ?>
<p class="username"><strong><?php echo $_SESSION['username']; ?></strong></p>
<?php endif ?>
</div>
</div>
<div class="Content">
<div class="news">
<p class="status">
</p>
</div>
<div class="Chat">
<Form class="chatBox">
<input class="statusBar" type="text" placeholder="Write your status ...!" />
<button>Send</button>
</Form>
</div>
</div>
<div class="NewQuestion">
<div class="avatar1">
<img src="avatar.png" />
</div>
<div class="Username">
<?php if (isset($_SESSION['username'])) : ?>
<p class="username1"><strong><?php echo $_SESSION['username']; ?></strong></p>
<?php endif ?>
</div>
<div class="Question">
<p class="question">
This is the area where the new and trending questions are written on the website
</p>
</div>
</div>
<footer class="footer">
Copyrights!
</footer>
</body>
</html>
and i try to style it but there is no affect on it
and here is my css file StyleIndex.css
* {
margin: 0px;
padding: 0px;
}
body {
margin: 0;
padding: 0;
background-color:#161515;
}
.logo img{
position: absolute;
left: 100px;
}
.nav{
position: absolute;
}
.nav .a
{
padding: 20px;
}
ul {
margin: 0;
padding: 0;
list-style-type: none;
background-color: rgb(34, 33, 33);
position: relative;
}
ul li {
display: inline-block;
}
ul li a {
color: aliceblue;
text-decoration: none;
padding: 15px;
display: block;
}
ul li:hover {
background: lightgrey;
}
ul ul {
position: absolute;
min-width: 200px;
background: lightgrey;
display: none;
}
ul ul li {
display: block;
background: #e3e3e3;
}
ul li:hover ul {
display: block;
}
ul li i {
color: aliceblue;
float: right;
padding-left: 20px;
}
nav div {
background-color: rgb(34, 33, 33);
color: #292929;
font-size: 24px;
padding: 0.6em;
cursor: pointer;
display: none;
}
#media(max-width: 768px) {
nav div {
display: block;
}
ul {
display: none;
position: static;
background-color: rgb(34, 33, 33);
}
ul li {
display: block;
}
ul ul {
position: static;
background-color: rgb(34, 33, 33);
}
}
.semiProfile
{
width: 300px;
height: 100px;
padding: 50px;
border: 1px solid black;
background-color: rgb(34, 33, 33);
position:absolute;
}
.avatar img
{
max-width: 80px;
max-height: 80px;
}
.logout
{
margin: 15px 0 0;
color:aliceblue;
font-size: 12px;
}
.username
{
position: absolute;
left: 150px;
top: 60px;
color:aliceblue;
}
.About
{
margin: 15px 0 0;
color: aliceblue;
font-size: 12px;
}
.Logo img
{
max-width: 80px;
max-height: 80px;
}
.footer
{
position: absolute;
left: 200px;
top: 900px;
color: aliceblue;
}
.Contect
{
width: 360px;
padding: 10% 0 0;
margin: auto;
}
.news
{
position: relative;
z-index: 1;
background: rgb(34, 33, 33);
max-width: 360px;
margin: 0 auto 20px;
padding: 20px;
text-align: center;
border: 1px solid black;
}
.status
{
margin: 15px 0 0;
color: aliceblue;
font-size: 15px;
}
.Chat
{
position: relative;
z-index: 1;
background: rgb(34, 33, 33);
max-width: 360px;
margin: 0 auto 20px;
padding: 20px;
text-align: center;
border: 1px solid black;
}
.Chat input
{
font-family: "Roboto", sans-serif;
outline: solid;
background: #f2f2f2;
width: 100%;
border: 0;
margin: 0 0 15px;
padding: 15px;
box-sizing:border-box;
font-size: 14px;
}
.Chat button
{
font-family: "Roboto", sans-serif;
text-transform: uppercase;
outline: 0;
background: #000000;
width: 100%;
border: 0;
padding: 15px;
color: #FFFFFF;
font-size: 14px;
cursor: pointer;
}
.Chat button:hover, .Chat button:active
{
background: #630645;
}
.username1
{
position: absolute;
top: 10px;
left: 110px;
color: aliceblue;
}
.avatar1 img
{
max-width: 80px;
max-height: 80px;
border-radius: 50%;
top: 10px;
left: 20px;
position:absolute;
}
.NewQuestion
{
width: 300px;
height: 100px;
padding: 50px;
border: 1px solid black;
background-color: rgb(34, 33, 33);
position: absolute;
right: 90px;
top: 135px;
}
.question
{
position: absolute;
top: 50px;
left: 110px;
color: aliceblue;
}
i found the problem , the problem was from xampp im not sure what happened but
i used other program and now it's working
after checking network tab i saw that css file appear after some time and when it appear
it has an old version of it im not sure why but i used PhpStorm and then i make localhost
using PhpStorm and now it's working thank you for people tried to help me :)
so I'm making a website in wordpress, and I keep struggling with the main menu. The menu does some things stated in the media queries, but leaves out other things. The hamburger menu button is shown, but I can't click it. I don't know how I can fix it.
This is the code from header.php:
<?php
/**
* The header for our theme.
*
* This is the template that displays all of the <head> section and
everything up until <div id="content">
*
* #link https://developer.wordpress.org/themes/basics/template-
files/#template-partials
*
* #package epw_theme
*/
?><!DOCTYPE html>
<html <?php language_attributes(); ?>>
<head>
<meta charset="<?php bloginfo( 'charset' ); ?>">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="profile" href="http://gmpg.org/xfn/11">
<link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>">
<link rel="stylesheet" href="<?php bloginfo('style.css'); ?>">
<?php wp_head(); ?>
</head>
<body <?php body_class(); ?>>
<div class="hero">
<div class="fullwidthbar">
<h1 id="headertext"><a id="headertext" href="<?php echo esc_url( home_url(
'/' ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?></a></h1>
</div>
<nav id="site-navigation" class="main-navigation hdftbg" role="navigation">
<div class="ham">
<?php wp_nav_menu(array(
'theme_location' => 'menu-1',
'menu_id' => 'myTopnav',
'menu_class' => 'topnav'
)); ?>
<div class="test">
<a href="javascript:void(0);" class="icon"
onclick="myFunction()">☰</a>
</div>
</div>
<script>
function myFunction() {
var x = document.getElementById("myTopnav");
if (x.className === "topnav") {
x.className += " responsive";
} else {
x.className = "topnav";
}
}</script>
</nav>
</div>
<div id="content" class="site-content">
</div>
And the css that goes with it:
/* Add a background color to the top navigation */
.topnav {
background-color: #1d1f20;
overflow: hidden;
}
/* Style the links inside the navigation bar */
.topnav a {
float: right;
display: block;
color: #FFF;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
/* Change the color of links on hover */
.topnav a:hover {
color: #f77;
}
/* Hide the link that should open and close the topnav on small screens */
.topnav .icon {
display: none;
color: #000000 !important;
}
.icon {
display: none;
}
/* When the screen is less than 600 pixels wide, hide all links. Show the
link that contains should open and close the topnav (.icon) */
#media screen and (max-width: 600px) {
.topnav a:not(:first-child) {display: none;}
.topnav a.icon {
float: right;
display: block;
}
.topnav {
width: 100%;
}
}
.test {
display: none;
}
/* The "responsive" class is added to the topnav with JavaScript when the
user
clicks on the icon. This class makes the topnav look good on small screens
(display the links vertically instead of horizontally) */
#media screen and (max-width: 600px) {
.topnav.responsive {
position: relative;
z-index: 9999;
display: block;
}
.test {
display: block;
}
.topnav.responsive a.icon {
position: absolute;
right: 0 !important;
top: 0 !important;
}
.icon {
position: absolute;
top: 10px;
left: 10px;
z-index: 99999;
}
.menu-item {
width: 100% !important;
}
.superflex {
position: absolute !important;;
}
}
p.navigatie {
display: none;
}
ul {
float: right;
}
.ham {
background-color: #1D1F20;
width: 100%;
height: 3em;
}
#header{
margin-top: -55px;
width: 100%;
height: 100%;
background-image: url(http://st359450.cmd16c.cmi.hanze.nl/epw/wp-
content/uploads/2017/06/NorwayVang-2.jpg);
background-size: cover;
z-index: -100;
}
#header h3{
position: absolute;
margin-top: 300px;
}
#header h4{
position: absolute;
margin-top: 400px;
}
#arrowdown{
width: 150px;
position: absolute;
margin-top: 600px;
left: 50%;
transform: translate(-50%, -50%);
}
#headersec{
margin-top: -55px;
width: 100%;
height: 75%;
background-image: url(http://st359450.cmd16c.cmi.hanze.nl/epw/wp-
content/uploads/2017/06/NorwayVang-small.jpg);
background-size: contain;
background-repeat: no-repeat;
}
#tagline{
font-style: italic;
font-size: 50px;
text-align: center;
color: white;
}
#lowerline{
font-style: italic;
font-size: 45px;
text-align: center;
color: #ccc;
}
html {
box-sizing: border-box;
height: 100%;
width: 100%;
}
*,
*:before,
*:after {
box-sizing: inherit;
}
body {
margin: 0;
min-height: 100%;
font-family: "Helvetica Neue", Arial, sans-serif;
}
.hero {
margin: 0 auto;
padding-top: 0px;
width: 100%;
}
.hero h1 {
margin-top: 0;
}
.hero .hdftbg {
clip-path: polygon(0 0, 100% 0, 100% 100%, 5% 100%);
}
.hero {
color: #fff;
font-family: 'Raleway', sans-serif;
position: relative;
text-align: center;
text-shadow: 0px 0px 1px rgba(0,0,0,0.5);
}
.hero .hdftbg {
clip-path: polygon(0 0, 100% 0, 100% 100%, 5% 100%);
}
.hdftbg{
width: 50%;
padding-left: 10px;
background-color: #1D1F20;
float: right;
z-index: 100;
margin-top: 0;
}
.fullwidthbar{
width: 100%;
background-color: #1D1F20;
height: 35px;
margin-bottom: -1px;
}
#headertext {
padding-top: 5px;
font-size: 18px;
text-transform: uppercase;
text-align: center;
text-decoration: none;
text-transform: uppercase;
color: #fff;
}
#headerfield {
font-size: 14px;
font-weight: 300;
margin-top: 0.5em;
}
.menu-items{
margin-top: -20px;
}
The .hdftbg, .fullwidthbar and .hero are all used for the clip path, which is why I can't remove them. Any idea how to fix this?
So I created a wordpress and on that wordpress I made a custom template.
The custom template shows up fine, But when I try to add plugins or text to my custom template via the wordpress dashboard nothing shows up. Its not adding it to the code or adding it to the page.
Below are some pic of what I mean.
This is the wordpress dashboard where I am adding at, As you can see my template is MainTest which I made myself and works perfect
SS of the Wordpress Dashboard
Now this is the SS of the page, As you can see the words test test test are not showing up anywhere.
This is the SS of the page
Here is the code for the MaintTest template page
<?php
/*
Template Name: MainTest
*/
?>
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<link rel="stylesheet" href="wp-content/themes/iribbon/newaddons/animate.css">
<link rel="stylesheet" type="text/css" href="wp-content/themes/iribbon/newaddons/newstyle.css">
<script type='text/javascript' src='rotate.js'></script>
<link rel="stylesheet" href="style.css" type="text/css" media="screen" />
<link rel="stylesheet" href="Fancy/source/jquery.fancybox.css?v=2.1.5" type="text/css" media="screen" />
<script type="text/javascript" src="Fancy/source/jquery.fancybox.pack.js?v=2.1.5"></script>
</head>
<body>
<div class='container-fill'>
<?php include 'wp-content/themes/iribbon/newaddons/header.php'; ?>
<?php include 'wp-content/themes/iribbon/newaddons/footer.php'; ?>
</div>
<script type="text/javascript">
$(document).ready(function() {
$(".fancybox").fancybox();
});
</script>
</body>
</html>
And here is the CSS that controls it. Yes I understand my CSS looks sloppy.
#midbar {
background-color: #FFFFFF;
height: 115px;
margin: 0 auto;
opacity: 0.9;
position: relative;
top: 0px;
width: 1200px;
z-index: 1111;
}
#midbar img {
position: absolute;
top: -20px;
left:50%;
margin-left: -160px;
width: 300px;
height: 200px;
min-height: 50px;
min-width: 250px;
vertical-align: middle;
z-index: 2222;
opacity:4.0;
}
.top {
position: relative;
top: -20px;
width: 100%;
height: 115px;
background-color: #FFFFFF;
z-index: 3333;
opacity: 0.9;
margin: 0 auto;
width: 100%;
}
#navigation {
border-bottom-style: dotted;
border-top-style: dotted;
border-width: 2px;
left: 0;
position: absolute;
top: 45px;
}
#navigation ul li {
position: relative;
display:inline-block;
margin:0 23px 0 0;
z-index: 3333;
}
#navigation ul li a {
padding-left:15px;
text-decoration: none;
text-align: center;
padding-right:15px;
color:#000000;
display:block;
font-family: 'Gentium Book Basic', serif;
font-size:18px;
}
#navi {
border-bottom-style: dotted;
border-top-style: dotted;
border-width: 2px;
position: absolute;
right: 0;
top: 45px;
}
#navi ul li {
position: relative;
display:inline-block;
margin:0 23px 0 0;
z-index: 3333;
}
#navi ul li a {
padding-left:15px;
text-decoration: none;
text-align: center;
padding-right:15px;
color:#000000;
display:block;
font-family: 'Gentium Book Basic', serif;
font-size:18px;
}
#slideshow{
width: 100%;
height: 100%;
}
#slideshow{
-webkit-animation: cssAnimation 8s 16 ease-in-out;
-moz-animation: cssAnimation 8s 16 ease-in-out;
-o-animation: cssAnimation 8s 16 ease-in-out;
}
#-webkit-keyframes cssAnimation {
from { -webkit-transform: rotate(0deg) scale(1.1) skew(1deg) translate(0px); }
to { -webkit-transform: rotate(0deg) scale(1.3) skew(1deg) translate(0px); }
}
#-moz-keyframes cssAnimation {
from { -moz-transform: rotate(0deg) scale(1.1) skew(1deg) translate(0px); }
to { -moz-transform: rotate(0deg) scale(1.3) skew(1deg) translate(0px); }
}
#-o-keyframes cssAnimation {
from { -o-transform: rotate(0deg) scale(1.1) skew(1deg) translate(0px); }
to { -o-transform: rotate(0deg) scale(1.3) skew(1deg) translate(0px); }
}
#imgholder {
position: relative;
top: -150px;
width: 100%;
height: 500px;
overflow: hidden;
}
#social {
position: relative;
width: 20%;
top: 30px;
margin-left: auto;
margin-right: auto;
}
#social .fb {
position: relative;
left: -5%;
}
#social .pin {
position: relative;
left: 0%;
}
#social .tweet{
position: relative;
left: 5%;
}
#foot {
width: 100%;
height: 200px;
position: absolute;
margin-right: auto;
margin-left: auto;
bottom: 0;
background-color: #FFFFFF;
margin:0;
text-align: center;
font-size: 12px;
}
#pics {
width: 100%;
height: 300px;
position: relative;
top: -100px;
margin-right: auto;
margin-left: auto;
}
#pics .ball {
position: relative;
vertical-align: middle;
left: 140px;
border: 2px solid #03acfb;
box-shadow: 0 8px 6px -4px #000000;
}
#pics .light {
position: relative;
left:165px;
vertical-align: middle;
border: 2px solid #03acfb;
box-shadow: 0 8px 6px -4px #000000;
}
#pics .car {
position: relative;
left: 190px;
vertical-align: middle;
border: 2px solid #03acfb;
box-shadow: 0 8px 6px -4px #000000;
}
#piccon {
width: 1400px;
height: 300px;
position: relative;
margin-right: auto;
margin-left: auto;
min-width: 800px;
}
#rotating-item-wrapper {
position: absolute;
width: 1940px;
height: 347px;
top: 60px;
z-index: 8888;
left: 0;
}
.rotating-item {
display: none;
position: absolute;
top: 0;
left: 0;
}
body {
overflow: hidden;
}
#mainabout img {
width: 100%;
height: 100%;
}
#maintext {
width: 800px;
min-width: 300px;
height: 600px;
min-height: 300px;
position: absolute;
top: 175px;
left: 40%;
margin-right: -250px;
text-align: center;
font-size: 18px;
}
#mainabout {
background-color: green;
position: absolute;
left: 40%;
margin-left: -650px;
top: 155px;
width: 600px;
height: 500px;
min-height: 600px;
}
.hidden {
display: none;
}
.images {
width: 50%;
position: relative;
top: 300px;
height: 300px;
display: block;
}
.images img {
width: 30%;
height: 60%;
}
Please note, The css controls more then just this page thats why there is so much in it.
The reason for no content showing up is because you are not including the loop in your html body. See the codex for further details: http://codex.wordpress.org/The_Loop
Here is an example with the presentation separated from the logic which will allow you to have more control over the DOM.
<body>
<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
<!-- This will output the title of your page-->
<div class="page-header">
<h1><?php the_title(); ?></h1>
</div>
<!-- the_content() function is required to output "test test test" -->
<?php the_content(); ?>
<?php endwhile; else: ?>
<!-- If there is an error, this 404 message will be displayed-->
<div class="page-header">
<h1>Oh no!</h1>
</div>
<p>No content is appearing for this page!</p>
<?php endif; ?>
</body>
Also, you should be calling your header and footer with the following functions:
Header: http://codex.wordpress.org/Function_Reference/get_header
<?php get_header(); ?>
Footer: http://codex.wordpress.org/Function_Reference/get_footer
<?php get_footer(); ?>
You should add the loop to get the things that should be on the page. It's also reffered to as The Loop. Below the easiest example: show the content or say the page couldn't be found.
Insert that between your header and footer and you should be fine.
<?php
if ( have_posts() ) : while ( have_posts() ) : the_post();
the_content();
endwhile; else:
print('<p>Sorry, this page couldn`t be found.</p>');
endif;
?>