I want to make a warning message apear on my index if the website will be unavailable or for some other reason i need to display important information.
This is my CSS:
.warning-container {
margin:0 auto;
width:50%;
height:60px;
border:2px solid rgba(207,35,35, 0.5);
border-radius:7px;
background-color:rgba(255,61,61,0.3) !important;
padding:10px;}
.warning-icon {
width:60px;
float:left;}
.warning-h1 {
font-size:13px;
color:#c91b1b !important;
font-weight:bold;
float:left !important;}
.warning-message {
font-size:12px;
color:#e31a1a !important;
float:left;}
It will display a red background with a warning icon aswell as a title for the warning and the text.
The php is not 100% yet but this is what i got.
<center>
<?php
$conn = mysqli_connect("localhost", "root", "pass", "table");
$sql = "SELECT * FROM warning";
$result = $conn->query($sql);
//if(!empty("warning")){
// echo"";
//}else{
echo"<div class='warning-container'>";
echo "<img class='warning-icon' src='/warning-icon.png'>";
echo "<div class='warning-h1'>Warning:</div>";
echo "<div class='warning-message'>";
echo "<br/><br/>";
echo "
Warning message goes here!
";
echo"</div>";
echo"</div>";
//}
?>
</center>
Related
As you can see in the picture, there is a box to the right with some text and a lot of white space.
My goal is to have the text under the pictures while I have 3 pictures in a row that are nicely aligned.
When I try this either the pictures aren't aligned anymore or the pictures aren't cropped anymore.
I wanted every picture with the same size and still sharp but, then this issue came up.
#content {
width: 100%;
max-width: 100%;
margin: 20px auto;
}
form {
width: 50%;
margin: 20px auto;
}
form div {
margin-top: 5px;
}
#img_div {
width: 30%;
margin-left: 2%;
margin-right: 1%;
margin-bottom: 3%;
border: 2px solid #d8680c;
float: left;
}
#img_div:after {
content: "";
display: block;
clear: both;
}
img {
float: left;
object-fit: cover;
width: 250px;
height: 250px;
}
#pictext {
word-wrap: break-word;
}
<div id="content">
<?php
while ($row = mysqli_fetch_array($result)) {
echo "<div id='img_div'>";
echo "<img src='fotopage\images/" . $row['image'] . "' >";
echo "<p id='pictext'>" . $row['image_text'] . "</p>";
echo "</div>";
}
?>
</div>
use class instead of using ID
ID must be unique and when you do the loop there will be some other divs with same ID
add it like this
<?php
while ($row = mysqli_fetch_array($result)) {
echo "<div class='img_div'>";
echo "<img src='fotopage\images/" . $row['image'] . "' >";
echo "<p class='pictext'>" . $row['image_text'] . "</p>";
echo "</div>";
}
?>
make sure to reflect them via JS or JQuery depends on what your are using
I'm trying to place a image & hover image above my table. I was trying to play around with the css position such as absolute/relative/fixed/static. But somehow it will either appear on top of the table or push the table to the bottom of the page.
How can i place the image just above my table ?
CSS:
.searchbutton {
position: relative;
top: 10%;
left: 40%;
display: block;
width: 450px;
height: 450px;
background-image: url('<?php echo $searchpic;?>');
background-repeat:no-repeat;
}
.searchbutton:hover {
position: relative;
top: 10%;
left: 20%;
display: block;
width: 450px;
height: 450px;
background-image: url('<?php echo $searchhoverpic;?>');
background-repeat:no-repeat;
}
PHP:
<?php
include 'database_conn.php';
$sql = "SELECT tablename.ID, tablename.Title, tablename.Year, tablename2.catDesc,tablename.catID
FROM tablename
LEFT JOIN tablename2 ON tablename.catID=tablename2.catID";
$queryresult = mysqli_query($conn, $sql)
or die (mysqli_error($conn));
echo '<table cellpadding="0" cellspacing="0" class="db-table" table align="center">';
echo"<tr><th>Title</th><th>Year</th><th>Category</th> </tr>";
while($row = mysqli_fetch_assoc($queryresult)) {
$iCDID = $row['ID'];
$CDTitle = $row['Title'];
$CDYear = $row['Year'];
$CDCatID = $row['catID'];
echo "<tr><td>";
echo "<div> $CDTitle </div>\n";
echo "</td><td>";
echo $row['Year'];
echo "</TD></tr>";
}
echo "</table>";
mysqli_free_result($queryresult);
mysqli_close($conn);
?>
You would want to do put the table in a div container and add position:relative to it. To the image you would need a position:absolute to have it cover the table.
HTML:
<div class="outer">
<div class="image"></div>
<table>
<tr>
<td>a</td>
<td>b</td>
<td>c</td>
</tr>
</table>
CSS:
.outer {
position:relative;
}
.image {
position:absolute;
top:0;
left:0;
width:100px;
opacity:0.4;
height:100px;
background:red;
}
https://jsfiddle.net/cL12xgx6/
Please anyone who can help me with this problem. I have a html file with a question. When submit is clicked it calls a php(which is connected with my database in Oracle) and it shows a table inside the html (using ajax).
I would like to know how can i show that table in a nicer form? Can I design it?
Here is my code in php
<?php
{
session_start();
include "connect.php";
}
$conn = DBConnect();
$stid = DBExecute($conn, "select something...");
$total = 0;
echo "<table>
<tr>
<th>Name1</th>
<th>Name2</th>
</tr>";
while ($row = oci_fetch_array($stid, OCI_ASSOC)) {
echo "<tr><td>";
echo $row['something'];
echo "</td>";
echo "<td>";
echo $row['something'];
echo "</td>";
}
echo "</table>";
?>
and I want to have for example this css instructions for the table i will show...
#newspaper-a
{
font-family: "Lucida Sans Unicode", "Lucida Grande", Sans-Serif;
font-size: 12px;
margin: 45px;
width: 480px;
text-align: left;
border-collapse: collapse;
border: 1px solid #69c;
}
#newspaper-a th
{
padding: 12px 17px 12px 17px;
font-weight: normal;
font-size: 14px;
color: #039;
border-bottom: 1px dashed #69c;
}
#newspaper-a td
{
padding: 7px 17px 7px 17px;
color: #669;
}
#newspaper-a tbody tr:hover td
{
color: #339;
background: #d0dafd;
}
Please does anyone know what should i do to succeed it???
Important the table will be shown inside the same page not in another one..
You need to add your ID to the table div - like this:
<?php
{
session_start();
include "connect.php";
}
$conn = DBConnect();
$stid = DBExecute($conn, "select something...");
$total = 0;
// ADD YOUR ID HERE vvvvvvvv
echo "<table id="newspaper-a">
<tr>
<th>Name1</th>
<th>Name2</th>
</tr>";
while ($row = oci_fetch_array($stid, OCI_ASSOC)) {
echo "<tr><td>";
echo $row['something'];
echo "</td>";
echo "<td>";
echo $row['something'];
echo "</td>";
}
echo "</table>";
?>
http://jsfiddle.net/jakemulley/hs3mF/
i have table created inside php with css but the table isn't complete as you see in the photo from the download part. its coming half in the download part.
please someone look to my code and let me know where i gone wrong.
thank you.
my css code
<style type='text/css'>
.container3 {
float:left;
width:100%;
/*background:green;*/
overflow:hidden;
position:relative;
}
.container2 {
float:left;
width:100%;
background:#FFA500;
position:relative;
right:45%;
}
.container1 {
float:left;
width:100%;
/*background:red;*/
position:relative;
right:40%;
}
.col1 {
float:left;
width:26%;
position:relative;
left:87%;
bottom:-200px;
font-size:20px;
text-align:left;
overflow:hidden;
height:570px;
}
.col2 {
float:left;
width:50%;
position:relative;
left:90%;
overflow:hidden;
}
.col3 {
float:left;
width:26%;
position:relative;
left:80%;
overflow:hidden;
}
.footer {
border:1px solid orange;
position: relative;
padding:0px;
margin-top:-5px;
font-size:15px;
}
.signout {
position: absolute;
left: 5px;
bottom: 150px;
width: 130px;
clear: both;
font-size:20px;
text-align:center;
}
.tableClass{
margin-bottom:60px;
}
</style>
<style>
table
{
border-collapse:collapse;
}
table, td, th
{
border:1px solid black;
}
</style>
<style>
table,td,th
{
border:1px solid black;
}
td
{
text-align:center;
}
</style>
<style>
table,td,th
{
border:1px solid black;
}
table
{
width:100%;
}
th
{
height:50px%;
}
</style>
my php code
<div id="header" style="background-color:#FFA500;">
<h1 style="margin-bottom:0;">Wellcome To Balhaf Services Customer Reports</h1>
<div class="container3 ">
<div class="container1 ">
<div class="container2 ">
<div class="col1">
View Report <br />
View Chart <br />
</div>
<?php
$username = $_POST["username"];
$password = $_POST["password"];
// Connect to the database
$dbLink = new mysqli('localhost', 'sqldata', 'sqldata', 'balhaf');
if(mysqli_connect_errno()) {
die("MySQL connection failed: ". mysqli_connect_error());
}
//for mysql injection (security reasons)
$username = mysqli_real_escape_string($dbLink, $username);
$password = mysqli_real_escape_string($dbLink, $password);
mysqli_select_db($dbLink,"balhaf2");
//checking if such data exist in our database and display result
$login = mysqli_query ($dbLink,"select * from users where USERNAME = '$username' and
PASSWORD = '$password'");
if(mysqli_num_rows($login) == 1) {
// Fetch the file information
$query = "select * from users WHERE username = '".$dbLink->escape_string($username)."'";
$result = $dbLink->query($query);
$company = false;
//Now get the result information
$row = $result->fetch_object(); //will store the record in $row
//Access what you need
if($row) {
$company = $row->company; //variable name should match the field name in your database
echo $company; //See if you get the value stored in the database
}
mysqli_select_db($dbLink,"balhaf");
// Query for a list of all existing files
$sql = "SELECT id, name, mime, size, created FROM $company";
$result = $dbLink->query($sql);
// Check if it was successfull
if($result) {
// Make sure there are some files in there
if($result->num_rows == 0) {
echo '<p>There are no files in the database</p>';
}
else {
// Print the top of a table
echo '<div class="col2">';
echo '<div align="center">';
echo '<H2 align="center"> Report Table</H></div>';
echo '<table border="1" align="center"class="tableClass">
<tr>
<td><b>Name</b></td>
<td><b>Mime</b></td>
<td><b>Size (bytes)</b></td>
<td><b>Created</b></td>
<td><b>Download</b></td>
</tr>';
// Print each file
while($row = $result->fetch_assoc()) {
echo "
<tr>
<td>{$row['name']}</td>
<td>{$row['mime']}</td>
<td>{$row['size']}</td>
<td>{$row['created']}</td>
<td><a style='text-decoration:none;'href=' get_file_work.php?id={$row['id']}&company=$company'>Download</a></td>
</tr>";
}
// Close table
echo '</table>';
echo '</div>';
}
// Free the result
$result->free();
}
else
{
echo 'Error! SQL query failed:';
echo "<pre>{$dbLink->error}</pre>";
}
// Close the mysql connection
$dbLink->close();
}
else {
echo "worng user"."</br>";
}
?>
<div class="col3">
</div>
</div>
</div>
<div class="signout">
<a style='text-decoration:none;' href= "index.html">Sign Out </br></a>
</div>
<div class="footer" style="background-color:#FFA500;clear:both;text-align:center;">
Copyright balhaf services 20103-2014</div>
</div>
Your container3 is cutting off the display of it's contents with "overflow:hidden;"
You could switch it to:
.container3 {
float:left;
width:100%;
/*background:green;*/
overflow:auto;
position:relative;
}
Or if you don't want to bleed off the edge you could either replace the filename with a download link, something like "view document". Or you could limit the number of characters allowed to show in the table cell. OR you could look into the word-break property (not reliable across all browsers) - see the link below for documentation.
W3Schools - Word-break
Below i have added my css file and my html file i need to color my table with alter name color but its not working i don't know where i have done the mistake.
CSS FILE :-
table.gridtable{
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
float:center;
border-width:1px;
border-style:groove;
border-color:black;
border-collapse:collapse;
width:600px;
}
table.gridtable th{
border-width:1px;
padding:3px;
border-style:solid;
border-color:black;
}
table.gridtable td{
border-width:1px;
padding:3px;
border-style:solid;
border-color:black;
}
.oddrowcolor{
background-color: black;
}
.evenrowcolor{
background-color: red;
}
table.gridtable td.darkcol{
border-top:0px;
border-bottom:0px;
border-right: 1px;
}
table.gridtable td.emptycol{
border-bottom:0px;
border-right: 1px;
}
HTML & PHP:-
<table class="gridtable" id="alternatecolor" align="center"
<tr><th>disease Name/th><th>Gene Name/th><th>OMIM Number</th></tr>
<?php
$dbhandle = mysql_connect($hostname, $username, $password) or die("Unable to connect to MySQL");
$selected = mysql_select_db("missensencemuttation",$dbhandle) or die("Could not select disease");
$result = mysql_query("SELECT DISTINCT * FROM `gene_data` ORDER BY disease_name");
$last=" ";
while($row = mysql_fetch_array($result))
$now=$row[2];
if($last != $now){
$rcnt=mysql_query("select count(gene_name) from gene_data where gene_name='$now'");
if($rcnt==1){
echo "<tr><td>";
echo "<a href='d1.php?d_name=".$row['disease_name']."'>".$row['disease_name'];
echo "</a></td>";
echo "<td>".$row['gene_name']."</td>";
echo "<td>".$row['ommi_number']."</td></tr>";
}
else{
echo "<tr><td class='emptycol'>";
echo "<a href='d1.php?d_name=".$row['disease_name']."'>".$row['disease_name'];
echo "</a></td>";
echo "<td>".$row['gene_name']."</td>";
echo "<td>".$row['ommi_number']."</td></tr>";
}
}
else
{
echo "<tr'>";
echo "<td class='darkcol'>";
echo ' ';
echo "</td>";
echo "<td>".$row['gene_name']."</td>";
echo "<td>".$row['ommi_number']."</td></tr>";
}
$last=$row[2];
can any one help me with this ??
Maybe I'm misunderstanding, but it looks like you want to apply oddrowcolor or evenrowcolor to alternating rows - but in your actual php/html, I don't see those class names anywhere. They're not being put on the rows, so their rules wont be applied. Just add them to the appropriate <tr> tags in your php and it should work.
Alternatively you could use the nth-of-type selector to apply the rules without altering your php:
tr:nth-of-type(odd) {
background-color: black;
}
tr:nth-of-type(even) {
background-color: red;
}
If you want alternate colors for each table row, then a simple CSS should do it. This way, if you want to insert new rows dynamically, it will adjust the colors automatically.
.stripped-rows:nth-child(odd){
background-color:red;
}
.stripped-rows:nth-child(even){
background-color:blue;
}
and html ...
<table>
<tr class = 'stripped-rows'>
<td>sad</td>
</tr>
<tr class = 'stripped-rows'>
<td>sad</td>
</tr>
<tr class = 'stripped-rows'>
<td>sad</td>
</tr>
DEMO