I am working on a database project for class and I wanted to make a GUI for it just for funsies. So, I am not too fluent in HTML/CSS and I need some help..
I want to make a fancy fade in/out message to ensure I have a working connection to my database. So I did some digging online and found a similar post:
CSS how to make an element fade in and then fade out?
It works perfectly in animation, however once it fades out all the margin space that once contained it is still allocated to the page; with that said, is there any simplistic way to removing all that unwanted space? I'll provided images to help illustrate what exactly I want it to look like...
Code used: (basically the same as the related post, see above)
<!-- dbGUI.php file -->
<!-- DATE -->
<!-- PHP -->
<?php
$message = "";
$con = mysqli_connect("#####","#####", "","store");
// Check connection
if (mysqli_connect_errno())
{
$message = "Failed to connect to MySQL: " . mysqli_connect_error();
} else {
$message = "Connected to database...";
}
?>
<!-- END PHP -->
<!-- MARKUP -- >
<!DOCTYPE html>
<html lang="en">
<!-- HEADER -->
<head>
<meta charset="utf-8" />
<title>Database Admin Portal</title>
<!-- Favicon -->
<link rel="shortcut icon" href="#" />
<!-- CSS -->
<link rel="stylesheet" href="dbGUI.css" />
<!-- JAVASCRIPT -->
</head>
<!-- MAIN -->
<body>
<header>
<div class="elementToFadeInAndOut"><?php echo $message; ?> </div>
<nav>
</nav>
</header>
<hr>
<main>
<h1>HEADER 1</h1>
<section>
<h2>HEADER 2</h2>
<article>
<h3>HEADER 3</h3>
<p>
</p>
</article>
</section>
</main>
<hr>
<!-- FOOTER -->
<footer>
</footer>
</body>
</html>
body
{
padding: 10px;
font-size:16pt;
font-family: Calibri;
}
CSS File:
.elementToFadeInAndOut {
-webkit-animation: fadeinout 4s linear forwards;
animation: fadeinout 4s linear forwards;
}
#-webkit-keyframes fadeinout {
0%,100% { opacity: 0; }
50% { opacity: 1; }
width: 0px;
height: 0px;
}
#keyframes fadeinout {
0%,100% { opacity: 0; }
50% { opacity: 1; }
}
At the end (100%) of your:
#keyframes fadeinout {
0%,100% { opacity: 0; }
50% { opacity: 1; }
}
you can add display: none: to remove the extra space that it was taking up. You can take it one step further and add another transition before doing display: none:
Let me know if you have any more questions :)
display: none; when you have completed the animation will hide it from the DOM and remove any space it was taking up.
opacity will make it transparent, but will still take up all the space it did when it was visible.
Some interesting links for you:
CSS "Display: none;" property
Is there an opposite to display:none?
Related
How to add close button to amp-image-lightbox? Its closed by clicking outside of image, but what should be if aspect ratio match display? Code piece follow:
$rnd = rand(10000,20000);
$res = '<amp-img on="tap:lightbox'.$rnd.'" role="button" tabindex="0" src="'.$src[1].'" width="'.$width.'" height="'.$height.'" layout="intrinsic" '.$style.'></amp-img>';
$res.= '<amp-image-lightbox id="lightbox'.$rnd.'" layout="nodisplay"></amp-image-lightbox>';
Changes in your code :
$rnd = rand(10000,20000);
$res = '<amp-img on="tap:lightbox'.$rnd.'" role="button" tabindex="0" src="'.$src[1].'" width="'.$width.'" height="'.$height.'" layout="intrinsic" '.$style.'></amp-img>';
$res.= '<amp-image-lightbox id="lightbox'.$rnd.'" layout="nodisplay"> <span on="tap:lightbox.close" role="button" tabindex="0">X</span></amp-image-lightbox>';
Example : click here
<!--
## Introduction
An AMP HTML tutorial - learn the different building blocks of an AMP HTML file. AMP HTML is entirely built on existing web technologies. It achieves reliable performance by restricting some parts of HTML, CSS and JavaScript. To make up for those limitations AMP HTML defines a set of custom elements for rich content beyond basic HTML. This samples shows what's necessary to create a valid AMP HTML file.
-->
<!-- -->
<!-- Doctype declaration is required. -->
<!doctype html>
<!-- This tells everyone that this is an AMP file. `<html amp>` works too. -->
<html ⚡>
<!-- ## Head -->
<!-- -->
<head>
<!-- The charset definition must be the first child of the `<head>` tag. -->
<meta charset="utf-8">
<title> amp-image-lightbox</title>
<!-- The AMP runtime must be loaded as the second child of the `<head>` tag.-->
<script async src="https://cdn.ampproject.org/v0.js"></script>
<script async custom-element="amp-image-lightbox" src="https://cdn.ampproject.org/v0/amp-image-lightbox-0.1.js"></script>
<!--
AMP HTML files require a canonical link pointing to the regular HTML. If no HTML version exists, it should point to itself.
-->
<link rel="canonical" href="https://ampbyexample.com/introduction/hello_world/">
<!--
AMP HTML files require a viewport declaration. It's recommended to include initial-scale=1.
-->
<meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
<!--
CSS must be embedded inline.
-->
<style amp-custom>
.close-button { position:fixed; top:50px; right:50%; transform:translateX(50%); z-index:1000; border:5px solid yellow; border-radius:10px; padding:2px;}
</style>
<!--
The AMP boilerplate.
-->
<style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}#-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}#-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}#-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}#-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}#keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>
</head>
<!-- ## Body -->
<!-- -->
<body>
<h1>Add Custom Close Button In amp-image-lightbox</h1>
<amp-img on="tap:lightbox"
role="button"
tabindex="0"
src="https://dummyimage.com/600x400/9d0000/fff/&text=amp-image-lightbox"
alt="Picture of a dog"
title="Picture of a dog, view in lightbox"
layout="responsive"
width="300"
height="246"></amp-img>
<amp-image-lightbox id="lightbox"
layout="nodisplay">
<span class="close-button" on="tap:lightbox.close" role="button" tabindex="0">X</span>
</amp-image-lightbox>
</body>
</html>
Without html code, just CSS.
Put this on your styles:
For amp-image-lightbox:
#lightbox1::before {
content:"X";
cursor: pointer;
font-size: 32px;
right:19px;
top:8px;
font-weight: 600;
position: fixed;
display: block;
text-align:right;
color:#fff;
}
The selector is the default example selector. Be sure it's correct.
On amp-lightbox:
.lightbox::before {
content:"X";
cursor: pointer;
font-size: 32px;
right:19px;
top:8px;
font-weight: 600;
position: fixed;
display: block;
text-align:right;
color:#fff;
}
Try it on codepen
I want to place my footer at the bottom of the screen, have used a div with the "wrap" id on the body of my index, but the footer does not seem to stick below it.
Please help me with this issue.
I have included my index.php, footer.php and css.php files
index.php
<?php include('config/setup.php');?>
<!DOCTYPE html>
<html>
<head>
<title><?php echo $page['title'].' | '.$site_title; ?></title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<?php include('config/css.php'); ?>
<?php include('config/js.php'); ?>
</head>
<body>
<div id="wrap">
<?php include(D_TEMPLATE.'/navigation.php'); ?>
<div class="container">
<h1><?php echo $page['header'];?></h1>
<?php echo $page['body_formatted']; ?>
</div>
</div><!-- END wrap -->
<?php include(D_TEMPLATE.'/footer.php'); ?>
<div id="console-debug">
<pre>
<?php print_r($page); ?>
</pre>
</div>
</body>
</html>
footer.php
<footer id="footer">
<div class="container">
<p>This is my footer</p>
</div>
</footer><!-- END footer -->
css.php
<?php
//CSS:
?>
<!-- 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">
<!-- jQuery CSS -->
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<style>
html,
body {
height=100%;
/* The html and body elements cannot have any padding or margin */
}
/* Wrapper for page content to push down footer */
#wrap {
min-height: 100%;
height: auto;
/* Negative indent footer by its height */
margin: 0 auto -60px;
/* Pad bottom by footer height */
padding: 0 0 60px;
}
/* Set the fixed height of the footer here */
#footer {
width:100%;
height: 60px;
background-color: #f5f5f5;
}
#btn-debug {
position: absolute;
}
#console-debug{
position:absolute
}
</style>
For sticky footer you can just add this code
#footer{
position:fixed;
left:0px;
right:0px;
bottom:0px;
width:100%;
z-index:99;
min-height: ;/*According to requirement*/
background-color: ;/*set color whichever you want*/
}
You should try to set your position:fixed
So it won't move
How to open a link from the same page, or should I say display the content of that link on the same page where the link is, I haven't tried anything yet cause I really don't know what this sort of thing is called, I'm new at web developing I really need this one cause it can make the website that I'm working on right now look more professional
here is an accurate picture/explanation for what I want:
Picture of what I want to do
You could do it using some jquery:
Take the code below as a reference:
$('#link1').on('click',function(){
$('#content1').css('display', 'inline');
$('#content2').css('display', 'none');
});
$('#link2').on('click',function(){
$('#content1').css('display', 'none');
$('#content2').css('display', 'inline');
});
.wrapper {
background: #cacaca;
width: 350px;
height: 150px;
}
.container {
display: relative;
float: left;
background: #9A9ACA;
width: 200px;
height: 150px;
}
#content1, #content2 {
position: absolute;
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper">
<div class="container">
<div id="content1">
Some content
</div>
<div id="content2">
Other stuff
</div>
</div>
<div>Link1</div>
<div>Link2</div>
</div>
Hope it helps
Use a browser side application like jQuery to change the CSS class or id from hidden to shown 'onmousedown'. Place your div style as hidden initially, then write jQuery to show the div on press of your mouse button.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>toggle demo</title>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
<button>Toggle</button>
<p>Hello</p>
<p style="display: none">THE AWESOME SAUCE!</p>
<script>
$( "button" ).click(function() {
$( "p" ).toggle();
});
</script>
</body>
</html>
You need to do some studying up on JQuery for this purpose, luckily there are a lot of examples of this very topic out there for you to research, I suggest starting here:
http://api.jquery.com/toggle/
you can redirect the page by simply typing .....
header("Location: file_name");
or you can give the HTML content by simply giving
<a href ="localhost/8000/file_name">
Here is a codepen to see the code I have written and works.
When I write similar code in my wordpress theme, my body appears above the header. How can I get the body next to the header?
[BONUS] What is the best way/how to align the body centered between the right-edge of the header and the right side of the screen.
Any advice is highly appreciated, and I thank you in advance.
[EDIT]: I changed my code for my wordpress site because before I was targeting body with css like I did in my codepen, but instead I created a div with class .site and am using that as the body. This is a temporary fix, but it is working as intended. How could I better achieve this affect so I can integrate visual plugin builders such as beaver builder?
HTML:
<div id="header">
<img src="http://placehold.it/100x100">
<ul id="nav">
<li>Item 1</li>
<li>Item 2</li>
<li>Item Number 3</li>
<li>Item #4</li>
</ul>
</div>
<div id="body">
<div id="container">Body
</div>
</div>
</div>
CSS:
#header,
#body {
display: inline-block;
}
#header {
white-space: nowrap;
width: 15%;
height: 100%;
float: left;
text-align: right;
position: fixed;
//border: 1px solid green;
}
#header img {
}
#nav ul {
list-style: none;
}
#nav {
position: absolute;
bottom: 4%;
right: 0;
}
#body {
width: 80%;
float: right;
//border: 1px solid yellow;
}
#container {
height: 10000px;
}
HEADER.PHP:
<!DOCTYPE html>
<html <?php language_attributes(); ?>>
<head>
<link rel="stylesheet" type="text/css" href="<?php bloginfo('stylesheet_url')?>" />
<meta charset="<?php bloginfo('charset'); ?>">
<meta name="viewport" content="width=device-width">
<title><?php bloginfo('name'); ?></title>
<?php wp_head(); ?>
</head>
<body <?php body_class(); ?>>
<!-- Site Header -->
<header class="site-header">
<?php the_custom_logo(); ?>
<?php wp_nav_menu(array('theme_location','Primary','menu_class'=>'main-navigation')); ?>
</header>
<!-- /Site Header -->
<!-- Site Content -->
Part of the problem was that I had a php error in my functions.php. Also I changed the position of the site content to absolute and the site nav to fixed. I then set the width of the sidebar nav and site content. I also added a content loop to my header to create the content area. Both site nav and content are displayed inline-block.
Everything now seems to be working.
the problem is, i know i can center all the three objects in the list correctly using 3 while loops with CSS, but i also know than use 3 whiles loops for something like that is a waste of resources
Also i love if the solution includes order them relative to the "white page" too, which, 3 while loops aproach seems to archieve too
so the question is, how will be the best CSS aproach to do that without the need of call three While loops?
(saving responsiveness)
UPDATE: The thing is, the products, types & Price are all almacenated in a database so to make an easy control and administration of all of them at once, and show them on the list to the people who visit them easier.
The Other stuff, the Styles and the "hidden" is because that divs are the black & white squares, which will actualy be white if there is some of the product remaining, and will be black if's not the case.
The Code related are this ones:
Style.CSS
#TextTitl {
font: 38px/1.1em "Fredericka the Great",fantasy;
color: #5D463E;
}
#stylProdct {
background-color:#fff;
width:75%;
}
.whiteAvbly
{
display:hidden;
background-color:#ffffff;
border: 3px solid #333333;
height:15px;
width:15px;
float:left;
left:12.5%;
position:relative;
}
.blackAvbly
{
display:hidden;
background-color:#380807;
border: 3px solid #333333;
height:15px;
width:15px;
float:left;
left:12.5%;
position:relative;
}
#doscinco {
float:left;
left:25%;
position:relative;
}
#cincuenta {
float:left;
left:50%;
position:relative;
}
#sietecinco {
float:left;
left:75%;
position:relative;
}
verduras.php
<?php
include('conection.php');
echo '<center><section id="stylProdct">';
$Verd = 'Verduras';
$smt = $con->prepare("select * from prodcts WHERE Type = :Verduras Order by PrdName ASC");
$smt->bindParam(':Verduras', $Verd, PDO::PARAM_STR);
$smt->execute();
echo '<br /><br /><H2 id="TextTitl">VERDURAS</H2><br />';
while ($smr = $smt->fetch(PDO::FETCH_ASSOC, PDO::FETCH_ORI_NEXT))
{
$idf = $smr['Availblty'];
$ids = (int) $idf;
echo'<p>';
if($ids > 0)
{
echo '<style>.whiteAvbly{display:show;}</style><div class="whiteAvbly"></div>';
}
else
{
echo '<style>.blackAvbly{display:show;}</style><div class="blackAvbly"></div>';
}
echo '<div id="doscinco">'.nl2br($smr['PrdName']).'</div><div id="cincuenta">'.nl2br($smr['SellType']).'</div><div id="sietecinco">$'.nl2br($smr['Cost']).'</div></p><br />
------------------------------------------------------------------------<br />';
}
echo '</section></center>';
?>
Html
<!doctype html>
<html lang="es">
<head>
<meta charset="UTF-8">
<title>Clone Dinka</title>
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<link rel="stylesheet" type="text/css" href="style.css">
<link rel="stylesheet" type="text/css" href="css/reset.css">
<link rel="stylesheet" type="text/css" href="css/responsive.css">
<link href='http://fonts.googleapis.com/css?family=Chelsea+Market' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Fredericka+the+Great' rel='stylesheet' type='text/css'>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script src="js/jqwdinka.js"></script>
</head>
<body>
<div class="mullet"></div>
<header>
<div id="BigSist"><img id="hermana" src="imago/upper_logo.png"/><p class="white">tel</p><p class="black">(+56 9) 65637350</p></div>
<img id="logoc" src="imago/logo.png"/>
<nav>
<div class="container">
<p class="white" id="Tralala">DESPACHO DIRECTO A TU PUERTA</p>
<span>Haz tu pedido / Cotiza</span>
</div>
<ul id="cont">
<li id="than">INICIO</li>
<li class="menuHead">PRODUCTOS
<ul id="cont">
<li>Verduras</li>
<li>Frutas</li>
<li>Mote con Huesillo</li>
</ul>
</li>
<li>¿COMO COMPRAR?</li>
<li>CONTACTO</li>
</ul>
</nav>
</header>
<!--"http://lorempixel.com/g/470/300"-->
<div id="content"></div>
</body>
</html>
Javascript
$(document).ready(function(){
//initial
$('#content').load('main.php');
$('body').load().css('background-image', 'url(' + 'imago_tesla/fondo0.jpg' + ')');
//handle menu clicks
$('ul#cont li a').click(function(e) {
e.preventDefault()
var page = $(this).attr('href');
$('#content').load(page + '.php');
var pageImages = {
'main': 'imago_tesla/fondo0.jpg',
'verduras': 'imago_tesla/fondo4.jpg',
'Frutas': 'imago_tesla/fondo4.jpg',
'MoteconHuesillo': 'imago_tesla/fondo4.jpg',
'ComoComprar': 'imago_tesla/fondo2.jpg',
'Contacto': 'imago_tesla/fondo.jpg'
}
$('body').css('background-image', 'url(' + pageImages[page] + ')');
});
});
That must be
Please, feel free to ask for clarification, comment, answer, suggest, etc... all the help feedback wherever's the nature of this would be most welcome.
Thanks in advance!
Best use with <table>s, but if must use <div> either you set specific sizes (is not the best option) or, you surround each column in a separate <div> example:
<!-- Column products -->
<div>
<!-- Product lines -->
<div>Product 1</div>
<div>Product 2</div>
<div>Product 3</div>
<div>...</div>
</div>
<!-- Column units -->
<div>
<!-- Product lines -->
<div>kg</div>
<div>l</div>
<div>2/kg</div>
<div>...</div>
</div>
<!-- Column prices -->
<div>
<!-- Product lines -->
<div>800$</div>
<div>200$</div>
<div>342$</div>
<div>...</div>
</div>
And set your formatings to make them inline
As I already said, I suggest using a table, after all this is the type of data tables are meant for.
If changing your markup is not a solution, here's a quick hack, based on the fact that apparently you want every field occupying 25% of the total width. Just change the last part of your CSS to:
#doscinco {
float:left;
left:25%;
width:25%;
position:relative;
}
#cincuenta {
float:left;
width:25%;
}
#sietecinco {
float:left;
width:25%;
}
But there are still other problems in there:
Your HTML will have several tags with the same ID, because you're using IDs in a loop.
You are repeating style definitions that you could put in a separate class and reuse that class to keep your definitions easier to maintain
You're using <center>. It's better to put all style information in your CSS.
Last but not least: display:show is not valid CSS and making those 2 classes hidden hidden just to unhide them is superfluous anyway.