Ever Expanding Div to fit PHP/MySQL content - php

I've created a blog main page using PHP and have included a sidebar and main area for the posts. When I add any more content to either the sidebar or the main content/posts area the content expands over the main div and the main div doesn't expand. How can I go about creating a div tag that will expand according to the content in the inner two divs.
Main Page:
<html>
<head>
<meta name="keywords" content="Mac user Ultan Casey TheCompuGeeks UltanKC">
<meta name="description" content="The Home of one of Ireland's budding Technology Reviewers Ultan Casey">
<title>Ultan.me - Home of Ultan Casey</title>
<link rel="stylesheet" href="css/styles.css" type="text/css" />
<style>
<!--
a {text-decoration:none}
//-->
</style>
</head>
<div id="main">
<!-- Menu Start -->
<div id="menu">
<ul>
<li>home</li>
<li>about me</li>
<li>archives</li>
<li>contact</li>
<li>gallery</li>
<div id="search">
<input type="text" name="q" value="search" />
<input type="button" name="Submit" value="Submit" />
</div>
</ul>
</div>
<!-- Menu End -->
<img src="images/banner.png" />
<div id="posts">
<?php
mysql_connect ('localhost', 'root', 'root') ;
mysql_select_db ('ultankc');
$blog_postnumber = 5;
if (!isset($_GET['page']) || !is_numeric($_GET['page'])) {
$page = 1;
}
else {
$page = (int)$_GET['page'];
}
$from = (($page * $blog_postnumber) - $blog_postnumber);
$sql = "SELECT * FROM php_blog ORDER BY timestamp DESC LIMIT $from, $blog_postnumber";
$result = mysql_query($sql) or print ("Can't select entries from table php_blog.<br />" . $sql . "<br />" . mysql_error());
while($row = mysql_fetch_array($result)) {
$date = date("l F d Y", $row['timestamp']);
$title = stripslashes($row['title']);
$entry = stripslashes($row['entry']);
$id = $row['id'];
$get_categories = mysql_query("SELECT * FROM php_blog_categories WHERE `category_id` = $row[category]");
$category = mysql_fetch_array($get_categories);
?>
<p><?php echo "<p><strong>" . $title . "</strong></p>"; ?><br /><br />
<?php echo $entry; ?><br /><br />
<p>Posted in <?php echo $category['category_name']; ?> on <?php echo $date; ?></p>
<hr /></p>
<?php
}
?>
<div id="pages">
<?php
$total_results = mysql_fetch_array(mysql_query("SELECT COUNT(*) AS num FROM php_blog"));
$total_pages = ceil($total_results['num'] / $blog_postnumber);
if ($page > 1) {
$prev = ($page - 1);
echo "<< Newer ";
}
for($i = 1; $i <= $total_pages; $i++) {
if ($page == $i) {
echo "$i ";
}
else {
echo "$i ";
}
}
if ($page < $total_pages) {
$next = ($page + 1);
echo "Older >>";
}
?>
</div>
</div>
<!-- Sidebar Start -->
<div class="sidebar">
<!-- Item 1 -->
<div id="side-item">
<h2>
<a href="http://www.dailybooth.com/UltanCasey">
<img src="images/db-icon.jpg">Dailybooth
</a></h2>
<div id="side-item-content">
<center>
<img src="http://dailybooth.com/UltanCasey/latest/medium.jpg" />
</center>
</div>
</div>
<!-- Item 2 -->
<div id="side-item">
<h2><img src="images/connect.jpg" />Connect</h2>
</div>
<div id="side-item-content">
<div class="tweet-title"><p>Latest Tweet:</p></div>
<div id="tweet">
<?php
function getTwitterStatus($userid){
$url = "http://twitter.com/statuses/user_timeline/$userid.xml?count=1";
$xml = simplexml_load_file($url) or die("could not connect");
foreach($xml->status as $status){
$text = $status->text;
}
echo $text;
}
getTwitterStatus("UltanKC");
?>
</div>
<br>
<ul>
<li id="social">YouTube</li>
<li id="social">Twitter</li>
<li id="social">LastFM</li>
<li id="social">Email</li>
</ul>
</div>
<!-- Item 2 End-->
<div id="side-item">
<h2>Archives</h2>
</div>
<div id="side-item-content">
<?php
mysql_connect ('localhost', 'root', 'root') ;
mysql_select_db ('ultankc');
$result = mysql_query("SELECT FROM_UNIXTIME(timestamp, '%Y') AS get_year, COUNT(*) AS entries FROM php_blog GROUP BY get_year");
while ($row = mysql_fetch_array($result)) {
$get_year = $row['get_year'];
$entries = $row['entries'];
echo "Entries from " . $get_year . " (" . $entries . ")<br />";
}
?>
<?php
mysql_connect ('localhost', 'root', 'root') ;
mysql_select_db ('ultankc');
$result1 = mysql_query("SELECT * FROM php_blog_categories ORDER BY category_name ASC");
while($row = mysql_fetch_array($result1)) {
$result2 = mysql_query("SELECT COUNT(`id`) AS entries FROM php_blog WHERE category = $row[category_id]");
$num_entries = mysql_fetch_array($result2);
echo '' . $row['category_name'] . ' (' . $num_entries['entries'] . ')<br />';
}
?>
</div>
</div>
</div>
<!-- Sidebar End -->
</div>
</html>
CSS:
*{
margin: 0px;
padding: 0px;
}
body{
background-color: #eeeeee;
height: 100%;
}
#menu {
background-color: #282828;
height:20px;
width: 840px;
padding: 10px;
}
#main {
width: 860px;
height: 100%;
margin-left: auto;
margin-right: auto;
background-color: #ffffff;
-webkit-box-shadow: 2px 0px 5px #bbbbbb,-2px 0 5px #bbbbbb;
-moz-box-shadow: 2px 0px 5px #bbbbbb,-2px 0px 5px #bbbbbb;
}
#menu li {
display: inline;
list-style-type: none;
height: 20px;
margin-top: 10px;
margin-left: 5px;
}
#menu a, menu a:visited{
font-family: arial;
color: #ffffff;
text-decoration: none;
padding: 3px;
}
#menu a:hover{
font-family: arial;
color: #282828;
text-decoration: none;
padding: 3px;
background-color: #ffffff;
}
#search{
float: right;
}
.sidebar {
width: 260px;
height: 100%;
float: right;
margin-right: 4px;
}
#posts {
width: 590px;
height: 100%;
float: left;
}
#side-item h2 {
background-color: #282828;
width: 245px;
height: 30px;
font-size: 25px;
font-family: arial;
color: #ffffff;
padding: 5px;
padding-top: 6px;
padding-bottom: 4px;
}
#side-item-content{
border:1px solid #dadada;
padding: 5px;
width: 243px;
margin-bottom: 12px;
}
#side-item h2 img {
margin-right: 6px;
float: left;
}
#side-item h2 a:link {
text-decoration: none;
color: #ffffff;
}
#side-item h2 a:hover {
text-decoration: underline;
color: #ffffff;
}
#side-item h2 a:visited {
text-decoration: none;
color: #ffffff;
}
#social {
background-color: #282828;
width: 223px;
height: 20px;
font-size: 20px;
font-family: arial;
color: #ffffff;
display: block;
margin-top: 5px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
padding: 10px;
}
/*#social img {
float: left;
padding-top: -12px;
}*/
#social a:link {
font-size: 20px;
font-family: arial;
color: #ffffff;
text-decoration: none;
}
#tweet {
width: 221px;
padding: 10px;
color: #242424;
background-color: #f5f5f5;
border:1px solid #282828;
margin-bottom: -8px;
font-family: arial;
}
#social a:hover{
font-size: 20px;
font-family: arial;
color: #ffffff;
text-decoration: underline;
}
#social a:visited {
font-size: 20px;
font-family: arial;
color: #ffffff;
text-decoration: none;
}
.tweet-title {
background-color: #2dbfe9;
color: #ffffff;
width: 231px;
height: 20px;
border-left:1px solid #282828;
border-right:1px solid #282828;
border-top:1px solid #282828;
font-size: 20px;
padding: 5px;
font-family: arial;
}
.tweet-title a:link, .tweet-title a:visited {
color: #ffffff;
text-decoration: none;
}
.tweet-title a:hover {
color: #2dbfe9;
text-decoration: none;
background-color: #ffffff;
}
#pages {
float: left;
}
Image:

First: Where are your <body> tags?
Ok here is how I made it works. It seems that #pages and #sidebar they should be in separate <div> tag. The code (I deleted PHP from it)
HTML:
<html>
<head>(content)</head>
<body> <!-- never forget about body tags!!!!!!!!!-->
<div id="main">
<!-- Menu Start -->
(...)
<!-- Menu End -->
<div id="content"> <!-- this is new -->
<div id="posts">
(content)
</div>
<div class="sidebar">
(content)
<!-- Sidebar End -->
<div class="clr" /> <this is new>
</div>
</div>
</body>
<
and CSS:
\*{
margin: 0px;
padding: 0px;
}
body{
background-color: #eeeeee;
}
\#menu {
background-color: #282828;
height:20px;
width: 840px;
padding: 10px;
position: relative;
}
\#main {
width: 860px;
margin: 0 auto;
background-color: #ffffff;
-webkit-box-shadow: 2px 0px 5px #bbbbbb,-2px 0 5px #bbbbbb;
-moz-box-shadow: 2px 0px 5px #bbbbbb,-2px 0px 5px #bbbbbb;
}
.clr{
clear: both;
}
\#content{
position: relative;
width: 860px;
}
.sidebar {
position: relative;
width: 260px;
float: right;
margin-right: 4px;
}
\#posts {
width: 590px;
position: relative;
float: left;
}
I believe this should do the work.
PS. Shadow doesn't work in Opera.
Best Regards,
ventus

Related

PHP Customizing div to place next to each other

I have a problem. I created this code that shows products from my database like products:
<?php
include("connect.php");
session_start();
$status="";
if (isset($_POST['id']) && $_POST['id']!="")
{
$Id = $_POST['id'];
$result = mysqli_query($conn,"SELECT * FROM Producten WHERE `Id`='$Id'");
$row = mysqli_fetch_assoc($result);
$naam = $row['Naam'];
$id = $row['Id'];
$prijs = $row['Prijs'];
$foto = $row['Foto'];
$winkelwagen_array = array(
$id=>array(
'id'=>$id,
'naam'=>$naam,
'prijs'=>$prijs,
'hoeveelheid'=>1,
'foto'=>$foto)
);
if(empty($_SESSION["winkelwagen"]))
{
$_SESSION["winkelwagen"] = $winkelwagen_array;
$status = "<div class='box'>Product toegevoegd aan winkelwagen!</div>";
}
else
{
$_SESSION["winkelwagen"] = array_merge($_SESSION["winkelwagen"],$winkelwagen_array);
$status = "<div class='box'>Product toegevoegd aan winkelwagen!</div>";
}
}
?>
<html>
<head>
<link rel='stylesheet' href='css/style.css' type='text/css' media='all' />
</head>
<body>
<div style="width:700px; margin:50 auto;">
<?php
if(!empty($_SESSION["winkelwagen"]))
{
$winkelwagen_hoeveelheid = count(array_keys($_SESSION["winkelwagen"]));
?>
<div class="winkelwagen_div">
<img src="media/winkelwagen_logo.png" /> Winkelwagen<span><?php echo $winkelwagen_hoeveelheid; ?></span>
</div>
<?php
}
$result = mysqli_query($conn,"SELECT * FROM Producten");
while($row = mysqli_fetch_assoc($result))
{
echo "<div class='product_vak'>
<form method='post' actie=''>
<input type='hidden' name='id' value=".$row['Id']." />
<div class='foto'><img src='".$row['Foto']."' /></div>
<div class='naam'>".$row['Naam']."</div>
<div class='prijs'>€".$row['Prijs']."</div>
<button type='submit' class='koop'>Koop nu</button>
</form>
</div>";
}
mysqli_close($conn);
?>
<div style="clear:both;"></div>
<div class="melding_box" style="margin:10px 0px;">
<?php echo $status; ?>
</div>
</div>
</body>
</html>
with this css:
.product_vak {
float:left;
padding: 10px;
text-align: center;
}
.product_vak:hover {
box-shadow: 0 0 0 2px #e5e5e5;
cursor:pointer;
}
.product_vak .naam {
font-weight:bold;
}
.product_vak .koop {
text-transform: uppercase;
background: #F68B1E;
border: 1px solid #F68B1E;
cursor: pointer;
color: #fff;
padding: 8px 40px;
margin-top: 10px;
}
.product_vak .koop:hover {
background: #f17e0a;
border-color: #f17e0a;
}
.melding_box .box{
margin: 10px 0px;
border: 1px solid #2b772e;
text-align: center;
font-weight: bold;
color: #2b772e;
}
.table td {
border-bottom: #F0F0F0 1px solid;
padding: 10px;
}
.winkelwagen_div {
float:right;
font-weight:bold;
position:relative;
}
.winkelwagen_div a {
color:#000;
}
.winkelwagen_div span {
font-size: 12px;
line-height: 14px;
background: #F68B1E;
padding: 2px;
border: 2px solid #fff;
border-radius: 50%;
position: absolute;
top: -1px;
left: 13px;
color: #fff;
width: 14px;
height: 13px;
text-align: center;
}
.winkelwagen .verwijderen {
background: none;
border: none;
color: #0067ab;
cursor: pointer;
padding: 0px;
}
.winkelwagen .verwijderen:hover {
text-decoration:underline;
}
But when I load the page I see 2 products above each other in a very very large size. Now how can I get them to load next to each other and in a smaller size, because now they are filling the whole screen per product!
I already tried giving product_vak a width, but the image doesn't size with that!
How can I fix this?
try like this
.product_vak {
float:left;
padding: 10px;
text-align: center;
width:40%;

Having static design template on dynamic php pages

I am trying to make a web application in PHP and I have designed my initial index.php with a login page with other header and footer design.
I want to keep the header and footer design throughout the pages and just want to change the included .phpfile as per the user redirection.
Please see the snippets below.
P.S. it is not complete code and it is work in progress.
session_start();
ob_start();
header('Content-Type: text/html; charset=utf-8');
header('Cache-Control: private');
require_once ('lib/php/connection.php');
require_once ('lib/php/global.php');
require_once ('lib/php/session.php');
require_once ('lib/php/function.php');
$aController = array_values( array_diff( explode('/', $_SERVER['REQUEST_URI']), explode('/', $_SERVER['SCRIPT_NAME'])));
if (isset($aController[0])) {
switch (strtolower($aController[0])) {
/*case 'login';
$setPage = 'dir_login/index.php';
$setTitle = 'Login';
break;*/
case 'forgot-password';
$setPage = 'dir_content/forgotPassword.php';
$setTitle = 'Forgot your password';
break;
default:
$setPage = 'dir_content/error.php';
$setTitle = '404 Error';
break;
}
} else {
//for all the default cases
$setPage = 'dir_login/index.php';
$setTitle = 'Login';
}
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<?php
echo '<title>';
if (isset($setTitle)) {
echo $setTitle;
echo ' - ';
}
echo D_COMPANY_NAME;
echo '</title>';
if (defined ('D_PROJECT_TITLE')) {
echo '<meta name="project-title" lang="en" content="'.htmlspecialchars(D_PROJECT_TITLE, ENT_QUOTES).'" />';
}
if (defined ('D_PROJECT_DESCRIPTION')) {
echo '<meta name="project-description" lang="en" content="'.htmlspecialchars(D_PROJECT_DESCRIPTION, ENT_QUOTES).'" />';
}
echo '<meta name="publisher" content="'.htmlspecialchars(D_COMPANY_OWNER, ENT_QUOTES).'" />';;
echo '<meta name="copyright" content="'.htmlspecialchars(D_COMPANY_NAME, ENT_QUOTES).'" />';
?>
<meta name="author" content="Saurabh Gupta, IT System Developer # Somex Automation Ltd." />
<meta name="language" content="english" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-script-type" content="text/javascript" />
<meta http-equiv="Content-style-type" content="text/css" />
<meta http-equiv="Content-Language" content="en" />
<meta http-equiv="imagetoolbar" content="no" />
<link rel="stylesheet" type="text/css" media="screen" href="lib/css/reset.css" />
<link rel="stylesheet" type="text/css" media="screen" href="lib/css/custom.css"/>
<script language="JavaScript" type="text/javascript" src="lib/js/modernizr.custom.18450.js"></script>
<script language="JavaScript" type="text/javascript" src="lib/js/cookie.js" ></script>
<script type="text/javascript" src="https://code.jquery.com/jquery-2.0.2.min.js" ></script>
<script language="JavaScript" type="text/javascript" >
<!-- Google Tag, Hotjar Tag -->
</script>
</head>
<body>
<?php
$aBgImages = array(
'signup_bg.png'
);
?>
<div id="header"<?php echo ((!isset($aController[0]) || (strpos($aController[0], '?') !== false)) ? ' class="front" style="background-image: url(gfx/'.getRandomImage($aBgImages).'"' : ''); ?>>
<div id="top">
<div id="nav">
<?php
echo '<div id="logo-position">';
echo ' <img src="gfx/logo.png" style="margin-left: 10%; margin-top: 2%; padding-bottom: 20px;" />';
echo '» Home';
echo '</div>';
?>
<div class="clearfix"></div>
</div>
</div>
</div>
<div id="wrapper" <?php echo ((!isset($aController[0]) || (strpos($aController[0], '?') !== false)) ? ' class="front"' : ''); ?>>
<?php
include ($setPage);
?>
</div>
<div class="clearfix"></div>
<div id="footer">
<div class="clearfix"></div>
<div id="copyright">
<span>
<div="footer-back">
Phone: +353 (0) 26 65770        Email: automation#somexautomation.ie<br />
Fax: +353 (0) 26 65780     ©<?php echo date('Y').' '. D_COMPANY_NAME; ?> - Reg No. 584538<br />
</div>
</span>
</div>
</div>
</body>
</html>
My dir_login->index.php is populated on the index.php as a start page.
<?php
/**
* Created by PhpStorm.
* User: sgupta
* Date: 28/09/2017
* Time: 15:46
*/
$pageName = 'dir_login/index.php';
$pageLink = '/';
if (isset($_SESSION['sEmployeeID'])) {
header('Location: /');
exit();
}
if ($_SERVER['REQUEST_METHOD'] == 'POST') {
$aErrorClass = ' class="text-error"';
$aError = array();
if (!isset($_POST['employeeID']) || trim($_POST['employeeID']) == '') {
$aError['employeeID'] = 'Please type in your Employee ID';
}
if (!isset($_POST['password']) || trim($_POST['employeeID'])) {
$aError['password'] = 'Please type in your password';
} elseif (!isset($_POST['password']) || (strlen($_POST['password']) < 5)) {
$aError['password'] = 'This password is wrong';
}
if (count($aError) == 0) {
$sQueryLogin = "
SELECT employeeID, name, rate, payRate. password, level, email, type
FROM tblemployees
WHERE employeeID = ? AND
password = ?
";
if ($stmtLogin = $mysqli->prepare($sQueryLogin)) {
$sEmployeeID = $_POST['employeeID'];
$sPassword = $_POST['password'];
$stmtLogin->bind_param('ss', $sEmployeeID, $sPassword);
if ($stmtLogin->execute() === false) {
trigger_error('stmtLogin execution failed '.$stmtLogin->error, E_USER_ERROR);
}
$stmtLogin->store_result();
$numLogin = $stmtLogin->num_rows;
$stmtLogin->bind_result($employeeID, $name, $rate, $payRate, $password, $level, $email, $type);
$stmtLogin->fetch();
if ($numLogin == 1) {
}
}
}
}
//echo 'This Page';
?>
<h1>Log in your Somex Timesheets account</h1>
<form action="<?php echo $pageLink; ?>" method="post" enctype="multipart/form-data" name="loginForm" class="shadow">
<?php echo (isset($sLoginError) ? '<h2 class="text-error">'.$sLoginError.'<h2>' : ''); ?>
<ul>
<li>
<label for="employeeID" <?php echo (isset($aError['employeeID'])? $aErrorClass : ''); ?>>Your Employee ID</label>
<input type="text" name="employeeID" id="employeeID" value="<?php (isset($_POST['employeeID']) ? htmlspecialchars($_POST['employeeID'], ENT_QUOTES) : ''); ?>" />
<?php echo (isset($aError['employeeID']) ? '<div class="info-line">'.$aError['employeeID'].'</div>' : ''); ?>
</li>
<li>
<label for="password"<?php echo (isset($aError['password']) ? $aErrorClass : ''); ?>>Your password</label>
<input type="password" name="password" id="password" />
<div class="info-line"><?php echo (isset($aError['password']) ? $aError['password'].'<br />' : ''); ?>I forgot my password</div>
</li>
</ul>
<div class="clearfix"></div>
<input name="send" type="submit" class="button" value="» Log in"/>
<div class="clearfix"></div>
</form>
The initial page works fine but when I switch to other pages like forgetpassword.phpor error.php, the page gets populated with the code but design is not maintained.
Regardless the undefined links are populating with the design.
The default case in the switch statement is working as per I want but not the other pages.
CSS:
body {
font-size: 12pt;
font-family: Verdana, Geneva, sans-serif;
background-color: #fff;
color: #000;
margin: 0;
padding: 0;
}
h1, h2, h3, label, input, textarea, #nav, .button, #footer, .item, .availability, #place .desc {
font-family: Arial, Helvetica, sans-serif;
}
.button {
padding: 0 20px;
background-color: #ff6801;
font-size: 1.1em;
color: #fff;
text-align: center;
line-height: 40px;
text-decoration: none;
display: block;
border: 0;
border-radius: 10px;
}
.button:hover {
background-color: #ff1700;
}
.button.fright {
margin-left: 20px;
}
.fright {
float: right !important;
}
.button.fright {
margin-left: 20px;
float: right;
margin-right: 18%;
margin-top:60px;
}
#wrapper.front {
padding: 100px 0;
}
#footer {
margin-top: 60px;
text-align: center;
padding: 40px 0;
font-size: large;
background: url(/gfx/signup_bg.png);
background-repeat: no-repeat;
background-size: 100%;
height: 50px;
}
#header {
background: url(/gfx/signup_bg.png);
background-repeat: no-repeat;
background-size: 100%;
}
.shadow {
/*
box-shadow: 0 0 7px 2px rgba(0,0,0,.35);
-webkit-box-shadow: 0 0 7px 2px rgba(0,0,0,.35);
-moz-box-shadow: 0 0 7px 2px rgba(0,0,0,.35);
*/
border: 1px solid #D6D6D6;
}
.text-error, .error {
color: #e84b31;
}
.text-success, .success {
color: #2aa00b;
}
input[type="text"]:disabled, select:disabled {
/*border: 1px solid transparent !important;
background: transparent;*/
cursor: not-allowed;
}
input[type="text"]:disabled:hover, select:disabled:hover {
border: 1px solid #e84b31;
}
input[type="text"], input[type="password"], input[type="file"], textarea {
width: 400px;
}
input[type="text"], input[type="password"], input[type="file"], textarea, select {
font-size: 1em;
border: 1px solid #000;
padding: 10px;
}
select {
padding: 8px 8px 9px !important;
float: left;
}
input[type="checkbox"], input[type="radio"] {
margin: 15px 15px 15px 340px;
float: left;
}
input[type="checkbox"] + label, input[type="radio"] + label {
float: left;
width: 450px !important;
text-align: left;
}
input[type="text"]:hover, input[type="password"]:hover, input[type="file"]:hover, textarea:hover, select:hover,
input[type="text"]:focus, input[type="password"]:focus, input[type="file"]:focus, textarea:focus, select:focus,
input[type="text"]:active, input[type="password"]:active, input[type="file"]:active, textarea:active, select:active {
border: 1px solid #00CC66;
}
input[type="text"], input[type="password"], textarea {
cursor: text;
}
input[type="submit"] {
padding: 0 30px;
cursor: pointer;
}
form {
background-color: #f5f6f6;
border: 1px solid #f1f3f3;
}
form {
border: 0;
padding: 30px;
}
.front form {
width: 920px;
}
.intro {
margin: 40px 0;
text-align: center;
font-size: 1.25em;
}
.front form h1 {
margin: 40px 0 20px !important;
}
form h2 {
margin-bottom: 60px;
}
.front .column h2 {
background: #6db7da url(/gfx/arc-small.png) no-repeat center top;
text-align: center;
display: block;
padding: 30px 20px 20px;
text-transform: uppercase;
color: #fff;
letter-spacing: 1px;
}
#search h2 {
color: #053c71;
}
#search h2, #search h3 {
margin-bottom: 10px;
}
form ul li {
vertical-align: middle;
margin: 0 30px 30px 0;
}
.front form ul li {
float: left;
margin: 0 30px 30px 0;
}
.front form ul li:last-child {
margin-right: 0;
}
form li.header {
padding: 40px 0 0 340px;
border-top: 1px solid #D6D6D6;
margin: 40px 0 0 !important;
}
form li.header.no-line {
border-top: 0;
padding-top: 0;
}
form input[type="submit"] {
text-align: center;
width: 100%;
}
form .info-line {
font-size: 0.9em;
padding: 10px 0 10px 340px;
line-height: 150%;
}
.front form .info-line {
padding: 10px 0 0 0 !important;
width: auto;
margin-right: 0;
}
h1 {
font-size: 1.6em;
margin-bottom: 40px;
}
h2 {
font-size: 1.4em;
}
h3 {
font-size: 1.2em;
}
h1 + h2, h1 + h3 {
margin-top: -20px;
}
p {
line-height: 200%;
font-size: 1em;
font-family: Verdana, Geneva, sans-serif;
margin: 20px 0;
}
p.warning {
background-color: #f9f99b;
padding: 10px 20px;
}
ul.warning {
line-height: 200%;
font-size: 0.9em;
display: block;
background-color: #f9f99b;
padding: 20px 30px;
list-style: square inside;
margin: 20px 0;
}
ul.warning li.header {
list-style: none;
font-weight: bold;
margin-bottom: 10px;
}
#nav ul {
list-style: none;
display: inline-block;
padding: 0;
overflow: hidden;
margin: 16px 0;
}
#nav ul li {
float: left;
}
strong {
font-weight: bold;
}
i {
font-style: italic;
}
.front p {
margin: 0;
}
#wrapper {
width: 980px;
margin: 0 auto;
padding: 20px 0 100px;
}
#wrapper.front {
padding: 100px 0;
}
label {
display: block;
font-size: 1.1em;
float: left;
width: 300px;
text-align: right;
margin-right: 40px;
line-height: 40px;
}
.front label {
float: none;
width: auto;
text-align: left;
margin-right: 0;
}
.front form h1 {
margin: 40px 0 20px !important;
}
form h2 {
margin-bottom: 60px;
}
form ul li {
vertical-align: middle;
margin: 0 30px 30px 0;
}
.front form ul li {
float: left;
margin: 0 30px 30px 0;
}
.front form ul li:last-child {
margin-right: 0;
}
#menu ul {
list-style: none;
margin: 0;
display: inline-block;
padding: 0;
overflow: hidden;
}
#menu ul li {
float: left;
}
.filter ul {
padding: 20px;
border-top: 1px solid #3cb3e7;
}
.filter ul li {
margin: 0 0 8px 0;
display: block;
}
#booking ul {
padding: 20px;
border-top: 1px solid #62a903;
}
#booking ul li {
margin: 0 0 8px 0;
display: block;
}
#booking ul li.availability {
padding-top: 15px;
line-height: 140%;
font-size: 1.2em;
text-align: center;
}
#booking ul li.dates {
font-size: 0.8em;
text-align: center;
}
#booking ul li.subtotal-price, .subtotal-price {
padding-top: 10px;
line-height: 140%;
font-weight: bold;
}
#booking ul li.total-price, .total-price {
padding-top: 10px;
line-height: 140%;
font-size: 1.3em;
font-weight: bold;
}
#booking ul li span {
display: block;
float: right;
}
#message-reply ul li {
margin: 0 0 30px 0;
display: block;
}
.filter ul li.item {
font-weight: bold;
padding-bottom: 10px;
line-height: 140%;
}
form li.header {
padding: 40px 0 0 340px;
border-top: 1px solid #D6D6D6;
margin: 40px 0 0 !important;
}
form li.header.no-line {
border-top: 0;
padding-top: 0;
}
form input[type="submit"] {
text-align: center;
width: 100%;
}
form .info-line {
font-size: 0.9em;
padding: 10px 0 10px 340px;
line-height: 150%;
}
.front form .info-line {
padding: 10px 0 0 0 !important;
width: auto;
margin-right: 0;
}
Apologies for my English.
Need help
Added Screenshots: index.php, forgotpassword.php

How to create additional css tabs with php

I am trying to add addtional tabs whenever a new item is added to the database it is supposed to show on the webpage and display the new item without having to go into the code just having to add to the database i tried $_GET variable to try id but that did not work.
CODE:
<?php
$sql = "SELECT * FROM pages WHERE id = " . $_GET['id'];
$result = mysqli_query($db, $sql);
while ($pages = mysqli_fetch_assoc($result)) {
?>
<ul class="tabs">
<li>
<input type="radio" name="tabs" id="tab1" checked />
<label for="tab1"><?php echo $pages['name']; ?></label>
<div id="tab-content" class="tab-content">
<p><?php echo $pages['content']; ?></p>
</div>
</li>
</ul>
<?php } ?>
CSS CODE:
h1 {
font-weight: normal;
font-size: 40px;
font-weight: normal;
text-transform: uppercase;
float: left;
margin: 20px 0 100px 10px;
span {
font-size: 13px;
display: block;
padding-left: 4px;
}
}
.tabs {
width: 650px;
float: none;
list-style: none;
position: relative;
margin: 80px 0 0 10px;
text-align: left;
}
li {
float: left;
display: block;
}
input[type="radio"] {
position: absolute;
top: -9999px;
left: -9999px;
}
label {
display: block;
padding: 14px 21px;
border-radius: 2px 2px 0 0;
font-size: 20px;
font-weight: normal;
text-transform: uppercase;
background: $tabs-base-color;
cursor: pointer;
position: relative;
top: 4px;
#include transition(all 0.2s ease-in-out);
&:hover {
background: darken($tabs-base-color, 10);
}
}
.tab-content{
z-index: 2;
display: none;
overflow: hidden;
width: 100%;
font-size: 17px;
line-height: 25px;
padding: 25px;
position: absolute;
top: 53px;
left: 0;
background: darken($tabs-base-color, 15);
}
//The Magic
[id^="tab"]:checked + label {
top: 0;
padding-top: 17px;
background: darken($tabs-base-color, 15);
}
[id^="tab"]:checked ~ [id^="tab-content"] {
display: block;
}
}
p.link {
clear: both;
margin: 380px 0 0 15px;
a {
text-transform: uppercase;
text-decoration: none;
display: inline-block;
color: #fff;
padding: 5px 10px;
margin: 0 5px;
background-color: darken($tabs-base-color, 15);
#include transition(all 0.2s ease-in);
&:hover {
background-color: darken($tabs-base-color, 20);
}
}
}
<?php
$id=$_GET['id'];
$sql = "SELECT * FROM pages WHERE id ='$id'";
$result = mysqli_query($db, $sql);
while ($pages = mysqli_fetch_assoc($result)) {
?>
<ul class="tabs">
<li>
<input type="radio" name="tabs" id="tab1" checked />
<label for="tab1"><?php echo $pages['name']; ?></label>
<div id="tab-content" class="tab-content">
<p><?php echo $pages['content']; ?></p>
</div>
</li>
</ul>
<?php } ?>
Try This Code not sure but try..

Breadcrumb - How to change the element according to the page?

I am trying to create a forum software and I would like when my breadcrumb links, change depending on what I clicked:
And:
Here is how my files are coordinated:
header.php, index.php, members.php, css/style.css
I would like that the element automatically changes according to the clicked page.
header.php code:
<div id="top_bar">
<div class="wrapper">
<div id="top_bar_links">
<ul>
<?php
$full_name = $_SERVER["PHP_SELF"];
$name_array = explode("/",$full_name);
$count = count($name_array);
$page_name = $name_array[$count-1];
?>
<li>
<a class="<?php echo ($page_name=="index.php")?"active":"";?>" href="index.php">Forums</a>
</li>
<li>
<a class="<?php echo ($page_name=="members.php")?"active":"";?>" href="members.php">Members</a>
</li>
</ul>
</div>
</div>
</div>
<div id="header">
<div class="wrapper">
<h1 id="logo">
NextGenFocus
</h1>
<div id="user_links">
<ul>
<li id="sign_up">
Sign Up
</li>
<li id="sign_in">
Sign In
</li>
</ul>
</div>
</div>
</div>
<div class="wrapper">
<div id="container">
<div id="breadcrumb_top">
<div class="breadcrumb_links">
<ul>
<li class="forums">
Forums
</li>
</ul>
</div>
</div>
</div>
</div>
index.php and members.php code:
<?php
include "header.php";
?>
style.css code:
/* CORE */
h1, h2, h3, h4, h5, h6 {
font-weight: normal;
margin: 0;
}
h1 {
font-size: 25px;
}
h2 {
font-size: 20px;
}
h3 {
font-size: 18px;
}
h4 {
font-size: 17px;
}
h5 {
font-size: 15px;
}
h6 {
font-size: 13px;
}
body {
background-color: #e6e9ed;
color: #000;
font-family: "Trebuchet MS", sans-serif;
font-size: 13px;
margin: 0;
padding-bottom: 15px;
}
.wrapper {
width: 980px;
margin: 0 auto;
}
a {
color: #4d7799;
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
p {
margin: 0;
}
/* TOP BAR */
#top_bar {
background-color: #262d35;
height: 55px;
}
#top_bar_links ul {
list-style: none;
margin: 0;
padding: 0;
}
#top_bar_links a {
color: #fff;
opacity: 0.6;
float: left;
display: block;
line-height: 55px;
padding: 0 25px;
}
#top_bar_links a:hover {
background-color: #000;
opacity: inherit;
text-decoration: none;
}
#top_bar_links a.active {
background-color: #000;
opacity: inherit;
}
#top_bar_links a:hover {
background-color: #000;
opacity: inherit;
text-decoration: none;
}
/* HEADER */
#header {
background-color: #3d5e78;
height: 115px;
margin-bottom: -25px;
}
#logo {
float: left;
}
#logo a {
color: #fff;
font-size: 25px;
line-height: 90px;
}
#logo a:hover {
text-decoration: none;
}
#user_links li {
float: right;
}
#user_links ul {
list-style: none;
margin: 0;
padding: 0;
}
#user_links a {
color: #fff;
line-height: 90px;
margin-left: 15px;
}
/* CONTAINER */
#container {
background-color: #fff;
box-shadow: rgba(0,0,0,0.3) 0px 1px 7px;
padding: 15px;
}
#breadcrumb_top {
background-color: #f5f5f5;
height: 45px;
margin: -15px -15px 15px -15px;
}
#breadcrumb_bottom {
background-color: #f5f5f5;
height: 45px;
margin: 0 -15px -15px -15px;
}
.breadcrumb_links ul {
list-style: none;
margin: 0;
padding: 0;
}
.breadcrumb_links li {
float: left;
}
.breadcrumb_links a {
color: #000;
line-height: 45px;
margin-left: 15px;
}
.separator {
margin-left: 10px;
}
It seems you need to put something dynamic where you presently have 'Forums'. You have your pagename (members.php) in the variable $page_name, so try this:
<?php echo ucfirst(str_replace('.php', '', $page_name)) ?>
That will remove the ".php" from the string (so it turns into "members") and then upper-case the first letter (so it turns into "Members"). Don't be afraid to try out some other string operations if you need to adjust it further!

sidebar height is upto something is written

I am not able to make the sidebar all the way touch to the footer earlier it was going to the bottom but i made few changes for hours and suddenly when i checked it sidebar color only shows till it displays some links.
css:
*{margin:0; padding:0;}
html{ width:1024px; height:100%; margin: 0 auto; }
body{ width:100%;height:100%;
margin:0; padding:0; border:0;
font-family:Verdana,Helvetica,Arial,sans-serif;
font-size: 13px; line-height: 16px;
background: #FFFFFF; text-align: center;
display: table;
}
#main { height:auto; min-height:100%; }
/* header */
#header{
background-color:#c42000;
height:75px; margin:0; padding:0;
border:0 solid;
}
#header h1{
line-height:15px; padding:1em;
}
#header h1 a{
color:#FFFFFF;
text-decoration:none;
}
#header h1 a:hover {
color:#cda154;
}
/* Navigation */
#navigation {
color:#d3d3d3;
height:45px;
background:#262525;
float:top;
}
#navigation .subjects {
background: #262525;
float: left;
font-weight:bold;
margin: 0; padding: 0;
border-bottom: none;
}
#navigation .subjects li a, #navigation .subjects li {
float: left;
}
#navigation .subjects li {
list-style: none;
position: relative;
}
#navigation .subjects li a {
padding: 1em 2em;
text-decoration: none;
color: white;
background: #292929;
border-right: 1px solid #3c3c3c;
border-left: 1px solid #292929;
border-bottom: 1px solid #232323;
border-top: 1px solid #545454;
}
#navigation .subjects li a:hover {
background: #302f2f; color:#16a9e0;
}
/* Submenu */
#navigation .subjects li ul {
display: none;
pos
ition: absolute;
left: 0;
top: 100%;
padding: 0; margin: 0;
}
#navigation .subjects li:hover > ul {
display: block;
}
#navigation .subjects li ul li, #navigation.subjects li ul li a {
float: none;
}
#navigation .subjects li ul li {
_display: inline; /* for IE6 */
}
#navigation .subjects li ul li a {
width: 150px;
display: block;
}
/* Sidebar */
#sidebar {
float:right;
width: 150px; height: 100%;
margin: 0; padding: 0 2em;
color: #D4E6F4; background: #16aae2;
}
#sidebar a { color: #D4E6F4; text-decoration: none; }
#sidebar a:hover { color: #FFFFFF; }
/* footer */
#footer {
clear: both; position: relative;
height: 2em; margin: 0; padding: 1em; margin-top: -3em; z-index:10;
text-align: center;
background: #000000; color: #D4E6F4;
}
/* page */
#page {
display:table-cell;
float:left;
line-height: 30px;
text-align: left;
padding: 2em;
}
h2 { color:#c42000; }
div.message,div.error {
color: #8D0D19; font-weight:bold;
margin: 1em 0; padding: 1em;
}
div.images {
width:92;height:92; float:left; padding: 0 10px 0; display:block;
}
div.images a{ text-decoration:none;}
php:
<?php require_once("../includes/session.php"); ?>
<?php require_once("../includes/db_connection.php"); ?>
<?php require_once("../includes/functions.php"); ?>
<?php $layout_context = "admin"; ?>
<?php include("../includes/layouts/header.php"); ?>
<?php find_selected_page(); ?>
<div id="main">
<div id="navigation">
<?php echo navigation($current_subject, $current_page); ?>
</div>
<div id="page">
<?php echo message(); ?>
<?php if(isset($current_subject)) {?>
<h2>Manage Subject</h2>
Menu name: <?php echo htmlentities($current_subject["menu_name"]); ?><br />
Position: <?php echo $current_subject["position"]; ?><br />
Visible: <?php echo $current_subject["visible"] == 1 ? 'yes' : 'no'; ?><br /><br />
<a href="edit_subject.php?subject=<?php echo urlencode($current_subject["id"]); ?>
">Edit Subject</a>
<div style="margin-top: 2em; border-top: 1px solid #000000;">
<h2>Pages in this subject:</h2>
<?php
$subject_pages = find_pages_for_subject($current_subject["id"]);
while($page = mysqli_fetch_assoc($subject_pages)) {
$safe_page_id = urlencode($page["id"]);
echo "<a href=\"manage_content.php?page={$safe_page_id}\">";
echo htmlentities($page["menu_name"]);
echo "</a><br />";
}
?>
<br />
+ Add a new page to this subject
</div>
<?php }elseif($current_page) {?>
<h2>Manage Page</h2>
<?php ?>
Page Name: <?php echo htmlentities($current_page["menu_name"]); ?><br />
Position: <?php echo $current_page["position"]; ?><br />
Visible: <?php echo $current_page["visible"] == 1 ? 'yes' : 'no'; ?><br />
<br />
<br />
Edit Page<br /><br />
<?php echo display_image_by_id(); ?>
<?php }else { ?>
Please Select a Subject or Page.
<?php } ?>
</div>
<div id="sidebar">
« Main Menu
<br />
<br />
+ Add a subject
</div>
</div>
<?php include("../includes/layouts/footer.php"); ?>

Categories