A few month back I posted a question about how to show the caption when hovering over an image.
This is the thread:
Don't understand how to show the caption when hovering image
The issue is that when I used TinyMce to edit the caption, it won't show the caption hovering. Instead it doesn't show any caption, it just hovers.
This is editor side (I shortened it):
<script language="javascript" type="text/javascript">//<![CDATA[
tinyMCE.init({
// General options
mode: "textareas",
elements : "ajaxfilemanager",
theme : "advanced",
});
//]]</script>
This is output:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
</head>
<body>
<style>
#caption { display: none;font:12px Times New Roman;}
img:hover + #caption { position: absolute; display: block;}
.caption { display:none; text-decoration: none; font:12px Times New Roman;}
.image-with-caption:hover .caption {display: block; text-decoration: none;}
a:hover { text-decoration: none; }
</style>
<table width="100%">
<tr>
<td>
<?php echo(stripslashes($_POST['content'])); ?>
</td>
</tr>
</table>
</body>
</html>
This is the input I copy and paste the code into TinyMCE:
<table width="100%">
<tr>
<td>
<div class="image-with-caption">
<a href="images/artistc.php">
<img src="images/imagec08.jpg" style="width:209px" />
<p id="caption">Caption 3</p>
</a>
</div>
</td>
<td>
<div class="image-with-caption">
<a href="images/artistb.php">
<img src="images/imageb12.jpg" style="width:195px" />
<p id="caption">Caption 5</p>
</a>
</div>
</td>
<td>
<div class="image-with-caption">
<a href="images/artista.php">
<img src="images/imagea02.jpg" style="width:260px" />
<p id="caption">Caption 4</p>
</a>
</div>
</td>
</tr>
</table>
Any suggestions and advice would be appreciated. I just want to know why it doesn't show the caption.
I don't completely understand your question, but I see you have several tags with same id. That is not allowed. Maybe if you fix that, it helps to fix the issue. You should replace the id="caption" by class="caption" (or anything else), and then, modify your css replacing #caption by .caption
Related
I have included a php page(courses.php) into another php page (course.php).
After including courses.php in course.php I have written a div tag and want it to be displayed next to the div having COURSES as header.
//Courses.php
<html>
<head>
<style>
#top
{
height: 100px;
border :0.5px solid;
}
#left
{
height: 520px;
width: 250px;
border :0.5px solid;
}
</style>
</head>
<body>
<div id = "top"></div>
<div id = "left">
<center>
<h2><b> COURSES </h2></b>
<ul>
<li> HTML
</li>
<li> C++
</li>
</ul>
</center>
</div>
<body>
</html>
Page for Courses.php
//course.php
<html>
<head>
<style>
#center
{
height: 530px;
width: 900px;
border :0.5px solid;
}
</style>
</head>
<body>
<?php include("courses.php");?>
<div id = "center">
<h2>HEY</h2>
</div>
</body>
</html>
page for Course.php
I want the div showing HEY being displayed next to div showing COURSES.
Also advise how can I divide the div tag having HEY into two equal halves vertically.
Things which i tried for showing two divs next to each other:
including the include php tag in a div.
including the include php tag (in a div) as well as the next div tag both in
a parent div tag.
and then manipulating the float as well position property with different
combinations but it wasn't helpful.
You can simply write like this in Courses.php
<style>
#top
{
height: 100px;
border :0.5px solid;
}
#left
{
height: 520px;
width: 250px;
border :0.5px solid;
}
</style>
<div id = "top"></div>
<div id = "left">
<center>
<h2><b> COURSES </h2></b>
<ul>
<li> HTML
</li>
<li> C++
</li>
</ul>
</center>
</div>
body element is allowed to include style but this is not a good practice, you are encourage to split to two files, Courses.php and Courses_css.php and import them right place in Course.php
I'm not very good at website developing but as this is my graded unit and im trying to make it nice.
Im running into an issue with HTML and CSS (possibly PHP as well?) where it is not being applied when im using classes.
Things ive tried so far:
Put the CSS through w3schools error checks - Clean
Directly linking the CSS in the admin.php instead of through the seperate header - No effect
Directly applying the css is style tags (Tried inputting 'style"color:white;"' into both the thead and table tags) - No effect
I am using bottstrap for easier styling so maybe this is overpowering the CSS? My stylesheet is being called after though so this "shouldn't" be the case.
admin.php (the file i want the css to be applied to):
<?php
require 'header.php';
?>
<br><br><br>
<table class="aT">
<thead class="aTH">
<td>Member Number</td>
<td>Username</td>
<td>Forename(s)</td>
<td>Surname</td>
<td>Email</td>
<td>Date Of Birth</td>
<td>Age</td>
<td>User Type (1 = admin, 2 = Verified Seller, 3 = Unverified Seller)</td>
<td>Phone number</td>
</thead>
<?php
$result = mysqli_query($link, "SELECT userid, username, forenames, surname, email, dob, age, usergroup, phonenumber FROM members");
while($row = mysqli_fetch_array($result)) {
?>
<tbody>
<tr>
<td id="memberno" contenteditable="true"><?php echo $row['userid']?></td>
<td id="username" contenteditable="true"><?php echo $row['username']?></td>
<td id="dob" contenteditable="true"><?php echo $row['forenames']?></td>
<td id="salutation" contenteditable="true"><?php echo $row['surname']?></td>
<td id="forenames" contenteditable="true"><?php echo $row['email']?></td>
<td id="surname" contenteditable="false"><?php echo $row['dob']?></td>
<td id="email" contenteditable="false"><?php echo $row['age']?></td>
<td id="user_type" contenteditable="true"><?php echo $row['usergroup']?></td>
<td id="user_type" contenteditable="false"><?php echo $row['phonenumber']?></td>
</tr>
<?php
}
?>
</tbody>
<?php
include 'footer.php';
?>
header.php:
<!doctype html>
<html>
<?php
require 'mysqli.php';
?>
<head>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<link rel="stylesheet" type="text/css" href="stylesheet.css">
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<a class="navbar-brand" href="index.php">Ross's Rides</a>
</div>
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>Buy/Sell</li>
</ul>
<?php
if(!isset($_SESSION))
{
session_start();
}
if (!isset($_SESSION["admin"]) && !isset($_SESSION["user"]) && !isset($_SESSION["useru"])) {
?>
<form method="get" action="login.php" class="btn_1">
<a class="btn btn_2 navbar-btn" href="login.php">Login/Register</a>
</form>
<?php
}
else {
?>
<form method="get" action="logout.php" class="btn_1">
<a class="btn btn_2 navbar-btn" href="logout.php">Logout</a>
</form>
<?php
}
if (isset($_SESSION["admin"])) {
?>
<form method="get" action="admin.php" class="btn_1">
<a class="btn btn_2 navbar-btn" href="admin.php">Admin Panel</a>
</form>
<?php
}
?>
</div>
</nav>
</head>
stylesheet.css:
.btn_1 {
display:inline;
float: right;
}
.btn_2 {
background-color: black;
border-radius: 25px;
padding: 10px 10px;
color: white;
}
.loginBox {
padding-top: 100px;
}
.submitBtn {
background-color: black;
border-radius: 25px;
padding: 10px 25px;
color: white;
}
.cancelBtn {
background-color: black;
border-radius: 25px;
padding: 10px 25px;
color: white;
}
.registerForm {
padding-top: 40px;
}
.redText {
color: red;
}
.aT {
width: 100%;
border: 1px;
border: thick;
border-color: limegreen;
padding: 10px;
text-align: left;
background-color: black;
color: white;
}
.aTH {
height: 50px;
}
Now I am almost certain a lot of my code is not "perfect" or following "proper procedures" and if you see any of this feel free to point it out and correct me as ive said im not that good at websites and could definetly learn a thing or two. I will be removing the tags later when i can get the CSS to properly apply, until then they will stay as my sketchy fix for now.
Cheers for all the help, here is an image to show the effect of my attempts.
if you need any more info/pics/other stuff feel free to ask and ill try to get as much as possible up. the footer.php does contain an if thats any consolation so the document does have an end!
On my code view the styles are not applying
Have you verified that all cache's have been cleared? I had this issue and I was struggling for quite awhile before I realized that my host cached the files automatically, as well as cloudflare cached it, AND Chrome cached it.
I would like to centre image in mpdf (version 6>).
This is my (shortened) html output that I send to mpdf. The displayed class does not help.
<style>
IMG.displayed {
display: block;
margin-left: auto;
margin-right: auto }
</style>
<img style="max-height:600px" class="displayed" src="/images/size_original/m_princezna_1.jpg"/>
Add a text-align: center property on a parent HTML element of the image, eg.:
body { text-align: center }
I tried the solution of Finwe but that moved the image to next page. So did a workaround with a combination of solutions here of Ram Guru99 and there :
<table style="width:100%;">
<tr>
<td align="center">
<img src="<?php echo $imagepath ;?>"/>
</td>
</tr>
</table>
You can use below code to center image in the page.
<p style="text-align:center;">
<img src="imageurl.png"/>
</p>
Hi I have a system developed with PHP and CSS.
I wish to have background images that will cover the full screen of each page. However with my existing setup the image covers the other content on screen. I have tried this with my homepage initially. I created an img tag (Learning) in my php file on line 19 as shown.
<!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>Welcome - <?php echo $userRow['username']; ?></title>
<link rel="stylesheet" href="style.css" type="text/css" />
</head>
<body>
<div id="header">
<div id="left">
<label>NHSCT E-Learning Portal</label>
</div>
<div id="right">
<div id="content">
Welcome <?php echo $userRow['forename']; ?> Sign Out
</div>
</div>
</div>
<img src="images/Learning.jpg" id= "Learning" alt="">
<br>
<p align="center"><img src="title.jpeg" width="400"height="100" alt="title.jpeg">
<br>
<center>
<h1> Select an E-Learning Module<h1>
<br>
<table align="center" height="200" width="40%" border="0">
<tr>
<td><button name="Surface" onclick="window.location.href='SurfaceExecute.php'">Surface Pro Basic Skills</button></td>
</tr>
<td><button name="eNISAT" onclick="window.location.href='eNISATExecute.php'">eNISAT Tutorials</button></td>
</tr>
<td><button name="Email" onclick="window.location.href='EmailExecute.php'">Email Tutorials</button></td>
</tr>
<td><button name="Policies" onclick="window.location.href='Policyview.php'">Policies and Procedures</button></td>
</tr>
</table>
</body>
</html>
I then added the following CSS to my style.css file
/* css for home page */
#Learning {
position: fixed;
top: -20;
left: 0;
/* Preserve aspet ratio */
min-width: 100%;
min-height: 100%;
}
My question is, how do I display this image in the background with existing screen content on top? Or is there a way to make the background image opaque so that the other content can be seen through it and clicked?
UPDATE Solution found from the answer provided. Removed img tag from php file and updated CSS to the following
html {
background: url(images/Learning.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
You would use the background-image property in CSS.
If you are doing that for the whole page, you might as well use it on the body element :
body {
background-image : ........;
}
I have looked but the answers that people have given didn't help my problem. Rather confusion.
I am creating a small project for my website and i am trying to convert it to php for the pages and easier maint.
The way i want it set up is like how i have it now. Soloentertainment.org But this is all html and each page is it own Html page and if i need to edit or add to the nav bar or anywhere else i have to go to each html and change it. That is a big no no. So trying to convert it to php but the problem i have encountered, which is weird is that i have it highlight what page you are on now. But for the php, Soloentertainment.org/index.php, (i don't have all links working so the projects page and bout leads to the html links) but the home should be highlighted like in the original home page.
Code for the index.php:
<body bgcolor="#000000" id="home">
<div align="center">
<table class="contentTable" >
<tbody>
<tr>
<td colspan="0" border="0" height="50px" align="center">
<?php include("message.php"); ?>
</td>
</tr>
<tr>
<td colspan="0" border="0" height="125px" align="center">
<?php include("header.php"); ?>
</td>
</tr>
<tr>
<?php include("navbar.php"); ?>
</tr>
<?php include("home.php");?>
</tbody>
</table>
</div>
</body>
Code for the Navbar.php:
<td id="navbar">
<ul>
<li onclick="location.href='http://www.soloentertainment.org/index.php';" class="home" title="Home">Home</li>
<li class="projects" title="Projects">Projects</li>
<li class="about" title="About">About</li>
<li>Contact</li>
</ul>
</td>
The original index.html:
<!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" />
<link rel="shortcut icon" href="favicon.ico">
<title>Solo Entertainment</title>
</head>
<style>
.contentTable {
width: 795px;
border-left: 10px;
border-left-color: #b7ad6f;
border-right: 10px;
border-right-color: #b7ad6f;
margin: 0px;
padding: 0px;
}
.header {
background-color; #000
background-repeat: no-repeat;
background-position: right;
}
#navbar {
width:100%;
height:30px;
background-color:#000;
}
#navbar ul {
width:50%;
margin:0 auto 0 auto;
}
#navbar ul li {
float:left;
color: #FFF;
padding:0 20px 0 20px;
border:1px solid #FFF;
height:30px;
list-style:none;
display:block;
line-height:30px;
text-align:center;
cursor:pointer;
}
#navbar ul li:hover {
background-color:#CCC;
color: #000;
}
#home #menu .home, #projects #menu .projects {
background-color:#FFF;
color: #111
}
</style>
<body bgcolor="#000000" id="home">
<div align="center" id="menu">
<table class="contentTable">
<tbody>
<tr>
<td colspan="2" border="0" height="55px" align="center">
<font color="#FF0000" size="+2">This site is still being built. Please be Patient</font>
</td>
</tr>
<tr>
<td colspan="2" class="header" align="left" border="0" height="125px">
<img src="images/solo.png" width="785" height="112" alt="Title" title="Solo Enertainment" border="0">
</td>
</tr>
<tr>
<td id="navbar">
<ul>
<li onclick="location.href='http://www.soloentertainment.org';" class="home" title="Home">Home</li>
<li onclick="location.href='http://www.soloentertainment.org/projects';" class="projects" title="Projects">Projects</li>
<li onclick="location.href='http://www.soloentertainment.org/about';" class="about" title="About">About</li>
<li>Contact</li>
</ul>
</td>
</tr>
<tr>
<td colspan="2" class="header" align="center" border="0" height="100px">
<font color="#FFFFFF" size=""> Welcome to Solo Entertainment, One Man One Show.</font>
</td>
</tr>
<tr>
<td colspan="2" class="header" align="Center" border="0">
<img src="./images/kyleandsteve1280.jpg" width="307" height="245" />
<br />
<font color="#FFFFFF">Kyle and Steve Save the world.
<br />
</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
Now the i don't get why Home is highlighted in the html and not for the php?
Your css that make the highlight looks like this:
#home #menu .home, #projects #menu .projects {
background-color: #FFFFFF;
color: #111111;
}
On your PHP file, the button with .home class is under an element with a #home id but there's no element with #menu id.
This is the part on your HTML:
<body bgcolor="#000000" id="home">
<div align="center" id="menu">
This is the part on your PHP:
<body bgcolor="#000000" id="home">
<div align="center">