I am across a little bit confusing problem. I want to display an alert message on the top of the screen when the account is activated. but problem is that when messages shows, the welcome blue box moves down which I don't want. When I close the alert message the content comes in their real position.
This is the html code
<!DOCTYPE html>
<html>
<head>
<?php include_once('head.php'); ?>
<title>Sign Up</title>
</head>
<body>
<?php
if(isset($_SESSION['act'])) ?>
<div class="text-center alert alert-primary alert-dismissible fade show" role="alert">
<?php echo $_SESSION['act']; ?>
<button type="button" class="close" data-dismiss="alert" aria-label="close">
×
</button>
</div> <?php
?>
<div class="container-fluid">
<div class="row">
<div class="col-md-7">
<div class="message-container">
<div class="message-inner-box">
<div class="title-container clearfix">
<p class="heading"> Welcome back, </p>
<p class="subheading"> Log In!</p>
</div>
</div>
</div>
<div class="image-header">
<img src="../image/sign up.png" alt="file not found" class="signUp-image">
</div>
</div>
<div class="col-md-5">
<div class="signuUp-header">
<div class="signUp-inner">
<form>
<div class="form-header">
<input type="text" class="input-field" placeholder="Enter Email">
</div>
<div class="form-header">
<div class="input-group">
<input type="password" id="password" class="input-field" placeholder="Password" />
<div class="input-group-append">
<span class="input-group-text"><i class="fas fa-lock" id="passwordSeen"> </i></span>
</div>
</div>
</div>
<div class="form-header">
<div class="forgetPassword text-right">
forget Password
</div>
</div>
<div class="form-header rememberMe">
<input type="checkbox" class="" />
<label class="form-check-label"> Remember me </label>
</div>
<div class="form-header">
<input type="submit" class="signUpButton" name="submit"/>
</div>
</form>
<div class="signUpFooter text-center">
<span> I'm a new member Sign Up</span>
</div>
</div>
</div>
</div>
</div>
</div>
<script src="../javascript/app.js"> </script>
</body>
</html>
This is the css code
/*Message box*/
.message-inner-box{
height: 300px;
width: 300px;
border-radius: 50%;
margin-top: -3.2em;
margin-left: -5em;
background-color: var(--message-box-color);
display: flex;
justify-content: center;
align-items: center;
}
.title-container {
margin-top: 50px;
color: var(--message-color);
}
.title-container p {
margin: 0;
}
.heading {
font-size: 1.3em;
font-weight: 600;
}
.subheading {
font-size: 2em;
font-weight: 800;
}
/*Sign Up page*/
.signUp-image {
height: 60%;
width: 60%;
}
.signuUp-header {
padding-top: 5rem;
}
.form-header {
margin-bottom: 2.5em;
}
.input-field {
height: 3em;
width: 80%;
padding: .3rem 2rem;
font-size: 14px;
font-weight: 700;
border: 1px solid var(--input-field-color);
border-radius: 5px;
}
You can add the style property to the alert div to include a negative bottom margin that repositions the element under this alert box.
<div style="margin-bottom: -50px" class="text-center alert alert-primary alert-dismissible fade show" role="alert">
Related
code:
<style>
.center {
float: left;
text-align: center;
}
.center h3 {
color: #000;
font-weight: 600;
}
.left {
font-size: 14px;
float: left;
width: 30%;
color: #000;
}
.right {
font-size: 14px;
float: right;
width: 70%;
color: #000;
}
#bot {
margin-bottom: 2em;
}
#left {
font-size: 14px;
float: left;
width: 42%;
color: #000;
}
#right {
font-size: 14px;
float: right;
width: 58%;
color: #000;
}
table, td, th {
border: 1px solid #000;
text-align: left;
font-size: 14px;
font-weight: inherit;
}
table {
border-collapse: collapse;
width: 100%;
}
th, td {
padding: 15px;
}
#pp {
font-size:14px;
color:#000;
}
.table-responsive {
overflow-x: hidden!important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button {
padding:0px!important;
}
</style>
<div class="col-md-12">
<a href="javascript:void(0)" class="btn btn-success" style="float: right;" onclick='printDiv();'>Print Sheet</a>
</div>
<div id="print_wrapp">
<div class="col-md-12" id="bot">
<div class="col-md-2">
<img src="<?php echo base_url(); ?>uploads/images/Lingayas Vidyapeeth Logo.png" class="img-responsive" style="width: 110px;">
</div>
<div class="col-md-10">
<div class="center">
<h3>
Lingaya's Vidyapeeth, Fraidabad<br>
Award Sheet<br>
End Semester Examination<br>
(May-June, 2019)
</h3>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12" id="bot">
<div class="col-md-6">
<div class="left">
<p>Department: </p>
</div>
<div class="right">
<p><?php echo $award[0]['department_name']?></p>
</div>
<div class="left">
<p>Program/Course: </p>
</div>
<div class="right">
<p><?php echo $award[0]['classes']?></p>
</div>
<div class="left">
<p>Subject Name: </p>
</div>
<div class="right">
<p><?php echo $award[0]['subject']?></p>
</div>
<div class="left">
<p>Session: </p>
</div>
<div class="right">
<p><?php echo $award[0]['session']?></p>
</div>
</div>
<div class="col-md-6">
<div class="left">
<p>Semester: </p>
</div>
<div class="right">
<p><?php echo $award[0]['yearsOrSemester']?></p>
</div>
<div class="left">
<p>Subject Code: </p>
</div>
<div class="right">
<p><?php echo $award[0]['subject_code']?></p>
</div>
<div class="left">
<p>Maximum Marks: </p>
</div>
<div class="right">
<p></p>
</div>
</div>
</div>
<div class="col-md-12" id="bot">
<div class="col-md-12">
<div class="table-responsive">
<table id="example1" class="table table-striped table-bordered table-hover dataTable no-footer">
<thead>
<th>S.No.</th>
<th>Roll No.</th>
<th>Marks(In Figure)</th>
<th>Marks(in Words)</th>
</thead>
<tbody>
<?php
$i=1;
foreach($award as $row)
{
?>
<tr>
<td><?php echo $i; ?></td>
<td><?php echo $row['roll']; ?></td>
<td></td>
<td></td>
</tr>
<?php
$i++;
}
?>
</tbody>
</table>
</div>
</div>
</div>
<div class="col-md-12" id="bot">
<div class="col-md-6">
<div id="left">
<p>Total No. of Student Pass: </p>
</div>
<div id="right">
<p></p>
</div>
</div>
<div class="col-md-6">
<div id="left">
<p>Total No. of Student Fail: </p>
</div>
<div id="right">
<p></p>
</div>
</div>
</div>
</div>
</div>
<script>
function printDiv()
{
var divToPrint=document.getElementById('print_wrapp');
var newWin=window.open('','Print-Window');
newWin.document.open();
newWin.document.write('<html><link rel="stylesheet" href="<?php echo base_url(); ?>assets/plugins/bootstrap/css/bootstrap.css" type="text/css" /><body onload="window.print()">'+divToPrint.innerHTML+'</body></html>');
newWin.document.close();
setTimeout(function(){newWin.close();},10);
}
</script>
In this code I am simply run print content inside div <div id="print_wrapp"> by click function i.e printDiv and its working properly but the problem is that print preview css not showing div content properly and an image is mention below:
and my original page look like:
So, How can I fix this problem? Please help me.
Thank You
You can apply the style sheet too both print and screen using media='screen,print'
<link ../bootstrap.min.css' rel='stylesheet' media='screen,print'>
or
<link ../bootstrap.min.css' rel='stylesheet' media='all'>
When we want to apply some style when printing a page, we need to apply the styles using #media print. Then only the style will apply for windows print function.
Style.css
#media print
{
.center {
float: left;
text-align: center;
}
.center h3 {
color: #000;
font-weight: 600;
}
.left {
font-size: 14px;
float: left;
width: 30%;
color: #000;
}
.right {
font-size: 14px;
float: right;
width: 70%;
color: #000;
}
}
Then link the css file where you want to print the page with style.
<link rel="stylesheet" type="text/css" href="Style.css">
Call the Print Function on Button Click
<button onclick="printPage()" class="center">Print</button>
<script>
function printPage()
{
print();
}
</script>
I want to create the same of that html style with wordpress contact form 7 , i just need to make that design work functional with wcf 7
Link
and my example html code :
<div class="form-group">
<label>Destination(s)</label>
<ul class="tags">Fes</ul>
<ul class="tags">Hight Atlas Mountains</ul>
<ul class="tags">Marrakech</ul>
<div class="destinations-wrap">
<input type="text" class="form-control icon icon-location" name="locations_search" placeholder="e.g. Iceland"
autocomplete="false">
<input type="text" class="destinations-suggestion" disabled>
</div>
<button class="btn btn-primary destinations-wrap-btn" tabindex="-1">+ Add Another</button>
</div>
This my example
You can use only html, and pure javascript. Bellow My Code
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="foundlose/vendor/meotip/style.css">
<meta charset="UTF-8">
<style type="text/css">
*{
font-family: "Raleway";
}
span{
margin-right: 10px;
margin-bottom: 10px;
padding: 5px 15px;
background-color: #E13547;
color:#FAFAFA;
font-weight: bold;
display:inline-block;
cursor: pointer;
}
#destination-list{
padding: 5px;
}
</style>
</head>
<body>
<div class="container">
<div class="indef">
<h1>Travel Information</h1>
<h6>Destiantion(s)</h6>
</div>
<div id="destination-list">
</div>
<div class="indef">
<input type="text" name="" id="destination-input">
</div>
<div class="indef">
<button id="add">Add</button>
</div>
</div>
<script type="text/javascript">
var destinationList = document.getElementById('destination-list'),
destinationInput = document.getElementById('destination-input'),
add = document.getElementById('add');
add.onclick = function(){
var addInput = document.createElement('span'), list = destinationList.getElementsByTagName('span');
addInput.setAttribute("class",destinationInput.value);
addInput.textContent = destinationInput.value + " ❌";
destinationList.appendChild(addInput);
for(var i = 0; i < list.length; i++){
list[i].onclick = function(){
this.parentNode.removeChild(this);
}
}
}
</script>
</body>
</html>
Here is your Solution with bootstrap 4
HTML
<div class="container">
<div class="jumbotron">
<h4>
Travel Information
</h4>
<br>
<h6>
Destination(s)
</h6>
<span class="badge badge-secondary">New <i class="fa fa-times"></i></span>
<span class="badge badge-secondary">High Atlas Mountains <i class="fa fa-times"></i></span>
<span class="badge badge-secondary">Marrakesh <i class="fa fa-times"></i></span>
<span class="badge badge-secondary">Moroccan Sahara <i class="fa fa-times"></i></span>
<span class="badge badge-secondary">Morocco <i class="fa fa-times"></i></span>
<div class="row">
<div class="col-lg-8">
<br>
<div class="search">
<span class="fa fa-map-marker"></span>
<input type="text" placeholder="e.g Iceland" class="form-control">
</div>
</div>
<div class="col-lg-4">
<br>
<button type="button" class="btn btn-orange">
<i class="fa fa-plus"></i>
Add Another
</button>
</div>
</div>
</div>
</div>
CSS
.badge-secondary{
border-radius: 0px;
font-size: 15px;
}
.form-control{
border-radius: 0px;
height: 50px
}
.btn-orange{
background-color: #d17841;
margin-top: 5px;
color: white;
}
.search { position: relative; }
.search input { text-indent: 30px;}
.search .fa-map-marker {
position: absolute;
top: 10px;
left: 20px;
font-size: 25px;
color: #8e8e8e;
}
You Can Edit or Preview Code Here On JsFiddle
i use swiper slider to make a profile slide the javascript is standar like in this github
https://github.com/nolimits4web/Swiper/blob/master/demos/390-autoheight.html
this the picture from my page
i use like this for the header photo
<div class="row">
<div class="col-12 p-0">
<img class="kol1">
</div>
</div>
and this is for the text-box
<!--text-->
<div class="col-12 bg-text-kol">
<div class="swiper-container swiper2" >
<div class="swiper-wrapper">
<div class="swiper-slide">
<div class="text-left">
</br>
<h2 class="h5 mt-3"><?php echo $this->lang->line('kol_15_name'); ?></h2>
<?php echo '#'.$this->lang->line('kol_15_ig'); ?>
<p class="mark-bold"><?php echo $this->lang->line('kol_15_title'); ?></p>
<p class="mt-3"><?php echo $this->lang->line('kol_15_text'); ?></p>
</br>
</div>
</div>
</div>
<!-- Add Pagination-->
<div class="swiper-pagination"></div>
</div>
</div>
The slider text box is running well
my question is how do every time I do a slide photo header change every time I do a slide?
Here is a sample how you could integrate the image in your slider. The .text-left is positioned absolute inside the .testamonial container above all other content inside of it.
HTML Code:
<div class="swiper-slide">
<div class="testamonial">
<div class="banner">
Get your free Engrave
</div>
<div class="photo">
<img src="https://upload.wikimedia.org/wikipedia/en/8/88/MagooAndDog.jpg"/></div>
<div class="text-left">
<h2 class="h5 mt-3">Mr. Triples</h2>
#mr_triples
<p class="mark-bold">Content User</p>
<p class="mt-3">Not that much here.</p>
</div>
</div>
</div>
CSS Code:
.photo {
width: 300px;
height: 300px;
max-width: 300px;
overflow: hidden;
}
.banner {
background-color: orange;
padding: 5px;
}
.text-left {
text-align: left;
position: absolute;
width: 200px;
border-radius: 10px 10px 0px 0px;
background-color: rgba(255,255,255,0.8);
bottom: 0;
left: 30px;
padding: 10px;
padding-top: 20px;
min-height: 100px;
}
Here is a codepen to show you how your desired effect can be achieved.
I try to generate pdf from html with css styles ,
I use dompdf for this.
In css there are floats too.
This is my css and html code:
$dompdf = new DOMPDF(); //create object
//load html with css
$dompdf->loadHtml('<html>
<head>
<style>
#first_head,#second_head,#content_invoice{width: 100%;}
.has-65 {
width: 65%;
float:left;
}
#product_invoice_table tr th:last-child, #product_invoice_table tr td:last-child {
text-align: right;
}
.has-35 {
width: 35%;
float:right;
}
.has-55 {
width: 55%;
}
.has-45 {
width: 45%;
}
.clearFix{
float:none;
clear:both;
}
#second_head{
margin-top: 100px;
}
#template_invoice{
padding: 50px 80px 50px 80px;
margin: 0 auto;
margin-top: 30px;
margin-bottom: 30px;
font-size: 20px;
color: #000!important;
font-family: Arial,serif!important;
}
#content_invoice{
width: 100%;
float: left;
margin-top: 150px;
}
#product_total_info{
float: right;
margin-top: 100px;
}...
</style>
</head>
<body>
<div id="template_invoice">
<div id="first_head">
<div id="logo_invoice" class="has-65">
<img src="logo.PNG" width="280px">
</div>
<div id="main_header_info" class="has-35">
mandelaugengroup gmbh
Schaffhauserstrasse 611
CH - 8052 Zürich
Tel.: +41 79 205 05 05
info#babboe.ch
www.babboe.ch
MWST/UID-Nr. CHE-254.427.754
</div>
</div>
<div class="clearFix"></div>
<div id="second_head">
<div id="lead_address" class="has-65">
<span id="lead_name">ghmgmgm</span><br>
<span id="lead_street">mhgmhm</span><br>
<span id="lead_postcode_city">mbmbmjggjg</span><br>
</div>
<div id="lead_invoice_info" class="has-35">
<div class="span_padding_invoice">
<span class="invoice_main_span">Rechnungs-Nr.</span>
<span id="lead_rechnungs_nr" class="right-clmn-span">jghghjgh</span>
<br>
</div>
<div class="span_padding_invoice">
<span class="invoice_main_span">Kunden-Nr.</span>
<span id="lead_kunder_nr" class="right-clmn-span">ghjgvj</span>
<br>
</div>
<div class="span_padding_invoice">
<span class="invoice_main_span">Datum</span>
<span id="invoice_datum" class="right-clmn-span">hhhhhhh</span>
<br>
</div>
<div class="span_padding_invoice">
<span class="invoice_main_span">Fallig am</span>
<span id="invoice_falling_am" class="right-clmn-span">bjbbb</span>
<br>
</div>
<div class="span_padding_invoice lead_total_container">
<span class="invoice_main_span total_bold">Total</span>
<span id="lead_total" class="right-clmn-span">iljkkj</span>
<br>
</div>
</div>
</div>
<div id="content_invoice">
...
<table id="product_invoice_table" width="100%">
....
</table>
</div>
<div class="has-65"></div>
<div id="product_total_info" class="has-35">
<div class="span_padding_invoice lead_total_container">
<span class="invoice_main_span">Total exkl.MWST</span>
<span class="right-clmn-span">CHF <span id="total_sum"></span></span>
</div>
<div class="span_padding_invoice">
<span class="invoice_main_span" id="mwst_num"></span>
<span class="right-clmn-span">CHF <span id="total_percant"></span></span>
<br>
</div>
<div class="span_padding_invoice lead_total_container_bold">
<span class="invoice_main_span">Total</span>
<span class="right-clmn-span">CHF <span id="total_end"></span></span>
<br>
</div>
</div>
<div id="footer_invoice">
...
</div>
</div>
</body>
</html>');
$dompdf->render();
$dompdf->stream("hello.pdf");
But my css doesnt work good. I add css as .
I get this result:
So how can I solve this problem?
Maybe I must set some settings for my css or settinhs for page?
Thanks for any help.
I am pretty sure that float is the cause of the problem
Depending on the dompdf version you can use def("DOMPDF_ENABLE_CSS_FLOAT", true); in dompdf_config.inc.php but this is not a good practice
I would suggest to use display:inline-block or even position:absolute which are fully compatible.
I have a problem with displaying the input in a div in my calculator. It doesn't display anything. What am i doing wrong? I am pretty new to PHP, so please explain as much as possible, so that I could learn from this. If it is possible, then the variable should be constantly refreshed, so that it is always the latest input. This is my code, the problem can be found in the PHP part of the code:
HTML:
<!DOCTYPE HTML>
<html>
<head>
<title>Calculator</title>
<link rel="stylesheet" type="text/css" href="stylesheet.css">
<script src="http://code.jquery.com/jquery-2.0.2.min.js"></script>
<script src="http://code.jquery.com/color/jquery.color.plus-names-2.1.2.min.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<script src="http://ricostacruz.com/jquery.transit/jquery.transit.min.js"></script>
<script type="text/javascript" src="script.js"></script>
</head>
<body>
<div id="device">
<div class="row">
<div id="C" class="button">
C
</div>
<div id="MCR" class="button">
MCR
</div>
<div id="M+" class="button">
M+
</div>
<div id="M-" class="button">
M-
</div>
</div>
<div class="row">
<div id="7" class="button" >
7
</div>
<div id="4" class="button">
4
</div>
<div id="1" class="button">
1
</div>
<div id="0" class="button">
0
</div>
</div>
<div class="row">
<div id="8" class="button">
8
</div>
<div id="5" class="button">
5
</div>
<div id="2" class="button">
2
</div>
<div id="." class="button">
.
</div>
</div>
<div class="row">
<div id="9" class="button">
9
</div>
<div id="6" class="button">
6
</div>
<div id="3" class="button">
3
</div>
<div id="=" class="button">
=
</div>
</div>
<div class="row">
<div id="+" class="button">
+
</div>
<div id="-" class="button">
-
</div>
<div id="x" class="button">
x
</div>
<div id="/" class="button">
/
</div>
<div id="display">
<?php
var $input = "0";
function showInput() {
echo $input;
};
while () {
showInput();
};
?>
</div>
</div>
</div>
</body>
</html>
CSS:
body, html {
height: 100%;
width: 100%;
padding: 0;
margin: 0;
}
#device {
width: 450px;
height: 400px;
background-color: #AB988B;
margin: 150px;
margin-top: 50px;
padding: 30px;
border-radius: 25px;
border: solid 10px #B06A3B;
padding-top: 100px;
}
#display {
width: 450px;
height: 75px;
background-color: #D4E7ED;
margin: auto;
border-radius: 5px;
margin-bottom: 30px;
top: 80px;
left: 190px;
position: absolute;
color: #B06A3B;
font-size: 25px;
line-height: 75px;
}
.button {
width: 65px;
height: 75px;
background-color: #7195A3;
border: solid 2px #EB8540;
color: #B06A3B;
font-size: 25px;
line-height: 75px;
margin-top: 15px;
margin-right: 17.5px;
text-align: center;
font-weight: 900;
font-family: arial;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-o-user-select: none;
user-select: none;
cursor: pointer;
}
.row {
display: inline-block;
}
jsFiddle:
http://jsfiddle.net/D9gWF/
<?php
$input = "0";
function showInput($input) {
echo $input;
};
while () {
showInput($input);
};
?>
You don't use var when declaring variables in PHP. Just $. And learn about "scope". You were trying to use a variable you declared outside of the function, in the function. Which doesn't work. So in my code, I passed that variable as a parameter to be used inside the function.
I gave you a lot of key words and a basic explanation for you to do some more digging.
EDIT: And I don't think that while loop will do anything. While what? Something needs to go inside those parenthesis. What are you looping through?
For PHP you need a php-enviroment like apache with php (for beginners: use "xampp")
this file needs normally the file-ending .php so the serverside-parser can parse your php-code in your file.
Here I have taken snippet from your code.
<div id="display">
<?php
var $input = "0";
function showInput() {
echo $input;
};
while () {
showInput();
};
?>
</div>
Just change your code with mine below.
<div id="display">
<?php
$input = "0";
echo $input;
?>
</div>
Let me explain it.
$input = "0";
THe above line just initializing the value for our input variable, you can change 0 with any value you like.
echo $input;
This will echo out the value saved inside our input variable in first line of PHP code above. If you have declared another variable you can also echo that just change the variable name after $ sign. $ sign let the PHP know that its variable name starting up.
Correct those parts into these and your code will work
<div class="row">
<div id="9" class="button">
9
</div>
<div id="6" class="button">
6
</div>
<div id="3" class="button">
3
</div>
<div id="equal" class="button">
=
</div>
</div>
<div class="row">
<div id="plus" class="button">
+
</div>
<div id="minus" class="button">
-
</div>
<div id="multiply" class="button">
x
</div>
<div id="divide" class="button">
/
</div>
<div id="display">
<?php
function showInput() {
$input = "0";
echo $input;
}
?>
</div>
</div>
You haven't set an argument in the while loop. While what exactly? Also you need to look up variable scope. Functions can not access variables that are not contained within the function, in this case parse them in. eg
<?php
$input = "0";
function showInput($input)
{
echo $input;
};
showInput($input);
?>
Here is an example of your code working with my edits http://phpfiddle.org/main/code/1nh-wda