I'm not sure what is happening to my contact form on my page- "We Can Help." I watched the tutorial series from Dream Weaver Tutorial, and I tried to tie in reCAPTCHA and Hot Dreamweaver's add-on.
Does anyone know why the navigation and the header picture and the Adobe picture don't show?
You are using absolute addresses to your links and resources to places that only exist on your local machine. Instead use relative addresses in your html.
Example.
Instead of this html:
<img src="file:///I|/Town_Monitoring_Website/images/Logo copy.jpg" width="213" height="75" border="none" />
Do this:
<img src="images/Logo copy.jpg" width="213" height="75" border="none" />
You want to remove all of these references in your html
file:///I|/Town_Monitoring_Website/
All of your image sources and links are pointing to a local file system they need to be either absolute or relative paths. I updated the code on your page to reflect relative paths as long as the file names and images are in the correct directories this will be working code just copy and paste:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<!-- Contact Form Designed by James Brand # dreamweavertutorial.co.uk -->
<!-- Covered under creative commons license - http://dreamweavertutorial.co.uk/permissions/contact-form-permissions.htm -->
<title>Towne Monitoring Service/FAQ's</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href="contact/css/contactform.css" rel="stylesheet" type="text/css" />
<link href="css/css style sheet template.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
var nameError = 'Please enter a Name to proceed.';
var phoneError = 'Please enter a valid Phone Number to continue.';
var addressError = 'Please enter a valid Maling Address to continue.';
var emailError = 'Please enter a valid Email Address to continue.';
var commentError = 'Please enter your Message to continue.';
function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}
</script>
</head>
<body onload="MM_preloadImages('images/x.png')">
<div id="container">
<div id="header"><img src="images/Logo copy.jpg" width="213" height="75" border="none" /></div><!-- end div header -->
<div id="nav">
<ul>
<li>Home</li>
<li>Products</li>
<li>About Us</li>
<li>FAQ's</li>
<li>Did You Know?</li>
<li>We Can Help</li>
</ul>
</div><!-- end dic nav -->
<div id="content">
<table width="1000" border="0">
<tr>
<td width="50"> </td>
<td width="574"> </td>
<td width="312"> </td>
</tr>
<tr>
<td> </td>
<td><div id="for mWrap">
<div id="form">
<form action="contact.php" method="post" id="comments_form">
<div class="row">
<div class="label">Your Name</div>
<!-- end .label -->
<div class="input">
<input type="text" id="fullname" class="detail" name="fullname" value="" />
</div>
<!-- end .input -->
<div class="context">e.g. John Smith or Jane Doe</div>
<!-- end .context -->
</div>
<!-- end .row -->
<div class="row">
<div class="label">Your Email Address</div>
<!-- end .label -->
<div class="input">
<input type="text" id="email" class="detail" name="email" value="" />
</div>
<!-- end .input -->
<div class="context">We will not share your email with anyone or spam you with messages either</div>
<!-- end .context -->
</div>
<!-- end .row -->
<div class="row">
<div class="label">Your Phone Number</div>
<!-- end .label -->
<div class="input">
<input type="text" id="phone" class="detail" name="phone" value="" />
</div>
<!-- end .input -->
<div class="context">(123)-123-1234</div>
<!-- end .context -->
</div>
<!-- end .row -->
<div class="row">
<div class="label">Your Address</div>
<!-- end .label -->
<div class="input">
<input type="text" id="address" class="detail" name="address" value="" /> </div>
<!-- end .input -->
<div class="context">e.g. 123 Cherry ln. Happyville P.A. 18999</div>
<!-- end .context -->
</div>
<!-- end .row --><!-- end .row --><br />
<br />
<div class="submit">
<input type="submit" id="submit" name="submit" value="Send Message" />
</div>
<!-- end .submit -->
<input type="hidden" name="hdwfail" id="hdwfail" value="contact.php" />
</form>
</div><!-- edn #form -->
</div></td>
<td valign="top"><div id="loads"><table width="198" border="0">
<tr>
<td width="192" height="143"><h2>Download's<img src=images/Downloads/Adobe-PDF-Logo.jpg" alt="" width="100" height="100" /></h2>
<p> </p>
<p> </p>
<p> </p>
<p>Click here for Adobe Reader.</p>
</td>
</tr>
<tr>
<td><p>Information Sheet</p>
<p>(.pdf size: 182k)</p>
<p>Company Brochure</p>
<p>(.pdf size: 390k)</p>
<p>Handling Emergencies</p>
<p>(.pdf size: 143k)</p></td>
</tr>
<tr>
<td height="67"> </td>
</tr>
</table></div></td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
<!-- end formWrap -->
</div>
<div id="apDiv7">
<table width="1000" border="0">
<tr>
<td width="5"> </td>
<td width="588"><h3>© 2012 TOWNE MONITORING SERVICE, LP ALL RIGHTS RESERVED</h3></td>
<td width="77" align="right"><img src="images/csaa.jpg" width="74" height="40" /></td>
<td width="336"><img src="images/footer2.jpg" width="334" height="40" /></td>
</tr>
</table>
</div><!-- end div7 -->
</div>
</body>
</html>
Related
So I would like to move up the big title a little bit so i leave space in the main page and css isn't helping i tried many methods like position:absolute , position:relative , position:fixed etc.. still nothing happens
html code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>AGENCE DE VOYAGES</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<center>
<body background="ny.jpg" size="100%" width="100%" height="100%" align="center">
<header>
<div class="main">
<div class="logo">
<img src="logo.png">
</div>
<ul>
<li class="active">Accueil</li>
<li>Services</li>
<li>Clients</li>
<li>A Propos</li>
<li>Contact</li>
</ul>
</div>
<div class="title">
<h1 color="white">AGENCE DE VOYAGES</h1>
</div>
<div class="login">
<center>
<form action="auth.php" method="post">
<fieldset style="width:500px;">
<legend align='center'><h1>Connexion</h1></legend>
<table>
<tr>
<td><b>Email: </b></td>
<td><input type="email" name="email"></td>
</tr>
<tr>
<td><b>Mot de passe: </b></td>
<td><input type="password" name="password"></td>
</tr>
</div>
</table>
</fieldset>
</form>
<div class="button">
S'AUTHENTIFIER
S'INSCRIRE
</div>
</center>
</body>
</html>
I have left you an example of what you can do to move your text with css or make it smaller, hope that will solve your problem. I only added to your <h1> tag the class title like so:
<h1 class="title" color="white">AGENCE DE VOYAGES</h1>
.title{
font-size: 20px; /*You can choose here the size of your text*/
float: left; /*Or use right instead of left its up to you*/
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>AGENCE DE VOYAGES</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<center>
<body background="ny.jpg" size="100%" width="100%" height="100%" align="center">
<header>
<div class="main">
<div class="logo">
<img src="logo.png">
</div>
<ul>
<li class="active">Accueil</li>
<li>Services</li>
<li>Clients</li>
<li>A Propos</li>
<li>Contact</li>
</ul>
</div>
<div class="title">
<h1 class="title" color="white">AGENCE DE VOYAGES</h1>
</div>
<div class="login">
<center>
<form action="auth.php" method="post">
<fieldset style="width:500px;">
<legend align='center'><h1>Connexion</h1></legend>
<table>
<tr>
<td><b>Email: </b></td>
<td><input type="email" name="email"></td>
</tr>
<tr>
<td><b>Mot de passe: </b></td>
<td><input type="password" name="password"></td>
</tr>
</div>
</table>
</fieldset>
</form>
<div class="button">
S'AUTHENTIFIER
S'INSCRIRE
</div>
</center>
</body>
</html>
This is my entire code to generate reports for a particular student using his/her student id.
My SQL query will show the list of books not yet returned by the student....
While debugging I noticed that if I Manually put any student ID in the code, I can see the results but the button click feature is not working ... somehow the button is not taking any data from my SQL query and not executing..
<?php
session_start();
error_reporting(0);
include('includes/config.php');
if(strlen($_SESSION['alogin'])==0)
{
header('location:index.php');
}
else
{
?>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
<meta name="description" content="" />
<meta name="author" content="" />
<title>
Online Library Management System | Report Generation
</title>
<!-- BOOTSTRAP CORE STYLE -->
<link href="assets/css/bootstrap.css" rel="stylesheet" />
<!-- FONT AWESOME STYLE -->
<link href="assets/css/font-awesome.css" rel="stylesheet" />
<!-- DATATABLE STYLE -->
<link href="assets/js/dataTables/dataTables.bootstrap.css" rel="stylesheet" />
<!-- CUSTOM STYLE -->
<link href="assets/css/style.css" rel="stylesheet" />
<!-- GOOGLE FONT -->
<link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css' />
</head>
<body>
<!------MENU SECTION START-->
<?php include('includes/header.php');?>
<!-- MENU SECTION END-->
<div class="content-wrapper">
<div class="container">
<div class="row pad-botm">
<div class="col-md-12">
<h4 class="header-line">
Employee Reports
</h4>
</div>
<div class="row">
<?php if($_SESSION['error']!="")
{?>
<div class="col-md-6">
<div class="alert alert-danger" >
<strong>
Error :
</strong>
<?php echo htmlentities($_SESSION['error']);?>
<?php echo htmlentities($_SESSION['error']="");?>
</div>
</div>
<?php } ?>
<?php if($_SESSION['msg']!="")
{?>
<div class="col-md-6">
<div class="alert alert-success" >
<strong>
Success :
</strong>
<?php echo htmlentities($_SESSION['msg']);?>
<?php echo htmlentities($_SESSION['msg']="");?>
</div>
</div>
<?php } ?>
<?php if($_SESSION['delmsg']!="")
{?>
<div class="col-md-6">
<div class="alert alert-success" >
<strong>
Success :
</strong>
<?php echo htmlentities($_SESSION['delmsg']);?>
<?php echo htmlentities($_SESSION['delmsg']="");?>
</div>
</div>
<?php } ?>
</div>
</div>
<div class="row">
<div class="col-md-10 col-sm-6 col-xs-12 col-md-offset-1"">
<div class="panel panel-info">
<div class="panel-body">
<form role="form" method="post">
<div class="form-group">
<label>
CPF NUMBER<span style="color:red;">*</span>
</label>
<input class="form-control" type="text" name="studentid" id="studentid" autocomplete="off" required />
</div>
<button type="submit" name="report" id="submit" class="btn btn-info">
Generate
</button>
</form>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<!-- Advanced Tables -->
<div class="panel panel-default">
<div class="panel-heading">
Issued Documents
</div>
<div class="panel-body">
<div class="table-responsive">
<table class="table table-striped table-bordered table-hover" id="dataTables-example">
<thead>
<tr>
<th>#</th>
<th>Employee Name</th>
<th>Document Name</th>
<th>Reference Number</th>
<th>Issued Date</th>
<th>STATUS</th>
</tr>
</thead>
<tbody>
<?php
if($query->rowCount() > 0)
{
foreach($results as $result)
{
if(isset($_POST['report']))
{
$studentid=strtoupper($_POST['studentid']);
$sql = "SELECT tblstudents.FullName,tblbooks.BookName,tblbooks.ISBNNumber,tblissuedbookdetails.IssuesDate,tblissuedbookdetails.RetrunStatus,tblissuedbookdetails.id as rid from tblissuedbookdetails join tblstudents on tblstudents.StudentId=tblissuedbookdetails.StudentId join tblbooks on tblbooks.id=tblissuedbookdetails.BookId where tblissuedbookdetails.RetrunStatus is NULL and StudentId=:studentid order by tblissuedbookdetails.id desc";
$query = $dbh -> prepare($sql);
$query->execute();
$results=$query->fetchAll(PDO::FETCH_OBJ);
?>
<tr class="odd gradeX">
<td class="center"><?php echo htmlentities($cnt);?></td>
<td class="center"><?php echo htmlentities($result->FullName);?></td>
<td class="center"><?php echo htmlentities($result->BookName);?></td>
<td class="center"><?php echo htmlentities($result->ISBNNumber);?></td>
<td class="center"><?php echo htmlentities($result->IssuesDate);?></td>
<td class="center">
<?php if($result->RetrunStatus==NULL)
{
echo htmlentities("Not Returned Yet");
} else {
echo htmlentities("Returned");
}
?>
</td>
<td class="center">
</td>
</tr>
<?php $cnt=$cnt+1;}}} ?>
</tbody>
</table>
</div>
</div>
</div>
<!--End Advanced Tables -->
</div>
</div>
</div>
</div>
<!-- CONTENT-WRAPPER SECTION END-->
<?php include('includes/footer.php');?>
<!-- FOOTER SECTION END-->
<!-- JAVASCRIPT FILES PLACED AT THE BOTTOM TO REDUCE THE LOADING TIME -->
<!-- CORE JQUERY -->
<script src="assets/js/jquery-1.10.2.js"></script>
<!-- BOOTSTRAP SCRIPTS -->
<script src="assets/js/bootstrap.js"></script>
<!-- DATATABLE SCRIPTS -->
<script src="assets/js/dataTables/jquery.dataTables.js"></script>
<script src="assets/js/dataTables/dataTables.bootstrap.js"></script>
<!-- CUSTOM SCRIPTS -->
<script src="assets/js/custom.js"></script>
Need to put studentid in input field value. So that when form submit, it posted and generate report. Update the following line and check.
<input class="form-control" type="text" name="studentid" id="studentid" autocomplete="off" required value="<?php echo strtoupper($_POST['studentid']); ?>" />
I'm having some issues to make my first PHP filter, I would like to select all the values in my SQL table by selecting the date from the datepicker.
This is my php page:
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta charset="utf-8">
<title></title>
</head>
<body>
<!--formden.js communicates with FormDen server to validate fields and
submit via AJAX -->
<script type="text/javascript"
src="https://formden.com/static/cdn/formden.js"></script>
<!-- Special version of Bootstrap that is isolated to content wrapped in
.bootstrap-iso -->
<link rel="stylesheet" href="https://formden.com/static/cdn/bootstrap-
iso.css" />
<!--Font Awesome (added because you use icons in your prepend/append)-->
<link rel="stylesheet" href="https://formden.com/static/cdn/font-
awesome/4.4.0/css/font-awesome.min.css" />
<!-- Inline CSS based on choices in "Settings" tab -->
<style>.bootstrap-iso .formden_header h2, .bootstrap-iso .formden_header p,
.bootstrap-iso form{font-family: Arial, Helvetica, sans-serif; color:
black}.bootstrap-iso form button, .bootstrap-iso form button:hover{color:
white !important;} .asteriskField{color: red;}</style>
<!-- HTML Form (wrapped in a .bootstrap-iso div) -->
<div class="bootstrap-iso">
<div class="container-fluid">
<div class="row">
<div class="col-md-6 col-sm-6 col-xs-12">
<form action="risultati.php" class="form-horizontal" method="post">
<div class="form-group ">
<label class="control-label col-sm-2 requiredField" for="date">
Date
<span class="asteriskField">
*
</span>
</label>
<div class="col-sm-10">
<div class="input-group">
<div class="input-group-addon">
<i class="fa fa-calendar">
</i>
</div>
<input class="form-control" id="date" name="date"
placeholder="DD/MM/YYYY" type="text"/>
</div>
</div>
</div>
<div class="form-group">
<div class="col-sm-10 col-sm-offset-2">
<input name="data_sel" style="display:none" type="text"/>
<button class="btn btn-primary " name="submit" type="submit">
Submit
</button>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
<br><br><br><br>
<div>
<table style="width:100%">
<tr>
<td style="width:16,6%; text-align:center">1</td>
<td style="width:16,6%; text-align:center">1</td>
<td style="width:16,6%; text-align:center">1</td>
<td style="width:16,6%; text-align:center">1</td>
<td style="width:16,6%; text-align:center">1</td>
<td style="width:16,6%; text-align:center">1</td>
</tr>
</table>
</div>
<!-- Extra JavaScript/CSS added manually in "Settings" tab -->
<!-- Include jQuery -->
<script type="text/javascript" src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<!-- Include Date Range Picker -->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.4.1/js/bootstrap-datepicker.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.4.1/css/bootstrap-datepicker3.css"/>
<script>
$(document).ready(function(){
var date_input=$('input[name="date"]'); //our date input has the name "date"
var container=$('.bootstrap-iso form').length>0 ? $('.bootstrap-iso form').parent() : "body";
date_input.datepicker({
format: 'dd/mm/yyyy',
container: container,
todayHighlight: true,
autoclose: true,
})
})
</script>
</body>
</html>
And this is my table:
ID,ARTICOLAZIONE,NOME1,NOME2,PHONE,INDIRIZZO,CITTA
I know I have to create the connection.php file to connect to my database and another file that insert the results in my HTML table (under the datepicker).
******UPDATE********
Thank you for your help. This has been very frustrating.
In order to try and show you where I am having issues, I just created 2 pages to show what is going on.
http://www.kolosse.org/stack/border
http://www.kolosse.org/stack/fail
border is partially what I am going for. Not complete, but a start. And oddly enough, using CSS. but just inline on the table tag.
Fail is what I am seeing. Most of the code below is taken (in part) from the files that have made up "fail".
I hope this helps show what the issue is and you are able to see live something I am not.
******END UPDATE********
I am working on a website, and I am having an issue with my CSS not loading in certain sections. Most of the site works great. I am using bootstrap for responsiveness. But there is one spot that is giving me trouble. I have about 10 different pages that all work, that all pull from the CSS, and the page that this is from pulls from the CSS, except just this part. Here is the HTML code:
<!DOCTYPE HTML>
<html>
<head>
<meta name="description" content="The Krewe of Kolosse based in Dothan, AL" />
<link href="css/bootstrap.css" rel="stylesheet" type="text/css" media="all">
<link href="css/style.css" rel="stylesheet" type="text/css" media="all" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="keywords" content="Mardi gras, mardi, gras, dothan, alabama, parade, gra" />
<script type="application/x-javascript"> addEventListener("load", function() { setTimeout(hideURLbar, 0); }, false); function hideURLbar(){ window.scrollTo(0,1); } </script>
<link href='http://fonts.googleapis.com/css?family=Open+Sans:400,300,600,700,800' rel='stylesheet' type='text/css'>
<script src="js/jquery.min.js"></script>
<title>******* | Member Directory</title>
</head>
<body id="directoryP">
<!-- header -->
<div class="header">
<div class="container">
<div class="logo">
<img src="../images/logo.png" class="img-responsive" alt="" />
</div>
<div class="header-right">
<div class="header-top">
<ul>
<li><i class="fb"> </i></li>
<div class="clearfix"></div>
</ul>
</div>
<div class="head-nav">
<span class="menu"> </span>
<ul class="cl-effect-15">
<li id="home">HOME</li>
<li id="calendar">CALENDAR
</li>
<li id="ball">BALL</li>
<li id="directory">MEMBER DIRECTORY</li>
<li id="members">LOGOUT</li>
<div class="clearfix"> </div>
</ul>
</div>
</div>
<div class="clearfix"> </div>
<!-- script-for-nav -->
<script>
$( "span.menu" ).click(function() {
$( ".head-nav ul" ).slideToggle(300, function() {
// Animation complete.
});
});
</script>
<!-- script-for-nav -->
</div>
</div>
<!-- header -->
<!-- content -->
<div class="content-top">
<div class="contact">
<div class="container">
<div class="contact-main">
<h3>MEMBER DIRECTORY</h3>
<div class="member-top">
<table class="member-top">
<tbody>
<tr>
<td class="member-top" width="75px"><h5>Member Number</h5></td>
<td class="member-top" width="110px"><h5>First Name</h5></td>
<td class="member-top" width="110px"><h5>Last Name</h5></td>
<td class="member-top" width="250px"><h5>Business</h5></td>
<td class="member-top" width="110px"><h5>Phone</h5></td>
<td class="member-top" width="220px"><h5>Email</h5></td>
<td class="member-top" width="75px"><h5>Year<br>Joined</h5></td>
<td class="member-top"><h5>Notes</h5></td>
<td class="member-top" width="75px"><h5>Status</h5></td>
</tr>
<tr class="member-data">
<td class="member-data">1</td>
<td class="member-data">******</td>
<td class="member-data">******</td>
<td class="member-data">******</td>
<td class="member-data">(***) ***-****</td>
<td class="member-data">****#*****.com</td>
<td class="member-data">****</td>
<td class="member-data">*******</td>
<td class="member-data">*****</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
<!-- content -->
<!-- footer -->
<div class="footer">
<div class="container">
<div class="soc">
<div class="social">
<ul>
<li><i class="facbk"> </i></li>
<div class="clearfix"></div>
</ul>
</div>
</div>
<div class="foot-bottom">
<div class="col-md-4 flick">
<h4>SNAPSHOTS</h4>
<ul>
<li><img src="./Directory-failed_files/img1.jpg" class="img-responsive" alt=""></li>
<li><img src="./Directory-failed_files/img3.jpg" class="img-responsive" alt=""></li>
<li><img src="./Directory-failed_files/img4.jpg" class="img-responsive" alt=""></li>
<li><img src="./Directory-failed_files/img6.jpg" class="img-responsive" alt=""></li>
<li><img src="./Directory-failed_files/img9.jpg" class="img-responsive" alt=""></li>
<li><img src="./Directory-failed_files/img10.jpg" class="img-responsive" alt=""></li>
<div class="clearfix"></div>
</ul>
</div>
<div class="col-md-4 flick1">
<h4>POPULAR POSTS</h4>
<div class="flick2">
<div class="flick-left">
<div class="portfolio-wrapper ">
<img src="./Directory-failed_files/img1.jpg" class="img-responsive" alt="">
<ul class="social-ic">
</ul>
</div>
</div>
<div class="flick-right">
<p>Smile King!</p>
</div>
<div class="clearfix"></div>
</div>
<div class="flick2">
<div class="flick-left">
<div class="portfolio-wrapper ">
<img src="./Directory-failed_files/img3.jpg" class="img-responsive" alt="">
<ul class="social-ic">
</ul>
</div>
</div>
<div class="flick-right">
<p>The Lovely Ladies!</p>
</div>
<div class="clearfix"></div>
</div>
</div>
<div class="col-md-4 flick">
<h4>EMAIL US</h4>
<div class="flick-form_grid">
<form method="post" action="{domain}/html_float_send">
<input type="text" name="name" maxlength="50" class="textbox" value="Name" onfocus="this.value = '';" onblur="if (this.value == '') {this.value = 'Name';}">
<input type="text" name="email" maxlength="80" class="textbox" value="Email" onfocus="this.value = '';" onblur="if (this.value == '') {this.value = 'Email';}">
<input type="text" name="phone" maxlength="80" class="textbox" value="Phone" onfocus="this.value = '';" onblur="if (this.value == '') {this.value = 'Phone';}">
<input type="text" name="comments" maxlength="1000" class="textbox" value="Comments" onfocus="this.value = '';" onblur="if (this.value == '') {this.value = 'Message';}">
<div class="smt">
<input type="submit" value="email">
</div>
</form>
</div>
</div>
<div class="clearfix"> </div>
</div>
</div>
</div>
<div class="footer-bottom">
<div class="container">
<div class="foot-left">
<div class="foot-nav">
<ul>
<li>HOME</li>
<li>CALENDAR</li>
<li>LEAVE</li>
</ul>
</div>
</div>
<div class="foot-right">
<p>Copyrights © 2017 ******** All rights reserved | Website by ***** | Privacy Policy | Terms & Conditions </p>
</div>
<div class="clearfix"> </div>
</div>
</div>
<!-- footer -->
</body></html>
The code functions to create the table. The data from mysql displays. The issue is the table formatting. The CSS formatting is not coming over. I have the various classes created in my CSS (see below), but when I view the site, none of the formatting takes effect. In Chrome, I use more tools -> developer tools and look to see what code is there, and the site is pulling from bootstrap css, but is not pulling from my css.
.member-top table {
color: #f0f0f0;
align: left;
border-spacing: .8em;
border-collapse: collapse;
padding: 10em;
width: 100%;
border: 1em;
}
.member-top tr {
text-align: center;
padding: 10em;
}
.member-top td {
text-align: center;
padding: 10em;
}
.member-data tr {
text-align: center;
padding: 10em;
}
.member-data td {
text-align: left;
padding: 10em;
}
I am aware that a value of 10em is rather large. But at this point I was using a value of that size to see if any changes were being made.
Above is the code for the rendered page. It does not create my borders or space as I want.
Below is the code that works.
.member-top table {
color: #f0f0f0;
align: left;
border-spacing: .8em;
border-collapse: collapse;
padding: 10em;
width: 100%;
border: 1em;
}
.member-top tr {
text-align: center;
padding: 10em;
}
.member-top td {
text-align: center;
padding: 10em;
}
.member-data tr {
text-align: center;
padding: 10em;
}
.member-data td {
text-align: left;
padding: 10em;
}
<!DOCTYPE HTML>
<html>
<head>
<meta name="description" content="The Krewe of Kolosse based in Dothan, AL" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet" type="text/css" media="all">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="keywords" content="Mardi gras, mardi, gras, dothan, alabama, parade, gra" />
<script type="application/x-javascript">
addEventListener("load", function() {
setTimeout(hideURLbar, 0);
}, false);
function hideURLbar() {
window.scrollTo(0, 1);
}
</script>
<link href='http://fonts.googleapis.com/css?family=Open+Sans:400,300,600,700,800' rel='stylesheet' type='text/css'>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<title>******* | Member Directory</title>
</head>
<body id="directoryP">
<!-- header -->
<div class="header">
<div class="container">
<div class="logo">
<img src="../images/logo.png" class="img-responsive" alt="" />
</div>
<div class="header-right">
<div class="header-top">
<ul>
<li><i class="fb"> </i></li>
<div class="clearfix"></div>
</ul>
</div>
<div class="head-nav">
<span class="menu"> </span>
<ul class="cl-effect-15">
<li id="home">HOME</li>
<li id="calendar">CALENDAR</li>
<li id="ball">BALL</li>
<li id="directory">MEMBER DIRECTORY</li>
<li id="members">LOGOUT</li>
<div class="clearfix"> </div>
</ul>
</div>
</div>
<div class="clearfix"> </div>
<!-- script-for-nav -->
<script>
$("span.menu").click(function() {
$(".head-nav ul").slideToggle(300, function() {
// Animation complete.
});
});
</script>
<!-- script-for-nav -->
</div>
</div>
<!-- header -->
<!-- content -->
<div class="content-top">
<div class="contact">
<div class="container">
<div class="contact-main">
<h3>MEMBER DIRECTORY</h3>
<div class="member-top">
<table align="left" cellspacing="5" cellpadding="8" width="100%" border="2" bordercolor="#777777">
<tbody>
<tr>
<td width="75px">
<h5>Member Number</h5>
</td>
<td width="110px">
<h5>First Name</h5>
</td>
<td width="110px">
<h5>Last Name</h5>
</td>
<td width="250px">
<h5>Business</h5>
</td>
<td width="110px">
<h5>Phone</h5>
</td>
<td width="220px">
<h5>Email</h5>
</td>
<td width="75px">
<h5>Year<br>Joined</h5>
</td>
<td class="member-top">
<h5>Notes</h5>
</td>
<td width="75px">
<h5>Status</h5>
</td>
</tr>
<tr>
<td>1</td>
<td>******</td>
<td>******</td>
<td>******</td>
<td>(***) ***-****</td>
<td>****#*****.com</td>
<td>****</td>
<td>*******</td>
<td>*****</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
<!-- content -->
<!-- footer -->
<div class="footer">
<div class="container">
<div class="soc">
<div class="social">
<ul>
<li><i class="facbk"> </i></li>
<div class="clearfix"></div>
</ul>
</div>
</div>
<div class="foot-bottom">
<div class="col-md-4 flick">
<h4>SNAPSHOTS</h4>
<ul>
<li><img src="./Directory-failed_files/img1.jpg" class="img-responsive" alt=""></li>
<li><img src="./Directory-failed_files/img3.jpg" class="img-responsive" alt=""></li>
<li><img src="./Directory-failed_files/img4.jpg" class="img-responsive" alt=""></li>
<li><img src="./Directory-failed_files/img6.jpg" class="img-responsive" alt=""></li>
<li><img src="./Directory-failed_files/img9.jpg" class="img-responsive" alt=""></li>
<li><img src="./Directory-failed_files/img10.jpg" class="img-responsive" alt=""></li>
<div class="clearfix"></div>
</ul>
</div>
<div class="col-md-4 flick1">
<h4>POPULAR POSTS</h4>
<div class="flick2">
<div class="flick-left">
<div class="portfolio-wrapper ">
<img src="./Directory-failed_files/img1.jpg" class="img-responsive" alt="">
<ul class="social-ic">
</ul>
</div>
</div>
<div class="flick-right">
<p>Smile King!</p>
</div>
<div class="clearfix"></div>
</div>
<div class="flick2">
<div class="flick-left">
<div class="portfolio-wrapper ">
<img src="./Directory-failed_files/img3.jpg" class="img-responsive" alt="">
<ul class="social-ic">
</ul>
</div>
</div>
<div class="flick-right">
<p>The Lovely Ladies!</p>
</div>
<div class="clearfix"></div>
</div>
</div>
<div class="col-md-4 flick">
<h4>EMAIL US</h4>
<div class="flick-form_grid">
<form method="post" action="{domain}/html_float_send">
<input type="text" name="name" maxlength="50" class="textbox" value="Name" onfocus="this.value = '';" onblur="if (this.value == '') {this.value = 'Name';}">
<input type="text" name="email" maxlength="80" class="textbox" value="Email" onfocus="this.value = '';" onblur="if (this.value == '') {this.value = 'Email';}">
<input type="text" name="phone" maxlength="80" class="textbox" value="Phone" onfocus="this.value = '';" onblur="if (this.value == '') {this.value = 'Phone';}">
<input type="text" name="comments" maxlength="1000" class="textbox" value="Comments" onfocus="this.value = '';" onblur="if (this.value == '') {this.value = 'Message';}">
<div class="smt">
<input type="submit" value="email">
</div>
</form>
</div>
</div>
<div class="clearfix"> </div>
</div>
</div>
</div>
<div class="footer-bottom">
<div class="container">
<div class="foot-left">
<div class="foot-nav">
<ul>
<li>HOME</li>
<li>CALENDAR</li>
<li>LEAVE</li>
</ul>
</div>
</div>
<div class="foot-right">
<p>Copyrights © 2017 ******** All rights reserved | Website by ***** | Privacy Policy | Terms & Conditions </p>
</div>
<div class="clearfix"> </div>
</div>
</div>
<!-- footer -->
</body>
</html>
When I hard code the table settings, it works.
After the update in your question, it became clear to me what is wrong.
There is an error in your stylesheet, causing the browser to parse only part of it.
Please review the errors listed by the W3C validator, fix them and all should be fine.
I'm learning PHP from a book and I copied the code below from the book site. When I run it in Zend Studio and select any of the hyperlinks eg Home, all that's displayed is the name of the php file. For example index.php. It does not link to and execute the php file. Why is that?
Any help would be much appreciated, thank you.
<?php
session_start();
?>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Class Registration Template</title>
<link rel= "stylesheet" type= "text/css" href= "C:\Users\trevor.reeves\Documents\PHP&mySQLBook\php-mysql-abg-listings-1\ClassRegistration_Public/registration.css"/>
<script type= "text/javascript"></script>
</head>
<body>
<div id="wrapper">
<div id="header">
<img src="C:\Users\trevor.reeves\Documents\PHP&mySQLBook\php-mysql-abg-listings-1\ClassRegistration_Public/MatTechLogo.gif" alt="Matthews Technology" />
<h1 id="title">Class Selection and Registration</h1>
</div> <!-- id="header" -->
<div id="hnav">
<table width="400" border="0" cellspacing="2" cellpadding="2">
<tr>
<td><a class="hmenu" href="index.php">Home</a> </td>
<td>About </td>
<td>Support </td>
<td>Maintain </td>
</tr>
</table>
</div> <!-- id="hnav" -->
<div id="vnav">
<table width="120" border="0" cellspacing="2" cellpadding="2">
<tr>
<td id="vhead">Go To: </td>
</tr>
<tr>
<td>Class List </td>
</tr>
<tr>
<td>Student Entry
</td>
</tr>
</table>
</div> <!-- id="vnav" -->
<div id="main">
<h1 id="maintitle">Spring Class Schedule</h1>
<p id="mainpara">Click Register to do so for a class.</p>
<p class="red">*A footnote.</p>
</div> <!-- id="main" -->
<div id="footer">
<p id="copyright">
Copyright ©:2008 -
<?php
date_default_timezone_set('America/Vancouver');
echo date('Y');
?>
Matthews Technology
</p>
<p id="contact">
Contact us by clicking here.
</p>
</div> <!-- id="footer" -->
</div> <!-- id="wrapper" -->
<?php
;
?>
</body>
</html>
You are using the file reference your disk operating system using to access the files. You need to use the reference your server is using. Normally it would be localhost/directory/filename.php localhost will point to the location your server tells it to point to, which is located in you php.ini file.