The button with in my code will not change at all, i have tried listing all the divs and this still has not worked
This is the code for the page, php:
<?php
session_start();
?>
<!DOCTYPE html>
<html>
<head>
<!-- edit the refrence to show them the different options -->
<link rel="stylesheet" type="text/css" href="IndexopOr.css">
<!--<link rel="stylesheet" type="text/css" href="css/styler.php">-->
<title>Wccs Canteen</title>
</head>
<body>
<h1 class="Top_Text">WCCS Lunch Order</h1>
<div id="Menu-fixer1">
<div id="Menu_fin1">
<img src="WCCS Logo.png" id="lighthouse">
</div>
</div>
<div id="Menu-fixer">
<div id="Menu_fin">
<table>
<tr>
<td>
<!-- this will change when the css source is changed between Indexop1 and Indexop2, currently it is linked to Index, the file i will change when we have decided what we like -->
<span>Menu </span>
</td>
</tr>
<tr>
<td>
<span>Order </span>
</td>
</tr>
<tr>
<td>
<span>Contact Us </span>
</td>
</tr>
</table>
</div>
</div>
<div id="menu_bar">
<div id="menu_user">
<style type="text/css">
#menu_user {
position: absolute;
right: 10px;
bottom:20%;
font-size: 24px;
color: white;
font-family: HelvLight, verdana;
}
</style>
<?php
//seeing as you like documentation sir i added this in telling you about sessions, remind me to tell you if you want it explained
if (isset($_SESSION['food'])) {
echo 'Student: '.$_SESSION['food'];
echo $_SESSION['ln'];
} else {
echo "You are not logged in!";
}
?>
</div>
<div id="menubar_bottom">
<h1 class="menu_Hpg">Menu</h1>
</div>
</div>
<div id="list_space">
<div id="Right_list">
</div>
<div id="Left_orders">
<button id="but">Confirm</button>
</div>
<!--<div id="Bar"></div>-->
<div id="mid_bar"></div>
</div>
</body>
</html>
Then the css code:
#but button {
color:blue;
}
there is alot of css that is the part editing the button, please tell me why it doesn't work. It works when i just type style next to it and add it but it doesn't allow me to put a hover option on there.
#but button means that you are looking for button inside element with id but. You do not have such situation in your code. You have button with id but so it must be like this:
button#but
change '#but button' to 'button#but' in your css, because button has the id not its parent element
button#but {
color:blue;
}
try this selector, it select button that having attribute id=but
button#but
If you want to use multiple buttons, you must use classes and not id's. The id's can be used only one per page.
in any case, the syntax is correct button#but{} or #but{}.
Related
I am developing a website and including two menus into a Home page. The Home page, and both menus have the extension .php. I am testing locally on Apache Server.
The issue: One of my menus, which is a top navigation bar, displays correctly on my local server but its menu items / links are not clickable and do not show the rollover effect. This is ONLY when I load the Home page with the menu included via PHP.
When I load the menu page itself (still on my local server), the issue is not present, my menu displays and works fine, including the links.
Please see the code below:
Home Page
<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" >
<title>Home</title>
<!-- various css imports, removed for readability -->
</head>
<body id="home">
<?php include('top-bar.php'); ?>
<!-- Container div -->
<div id="container">
<?php include('menu.php'); ?>
<!-- Container div -->
</div>
</body>
</html>
Menu bar
<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<!-- various css imports, removed for readability -->
<title>Topbar</title>
</head>
<body id="home">
<div id="headerbar">
<!-- Centered container -->
<div id="container">
<!-- Top bar -->
<div id="header">
<div id="maintitle">
<span style="color: #499DF5">My</span><span style="color: #FFFFFF"> Name</span> </div>
<!-- Second menu bar -->
<div id="menutop">
<ul>
<li id="contactme" title="Write me an email"><a href='#'><span>Contact me</span></a></li>
<li class="last" id="vcf"><a href="#" onClick="MyWindow=window.open('contact-card-popup.html','MyWindow','width=300,height=150'); return false;" title="Download my contact card (.vcf or .csv)">Download
contact card</a></li>
<li class="last" style="float: right;" id="googleplus"><a target="_blank" title="Follow me on Google+" href="https://plus.google.com/u/0/114402922247766544960/posts">
<i class="fa fa-google-plus fa-fw"></i></a></li>
<li style="float: right;" id="linkedin"><a target="_blank" title="View my LinkedIn profile" href="http://www.linkedin.com/in/myprofile">
<i class="fa fa-linkedin fa-fw"></i></a></li>
<li style="float: right;" id="visualize.me"> <a target="_blank" href='http://vizualize.me/myprofile?r=myprofile' title='View my infographic resume on Vizualize.me'><span style="font-weight:bold">Visualize.me</span></a></li>
</ul>
</div> <!-- End Second menu bar -->
<div id="jobtitle">Jobtitle</div>
<!-- End header div -->
</div>
<!-- End Centered container -->
</div>
<!-- End headerbar div -->
</div>
</body>
</html>
And CSS:
/* Layout
-----------------------------------------------------------------------------*/
body {
}
#container {
width:1020px;
position:relative;
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -100px;
}
#headerbar{
width:100%;
min-width:500px;
height:130px;
position:absolute;
background: #414141;
}
#menutop {
min-width:500px;
width:1020px;
position:absolute;
margin-top:20px;
}
#wrapper {
clear:both;
height:900px;
width:1020px;
position:relative;
margin: 0 0 0 -25px;
}
/* Top menu: header
-----------------------------------------------------------------------------*/
#header {
font-family:'Open Sans', sans serif;
}
#maintitle {
font-weight:bold;
font-size:34px;
width:250px;
height:40px;
min-height:60px;
position:relative;
margin-left:40px;
margin-top:25px;
}
#jobtitle {
color: #FFFFFF;
font-size: 14px;
width: 230px;
height: 25px;
position: absolute;
margin-left: 270px;
margin-top: 9px;
left: 16px;
top: 36px;
}
I tried replacing my php include
<?php include('top-bar.php'); ?>
with the link relative to the root:
<?php include($_SERVER['DOCUMENT_ROOT']."/my-website/top-bar.php"); ?>
This did not change anything.
I also validated against W3C, just in case it would throw any obvious errors, which it did not.
Any ideas on why the PHP menu works in standalone but not when included? Thank you.
Edit:
On a good suggestion of Moshe I updated the JSFiddle he created. Since it seems I cannot use several files in there, I put the code of the top menu inside the home page, where the php import is performed. Doing so clearly makes the links in the menu non-working so it sounds like a CSS issue. I however do not see where the issue is.
http://jsfiddle.net/0ows5vym/4/
And this is the menu only, working fine in standalone: http://jsfiddle.net/fdbvwL3t/
Note: Please diregard the icons not displayed at the far right of the menu, they are based on other imports I cannot easily reproduce here. That part works fine locally.
You would use dirname(FILE) to get current directory.
try using
include(dirname(__FILE__). "/my-website/top-bar.php")
instead of $_SERVER['DOCUMENT_ROOT']
FILE constant will give you absolute path to current file
and dirname(FILE) to get the directory of current included file
In which file are you trying to load your php file?
if it is in your index.php (probably),
then you need to take in account your path facing the file where you have it
lets suppose that:
you have a absolute path for your index.php like
/var/www/html/thisismywebsite/index.php
and your file is in
/var/www/html/thisismywebsite/project/someinnerfolder/topbar.php
the above would not solve it.
Instead, you may opt for a solution like
<?php
define('BASEPATH', dirname(__FILE__) . "/");
include(BASEPATH . "project/someinnerfolder/topbar.php");
Just remember, the includes must be relative to the entry point of your application, so your include must be relative to where you start your app.
BONUS:
Don't start all your files with the tag, and so on, since it will give you issues later on. rather, opt to use a master to keep this kind of html
I finally got it. Playing with the JsFiddle here: http://jsfiddle.net/0ows5vym/4/ put me on the right track.
I have a "container" element that was called twice, once in my php menu and then again in the main page. I made the mistake of giving that container a unique ID where it should be a class, if I want to be able to call it several times.
Replacing the container "id" with "class" fixes it, cf here. http://jsfiddle.net/0ows5vym/6/
<!-- Container div -->
<div class="container">
<?php include('menu.php'); ?>
<!-- Container div -->
</div>
Moshe - thank you for letting me know about JsFiddle. I like that tool. Also your suggestion helped me find the answer.
I've modified the general Yii Crud generated index.php to not display the side menu and instead display a table. I've done this by overriding the default layout and by creating a column3.php This view file looks like this
<?php $this->beginContent('//layouts/main'); ?>
<div class="row-fluid">
<div class="span3">
<table class="table table-bordered">
<form action="<?php echo Yii::app()->createUrl('recipient/processpayment', array('id'=>$id)) ?>" method="post" >
<tr class="primary"><td> <h4>List Summary </h4> </td></tr>
<tr ><td>
<?php echo $numpeople; ?> Recipient(s)
</td></tr>
<tr ><td>
Total Due: <?php echo $totaldue ?> Rwf
</td></tr>
</form>
</table>
</div><!-- sidebar span3 -->
<div class="span9">
<div class="main">
<?php echo $content; ?>
</div><!-- content -->
</div>
</div>
<?php $this->endContent(); ?>
Unfortunately the side of my screen is a grey color and I've realized that the table itself is simply composed of a couple of lines and text (meaning it is see-through). I'd like to change the background color of the table to be white - any suggestions would be greatly appreciated!
CSS
.table,
.table tr,
.table td {
background-color: white !important;
}
I'm a complete noob, trying to learn HTML/CSS while struggling to make my website do what I want it to …
Using <?php wp_get_archive('type=alpha') ?>, I'm trying to make the title of each post/row in the archive change to display the date of each post (with permalink to the post), instead of the whole <li> change to just the date of the first post (without permalink) …
What I have right now is this:
HTML
<div class="date">
<div class="date-text"><?php the_date('y.m.d'); ?></div>
<div class="arc"><?php wp_get_archives('type=alpha'); ?></div>
</div>
CSS
.date-text {
display: none;
}
.date:hover .date-text {
display: inline;
}
.date:hover .arc {
display: none;
}
But the <?php wp_get_archive('type=alpha') ?> creates the following HTML output:
<div class="arc">
<li><a href='url_four'>four</a></li>
<li>one</li>
<li>three</li>
<li>two</li>
</div>
I want it to do something along the lines of placing each <li> in its own <div class="arc"> so that each url gets replaced by its respective date, and not all of them end up in the same <div> to be replaced by <div class="date-text">.
Thanks in advance!
Works fine for me. Are you sure your php is geting the right values?
If I got you wrong send a sample what the list should look like as my english ist not the best.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Unbenanntes Dokument</title>
<style>
.date-text {
display: none;
}
.date:hover .date-text {
display: inline;
}
.date:hover .arc {
display: none;
}
</style>
</head>
<body>
<div class="date">
<div class="date-text">date1</div>
<div class="arc">text 1</div>
</div>
<div class="date">
<div class="date-text">date2</div>
<div class="arc">text 2</div>
</div>
<div class="date">
<div class="date-text">date3</div>
<div class="arc">text 3</div>
</div>
</body>
</html>
try something like:
<?php
$alpha = wp_get_archive('type=alpha');
$date = the_date('y.m.d');
echo'<div class="date">';
echo'<div class="date-text">' . $date .'</div>';
echo'<div class="arc">'. $alpha.'</div>';
echo'</div>';
?>
i created a header.php for my web site.
For my menu, i created 5 buttons.
When i press on a button it redirect me on the page associated to it.
Until now everything fine.
What i want is, on the current page, my button of the page associated to it change to an other color or background image.
I dont know if we can do that and if i explain myself well.
here my header.php
<div id="main_menu">
<div id="menu_blog"><button onclick="location.href='blog.html'"><h1>Trucs/Astuces</h1></button></div>
<div id="menu_contact"><button onclick="location.href='/contact.php'"><h1>Contact</h1></button></div>
<div id="menu_soumission"><button onclick="location.href='/soumission.php'"><h1>Soumission</h1></button></div>
<div id="menu_realisation"><button onclick="location.href='/realisations.php'">
<h1>Réalisations</h1></button></div>
<div id="menu_service"><button onclick="location.href='/services.php'">
<h1>Services</h1></button></div>
<div id="menu_a_propos"><button onclick="location.href='/a_propos.php'"><h1>L'entreprise</h1></button></div>
</div>
Simple way is use CSS
#yourbutton:hover{
background-color: red;
}
or
#yourbutton:active{
background-color: red;
}
Pass a GET value with each link
<div id="menu_contact"><button onclick="location.href='/contact.php?active=1'"><h1>Contact</h1></button></div>
check the value of active in the button
< button <?php if ($_GET['active']==1) echo 'class="active"'; ?> ..../>
then make a css style for active class
.active{
/*your style here*/
}
Your PHP page:
<div id="main_menu">
<div id="menu_blog">
<button onclick="location.href='/blog.html'" <?php if($_SERVER['REQUEST_URI'] == '/blog.html'){echo 'class="currentPage"'; }?>>
<h1>Trucs/Astuces</h1>
</button>
</div>
… and so on for each menu item ...
</div>
Your CSS:
button.currentPage{
background-color: red;
}
Short version:
add $current_location to every page and name it after it
<?php
$current_location = "a_propos" ;
?>
Check if location is correct, then change background color
<div id="main_menu">
<div id="menu_a_propos"><button <?php if ($current_location == "a_propos");?> style=" background-color: red;"<?php };?> onclick="location.href='/a_propos.php'"><h1>L'entreprise</h1></button></div>
</div>
i'm working on a form in php mysql. so in my page there is a form and below that i shown the data of that form in table format.now i want to print only the table structure thats why i just made a PRINT button as:
<span style="float:right;">PRINT</span>
but it will print the whole page with form field and table and i just want the tableto print.
Here is the design of my whole page with form and table:
<html>
<head></head>
<body>
<div class="container">
<form class="form-horizontal" action="" method="post" name="userform1" id="company-form" enctype="multipart/form-data">
<?php if($_GET[id]){?>
<fieldset>
<legend>Add Company</legend>
<div class="control-group">
<label class="control-label">Company Name</label>
<div class="controls">
<input type="text" name="company" id="company" value="<?php echo $selup['company']?>">
</div>
</div>
<div class="control-group">another field</div>
<div class="control-group">another field</div>
<div class="control-group">
<div class="controls">
<button type="submit" class="btn" name="submit" id="submit" value="Submit">Submit</button>
</div>
</div>
<table class="table table-bordered">
<tbody>
<tr>
<td>S.No.</td>
<td>Company Name</td>
<td>Type</td>
<td>Action</td>
</tr>
<?php
// to print the records
$select = "select * from company where type='Miscellaneous'";
$query1 = mysql_query($select);
while($value = mysql_fetch_array($query1)){ ?>
<tr>
<td><?php echo $value[id];?></td>
<td><?php echo $value[company ];?></td>
<td><?php echo $value[type];?></td>
<!--<td> </td>-->
<?php /*?><td><?php echo $value[amount];?></td>
<td><?php echo $value[date];?></td><?php */?>
<td><i class="icon-edit"></i>
<i class="icon-trash"></i></td>
</tr><?php }?>
</tbody>
</table>
</fieldset>
<form>
</div>
</body>
so i just want to print the table not whole page.
Use css to hide elements you don't want to print:
#media print {
.control-group {
display: none;
}
}
function printContent(el){
var restorepage = document.body.innerHTML;
var printcontent = document.getElementById(el).innerHTML;
document.body.innerHTML = printcontent;
window.print();
document.body.innerHTML = restorepage;
}
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<h1>My page</h1>
<div id="div1">DIV 1 content...</div>
<button onclick="printContent('div1')">Print Content</button>
<div id="div2">DIV 2 content...</div>
<button onclick="printContent('div2')">Print Content</button>
<p id="p1">Paragraph 1 content...</p>
<button onclick="printContent('p1')">Print Content</button>
</body>
</html>
You could make a print-css (which does the same as #media print, but I think it is cleaner, and you can disable the css include via javascript, if you need it):
<link rel="stylesheet" type="text/css" href="print.css" media="print" />
In that css, you hide all elements which should not get printed, for example:
.wrapper, .header {display: none;}
One posible solution, perhaps not the best option:
1. Open a new window with JS
2. Copy the whole table into the new window (with jQuery for example)
3. Print the new window
4. Close the window
Sure it has a blink effect but It will work.