I am designing a website/software using PHP. I have written the code for a few pages, however when I include the footer.php file, the HTML text alignment seems to be changing and I'm not sure why. I am also attaching the images for better understanding. This is happening for all the pages on which I'm including the footer, I have mentioned the code below for footer from the image.
Before Adding the Footer the text is center aligned
After including footer.php the text automatically becomes left aligned
footer.php
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="assets/css/bootstrap.min.css">
<link rel="shortcut icon" href="assets/images/leaf.png">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
i {
width: 15px;
height: 15px;
}
</style>
</head>
<body>
<!-- Footer -->
<footer class="bg-dark text-center text-white mb-4">
<!-- Grid container -->
<div class="container p-4">
<!-- Section: Social media -->
<section class="mb-4">
<!-- Facebook -->
<a title="Facebook" class="btn btn-outline-light btn-floating m-1" href="https://www.facebook.com/SaiNirmanBiocoal" role="button"
><i class="fa fa-facebook"></i
></a>
</section>
<!-- Section: Social media -->
<!-- Section: Form -->
<section class="mb-4">
<img src="assets/images/SNB-latest.png" style="height:50px;width: auto;" alt="Sai Nirman Biocoal Logo">
</section>
<!-- Section: Form -->
<!-- Section: Text -->
<section class="mb-4">
<p>
Sai Nirman Biocoal<br>
"Fueling the Future with Sustainable Energy"
</p>
</section><br>
<!-- Section: Text -->
<!-- Section: Links -->
<section class="">
<!--Grid row-->
<div class="row ">
<!--Grid column-->
<div class="col-lg-3 col-md-6 mb-4 mb-md-0">
<h5 class="text-uppercase">Customer Care</h5>
<ul class="list-unstyled mb-0">
<li>
Contact Us
</li>
<li>
FAQs
</li>
<li>
Privacy Policy
</li>
<li>
Terms of Service
</li>
</ul>
</div>
<!--Grid column-->
<!--Grid column-->
<div class="col-lg-3 col-md-6 mb-4 mb-md-0">
<h5 class="text-uppercase">SNB Website</h5>
<ul class="list-unstyled mb-0">
<li>
About Us
</li>
<li>
Products
</li>
<li>
Careers
</li>
<li>
Contact
</li>
</ul>
</div>
<!--Grid column-->
<!--Grid column-->
<div class="col-lg-3 col-md-6 mb-4 mb-md-0">
<h5 class="text-uppercase">My Account</h5>
<ul class="list-unstyled mb-0">
<li>
Sign Out
</li>
<li>
Reset Password
</li>
<li>
Dashboard
</li>
<li>
Ledger
</li>
</ul>
</div>
<!--Grid column-->
</div>
<!--Grid row-->
</section>
<!-- Section: Links -->
</div>
<!-- Grid container -->
<div class="text-center p-3" style="background-color: rgba(0, 0, 0, 0.2);">
<a class="text-white" href="https://www.sainirmanbiocoal.com/">sainirmanbiocoal.com</a>
</div>
</footer>
<!-- Footer -->
<script src="assets/vendors/jquery/jquery-3.4.1.js"></script>
<script src="assets/vendors/bootstrap/bootstrap.bundle.js"></script>
</body>
</html>
I tried to add style tag in footer.php and define the html and body properties as center align since the problem seems to be due to the footer code for some reason but it does not work. I even tried including header.php again at the end instead of footer.php and the same problem occurs, so I'm not really sure as to what exactly might be the issue.
Related
I have used $row variable that contains database information and I want to repeat the div element with class
"col-md-3 col-sm-6" to repeat it self until the end of array.
I just want that every products details like product's image, name and price
should be display in one line and after 4 products it should display on the next line
<?php
$con = mysqli_connect("localhost","root","","grocerystore");
$sql = "SELECT * FROM main_products";
$result = mysqli_query($con,$sql);
session_start();
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="style.css">
<title>Instamart Grocery Store</title>
</head>
<body>
<div class="navbar navbar-inverse">
<div class="container">
<div class="navbar-header">
Instamart Grocery
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="myNavbar"></button>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<ul class="nav navbar-nav navbar-right">
<!-- <li><span class="glyphicon glyphicon-log-in"></span> setting</li>
<li><span class="glyphicon glyphicon-log-in"></span> logout</li> -->
<li>
<div class="dropdown">
<button class="dropbtn"><span class="glyphicon glyphicon-user"></button>
<div class="dropdown-content">
<center>
<h4>
<?php echo $_SESSION['user_name'];?>
</h4>
</center>
Your Orders
Log-out
Change password
Your cart
</div>
</div>
</li>
</ul>
</div>
</div>
<div class="container">
<div class="jumbotron">
<h1>Let's be Healty together</h1>
<p>We have best choises of all products</p>
</div>
<div class="row">
<div class="col-md-3 col-sm-6">
<!-- <div class="thumbnail"> -->
<div class="caption">
<a href="dairy.php">
<h3><button class="btn btn-primary btn-block">Dairy Products</button></h3>
</a>
</div>
<!-- </div> -->
</div>
<div class="col-md-3 col-sm-6">
<!-- <div class="thumbnail"> -->
<div class="caption">
<div class="caption">
<h3 class="temp"><button class="btn btn-primary btn-block">Fresh Vegetable</button></h3>
</div>
</div>
<!-- </div> -->
</div>
<div class="col-md-3 col-sm-6">
<!-- <div class="thumbnail"> -->
<div class="caption">
<div class="caption">
<h3><button class="btn btn-primary btn-block">Fresh Fruits</button></h3>
</div>
</div>
<!-- </div> -->
</div>
<div class="col-md-3 col-sm-6">
<!-- <div class="thumbnail"> -->
<div class="caption">
<div class="caption">
<h3><button class="btn btn-primary btn-block">Daily Needs</button></h3>
</div>
</div>
<!-- </div> -->
</div>
</div>
</div>
<div class="container">
<div class="row row1">
<?php while($row = mysqli_fetch_array($result))
{
$image = $row['img_dir'];
?>
<div class="col-md-3 col-sm-6">
<div class="thumbnail">
<?php echo"<img src='{$image}'>";?>
<div>
<h3>
<?php echo $row['product_name'];?>
</h3>
<p>Price:
<?php echo $row['price'];?>
</p>
<a href="cart.php">
<button" class="btn btn-primary btn-block">Add to cart</button>
</a>
</div>
</div>
</div>
<?php } ?>
</div>
</div>
</body>
</html>
the images are displaying like this
My code works just fine if it is in html file, the header and footer codes are in the products page. The problem is if I make it in php file, the side navbar won't work, I already tried moving the body tag in the products page but it still doesn't work. Appreciate any help :)
header-ee.php
<html>
<head>
<?php
include('parameters.php');
?>
<title> <?php echo $page_title; ?> </title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="<?= $server_addr ?>/common/css/bootstrap.css">
<script src="<?= $server_addr ?>/common/js/jquery-3.2.1.js"></script>
<script src="<?= $server_addr ?>/common/js/bootstrap.js"></script>
<script src="js/ee-home.js"></script>
<link rel="stylesheet" href="css/ee-home.css">
</head>
<body data-spy="scroll" data-target="#myScrollspy" data-offset="20">
<!--Start header-->
<nav class="navbar navbar-default navigation-bar">
<div class="container-fluid">
<div class="row">
<div class="navbar-header col-xs-12 col-sm-12 col-md-12 col-lg-6 centered-a">
<div class="row">
<div class="col-sm-3 centered-a">
<img src="img/ee-logo.png">
</div>
<div class="col-sm-9">
<h1 id="nav-brand">
EQUIPMENT ENGINEERS, INC.</br>
</h1>
<h1 id="nav-brand-subtitle">
<small>
Your Reliable Solutions Partner
</small>
</h1>
</div>
</div>
<a href="#">
<span class="link-spanner"></span>
</a>
</div>
<div class="navbar-header col-lg-6 visible-lg centered-a">
<div class="row centered-a" id="nav-box">
<div class="col-lg-2 centered-a">
<a href="#">
<p>Home</p>
<span class="link-spanner"></span>
<a>
</div>
<div class="col-lg-2 centered-a">
<a href="#">
<p>Our Company</p>
<span class="link-spanner"></span>
<a>
</div>
<div class="col-lg-2 centered-a">
<a href="#">
<p>SCM</p>
<span class="link-spanner"></span>
<a>
</div>
<div class="col-lg-2 centered-a">
<a href="#">
<p>Products</p>
<span class="link-spanner"></span>
<a>
</div>
<div class="col-lg-2 centered-a">
<a href="#">
<p>Inquiries</p>
<span class="link-spanner"></span>
<a>
</div>
<div class="col-lg-2 centered-a" id="last-item">
<a href="#">
<p">Supplier Accreditation</p>
<span class="link-spanner"></span>
<a>
</div>
</div>
</div>
</div>
<div class="panel-group col-md-12 centered-a hidden-lg">
<div class="panel panel-default">
<div class="panel-heading" >
<h2 class="panel-title centered-a">
<span class="glyphicon glyphicon-triangle-bottom"></span>
<a data-toggle="collapse" href="#collapse1">
<span class="link-spanner"></span>
<a>
</h2>
</div>
<div id="collapse1" class="panel-collapse collapse">
<ul class="list-group">
<li class="list-group-item">
Home
<span class="link-spanner"></span>
</li>
<li class="list-group-item">
Our Company
<span class="link-spanner"></span>
</li>
<li class="list-group-item">
SCM
<span class="link-spanner"></span>
</li>
<li class="list-group-item">
Products
<span class="link-spanner"></span>
</li>
<li class="list-group-item">
Inquiries
<span class="link-spanner"></span>
</li>
<li class="list-group-item">
Supplier Accreditation
<span class="link-spanner"></span>
</li>
</ul>
</div>
</div>
</div>
</div>
</nav>
<!--End header-->
products.php
<?php include("includes/header-ee.php"); ?>
<link rel="stylesheet" href="products.css"></link>
<div class="container-fluid">
<div class="row">
<!--Sidebar-->
<nav class="col-md-3" id="myScrollspy">
<span>Product Lineup</span>
<ul class="nav nav-pills nav-stacked">
<li class="active">Section 1</li>
<li>Section 2</li>
<li>Section 3</li>
</ul>
</nav>
<!--Content-->
<div class="col-md-9">
<div id="section1">
<div class="bg-franklin bg-img centered-a">
<div class="caption" style="border:10px; border-color:white;">
<img src="img/products/franklin.png" style="width:50%; background-color:white;"></img>
</div>
</div>
<p style="margin-left:10px; margin-right:10px; font-size: 1.2em; text-align:left;padding: 0% 3%;">
</br>
</br></br>
</br></br>
</p>
</div>
<div id="section2">
<div class="bg-franklin bg-img centered-a">
<div class="caption" style="border:10px; border-color:white;">
<img src="img/products/franklin.png" style="width:50%; background-color:white;"></img>
</div>
</div>
<p style="margin-left:10px; margin-right:10px; font-size: 1.2em; text-align:left;padding: 0% 3%;">
</br>
</br></br>
</br></br>
</p>
</div>
</div>
</div>
</div>
<?php include("includes/footer-ee.php"); ?>
footer-ee.php
</body>
<footer>
<div class="footer-blk row">
<div style="float: none;text-align: center;">
Home | Terms and Conditions | Privacy Policy
</div>
<div style="float: none;text-align: center;">
</div>
</div>
</footer>
I am trying to use a simple <img src= tag to link to a favicon.ico in my header.php file and a .png logo in my index.php file in my WordPress theme, but without any luck. I've tested the link by replacing it with a hyperlink to an image hosted online, which works and proves that the <img src= tag isn't broken, but obviously I would prefer to be able to have the images linked within an internal img folder in the theme. The background image I have used in my site (which is linked in the bootstrap.css and is in the same 'img' folder as the two images I am trying to link to) works perfectly. I've tried copying the formatting of that href link but it doesn't seem to work either.
I've tried many variations of 'img/favicon.ico', '/img/favicon.ico', '../img/favicon.ico' but none of them worked to link to the image files in both cases.
Here is my code for the header.php file:
<?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 wpbootstrap-sofa
*/
?><!DOCTYPE html>
<html <?php language_attributes(); ?>>
<head>
<meta charset="<?php bloginfo( 'charset' ); ?>">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="profile" href="http://gmpg.org/xfn/11">
<link rel="icon" href='../img/favicon.ico'>
<!-- Bootstrap core CSS -->
<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
<!-- Custom styles for this template -->
<!-- Just for debugging purposes. Don't actually copy these 2 lines! -->
<!--[if lt IE 9]><script src="../../assets/js/ie8-responsive-file-warning.js"></script><![endif]-->
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
<?php wp_head(); ?>
</head>
<body>
<div class="background">
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="index.html">home</a>
</div>
<div id="navbar" class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class="active">home
</li>
<li>about
</li>
<li>blog posts
</li>
<li>submit
</li>
<li>events
</li>
<li>mailing list
</li>
<li>contact
</li>
<li>store
</li>
</ul>
</div>
<!--/.collapse navbar-collapse -->
</div>
</nav>
<div class="container">
And here is the code for the index.php file:
<?php
/**
* The main template file
*
* This is the most generic template file in a WordPress theme
* and one of the two required files for a theme (the other being style.css).
* It is used to display a page when nothing more specific matches a query.
* E.g., it puts together the home page when no home.php file exists.
*
* #link https://codex.wordpress.org/Template_Hierarchy
*
* #package wpbootstrap-sofa
*/
get_header(); ?>
<div class="starter-template">
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-3 col-lg-3 col-xl-3">
<div class="center-block">
<a href="index.html">
<img src='../img/sofa-logo.png' class="img-responsive center-block" alt="UQ SoFA logo">
</a>
</div>
<!-- /.center-block -->
</div>
</div>
<div class="row">
<div class="col-xs-0 col-sm-0 col-md-4 col-lg-4 col-xl-4">
<div class="navbar-collapse collapse sidebar-navbar-collapse">
<ul class="nav navbar-nav">
<li class="active">home
</li>
<li>about
</li>
<li>blog posts
</li>
<li>submit
</li>
<li>events
</li>
<li>mailing list
</li>
<li>contact
</li>
<li>store
</li>
</ul>
</div>
<!--/.collapse navbar-collapse -->
</div>
<!-- /.col-xs-0 col-sm-0 col-md-4 col-lg-4 col-xl-4 -->
<div class="col-xs-12 col-sm-12 col-md-4 col-lg-4 col-xl-4">
<div class="panel panel-default">
<div class="panel-body">SoFA at Market Day</div>
</div>
<!-- /.panel panel-default-->
<div class="panel panel-default">
<div class="panel-body">Cut Thumb ARI</div>
</div>
<!-- /.panel panel-default-->
<div class="panel panel-default">
<div class="panel-body">GoMA Talks</div>
</div>
<!-- /.panel panel-default-->
</div>
<!-- /.col-xs-12 col-sm-12 col-md-4 col-lg-4 col-xl-4-->
<div class="col-xs-12 col-sm-12 col-md-4 col-lg-4 col-xl-4">
<div class="panel panel-default">
<div class="panel-body">Interview with...</div>
</div>
<!-- /.panel panel-default-->
<div class="panel panel-default">
<div class="panel-body">Lecture by...</div>
</div>
<!-- /.panel panel-default-->
<div class="panel panel-default">
<div class="panel-body">Post #474</div>
</div>
<!-- /.panel panel-default-->
</div>
<!-- /.col-xs-12 col-sm-12 col-md-4 col-lg-4 col-xl-4-->
</div>
<!-- /.row-->
</div>
<!-- /.starter-template-->
</div>
<!-- /.container -->
</div>
<!-- /.background -->
<?php
get_footer();?>
Linked here is a screenshot of the configuration of my theme's folders, including the 'img' folder where the images are contained.
Any help that could be provided would be much appreciated.
Please use it as follow :--
<img src="<?php echo get_template_directory_uri(); ?>/img/favicon.ico">
I hope it will works for you.
You are better to use automatic path, if your image is in your template directory for example :
<img src="<?php echo get_bloginfo("template_directory"); ?>/img/favicon.ico" />
You have to remember that the path is relative to the website address, when using /path/to/file, this will be absolute from the domain, so from the root in the website on server side. When using path/to/file, it will be relative to the web page, not the PHP file. This means if you have http://example.com/category/page, the server will try to find <websiteroot>/category/page/path/to/file.
I found the answer by using the method Alexandre suggested and then changing <link rel="icon" to <link rel="shortcut icon"
I am trying to fetch a username from the database and so I can fetch the json from the person. The code I currently have gave me an error 500 and probably cause of the $json...
Can someone help me find a solution....
<?php
session_start();
include_once 'dbconnect.php';
if(!isset($_SESSION['user']))
{
header("Location: index.php");
}
$res=mysql_query("SELECT * FROM users WHERE user_id=".$_SESSION['user']);
$userRow=mysql_fetch_array($res);
?>
<?php
$json = file_get_contents('http://api.formice.com/mouse/stats.json?n= <?php echo $userRow['mouse']; ?> &l=en');
$obj = json_decode($json);
?>
<?php
$json = file_get_contents('https://api801.herokuapp.com/get/mice/<?php echo $userRow['mouse']; ?> ');
$objj = json_decode($json);
?>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title><?php echo $obj->name; ?> | CheeseStatz</title>
<link rel="shortcut icon" href="Favicon.ico" />
<!-- Tell the browser to be responsive to screen width -->
<meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
<!-- Bootstrap 3.3.5 -->
<link rel="stylesheet" href="../../bootstrap/css/bootstrap.min.css">
<!-- Font Awesome -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
<!-- Ionicons -->
<link rel="stylesheet" href="https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css">
<!-- Theme style -->
<link rel="stylesheet" href="../../dist/css/AdminLTE.min.css">
<!-- AdminLTE Skins. Choose a skin from the css/skins
folder instead of downloading all of them to reduce the load. -->
<link rel="stylesheet" href="../../dist/css/skins/_all-skins.min.css">
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<!-- ADD THE CLASS layout-top-nav TO REMOVE THE SIDEBAR. -->
<body class="hold-transition skin-blue layout-top-nav">
<div class="wrapper">
<header class="main-header">
<nav class="navbar navbar-static-top">
<div class="container">
<div class="navbar-header">
<b>Cheese</b>Statz
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-collapse">
<i class="fa fa-bars"></i>
</button>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse pull-left" id="navbar-collapse">
<ul class="nav navbar-nav">
<li class="active">Home <span class="sr-only">(current)</span></li>
<li>Transformice</li>
<li class="dropdown">
Stats<span class="caret"></span>
<ul class="dropdown-menu" role="menu">
<li>Mice Stats</li>
<li>Racing Stats</li>
<li>Bootcamp Stats</li>
<li>Survivor Stats</li>
<li class="divider"></li>
<li>Run for Cheese Stats</li>
<li class="divider"></li>
<li>Your tribe Stats</li>
</ul>
</li>
</ul>
<form class="navbar-form navbar-left" role="search">
<div class="form-group">
<input type="text" class="form-control" id="navbar-search-input" placeholder="Search">
</div>
</form>
</div>
<!-- /.navbar-collapse -->
<!-- Navbar Right Menu -->
<div class="navbar-custom-menu">
<ul class="nav navbar-nav">
<!-- Messages: style can be found in dropdown.less-->
<li class="dropdown messages-menu">
<!-- User Account Menu -->
<li class="dropdown user user-menu">
<!-- Menu Toggle Button -->
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
<!-- The user image in the navbar-->
<img src="http://outil.derpolino.shost.ca/avatar/avatar.php?p=cheesezwheel" class="user-image" alt="User Image">
<!-- hidden-xs hides the username on small devices so only the image appears. -->
<span class="hidden-xs"> <?php echo $obj->name; ?> </span>
</a>
<ul class="dropdown-menu">
<!-- The user image in the menu -->
<li class="user-header">
<img src="http://outil.derpolino.shost.ca/avatar/avatar.php?p=cheesezwheel" class="img-circle" alt="User Image">
<p>
<?php echo $obj->name; ?> - <?php echo $obj->title; ?>
<small>Level: <?php echo $objj->level; ?> </small>
</p>
</li>
<!-- Menu Body -->
<li class="user-body">
<div class="row">
<div class="col-xs-4 text-center">
Blog
</div>
<div class="col-xs-4 text-center">
Help
</div>
<div class="col-xs-4 text-center">
Log
</div>
</div>
<!-- /.row -->
</li>
<!-- Menu Footer-->
<li class="user-footer">
<div class="pull-left">
Forum
</div>
<div class="pull-right">
Sign out
</div>
</li>
</ul>
</li>
</ul>
</div>
<!-- /.navbar-custom-menu -->
</div>
<!-- /.container-fluid -->
</nav>
</header>
<!-- Full Width Column -->
<div class="content-wrapper">
<div class="container">
<!-- Content Header (Page header) -->
<section class="content-header">
<h1>
CheeseStatz
<small>Transformice Api v.1.0.0</small>
</h1>
<ol class="breadcrumb">
<li><i class="fa fa-dashboard"></i> Home</li>
<li><?php echo $obj->name; ?></li>
<li class="active">Welcome</li>
</ol>
</section>
<!-- Main content -->
<section class="content">
<div class="callout callout-info">
<h4>Welcome <?php echo $obj->name; ?>!</h4>
<p></p>
<!-- /.box-body -->
</div>
<!-- /.box -->
</section>
<!-- /.content -->
</div>
<!-- /.container -->
</div>
<!-- /.content-wrapper -->
<footer class="main-footer">
<div class="container">
<div class="pull-right hidden-xs">
<b>Version</b> 1.0.0
</div>
<strong>Copyright © 2015 Cheesezwheel.</strong> All rights
reserved.
</div>
<!-- /.container -->
</footer>
</div>
<!-- ./wrapper -->
<!-- jQuery 2.1.4 -->
<script src="../../plugins/jQuery/jQuery-2.1.4.min.js"></script>
<!-- Bootstrap 3.3.5 -->
<script src="../../bootstrap/js/bootstrap.min.js"></script>
<!-- SlimScroll -->
<script src="../../plugins/slimScroll/jquery.slimscroll.min.js"></script>
<!-- FastClick -->
<script src="../../plugins/fastclick/fastclick.js"></script>
<!-- AdminLTE App -->
<script src="../../dist/js/app.min.js"></script>
<!-- AdminLTE for demo purposes -->
<script src="../../dist/js/demo.js"></script>
</body>
</html>
I just dont' see why you open and close your php syntax so much
in your link (file_get_contents) you could just use the variables, no need to echo them
check how many result you get from running that query to see if the query is correct
your using ' in your file_get_comments statement, meaning everything after is not run but just text, so it will open
n= php echo $userRow['mouse'] instead of the db value of mouse like n=12
You need:
'http://api.formice.com/mouse/stats.json?n=' . $userRow['mouse'] . '&l=en'
http://www.levybusinesslaw.com/index.php
The nav dropdown only works when the page is scrolled down. I've tried everything to make it visible, but nothing seems to work. Any advice on how to fix this issue is greatly appreciated. Thanks.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="keywords" content="" />
<meta name="description" content="">
<meta name="author" content="">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<!-- Title -->
<!-- Favicon -->
<link rel="shortcut icon" type="image/x-icon" href="favicon.ico">
<!-- Google Fonts -->
<link href='http://fonts.googleapis.com/css?family=Montserrat:400,700%7COpen+Sans:400italic,700italic,400,700' rel='stylesheet' type='text/css'>
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/font-awesome.min.css" rel="stylesheet">
<link href="//cdnjs.cloudflare.com/ajax/libs/font-awesome/4.0.1/css/font-awesome.css" rel="stylesheet">
<!-- Template -->
<link href="style.css" rel="stylesheet">
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js">
</script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js">
</script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<![endif]-->
</head >
<!-- ==================================================================================================================================
HEADER
======================================================================================================================================= -->
<section class="home-header">
<!-- header -->
<div class="header">
<div class="container">
<div class="row">
<div class="header-top">
<!-- logo -->
<div class="col-md-4 col-sm-4 col-xs-5">
<div class="logo">
<a href="index.html">
<img src="images/logo.png" class="img-responsive" title="" alt="" />
</a>
</div>
</div>
<!-- .logo -->
<!-- quick contact -->
<div class="col-md-8 col-sm-8 col-xs-7">
<div class="quick-contact text-right">
<p class="phone">410.998.2001</p>
<p>Serving The State of Maryland</p>
</div>
</div>
<!-- .quick contact -->
</div>
</div>
</div>
</div>
<!-- .header -->
<!-- intro content -->
<div class="container">
<div class="row">
<!-- content -->
<div class="col-md-12">
<div class="intro-content text-center">
<h2 class="white-text">
<strong>
<span class="rotate">NEIL LEVY</span>
<br />BUSINESS LAWYER<br>IN BALTIMORE, MD</strong>
</h2>
<a href="mailto:nlevy#lmcplaw.com?Subject=Inquiry" class="btn btn-default button-white">Contact Me
</a>
</div>
</div>
<!-- .content -->
</div>
</div>
<!-- .intro content -->
<!-- Popout Slider Menu -->
<div class="container-popup">
<div class="popup">
<div class="popup-overlay">
<i class="play"></i>
<i class="play"></i>
</div>
<div class="popup-content">
<div class="popup-top-content">
<div class="popup-top-content-inner">
<div class="popup-product">
<div class="popup-top-title">
<h6>How can I help you?</h6>
</div>
</div>
</div>
</div>
<div class="popup-add-content">
<div class="popup-add-content-inner">
<div class="section">
<h6>Services</h6>
<ul>
<li><a href="http://levybusinesslaw.com/#practice" >Business</a></li>
<li><a href="http://levybusinesslaw.com/#practice" >Estate Planning</a></li>
<li><a href="http://levybusinesslaw.com/#practice/" >Real Estate</a></li>
</ul>
</div>
<div class="section">
Contact Me
</div>
</div>
</div>
</div>
</div>
<div class="popup-menu popout-menu">
<ul>
<li><i class="fa fa-facebook-square" style="font-size:3em"></i></li>
<li><i class="fa fa-linkedin-square" style="font-size:3em"></i></li>
</ul>
</div>
</div>
<script>
$("window").load(function() {
$("#body").removeClass("preload");
});
$(".share-btn").mouseenter(function() {
setTimeout(function() {
$(".item-menu").addClass("visible")
}, 500);
});
$(".share-btn").mouseleave(function() {
setTimeout(function() {
$(".item-menu").removeClass("visible")
}, 500);
});
$(".item-menu").hover(function() {
$(".item-menu").addClass("visible")
});
$(".item-menu").mouseleave(function() {
setTimeout(function() {
$(".item-menu").removeClass("visible")
}, 500);
});
$(".container-item").hover(function() {
setTimeout(function() {
$(".container-item").css("z-index","1000")
}, 500);
});
</script>
<!-- Popout Slider Menu -->
<!-- navigation scrolled -->
<div class="main-nav scrolled">
<nav class="navbar navbar-default" role="navigation">
<div class="container_toggle container">
<div class="navbar-header">
<button class="navbar-toggle button-white menu" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<i class="fa fa-bars"></i>
</button>
<!-- smaller logo -->
<a class="navbar-brand" href="#">
<img src="images/logo.png" class="img-responsive" title="" alt="" />
</a>
<!-- .smaller logo -->
</div>
<div class="collapse navbar-collapse" >
<!-- main nav -->
<ul class="nav navbar-nav">
<li>HOME</li>
<li>
ABOUT
</li>
<li>
COMMUNITY
</li>
<li class="dropdown">
PRACTICE AREAS <span class="caret"></span>
<ul class="dropdown-menu" role="menu">
<li>Business</li>
<li>Estate Planning</li>
<li>Real Estate</li>
<li class="divider"></li>
<li>Other</li>
</ul>
</li>
<li>
CONTACT
</li>
<li>
BLOG
</li>
</ul>
<!-- .main nav -->
<!-- quick contact -->
<ul class="nav navbar-nav navbar-right hidden-xs">
<li>
<div class="quick-contact">
<p class="phone">410.998.2001</p>
</div>
</li>
</ul>
<!-- quick contact -->
</div>
</div>
</nav>
</div>
<!-- .navigation scrolled -->
</section>
Just take overflow:hidden; off of .home-header.
Because the dropdown-menu has position:absolute; it is not involved in sizing .home-header so is not displayed.