I am trying to make a log-in/register website, and it is all going well, but then when I came to do the nav bar.
EDIT: That works, but the nav bar buttons defined in the PHP code are not clickable.
index.php code
<html>
<head>
<LINK href="css/style.css" rel="stylesheet" type="text/css">
</head>
<header>
</header>
<body>
<nav id="menu">
<ul id="menu">
<li onclick="document.getElementById('content_box').src='pages/home.html'">Home</li>
<li onclick="document.getElementById('content_box').src='pages/videos.html'">Videos</li>
<li onclick="document.getElementById('content_box').src='pages/news.html'">News</li>
<?php
session_start();
if(isset($_SESSION['username']))
{
echo "<li onclick=" . "document.getElementById(" . "content_box" . ").src=" . "pages/accounts/php/user.php" . ">Account</li>";
}
else
{
echo "<li onclick=" . "document.getElementById(" . "content_box" . ").src=" . "pages/accounts/login.html". ">Log In</li>";
}
?>
</ul>
</nav>
<iframe id="content_box" src="pages/home.html" style="border: none;"></iframe>
</body>
</html>
Stylesheet
#blue_dl_button {
width: 200;
height: 50;
background-color: 00cffc;
color: ffffff;
font-family: Tahoma;
font-size: 14;
border-color: 00cffc;
border-radius: 0;
padding: 0;
margin 0;
float:left;
}
#green_dl_button {
width: 200;
height: 50;
background-color: 33CC00;
color: ffffff;
font-family: Tahoma;
font-size: 14;
border-color: 33CC00;
border-radius: 0;
padding: 0;
margin 0;
float: left;
}
#red_dl_button {
width: 200;
height: 50;
background-color: CC3300;
color: ffffff;
font-family: Tahoma;
font-feature-settings:
font-size: 14;
border-color: CC3300;
border-radius: 0;
padding: 0;
margin 0;
float:left
}
#header_image{
max-width: 100%;
width: auto;
height: auto;
}
header{
background-image: url("/header.png");
width: 100%;
padding: 169px 0px;
color: white;
display: block;
margin-left: auto;
margin-right: auto;
background-repeat: no-repeat;
background-position: center;
}
#content_box{
max-width: 100%;
width: 99.85%;
height: 100%;
}
ul#menu{
background-color: #00C1A7;
overflow: hidden;
font-family: Tahoma;
color: white;
padding: 0;
text-align: center;
margin: 0;
-webkit-transition: max-height 0.4s;
-ms-transition: max-height 0.4s;
-moz-transition: max-height 0.4s;
-o-transition: max-height 0.4s;
transition: max-height 0.4s;
}
ul#menu li{
display: inline-block;
padding: 20px;
}
ul#menu li:hover{
background: #00FFE1;
}
#news_title{
font-family: Tahoma;
font-size: 28;
}
#text{
font-family: Tahoma;
font-size: 18;
}
It ends up looking like https://puu.sh/9uVEy/5b39cb95e6.png
I am stumped as I have looked all over for a solution and could not find one!
Updated code with echo (PHP Bit only)
<?php
session_start();
if($_SESSION['username'])
{
echo "<li onclick='document.getElementById('content_box').src='pages/accounts/php/user.php''>Account</li>";
}
else
{
echo "<li onclick='document.getElementById('content_box').src='pages/accounts/login.html''>Log In</li>";
}
?>
Your li item is in the php tag. You need to either echo it out, or push it out of the php coding. I would do it outside of it, since you use single as well double quotes within it.
Try
<?php
session_start();
if($_SESSION['username'])
{
?>
<li onclick="document.getElementById('content_box').src='pages/accounts/php/user.php'">Account</li>
<?php
} else {
?>
<li onclick="document.getElementById('content_box').src='pages/accounts/login.html'">Log In</li>
<?php
}
?>
Also, it's $_SESSION not _$SESSION. I fixed that too.
Last but not least. Your file extention. You use the index.html file as readout. HTML files cant read the php code and won't accept your script within the <?php ?> tags. They will read over it, but won't execute it, because HTML won't do server side scriptwork. So in your case, simply change index.html to index.php and it should work fine.
Related
I have had a problem with creating a if statement in order to display a default profile picture in case that the user hasn't uploaded their own profile picture. I have tried many examples online yet none of them seemed to have worked on my certain code and didn't reply to working, overall. I deleted my attempts to fixing the problem and gave the original code. Here's the current code I have:
<?php
session_start();
if (!isset($_SESSION['username'])) {
$_SESSION['msg'] = "You must log in first";
header('location: login.php');
}
if (isset($_GET['logout'])) {
session_destroy();
unset($_SESSION['username']);
header("location: login.php");
}
$username = $_SESSION['username'];
$file = "extra/" . $username . ".png";
?>
<html>
<title> Home Page </title>
<link rel="stylesheet" type="text/css" href="css/main.css">
<header>
<div class="container">
<nav>
<ul>
<li>Home</li>
<li>Downloads</li>
<li>Chat</li>
<li>Profile</li>
<li class="logout">Logout</li>
</ul>
</nav>
</div>
</header>
<body>
<div class="profileIMG">
<img src=<?php echo $file; ?> width="100" height="100">
</div>
<div class="profileNAME">
<<?php echo $username ?>
</div>
</body>
<footer>
<div class="status">Currently logged in as <?php echo $username ?></div>
</footer>
</html>
CSS
ul {
list-style-type: none;
margin: 0;
padding: 0;
width: 13%;
background-color: #f1f1f1;
position: fixed;
height: 100%;
font-size: 20px;
font-family: arial;
overflow: hidden;
}
li a {
display: block;
color: #000;
padding: 8px 16px;
text-decoration: none;
}
li a.active {
background-color: #4CAF50;
color: white;
}
li a:hover:not(.active) {
background-color: #555;
color: white;
}
li a:target {
background-color: #4CAF50;
color: white;
}
li button {
display: block;
color: #000;
padding: 8px 16px;
text-decoration: none;
}
li button.active {
background-color: #4CAF50;
color: white;
}
li button:hover:not(.active) {
background-color: #555;
color: white;
}
body {
background-image: url(extra/background.png);
margin: 0;
overflow: hidden;
}
h5 {
color: green;
margin-left: 6%;
font-family: arial;
font-size: 15px;
}
input[type=text] {
width: 100%;
box-sizing: border-box;
border: 2px solid #ccc;
border-radius: 4px;
font-size: 16px;
background-color: white;
background-position: 10px 10px;
background-repeat: no-repeat;
padding: 12px 20px 12px 15px;
}
#player {
width: 200px;
height: 50px;
position: relative;
margin-left: 24px;
top: 18px;
}
#player i {
position: absolute;
margin-top: -6px;
color: #666;
}
#player i.fa-volume-down {
margin-left: -8px;
}
#player i.fa-volume-up {
margin-right: -8px;
right: 0;
}
#volume {
position: absolute;
left: 24px;
margin: 0 auto;
height: 5px;
width: 150px;
background: #555;
border-radius: 15px;
}
#volume .ui-slider-range-min {
height: 5px;
width: 300px;
position: absolute;
background: #2ecc71;
border: none;
border-radius: 10px;
outline: none;
}
#volume .ui-slider-handle {
width: 20px;
height: 20px;
border-radius: 20px;
background: #FFF;
position: absolute;
margin-left: -8px;
margin-top: -8px;
cursor: pointer;
outline: none;
z-index: 1;
}
.logStatus {
position: absolute;
bottom: 0;
}
The CSS is not needed but rather there to make viewing more pleasing. Also, the folder extra/ contains the images and the name of the default photo is defaultProfile.png.
Make this simple change at the top of your script where you are initialising your $file variable,
$file = 'extra/' . $username . '.png';
if (!file_exists($file))
$file = 'path-to-default-image';
To be fair, if you wanted to keep your code 'logical', you can flip the above check, so it sets $file to the default image location first and then if the user's image exists then switch to that:
$file = 'path-to-default-image';
if (file_exists('extra/' . $username . '.png'))
$file = 'extra/' . $username . '.png';
Reading Material
file_exists
#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 tried searching and using the codes I found somewhere else where it suggests to put:
margin:0px;
, but it still doesn't resolve my issue about the GAP created between the divs of my file. Here's the code: [The first one's the Jquery, the second is for the CSS, and the last one is the body.]
jQuery(document).ready(function(){
var navOffset = jQuery(".nav").offset().top;
jQuery(".nav").wrap('<div class="nav-placeholder"></div>');
jQuery(".nav-placeholder").height(jQuery(".nav").outerHeight());
jQuery(window).scroll(function(){
var scrollPos = jQuery(window).scrollTop();
if(scrollPos >= navOffset){
jQuery(".nav").addClass("fixed");
}
else{
jQuery(".nav").removeClass("fixed");
}
});
});
body, html {
height: 100%;
background-color:#404040;
margin:0px;
}
.parallax {
background-image: url('images/bg.jpg');
height: 100%;
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
font-size:0;
margin-bottom:0px;
}
.parallax1 {
background-image: url('images/bg.jpg');
height: 46%;
font-size:0;
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
ul.header{
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
width:100%;
top:0;
display: inline-block;
text-align:center;
background-color: #0d0d0d;
}
.nav{
z-index:999;
}
.navlink {
display: inline-block
}
.fixed{
position: fixed;
top:0;
width:100%;
background-color:#222422;
}
.nav-placeholder{
margin:0 0 40px 0;
}
.navlink a{
font-family: caviar;
display: block;
color: #f3f3f3;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size:15pt;
}
.navlink a:hover{
background-color: #f1f1f1;
color:#0d0d0d;
transition-duration: 0.4s;
}
.caption {
position: absolute;
left: 0;
top: 50%;
width: 100%;
text-align: center;
color: #000;
}
.caption span.border {
background-color: #111;
color: #fff;
padding: 18px;
font-size: 25px;
letter-spacing: 10px;
}
<body>
<div class="parallax"></div>
<div class="caption">
<span class="border"> WELCOME </span>
</div>
<div class="nav">
<ul class="header">
<ul class="header-content">
<li class="navlink">Home</li>
<li class="navlink"> Foods </li>
<li class="navlink"> Beverages </li>
</ul>
</ul>
</div>
<!-- Here's where the gap appears -->
<div id="content" style="height:300px;background-color:#f2f2f2;font-size:36px;text-align:center;">
<p>Sample Facebook Icon</p>
</div>
<div class="parallax1"></div>
</body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script type="text/javascript" src="{{ asset('/js/js.js') }}"></script>
Couple of reasons:
p element has margins.
.nav-placeholder class has margin-bottom: 40px;
ul.header (which should be div.header) is displayed as
inline-block and pushes its parent height - leave its default
display as block.
if you are referring to the gap between your nav links, it is because display: inline-block; creates a gap by inserting a space between the elements. One solution to fix this is to set the parent container font-size: 0;.
.nav{
font-size: 0;
}
https://jsfiddle.net/unueg9zL/
The <p> you are adding inside #content is adding the gap, p elements have a default margin=1em (added by the browsers). You should set that margin to 0px explicitly on your CSS rules
#content p {margin:0}
https://jsfiddle.net/hkuo8xdx/
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.
I was hoping to find out how zazzle.com does their hover effect. I want to make an effect like that using pure CSS. I don't need the dropdown just the whole background of my element to change color.
CSS
/* the styles for the HTML elements */
html {
background: repeating-linear-gradient(#f3f3f3 0%,transparent 15%, transparent 90%,#000000 100% ),
url("../Images/bg.jpg") center center no-repeat;
background-size: cover;
height:135%;
}
body {
margin:0;
padding:0;
font-family: Arial, Helvetica, sans-serif;
}
footer{
clear: both;
margin-top: 1em;
padding-right: 1em;
border-top: 2px solid rgb(119, 75, 77);
}
footer p {
text-align: right;
font-size: 80%;
margin: 1em 0;
}
header{
width: 100%;
overflow: hidden;
height: 60px;
line-height: 60px;
position: relative;
background-color: #3a3a3a;
margin: 0;
}
#headerLeft{
width:50%;
float:left;
padding:0;
margin: 0;
}
#headerRight{
width: 50%;
float:left;
text-align: right;
padding:0;
margin: 0
}
li{
display: inline;
}
nav li:hover{
background-color: #ffffff;
}
.floatRight{
}
nav li{
margin: 0;
padding-bottom: .25em;
display: inline;
}
textarea {
width: 25em;
margin-bottom: .5em;
}
table {
border-collapse: collapse;
}
td, th {
margin: 0;
padding: .15em 0;
}
br {
clear: both;
}
/* the styles for the div tags that divide the page into sections */
#content {
float: left;
width: 580px;
padding-bottom: 1.5em;
}
#left_column {
float: left;
width: 150px;
padding-left: .5em;
}
#right_column {
float: left;
width: 300px;
padding-left: 1em;
}
#wrapper{
background-color: #ffffff;
opacity: .6;
margin: 0 auto;
padding: .5em 2em;
}
/********************************************************************
* styles for the classes
********************************************************************/
.right {
text-align: right;
}
.left {
text-align: left;
}
.cart_qty {
text-align: right;
width: 3em;
}
.button_form {
margin: 0;
padding: 0;
float: left;
}
.inline {
display: inline;
margin-left: .5em;
}
/********************************************************************
* Styles for the Product Manager application
********************************************************************/
#category_table form {
margin: 0;
}
#category_table td {
margin: 0;
padding: .15em .5em 0 0;
}
#add_category_form {
margin: 0;
}
#add_category_form input {
margin-right: .5em;
}
#add_admin_user_form label {
width: 8.5em;
}
#edit_and_delete_buttons {
margin-bottom: .5em;
}
#edit_and_delete_buttons form {
display: inline;
}
#image_manager input {
margin: .25em;
}
/********************************************************************
* Styles for the Product Catalog application
********************************************************************/
#product_image_column {
width: 8em;
text-align: center;
}
/*******************************************************************/
#add_to_cart_form {
margin: .25em;
}
#add_to_cart_form input {
float: none;
}
/*******************************************************************/
#cart {
margin: 0;
padding: 1em .25em;
border-collapse: collapse;
width: 100%;
}
#cart_header th {
border-bottom: 2px solid black;
}
#cart_footer td {
border-top: 2px solid black;
font-style: bold;
}
#cart td {
padding: .25em 0;
}
/*******************************************************************/
#login_form label {
width: 5em;
padding-right: 1em;
}
#login_form input[text] {
}
#payment_form label {
width: 8em;
padding-right: 1em;
}
#payment_form input[text] {
width: 5em;
margin: 0;
padding-right: 1em;
}
#add_category label {
text-align: left;
width: 3em;
}
#add_category input {
margin-right: .25em;
}
PHP PAGE
<?php
require_once('model/database.php');
require_once('model/category_db.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">
<!-- the head section -->
<head>
<title>Willie's Fishing Supply</title>
<link rel="stylesheet" type="text/css"
href="<?php echo $app_path ?>main.css" />
</head>
<!-- the body section -->
<body>
<header>
<ul>
<section id="headerLeft">
<li>
<a href="<?php echo $app_path; ?>">
<h1>Willie's Fishing Supply</h1>
</a>
</li>
</section>
<section id="headerRight">
<?php
// Check if user is logged in and
// display appropriate account links
$account_url = $app_path . 'account';
$logout_url = $account_url . '?action=logout';
if (isset($_SESSION['user'])) :
?>
<li>
My Account
</li>
<li>
Logout
</li>
<?php else: ?>
<li>
Login/Register
</li>
<?php endif; ?>
<li>
Cart
</li>
</section>
</ul>
</header>
<nav>
<ul><?php
$categories = get_categories();
foreach($categories as $category) :
$name = $category['categoryName'];
$id = $category['categoryID'];
$url = $app_path . 'catalog?category_id=' . $id;
?>
<li>
<a href="<?php echo $url; ?>">
<?php echo $name; ?>
</a>
</li>
<?php endforeach; ?>
</ul>
</nav>
<section id = "wrapper">
Try this css
.aj_R-departmentLinks > li:hover {
background: none repeat scroll 0 0 #FFFF00;
}
If you want to change background color on an element use the :hover selector
.element {
background-color: blue;
}
.element:hover {
background-color: red;
}