Here is a codepen to see the code I have written and works.
When I write similar code in my wordpress theme, my body appears above the header. How can I get the body next to the header?
[BONUS] What is the best way/how to align the body centered between the right-edge of the header and the right side of the screen.
Any advice is highly appreciated, and I thank you in advance.
[EDIT]: I changed my code for my wordpress site because before I was targeting body with css like I did in my codepen, but instead I created a div with class .site and am using that as the body. This is a temporary fix, but it is working as intended. How could I better achieve this affect so I can integrate visual plugin builders such as beaver builder?
HTML:
<div id="header">
<img src="http://placehold.it/100x100">
<ul id="nav">
<li>Item 1</li>
<li>Item 2</li>
<li>Item Number 3</li>
<li>Item #4</li>
</ul>
</div>
<div id="body">
<div id="container">Body
</div>
</div>
</div>
CSS:
#header,
#body {
display: inline-block;
}
#header {
white-space: nowrap;
width: 15%;
height: 100%;
float: left;
text-align: right;
position: fixed;
//border: 1px solid green;
}
#header img {
}
#nav ul {
list-style: none;
}
#nav {
position: absolute;
bottom: 4%;
right: 0;
}
#body {
width: 80%;
float: right;
//border: 1px solid yellow;
}
#container {
height: 10000px;
}
HEADER.PHP:
<!DOCTYPE html>
<html <?php language_attributes(); ?>>
<head>
<link rel="stylesheet" type="text/css" href="<?php bloginfo('stylesheet_url')?>" />
<meta charset="<?php bloginfo('charset'); ?>">
<meta name="viewport" content="width=device-width">
<title><?php bloginfo('name'); ?></title>
<?php wp_head(); ?>
</head>
<body <?php body_class(); ?>>
<!-- Site Header -->
<header class="site-header">
<?php the_custom_logo(); ?>
<?php wp_nav_menu(array('theme_location','Primary','menu_class'=>'main-navigation')); ?>
</header>
<!-- /Site Header -->
<!-- Site Content -->
Part of the problem was that I had a php error in my functions.php. Also I changed the position of the site content to absolute and the site nav to fixed. I then set the width of the sidebar nav and site content. I also added a content loop to my header to create the content area. Both site nav and content are displayed inline-block.
Everything now seems to be working.
Related
This is modalpopup.php
<h1>Pop Up</h1>
<button id="openBtn">Show Pop Up</button>
<div id="overlay">
<div id="modal">
<button id="closeBtn">Close</button>
</div>
</div>
<script src="js/modalpopup.js"></script>
This is javascript.php
<!DOCTYPE html>
<html>
<head>
<title>Javascript Projects</title>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="css/style.css" type="text/css">
</head>
<body>
<nav>
<ul>
<li>Counter App</li>
<li>Random Number Generator</li>
<li>Color Generator</li>
<li>Pop Up</li>
</ul>
</nav>
<?php
if(isset($_GET['counter'])){
include('counter.php');
}if(isset($_GET['randomnumber'])){
include('randomnumber.php');
}if(isset($_GET['hexgenerator'])){
include('hexgenerator.php');
}if(isset($_GET['popup'])){
include('modalpopup.php');
}
?>
</body>
</html>
This is style.css
body{
background-color: pink;
}
#overlay{
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
z-index 1;
background-color: plum;
}
#modal{
max-width: 600px;
height: 300px;
margin: auto;
background-color: white;
position: relative;
}
modalpopup.php is successfully linked to my style.css file because, I have the body background listed as pink in the main file its included in (javascript.php)and when I click the popup item of my menu the included modalpopup.php displays with the background as pink.
HOWEVER,
I used #overlay and I set the ID's properly but, for some reason when I try and add background colors to these items nothing displays. Any ideas what may be wrong ?
EDIT
I figured it out I am using XAAMP and I cleared my cache in safari and now it is working.
I want to place my footer at the bottom of the screen, have used a div with the "wrap" id on the body of my index, but the footer does not seem to stick below it.
Please help me with this issue.
I have included my index.php, footer.php and css.php files
index.php
<?php include('config/setup.php');?>
<!DOCTYPE html>
<html>
<head>
<title><?php echo $page['title'].' | '.$site_title; ?></title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<?php include('config/css.php'); ?>
<?php include('config/js.php'); ?>
</head>
<body>
<div id="wrap">
<?php include(D_TEMPLATE.'/navigation.php'); ?>
<div class="container">
<h1><?php echo $page['header'];?></h1>
<?php echo $page['body_formatted']; ?>
</div>
</div><!-- END wrap -->
<?php include(D_TEMPLATE.'/footer.php'); ?>
<div id="console-debug">
<pre>
<?php print_r($page); ?>
</pre>
</div>
</body>
</html>
footer.php
<footer id="footer">
<div class="container">
<p>This is my footer</p>
</div>
</footer><!-- END footer -->
css.php
<?php
//CSS:
?>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<!-- jQuery CSS -->
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<style>
html,
body {
height=100%;
/* The html and body elements cannot have any padding or margin */
}
/* Wrapper for page content to push down footer */
#wrap {
min-height: 100%;
height: auto;
/* Negative indent footer by its height */
margin: 0 auto -60px;
/* Pad bottom by footer height */
padding: 0 0 60px;
}
/* Set the fixed height of the footer here */
#footer {
width:100%;
height: 60px;
background-color: #f5f5f5;
}
#btn-debug {
position: absolute;
}
#console-debug{
position:absolute
}
</style>
For sticky footer you can just add this code
#footer{
position:fixed;
left:0px;
right:0px;
bottom:0px;
width:100%;
z-index:99;
min-height: ;/*According to requirement*/
background-color: ;/*set color whichever you want*/
}
You should try to set your position:fixed
So it won't move
Sorry if I sound like an idiot, but I'm relatively new to php.
Basically, I want to have a navbar that is synced across all the pages of my website.
What I have so far is this:
navbar.php
<?php
echo '<link rel="stylesheet" type="text/css" href="style.css"> -
<ul> -
<li><div id="nav"><span id="middle">Home</span></div> -
<li><div id="nav"><span id="middle">Art</span></div></li> -
<li><div id="nav"><span id="middle">Games</span></div></li> -
<li><div id="nav"><span id="middle">Wish List</span></div></li> -
<li><div id="nav"><span id="middle">Doctor Who</span></div></li> -
</ul>';
?>
index.html
<!DOCTYPE html>
<html>
<head>
<title>Colin Site</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="style.css">
<style>
p {
font-size: 150%;
}
</style>
</head>
<body>
<div class="navcontain">
<?php include "nav.php"; ?>
</div>
<br>
<br>
<br>
<h2>Welcome to my website, where I do random things</h2>
</body>
</html>
style.css
#navbar {
width: 100%;
}
#nav {
background-color: #848482;
width: 110px;
height: 40px;
text-align: center;
font-size: 100%;
color: white;
}
#navcontain {
position: relative;
top: 1%;
background-color: alpha;
width: 100%;
}
When I go to my website, there's just a blank space where my navbar should be.
Thanks in advance
You can't execute PHP code in a HTML file. Look at the extension of the file where you're including the navbar.php it's .html right? It's wrong then. In order to make it works rename it to index.php.
You have <?php include "nav.php"; ?> in your HTML, but according to your question the file is named navbar.php....
(yes, and your main file has to have a php ending, as #ReynierPM wrote)
It is not possible using php in a html file, though you can use AJAX / JQuery to load the php into the webpage, heres an axample
index.html
<html>
<head>
<script src="jquery.js"></script> <!-- You can get JQuery at http://jquery.com -->
</head>
<body>
<script>
$(document).ready(function(){
$.ajaxSetup({cache:false});
$("#nav").load("nav.php");
});
</script>
<div id="nav"></div>
</body>
</html>
I'm making a personal website and my CSS background-image doesn't seem to be working. Link to the site is http://distorts.me/new/ it seems that it doesn't find the image because it doesn't load, it is just a white area. (Sorry for the improper punctuation not very literate ) I'm using chrome.
style.css
body {
background-image: url("http://distorts.me/new/includes/background.png");
color: #C0C0C0;
}
.navbar {
margin-bottom: 0;
border-radius: 0;
}
.row.content {height: 450px}
.sidenav {
padding-top: 20px;
background-color: #808080;
height: 100%;
font-size: 20px;
}
a {
color: #C0C0C0;
text-decoration: none;
}
a:hover {
text-decoration: none;
color: #404040;
}
footer {
background-color: #555;
color: white;
padding: 15px;
}
#media screen and (max-width: 767px) {
.sidenav {
height: auto;
padding: 15px;
}
.row.content {height:auto;}
}
index.php
<html lang="en">
<!-- George M. -->
<!-- 2/26/16 -->
<?php
include 'includes/head.php';
?>
<body oncontextmenu="return false" background="includes/background.png">
<header class="container-fluid text-center" style="background-color: #404040;">
<h1>George M. - Welcome</h1>
</header>
<div class="container-fluid text-center">
<div class="row content">
<div class="col-sm-2 sidenav" style="height: 183%">
<p>Home</p>
<p>About Me</p>
<p>Services</p>
<p>Contact</p>
</div>
<div class="col-sm-8 text-middle">
<h1>Welcome</h1>
<p>test</p>
<hr>
<h3>Test</h3>
<p>test</p>
</div>
</div>
</div>
<footer id="foot" class="container-fluid text-center">
</footer>
<script type="text/javascript">
document.getElementById('foot').innerHTML =
"<p>© " + new Date().getFullYear() + " Distorts | George M. All rights reserved. <span style='color: #808070;'>Made by George M.</span>"
</script>
</body>
</html>
head.php
<head>
<title>George M | Home</title>
<link rel="shortcut icon" href="/favicon.ico">
<meta name="author" content="Distorts">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="style.css">
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js" type="text/javascript"></script>
</head>
When the code is right, the most likely problem to be causing issues is caching. Some web hosting servers have caching preconfiguration and since you are using PHP, you can simply send PHP headers that prevent caching - add these lines at the very top of your header.php:
<?php
header("Cache-Control: no-store, no-cache, must-revalidate, max-age=0");
header("Cache-Control: post-check=0, pre-check=0", false);
header("Pragma: no-cache");
?>
Another trick which can be used is timestamping / querystring - this approach basically forces the browser to reload the file since its URL is different than what it previously loaded. So naturally, we add the time variable (because time is always changing). Other developers use this method by adding a version query but that requires more maintenance.
Adding file timestamp with PHP:
<link rel="stylesheet" type="text/css" href="style.css?t=<?php echo date('YmdHis');">
Output
<link rel="stylesheet" type="text/css" href="style.css?t=20160227182425">
File version example
<link rel="stylesheet" type="text/css" href="style.css?v=2.1">
Also, keep in mind that CSS background paths are relative to the CSS file itself, not HTML document. Links in html are relative to html document, links in CSS are relative to CSS file. So the correct way to reference your image is by the following:
background-image: url("includes/background.png");
Try changing your background url to background src :
background-image: src ("http://distorts.me/new/includes/background.png");
Working fine on Chrome. Try changing your background url to:
background-image: src("/includes/background.png");
And place that image to that server rather than giving full path.
I have a problem with my Navbar and logo.
I have modified the Navbar that it is in a fix position on top with 100% width.
I put the logo function also out of the page div so it is above the page in the header area.
The problem is that when I set the nav-bar margin-top to 0 the logo is under the navbar.
When I set the logos margin-top to about 5rem it puts down the nav-bar to the place where the Logo starts.
Here are my codes for better understanding:
Header.php
<?php
/**
* The Header template for our theme
*
* Displays all of the <head> section and everything up till <div id="main">
*
* #package WordPress
* #subpackage Twenty_Twelve
* #since Twenty Twelve 1.0
*/
?><!DOCTYPE html>
<!--[if IE 7]>
<html class="ie ie7" <?php language_attributes(); ?>>
<![endif]-->
<!--[if IE 8]>
<html class="ie ie8" <?php language_attributes(); ?>>
<![endif]-->
<!--[if !(IE 7) | !(IE 8) ]><!-->
<html <?php language_attributes(); ?>>
<!--<![endif]-->
<head>
<meta charset="<?php bloginfo( 'charset' ); ?>" />
<meta name="viewport" content="width=device-width" />
<title><?php wp_title( '|', true, 'right' ); ?></title>
<link rel="profile" href="http://gmpg.org/xfn/11" />
<link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>" />
<?php // Loads HTML5 JavaScript file to add support for HTML5 elements in older IE versions. ?>
<!--[if lt IE 9]>
<script src="<?php echo get_template_directory_uri(); ?>/js/html5.js" type="text/javascript"></script>
<![endif]-->
<?php wp_head(); ?>
</head>
<body <?php body_class(); ?>>
<div id="navbar" class="navbar">
<nav id="site-navigation" class="main-navigation" role="navigation">
<h3 class="menu-toggle"><?php _e( 'Menu', 'twentytwelve' ); ?></h3>
<a class="assistive-text" href="#content" title="<?php esc_attr_e( 'Skip to content', 'twentytwelve' ); ?>"><?php _e( 'Skip to content', 'twentytwelve' ); ?></a>
<?php wp_nav_menu( array( 'theme_location' => 'primary', 'menu_class' => 'nav-menu' ) ); ?>
</nav><!-- #site-navigation -->
</div>
<div id="mainlogo" class="mainlogo">
<?php if ( get_header_image() ) : ?>
<img src="<?php header_image(); ?>" class="header-image" width="<?php echo get_custom_header()->width; ?>" height="<?php echo get_custom_header()->height; ?>" alt="" />
<?php endif; ?>
</div id="mainlogo" class="mainlogo">
<div id="page" class="hfeed site">
<header id="masthead" class="site-header" role="banner">
<div id="slider" class="slider">
<?php layerslider(1) ?>
</div>
</header><!-- #masthead -->
<div id="main" class="wrapper">
Style.css
.header-image {
display: block;
margin-top: 0rem;
margin-left: auto;
margin-right: auto;
}
/* Navigation Menu */
.main-navigation {
margin-top: 0p;
margin-top: 0rem;
position: fixed;
z-index: 999;
opacity:1;
filter:alpha(opacity=100);
width: 100%;
margin-top: 0px;
margin-top: 0rem;
text-align: center;
}
.main-navigation li {
margin-top: 24px;
margin-top: 1.714285714rem;
font-size: 28px;
font-size: 1rem;
line-height: 1.42857143;
}
.main-navigation a {
color: #5e5e5e;
}
.main-navigation a:hover,
.main-navigation a:focus {
color: #FFF;
}
.main-navigation ul.nav-menu,
.main-navigation div.nav-menu > ul {
display: none;
margin-left: 3rem;
}
.main-navigation ul.nav-menu.toggled-on,
.menu-toggle {
display: inline-block;
}
/* Menu Background */
.nav-menu {
background-image: url("img/menu_repeat.png");
padding-left: 0rem;
padding-right: 0rem;
}
.slider {
margin-top: 15px;
margin-top: 1rem;
}
.mainlogo {
margin-top: 50px;
margin-top: 5rem;
}
.navbar {
margin-top: 0px;
margin-top: 0rem;
}
Use absolute positioning. Parent of nav should be relative positioned, and then the absolute positioned nav will be positioned in relation to that parent.
EDIT:
http://jsfiddle.net/y54m874c/
See this fiddle. In there I relatively positioned header class in which I put logo and navigation. Navigation is absolutely positioned in relation to that container. If I put nav > ul relatively positioned, and then put absolute position on li elements, then I could move them around in that unsorted list that contains them. If I removed the relative positioning in the unsorted list, then the list items would look for the next container they're in and watch what is relatively positioned, and use that as a reference.
Relative position by itself doesn't have to mean a thing. You can just say an element has a relative position, and then the inside elements will position according to him, and that element can stay where it is. But, you could also use relative positioning to position an element relative to itself.
Fixed position looks the height and the width of the window browser, and that is the 'reference frame' for it. It will move in relation to it. Static position is the default and it follows the flow of the html elements.
You could also use floats, but then you couldn't position elements to your liking.
The middle ground is to find when it's good for you to use manual positioning, and when to use floats.
Ok i got it.
I set #navbar to fixed and main-menu to fixed too.
seems to work as expectet
Thanks to all.