I have a website that displays a list of user accounts on the left side going down in a list that are clickable (hyperlinks) that take you to the user's profile page. Also, I have a search field (form) in the middle of the page where users can just search for someone. However, because of that search field, the usernames displayed on the left side that are aligned with this field are broken, you cannot click on them anymore. The hyperlinks that are not aligned with the search field and are under the alignment of it work. After troubleshooting, I found out that this field in my CSS code was the cause of it: position: absolute;
Taking that field out of the CSS code breaks the position of my search field in the middle of the page and it gets placed at the bottom of the page.
I don't know how to fix this problem without breaking the positioning of my content on the page.
My code:
<?php
include('init.inc.php');
$output = '';
if(isset($_POST['search'])){
$searchq = $_POST['search'];
$searchq = preg_replace("#[^0-9a-z]#i","",$searchq); //filter, can remove
$query = mysql_query("SELECT * FROM users WHERE user_first LIKE '%$searchq%' OR user_last LIKE '%$searchq%' OR user_uid LIKE '%$searchq%'");
$count = mysql_num_rows($query);
if($count == 0){
$output = 'There was no search found!';
}else{
while($row = mysql_fetch_array($query)){
$uname = $row['user_uid'];
$fname = $row['user_first'];
$lname = $row['user_last'];
$email = $row['user_email'];
$id = $row['user_id'];
$output .= '<div> '.$uname.' '.$fname.' '.$lname.' '.$email.'</div>';
}
}
}
?>
<!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>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<link rel="stylesheet" href="./css/style.css">
</head>
<body>
<section id="showcase1">
<section id="newsletter">
<div class="container">
<h1>ProjectNet Members:</h1>
</div>
</section>
<div class="container">
<div class="userList">
<?php
foreach (fetch_users() as $user){
?>
<p>
<button><a class="userList" href="profile.php?uid=<?php echo $user['id']; ?>"><?php echo $user['username']; ?></a></button>
</p>
<?php
}
?>
</div>
</div>
<div class="searchList">
<h2>Search for members</h2>
<form id="search" action="user_list.php" method="post">
<input type="text" name="search" placeholder="Search for members..." />
<input type="submit" value="Search" />
</form>
<?php print("$output");?>
</div>
</section>
</body>
</html>
CSS:
THIS IS THE CSS FOR THE SEARCH FIELD IN THE MIDDLE OF THE PAGE
.searchList {
color: #ffffff;
text-decoration: none;
font-weight: bold;
font: 19px Arial, Helvetica,sans-serif;
text-align: center;
line-height: 35px;
margin: auto;
margin-top: -100px;
position: absolute;
top: 45%;
width: 100%;
}
#search input[type="submit"] {
cursor: pointer;
border: none;
background: #fafafa;
color: #333;
font-weight: bold;
margin: 0 0 5px;
padding: 3px;
font-size: 15px;
font: Arial, Helvetica,sans-serif;
}
#search input[type="text"] {
width: 18%;
border: 1px solid #CCC;
background: #FFF;
margin: 0 0 5px;
padding: 4px;
}
#search input[type="submit"]:hover {
background: #e8491d;
color: #fafafa;
-webkit-transition: background 0.3s ease-in-out;
-moz-transition: background 0.3s ease-in-out;
transition: background-color 0.3s ease-in-out;
}
CSS:
THIS IS THE CSS FOR THE LIST OF USERS ON THE LEFT SIDE OF THE PAGE
.userList {
color: #ffffff;
text-decoration: none;
font-weight: bold;
font: 20px Arial, Helvetica,sans-serif;
margin: auto;
}
.userList button {
background: #333;
width: 20%;
}
There isn't a whole lot of info supplied and its hard to visualize without an image but my guess would be a z-index issue.
Below you can see that the div goes from left to right(width 100%). I assume that this div is sitting on top of your userList div based on the supplied css. This means you probably cant click the hyperlinks below the searchList div.
.searchList {
color: #ffffff;
text-decoration: none;
font-weight: bold;
font: 19px Arial, Helvetica,sans-serif;
text-align: center;
line-height: 35px;
margin: auto;
margin-top: -100px;
position: absolute;
top: 45%;
width: 100%;
}
Try setting a z-index to the userlist div that is higher than the searchList so that you are able to click on the hyperlinks.
.userList {
color: #ffffff;
text-decoration: none;
font-weight: bold;
font: 20px Arial, Helvetica,sans-serif;
margin: auto;
z-index: 1000;
}
Absolute positioning is centering the searchList div in center without effecting other divs in the body. When you remove it, then the searchList div moves to the bottom because that is its location in the body.
Related
I have a web page which displays data on the left side of the page and it goes down in a list.
I need help displaying a form in the middle/right side of the page using CSS. With the current CSS I have for the form, it is displayed at the bottom of the page which is wrong, I want it to be in the middle/right. The form is basically a search field where users can search for members on the website.
I'm bad with CSS, maybe someone can also suggest a cool style for the form? :D
The div class called searchList is where the form is that I want to align to the middle/right
My code:
<?php
include('init.inc.php');
$output = '';
if(isset($_POST['search'])){
$searchq = $_POST['search'];
$searchq = preg_replace("#[^0-9a-z]#i","",$searchq); //filter, can remove
$query = mysql_query("SELECT * FROM users WHERE user_first LIKE '%$searchq%' OR user_last LIKE '%$searchq%' OR user_uid LIKE '%$searchq%'");
$count = mysql_num_rows($query);
if($count == 0){
$output = 'There was no search found!';
}else{
while($row = mysql_fetch_array($query)){
$uname = $row['user_uid'];
$fname = $row['user_first'];
$lname = $row['user_last'];
$email = $row['user_email'];
$id = $row['user_id'];
$output .= '<div> '.$uname.' '.$fname.' '.$lname.' '.$email.'</div>';
}
}
}
?>
<!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>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<link rel="stylesheet" href="./css/style.css">
</head>
<body>
<section id="showcase1">
<section id="newsletter">
<div class="container">
<h1>ProjectNet Members:</h1>
</div>
</section>
<div class="container">
<div class="userList">
<?php
foreach (fetch_users() as $user){
?>
<p>
<button><a class="userList" href="profile.php?uid=<?php echo $user['id']; ?>"><?php echo $user['username']; ?></a></button>
</p>
<?php
}
?>
</div>
</div>
<div class="searchList">
<form id="search" action="user_list.php" method="post">
<input type="text" name="search" placeholder="Search for members..." />
<input type="submit" value="Search" />
</form>
<?php print("$output");?>
</div>
</section>
</body>
</html>
CSS:
.searchList {
color: #ffffff;
text-decoration: none;
font-weight: bold;
font: 20px Arial, Helvetica,sans-serif;
text-align: center;
}
UPDATE:
I managed to get the form in the middle of the screen, I need help moving it slightly towards the right.
CSS:
.searchList {
color: #ffffff;
text-decoration: none;
font-weight: bold;
font: 19px Arial, Helvetica,sans-serif;
text-align: center;
left: 0;
line-height: 35px;
margin: auto;
margin-top: -100px;
position: absolute;
top: 50%;
width: 100%;
float: right;
}
#search input[type="submit"] {
cursor: pointer;
border: none;
background: #fafafa;
color: #333;
font-weight: bold;
margin: 0 0 5px;
padding: 3px;
font-size: 15px;
font: Arial, Helvetica,sans-serif;
}
#search input[type="text"] {
width: 18%;
border: 1px solid #CCC;
background: #FFF;
margin: 0 0 5px;
padding: 4px;
}
}
#search input[type="submit"]:hover {
background: #e8491d;
color: #fafafa;
-webkit-transition: background 0.3s ease-in-out;
-moz-transition: background 0.3s ease-in-out;
transition: background-color 0.3s ease-in-out;
}
Use CSS position property or float property.
To display form on the right of the page use float : right;
form {
float : right;
}
Moving to the right, where the 4th value is the left padding.
padding: 0px 0px 0px 30px;
..alternatively you can use.
padding-left: 30px;
If you want to have better control of the layout structure I suggest you use "grid" which is embedded in css. Search for "css grid".
#charset "UTF-8";
#moviesbox{
white-space: nowrap;
background-color: #363e4f;
width:4000px;
position:absolute;
overflow:auto;
}
.slider {
position: relative;
width: 155px;
display: inline-block;
background-color: #D4D4D4;
margin-bottom: 2em;
height: 300px;
padding: 3px;
white-space: normal;
}
h1 {
color: #00ff00;
}
p {
background-color: transparent;
color: #ffffff;
}
div
{
color: #00cc00;
}
div #controls
{
color: red;
}
div a
{
color: #00cc00;
}
div a:active {
color: #00cc00;
}
div a:hover {
color: #F58100;
}
<!--/MAIN PANEL/-->
#parent {
width:400px;
}
#controls, #monitor {
float:left;
margin-top:0px;
padding-below:200px;
height:400px;
width:50%;
border:1px;
display:inline-block;
solid rgba(0,0,0,1);
text-align:center;
}
<!--/CONTENT AND CONTROLS/-->
#detail {
width:320px;
height:180px;
margin-bottom:12px;
border: 1px solid #000000;
}
h1text {
color: #fb667a;
font-size: 16px;
font-weight: bold;
float:left;
width:159px;
white-space:pre-wrap;
background: transparent;
}
.year {
float:left;
background: transparent;
}
img {
margin-bottom: 5px;
background:#fff;
cursor:pointer;
transform: scale(1);
-moz-box-shadow: 0px 1px 5px 0px #00cc00;
-webkit-box-shadow: 0px 1px 5px 0px #00cc00;
box-shadow: 0px 1px 5px 0px #00cc00;
}
img:hover {
opacity: 0.5;
cursor:pointer;
transform: scale(1);
visibility:visible;
transition: all .2s ease-in-out;
transform: scale(1.1);
z-index:100;
transition-timing-function:cubic-bezier(0.5, 0, 0.1, 1);
transition-duration:400ms;
}
::-webkit-scrollbar {
width: 0px; /* remove scrollbar space */
background: transparent; /* optional: just make scrollbar invisible */
}
/* optional: show position indicator in red */
/*::-webkit-scrollbar-thumb {
background: #FF0000;
}*/
#detail div {
position:relative;
width:100%;
height:100%;
}
#detail div img {
position: absolute;
top: 0;
left:0;
width:100%;
height: 400px;
z-index:1;
}
#detail div span {
color:#ffffff;
position:absolute;
margin
bottom:0;
right:0;
text-align:center;
width:100%;
background: #00cc00;
opacity: .8;
z-index:2;
}
#detail div span2 {
color:#ffffff;
position:absolute;
top:200px;
right:10px;
text-align:center;
width:50%;
height:200px;
background: #F58100;
opacity: .8;
z-index:10;
}
#links img {
width:10%;
height:30%;
margin-left:16px;
margin-top:100px;
}
<!--/SLIDER/-->
.track {
position: absolute;
top: 10px;
left: 10px;
margin: 0;
padding: 0;
border: 0;
width: 2000px;
}
.book {
float: left;
margin: 0;
margin-right: 10px;
padding: 0;
border: 0;
width: 150px;
height: 150px;
-webkit-transition: opacity 0.2s;
-moz-transition: opacity 0.2s;
-ms-transition: opacity 0.2s;
-o-transition: opacity 0.2s;
-webkit-transition: opacity 0.2s;
}
.book:hover {
opacity: 0.5;
}
.book:nth-child(1) {
background-color: #ff0000;
}
.book:nth-child(2) {
background-color: #ffaa00;
}
.book:nth-child(3) {
background-color: #ffff00;
}
.book:nth-child(4) {
background-color: #00ff00;
}
.book:nth-child(5) {
background-color: #0000ff;
}
.book:nth-child(6) {
background-color: #aa00ff;
}
.book:nth-child(7) {
background-color: #ff00ff;
}
.left, .right {
position: absolute;
color: white;
font-size: 48px;
top: 57px;
cursor: pointer;
z-index: 1;
}
.left {
left: 0;
}
.right {
right: 0;
}
<?php
//database connection
$host = 'localhost';
$user = 'root';
$pass = 'root';
$db = 'pixbeans';
/* 1) mysqli and mysqli result objects */
//$mysqli is object of mysqli class
$mysqli = new mysqli($host,$user,$pass,$db);
//print_r($mysqli);die;
//call query method of $mysqli object
$result = $mysqli->query
//SELECT queries are always return as mysqli result objects
("SELECT * FROM movies WHERE year BETWEEN 2000 AND 2016 ORDER BY rand() LIMIT 20")
or die($mysqli->error);
?>
<html>
<head>
<meta charset="utf-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>pixBeans - Original Black TV Series</title>
<meta name="author" content="Antonio James">
<link rel="shortcut icon" href="assets/Icons/pixBeans icon.png">
<link href="tabpan.css" rel="stylesheet" type="text/css">
</head>
<style>*{margin: 0px; padding: 0px; background-color:black;}</style>
<body>
<div id="main-wrapper">
<div id="moviesbox" style="display:inline-block;">
<?php while ($movie = $result->fetch_assoc()): ?>
<div id="left1" class="left"><</div>
<div id="right1" class="right">></div>
<div class="slider" >
<img width='<?php 67*2.3 ?>' height='<?= 98*2.3 ?>' src='<?= $movie['image_url'] ?>'> <br>
<h1text><?= $movie['title'] ?></h1text> <br>
<span class='year'>(<?= $movie['year'] ?>)</span>
</div>
</div>
<?php endwhile; ?>
<script src="jquery-mobile/jquery-1.11.1.min.js"></script>
<script src="javascript/tabpan.js"></script>
<script src="javascript/imgjump.js"></script>
<script src="javascript/imgslider.js"></script>
</body>
</html>
I am trying to make all my images display on one horizontal line/row that can be scrolled left or right. However, no matter what I do I cannot seem to make the images quit wrapping to the next line. They are responsive so if i make the screen small 2 images will appear and the rest wraps to a new line. If i make full screen several images appear and the other 15 wrap accordingly. However, I want them to stay on one line. I dont care if the overflow is hidden or if the overflow scrolls in from off the page, I just want them to quit wrapping.
Here is what the site looks like right now:
screen shot. I made the parent div"moviesbox" dark grey so that you can see how far the div extends and I am using light grey to show the div area.
Here is the code that I am using to generate the images into the divs:
<div id="moviesbox" style="display:inline-block;">
fetch_assoc()): ?>
<div id="left1" class="left"><</div>
<div id="right1" class="right">></div>
<div class="slider" >
<img width='<?php 67*2.3 ?>' height='<?= 98*2.3 ?>' src='<?= $movie['image_url'] ?>'> <br>
<h1text><?= $movie['title'] ?></h1text> <br>
<span class='year'>(<?= $movie['year'] ?>)</span>
</div>
Here is the CSS I am using. I PREFER TO USE CSS but if not, i'm open to other fixes.
#moviesbox{
white-space: nowrap;
background-color: #363e4f;
width:4000px;
position:absolute;
overflow:auto;
}
.slider {
position: relative;
width: 155px;
display: inline-block;
background-color: #D4D4D4;
margin-bottom: 2em;
height: 300px;
padding: 3px;
white-space: normal;
}
THanks.
I am trying to join the the footer-document to the index-file. But it does not work and I suspect there i something wrong with my css-file.
html {background: url("bakgrund.gif");}
/*https://pixabay.com/ Gratis bilder Creative Commons CC0*/
html { overflow-y: scroll;}
body {
background: white;
border: 1px solid #0000ff;
font-family: calibri, arial, sans-serif;
width: 750px;
margin: 25px auto;
padding: 0;
}
header {
height: 175px;
background-color: #edffff;
margin-top: -16px;
padding: 0;
}
nav {
height: 35px;
background-color: #edffff;
padding-left: 10px;
}
section {
width: 550px;
float: left;
min-height: 400px;
}
article {
width: 550px;
float: left;
background-color: yellow;
}
aside {
width: 200px;
float: right;
background-color: lightgrey;
}
footer {
clear: both;
position: relative;
height: 55px;
padding: 5px ;
text-align: center;
background-color: magenta;
}
address {
font-size: 12px;
font-style: normal;
}
/* Menykataloger */
ul {
margin: 0;
padding: 0;
}
#meny li {
display: inline;
padding: 5px 1px;
}
#meny li a {
margin: 0 5px 0 5px;
padding: 5px 15px;
text-align: center;
font-family: arial;
font-size: 13px;
font-weight: bold;
color: black;
border: 1px solid black;
border-radius: 5px;
background: yellow;
}
#meny li a:hover {
background: #CCEBFF;
color: black;
}
#meny a:link, #meny a:visited {
color: black;
text-decoration: none;
}
#meny a:active {
color: white;
}
#meny a#current {
background: white;
}
<!DOCTYPE html>
<html lang="en-US">
<head>
<title>Test</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link rel="stylesheet" href="stil.css" type="text/css">
</head>
<body>
<nav>
<ul id="meny">
<li>Hem</li>
<li>AAA</li>
<li>BBB</li>
<li>CCC</li>
</ul>
</nav>
<section>
<h2>Huvudrubrik</h2>
<p>Huvudinnehåll</p>
<article>
<h2>Rubrik 1</h2>
<p> Innehåll 1 med rubriker</p>
</article>
<article>
<h2>Rubrik 2</h2>
<p> Innehåll 2 med rubriker
</p>
</article>
</section>
<aside>
Nyhetsbrev H-spalt
</aside>
<?php include("fot.php"); ?>
The result is wrong with the interpretation of the border. It just encircles the head and not the whole area.
I Get your problem
why dont you start your file with < ? php at begining and close it at the end
instead which you've used like this => "< ? php include("fot.php");" ?> at the end of your second file if you can see.
and save the main html file with the extension .php
trust me nothing will happen to your html code all the html contents will run fine even if you save the file in .php
and the second thing is you can include in two ways
i.e
include 'filename';
or
require 'filename'; you better include at the starting of the file
who would know if that included file may come to use right from the begining
Thanking you!
I could not understand what you are trying to do, but your problem is due to float: left for section tag. There are many alternatives to float like flex and grid,, so don't prefer float. It will cause many problems. Your problem is listed here.
There is no problem with your php.
The user arrives on the following php script and it sets if the email has been confirmed or not.
At the moment the only thing the user can seen in the browser is a very simple message printed by the php echo.
I would like it to look visually more interesting. Get this echo to be part of a properly styled HTML page with header, font styles, signature, images...
What would be the best approach for that having in mind my script has breakpoints? As I never did that before, not sure what would be the best start point to focus the effort on.
Bellow are my code updates based on the answers. Hope that helps other
users that are new to php.
<?php
require("../db/MySQLDAO.php");
require ("../Classes/EmailConfirmation.php");
$config = parse_ini_file('../db/SwiftApp.ini');
//host access data
$dbhost = trim($config["dbhost"]);
$dbuser = trim($config["dbuser"]);
$dbpassword = trim($config["dbpassword"]);
$dbname = trim($config["dbname"]);
// receive token data
$emailToken = htmlentities($_GET["token"]);
?>
<!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>
<meta name="viewport" content="width=device-width" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Title here</title>
<style>
/* -------------------------------------
GLOBAL
------------------------------------- */
* {
margin: 0;
padding: 0;
font-family: "Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif;
font-size: 100%;
line-height: 1.6;
}
img {
max-width: 100%;
}
body {
-webkit-font-smoothing: antialiased;
-webkit-text-size-adjust: none;
width: 100%!important;
height: 100%;
}
/* -------------------------------------
ELEMENTS
------------------------------------- */
a {
color: #348eda;
}
.btn-primary {
text-decoration: none;
color: #FFF;
background-color: #348eda;
border: solid #348eda;
border-width: 10px 20px;
line-height: 2;
font-weight: bold;
margin-right: 10px;
text-align: center;
cursor: pointer;
display: inline-block;
border-radius: 25px;
}
.btn-secondary {
text-decoration: none;
color: #FFF;
background-color: #aaa;
border: solid #aaa;
border-width: 10px 20px;
line-height: 2;
font-weight: bold;
margin-right: 10px;
text-align: center;
cursor: pointer;
display: inline-block;
border-radius: 25px;
}
.last {
margin-bottom: 0;
}
.first {
margin-top: 0;
}
.padding {
padding: 10px 0;
}
/* -------------------------------------
BODY
------------------------------------- */
table.body-wrap {
width: 100%;
padding: 20px;
}
table.body-wrap .container {
border: 1px solid #f0f0f0;
}
/* -------------------------------------
FOOTER
------------------------------------- */
table.footer-wrap {
width: 100%;
clear: both!important;
}
.footer-wrap .container p {
font-size: 12px;
color: #666;
}
table.footer-wrap a {
color: #999;
}
/* -------------------------------------
TYPOGRAPHY
------------------------------------- */
h1, h2, h3 {
font-family: "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
color: #d63480;
margin: 40px 0 10px;
line-height: 1.2;
font-weight: 200;
}
h1 {
font-size: 36px;
}
h2 {
font-size: 28px;
}
h3 {
font-size: 22px;
}
p, ul, ol {
margin-bottom: 10px;
font-weight: normal;
font-size: 14px;
}
ul li, ol li {
margin-left: 5px;
list-style-position: inside;
}
/* ---------------------------------------------------
RESPONSIVENESS
------------------------------------------------------ */
/* Set a max-width, and make it display as block so it will automatically stretch to that width, but will also shrink down on a phone or something */
.container {
display: block!important;
max-width: 600px!important;
margin: 0 auto!important; /* makes it centered */
clear: both!important;
}
/* Set the padding on the td rather than the div for Outlook compatibility */
.body-wrap .container {
padding: 20px;
}
/* This should also be a block element, so that it will fill 100% of the .container */
.content {
max-width: 600px;
margin: 0 auto;
display: block;
}
/* Let's make sure tables in the content area are 100% wide */
.content table {
width: 100%;
}
</style>
</head>
<body bgcolor="#f6f6f6">
<!-- body -->
<table class="body-wrap" bgcolor="#f6f6f6">
<tr>
<td></td>
<td class="container" bgcolor="#FFFFFF">
<!-- content -->
<div class="content">
<table>
<tr>
<td>
<h1>Title</h1>
<table>
<tr>
<td class="padding">
<p>
<?php
if(empty($emailToken)) {
echo "<h2>Sorry, something went wrong...</h2>";
echo "<p>Unfortunately your email validation token has expired.</p>";
echo "<p>Please get in contact with us at <a href=mailto:></a></p>";
}
else{
//open server connection
$dao = new MySQLDAO($dbhost, $dbuser, $dbpassword, $dbname);
$dao->openConnection();
//creates user
$user_id = $dao->getUserIdWithToken($emailToken);
if(empty($user_id))
{
echo "<h2>Sorry, something went wrong...</h2>";
echo "<p>We could not find an user associated with the email you provided.</p>";
echo "<p>Please get in contact with us at <a href></a></p>";
}
else{
$result = $dao->setEmailConfirmedStatus(1, $user_id);
if($result)
{
echo "<h2>Thank you! Your email is now confirmed!<h2>";
$dao->deleteUsedToken($emailToken);
}
}
$dao->closeConnection();
}
?>
</p>
</td>
</tr>
</table>
<p class="padding"></p>
<p>Thanks,</p>
<p>Title team</p>
<p class="padding"></p>
</td>
</tr>
</table>
</div>
<!-- /content -->
</td>
</tr>
</table>
<!-- /body -->
</body>
</html>
Use HTML to structure your content and CSS to format your content.
You can echo HTML and CSS right along with your string.
Those links should get you going in the right direction.
Update to accommodate comment
There are many methods, but a simple example that might work for your case is something like this:
Instead of echoing right there in your if statement, replace it with an include or require.
Lets call that file template.php. This file does not need to start with <?php and end with ?>. PHP can punch in and out with HTML. So template.php might look like this:
<!DOCTYPE html>
<html>
<head>
<meta name="description" content="" />
<meta name="keywords" content="" />
<meta charset="UTF-8">
<title></title>
<link href="css/styles.css" rel="stylesheet" />
</head>
<body>
<div class="some_style"><?php
echo 'something';
?></div>
<div class="some_style2"><?php
echo $some_var;
?></div>
</body>
</html>
Also if this is going to be sent in an email, CSS is not really supported in email, so you will need to keep the styling to what you can do with simple HTML tags and images.
Change your echo to:
echo '<div id="message">User with this email token is not found</div>';
Then style #message with css
Hope that helps!
urgh.. uglyness html in php. There are ways in which you can include html within the script without echoing it out.
There is the old way.
// out of php
?>
<div>
<?php echo $content; ?>
</div>
<?
// back in.
Or you can look into php/html short hand. Your code will benefit from it because it will be somewhat cleaner to read,
The main reason though, dont make php parse html unless you have to.
PHP
echo "<p id='token_message'>User with this email token is not found</p>";
CSS
#token_message {
/* Styling Here */
}
I'm getting back into web design after a several year break, so a lot of the tips and tricks that I used on a regular basis before just don't seem to be working. I'm designing a guild website for my World of Warcraft guild for some practice, but I'm having issues getting the div background images to show up properly on the page.
The page consists of a container DIV, a header DIV, a Menu DIV, and a three column layout, followed of course by a footer div. Above the menu I have a little artistic background I'm susing, and I managed to get that one to show up; however, I can't get the proper image to show up above the left or right bars properly. I've searched the net a ton, and am still dumbfounded as to what I'm doing wrong. Here is a screen shot of what I sort of want the layout to look like: http://s19.postimage.org/7svzmuaf7/Layout_V2.jpg
Currently, this is what I'm getting when you visit the website in any major browser: http://cirquedufreak.net78.net/
There is obviously some differences in the two, as one is just a jpg, and the other is a css/html combo, and that I'm aware of. Thank you for any help you can provide.
Source Code:
index.php:
<?php
session_start();
include("wowarmoryapi/BattlenetArmory.class.php");
?>
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Home - Cirque du Freak of Vashj</title>
<link rel="stylesheet" type="text/css" href="layout.css" />
<link rel="shortcut icon" type="image/x-icon" href="/favicon.ico">
</head>
<body>
<div id="container">
<div id="header"> </div>
<div id="menu">
<ul>
<li>Home</li>
<li>Roster</li>
<li>Forums</li>
<li>About</li>
<li>Contact</li>
<li>Books</li>
</ul>
</div>
<div id="leftbar">LEFTBAR</div>
<div id="content">
<div id="gmod">
<h1>Important Message</h1>
<p>This is where any "breaking news" or important information that you want to give to the players will be displayed.</p>
</div>
</div>
<div id="rightbar">
<p>For an invitation, contact one of the following players in game:</p>
<?php
?>
</div>
<div id="footer">©2012 Cirque du Freak Guild of Vashj; All Rights Reserved.<br />World of Warcraft and related images and materials are © Blizzard Entertainment.</div>
</div>
</body>
</html>
layout.css:
#charset "utf-8";
/* CSS Document */
/* CSS LAYOUT BEGIN */
body {
margin: 0;
padding: 0;
background-color: #000;
color: #FC3;
text-align: center;
}
div#container {
margin: 0 auto;
text-align: left;
width: 1024px;
height: auto;
}
div#header {
width: 1024px;
height: 147px;
background: url(images/v2_header.png);
}
div#menu {
width:1024px;
height: 70px;
text-align:center;
background: url(images/v2_menuBG.png);
}
div#leftbar {
float: left;
width: 170px;
height: 525px;
min-heigh: 150px;
background-image: url(images/v2_barBG.png) no-repeat;
display: inline-block;
background-position: top left;
}
div#content {
float: left;
width: 684px;
min-height: 50px;
height: 525px;
}
div#rightbar {
float: right;
width: 170px;
height: 525px;
min-height: 50px;
background-image: url(images/v2_barBG.png) no-repeat;
}
div#footer {
width: 1024px;
height: 50px;
text-align: center;
clear: both;
}
/* CSS LAYOUT END */
/* CSS MENU BEGIN */
#menu ul {
margin: 0;
padding: 0;
float: left;
list-style: none;
width: 1024px;
}
#menu ul li {
display: inline;
}
#menu ul li a {
float: left;
text-decoration: none;
padding: 10.5px 11px;
width: 140px;
color: #FF0;
font-weight: bold;
font-size: 24px;
background-color: transparent;
vertical-align: text-bottom;
}
#menu ul li a:visited {
color: #FF0;
}
#menu ul li a:hover, #menu ul li .current {
color: #F00;
text-decoration: underline;
background-color: transparent;
}
/* CSS MENU END */
/* LEFT BAR CSS BEGIN */
/* LEFT BAR CSS END */
/* CONTENT BOX CSS BEGIN */
#content div#gmod {
width: 500px;
height: 150px;
text-align: center;
border: #FFF 3px solid;
background-color: #000;
margin: 0 auto;
color: #FFF;
overflow-style: auto;
overflow: scroll;
overflow-x: hidden;
padding-left: 4px;
padding-right: 4px;
}
#content div#gmod h1 {
text-align: center;
color: #F00;
font-size: 24px;
font-weight: bold;
text-decoration: underline;
padding: 0px 5px;
/* CONTENT BOX CSS END */
/* RIGHT BAR CSS BEGIN */
/* RIGHT BAR CSS END */
/* FOOTER CSS BEGIN */
#footer {
color: #999;
text-align: center;
}
/* FOOTER CSS END */
Thank you very much for taking the time to assist me with this problem.
Don't use
background-image: url(images/v2_barBG.png) no-repeat;
but
background: url(images/v2_barBG.png) no-repeat;
background-image: url(images/v2_barBG.png) no-repeat; should be background-image: url(images/v2_barBG.png); background-repeat: no-repeat;
background-image: url(images/v2_barBG.png) no-repeat; <-- no-repeat should be declared seperatly like this: background-repeat: no-repeat;