Below is my screenshots of html and pdf
my html contains divs and styles like below
<!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>Challan Form</title>
<style>
body{
background: #f2f2f2;
font-family:"Trebuchet MS", Arial, Helvetica, sans-serifl;
font-size:14px;
}
*{
margin:0;
padding:0;
box-sizing:border-box;
}
.form-challan {
width: 96%;
margin: 0px auto;
background: #ccc;
padding:20px 0;
min-height: 500px;
}
ul{
list-style: none;
}
a{
text-decoration:none;
}
.form-challan ul.main{
display:flex;
justify-content: space-between;
}
.form-challan ul.main li#triplicate,
.form-challan ul.main li#duplicate,
.form-challan ul.main li#original {
width: 32.33%;
background: #fff;
min-height: 400px;
border: 2px solid;
padding:5px 0;
}
.form-challan ul li:after{
border-right: 1px dotted #000;
}
.rows {
width: 100%;
float: left;
}
.rows-tri{
width:96%;
}
.f-right{
float:right;
}
.f-left{
float:left;
}
.t-right{
text-align: right;
}
.t-left{
text-align:left;
}
.t-center{
text-align:center;
}
.gov-telangana{
font-weight:bold;
font-size:16px;
margin:0 0 5px 0;
}
input[type="text"] {
padding: 2px;
float: left;
width: 10%;
text-align: center;
border: 1px solid #000;
}
.rows-tri.f-right ul{
display:block;
}
.rows-tri.f-right ul li{
width:auto;
border:none;
min-height:inherit;
padding:0;
}
.e-cls{
float: left;
margin: 0 0 0 5px;
}
.cha-tre-num {
width: 98%;
float: right;
padding: 5px 0;
}
.cha-tre-num .challan-no {
width: 56%;
margin-left: 10px;
}
.hr-full{
width:100%;
border-bottom:2px solid #333;
float:left;
}
.major-head {
padding: 3px 0;
}
.pa3{
padding:3px 0;
}
.wid-mar{
width:98%;
margin:0px auto;
display: table;
}
.major-head.wid-mar ul li input {
width: 25%;
}
</style>
</head>
<body>
<div class="form-challan">
<ul class="main">
<li id="triplicate">
<div class="rows">
<div class="rows-tri f-left t-right">
<span class="e-cls">E</span>
<span class="tri-title">TRIPLICATE</span>
</div>
</div>
<div class="rows t-center">
<p class="gov-telangana">GOVERNMENT OF TELANGANA</p>
</div>
<div class="rows">
<div class="rows-tri f-right">
<ul class="f-left">
<li style="width:20%; float:left;"><span>DTO/STO</span></li>
<li style="width:25%; float:left;"><span>HYD</span></li>
<li style="width:54%; float:left;">
<span class="f-left">Treaury/PAO Code</span>
<input type="text" placeholder="2" />
<input type="text" placeholder="5" />
<input type="text" placeholder="0" />
<input type="text" placeholder="2" />
</li>
</ul>
</div>
</div>
<div class="rows">
<div class="cha-tre-num">
<span class="f-left">Treasury Challan No.</span>
<input type="text" class="challan-no f-left"/>
</div>
</div>
<div class="hr-full"></div>
<div class="rows">
<div class="major-head wid-mar">
<ul class="f-left">
<li style="width:30%; float:left;"><span>Major Head</span></li>
<li style="width:25%; float:left;">
<input type="text" placeholder="2" />
<input type="text" placeholder="5" />
<input type="text" placeholder="0" />
<input type="text" placeholder="2" />
</li>
<li style="width:35%; float:right;"><span>Other Deposits</span></li>
</ul>
</div>
</div>
<div class="hr-full"></div>
<div class="rows">
<div class="sub-major-head wid-mar pa3">
<ul class="f-left">
<li style="width:30%; float:left;"><span>Sub - Major Head</span></li>
<li style="width:25%; float:left;">
<input type="text" placeholder="2" style="width:25%;" />
<input type="text" placeholder="5" style="width:25%;" />
</li>
</ul>
</div>
</div>
<div class="hr-full"></div>
<div class="rows">
<div class="minor-head wid-mar pa3">
<ul class="f-left">
<li style="width:30%; float:left; margin-top: 5px;"><span>Minor Head</span></li>
<li style="width:25%; float:left; margin-top: 5px;">
<input type="text" placeholder="2" style="width:25%;" />
<input type="text" placeholder="5" style="width:25%;" />
<input type="text" placeholder="5" style="width:25%;" />
</li>
<li style="width:40%; float:left; font-size:12px;"><span>Defined Contributory Pension Scheme For Govt. Employess</span></li>
</ul>
</div>
</div>
<div class="hr-full"></div>
<div class="rows">
<div class="group-sub-head wid-mar pa3">
<ul class="f-left">
<li style="width:30%; float:left;"><span>Group Sub - Head</span></li>
<li style="width:25%; float:left;">
<input type="text" placeholder="2" style="width:25%;" />
<input type="text" placeholder="5" style="width:25%;" />
</li>
</ul>
</div>
</div>
<div class="hr-full"></div>
<div class="rows">
<div class="sub1-head wid-mar pa3">
<ul class="f-left">
<li style="width:30%; float:left; margin-top: 5px;"><span>Sub - Head</span></li>
<li style="width:25%; float:left; margin-top: 5px;">
<input type="text" placeholder="2" style="width:25%;" />
<input type="text" placeholder="5" style="width:25%;" />
</li>
<li style="width:40%; float:left; font-size:12px;"><span>AP State Govt EMployees Contributory Pension Scheme</span></li>
</ul>
</div>
</div>
<div class="rows">
<div class="detailed1-head wid-mar pa3">
<ul class="f-left">
<li style="width:30%; float:left;"><span>Detailed - Head</span></li>
<li style="width:25%; float:left;">
<input type="text" placeholder="2" style="width:25%;" />
<input type="text" placeholder="5" style="width:25%;" />
<input type="text" placeholder="5" style="width:25%;" />
</li>
<li style="width:40%; float:left; font-size:12px;"><span>Employee Contribution</span></li>
</ul>
</div>
</div>
<div class="hr-full"></div>
<div class="rows">
<div class="sub-detailed wid-mar pa3">
<ul class="f-left">
<li style="width:30%; float:left;"><span>Sub - Detailed</span></li>
<li style="width:25%; float:left;">
<input type="text" placeholder="0" style="width:25%;" />
<input type="text" placeholder="0" style="width:25%;" />
<input type="text" placeholder="0" style="width:25%;" />
</li>
<li style="width:40%; float:left; font-size: 14px; text-align: center;"><span>---</span></li>
</ul>
</div>
</div>
<div class="hr-full"></div>
<div class="rows">
<div class="sub-detailed wid-mar pa3">
<ul class="f-left" style="font-size:12px;">
<li style="width:20%; float:left;"><span>Non-Plan =N Plan=P</span></li>
<li style="width:22%; float:left; margin-right: 10px;">
<input type="text" placeholder="N" style="width:25%;" />
Charged = C Voted =V
</li>
<li style="width:22%; float:left;">
<input type="text" placeholder="V" style="width:25%;" />
Charged = C Voted =V
</li>
<li style="width:25%; float:left;">
<input type="text" placeholder="2" style="width:25%;" />
<input type="text" placeholder="0" style="width:25%;" />
<input type="text" placeholder="7" style="width:25%;" />
<input type="text" placeholder="1" style="width:25%;" />
</li>
</ul>
</div>
</div>
<div class="hr-full"></div>
<div class="rows">
<div class="amount-box">
<div class="wid-mar pa3">
</div>
</div>
</div>
</li>
<li id="duplicate"></li>
<li id="original"></li>
</ul>
</div>
<a class="hideforpdf" href="converted2.php?action=download" target="_blank">View PDF</a>
</body>
</html>
PHP code
<?php
require_once 'dompdf/autoload.inc.php';
// reference the Dompdf namespace
use Dompdf\Dompdf;
if (isset($_GET['action']) && $_GET['action'] == 'download') {
// instantiate and use the dompdf class
$dompdf = new Dompdf();
//to put other html file
$html = file_get_contents('challan-form.html');
//hide download pdf link in generated output pdf
$html .= '<style type="text/css">.hideforpdf { display: none; }</style>';
//load html
$dompdf->loadHtml($html);
// (Optional) Setup the paper size and orientation
$dompdf->setPaper('Legal', 'Landscape');
// Render the HTML as PDF
$dompdf->render();
// Output the generated PDF (1 = download and 0 = preview)
$dompdf->stream("sample",array("Attachment"=>1));
}
?>
There will be three boxes in html.
What is the mistake here? Does dompdf doesnot support all styles? there is a css code saying display:flex, pdf is generating empty if it is there. If I remove that line attached pdf is generated. Please help
I just finished a page creating PDFs using dompdf, and among other things I realized that dompdf definitely doesn't support flexbox and has quite a few other limitations too. Also floated elements were a problem in many cases, so I ended up using all inline-block elements instead of floats, and also a few tables (and no flexbox at all). In fact I more or less had to rebuild the whole page, and I am afraid this is what you'll have to do, too...
don't use the flex and float property, use only display: table and display : table-cell property in your CSS file it will help you.
Related
I'm simply trying to center a block of divs (within a div) but I cannot seem to center it. I've tried solutions from here, but none of them work for me?
Structure:
<div id="content" class="email-prefs">
<div class="item"><!-- content -- ></div>
<div class="item"><!-- content -- ></div>
<div class="item"><!-- content -- ></div>
....
</div>
Any help would be appreciated! P.s. I'm trying to center the .item div
#content {
text-align: center;
text-align: center;
width: 100%;
height: auto;
border: 1px solid red;
}
.email-prefs .item {
width: 27.0%;
float: left;
margin: 0;
line-height: 25px;
color: #36383d;
font-family: Helvetica, sans-serif;
padding: 10px;
display: inline-block;
margin: auto;
border: 1px solid blue;
}
.subscribe-options {
clear: both;
}
<div id="content" class="email-prefs">
<p class="header">Uncheck the types of emails you do not want to receive:</p>
<input type="hidden" name="subscription_ids" value="">
<div class="item">
<div class="item-inner selected">
<div class="checkbox-row">
<span class="fakelabel">
<input id="id_896974" type="checkbox" name="id_896974" checked="checked">
<span>Food for Thought instant blog notification</span>
</span>
</div>
<p>Be the first to read our new liveRES blog posts</p>
</div>
</div>
<div class="item">
<div class="item-inner selected">
<div class="checkbox-row">
<span class="fakelabel">
<input id="id_1044442" type="checkbox" name="id_1044442" checked="checked">
<span>Food for Thought monthly blog roundup</span>
</span>
</div>
<p>Must-read moments from the liveRES blog</p>
</div>
</div>
<div class="item">
<div class="item-inner selected">
<div class="checkbox-row">
<span class="fakelabel">
<input id="id_4811083" type="checkbox" name="id_4811083" checked="checked">
<span>Industry insights and research</span>
</span>
</div>
<p>Keep on top of the latest hospitality facts and figures</p>
</div>
</div>
<div class="subscribe-options" style="margin-right: 0">
<p class="header">Or check here to never receive any emails:</p>
<p>
<label for="globalunsub">
<input name="globalunsub" id="globalunsub" type="checkbox">
<span>
Unsubscribe me from all mailing lists.
</span>
</label>
</p>
</div>
<input type="submit" class="hs-button primary" id="submitbutton" value="Update email preferences">
<div class="clearer"></div>
</div>
You need to wrap .item in a wrapper and set text-align: center to that wrapper
Remove float from .item and set vertical-align: top
#content {
text-align: center;
text-align: center;
width: 100%;
height: auto;
border: 1px solid red;
}
.item-wrapper {
text-align: center;
}
.email-prefs .item {
width: 27.0%;
/* float: left; */
/* margin: 0; */
line-height: 25px;
color: #36383d;
font-family: Helvetica, sans-serif;
padding: 10px;
display: inline-block;
margin: auto;
border: 1px solid blue;
vertical-align: top;
}
.subscribe-options {
clear: both;
}
<div id="content" class="email-prefs">
<p class="header">Uncheck the types of emails you do not want to receive:</p>
<input type="hidden" name="subscription_ids" value="">
<div class="item-wrapper">
<div class="item">
<div class="item-inner selected">
<div class="checkbox-row">
<span class="fakelabel">
<input id="id_896974" type="checkbox" name="id_896974" checked="checked">
<span>Food for Thought instant blog notification</span>
</span>
</div>
<p>Be the first to read our new liveRES blog posts</p>
</div>
</div>
<div class="item">
<div class="item-inner selected">
<div class="checkbox-row">
<span class="fakelabel">
<input id="id_1044442" type="checkbox" name="id_1044442" checked="checked">
<span>Food for Thought monthly blog roundup</span>
</span>
</div>
<p>Must-read moments from the liveRES blog</p>
</div>
</div>
<div class="item">
<div class="item-inner selected">
<div class="checkbox-row">
<span class="fakelabel">
<input id="id_4811083" type="checkbox" name="id_4811083" checked="checked">
<span>Industry insights and research</span>
</span>
</div>
<p>Keep on top of the latest hospitality facts and figures</p>
</div>
</div>
</div>
<div class="subscribe-options" style="margin-right: 0">
<p class="header">Or check here to never receive any emails:</p>
<p>
<label for="globalunsub">
<input name="globalunsub" id="globalunsub" type="checkbox">
<span>
Unsubscribe me from all mailing lists.
</span>
</label>
</p>
</div>
<input type="submit" class="hs-button primary" id="submitbutton" value="Update email preferences">
<div class="clearer"></div>
</div>
Create a common div with class flex for all the three items and add the following styling for it
.flex{
display:inline-flex;
justify-content: center
}
and Remove the following css from email-prefs .item class
.email-prefs .item {
/*margin: auto;Remove this line*/
}
#content {
text-align: center;
text-align: center;
width: 100%;
height: auto;
border: 1px solid red;
}
.flex{
display:inline-flex;
justify-content: center
}
.email-prefs .item {
width: 27.0%;
float: left;
margin: 0;
line-height: 25px;
color: #36383d;
font-family: Helvetica, sans-serif;
padding: 10px;
display: inline-block;
/*margin: auto;Remove this line*/
border: 1px solid blue;
}
.subscribe-options {
clear: both;
}
<div id="content" class="email-prefs">
<p class="header">Uncheck the types of emails you do not want to receive:</p>
<input type="hidden" name="subscription_ids" value="">
<div class="flex">
<div class="item">
<div class="item-inner selected">
<div class="checkbox-row">
<span class="fakelabel">
<input id="id_896974" type="checkbox" name="id_896974" checked="checked">
<span>Food for Thought instant blog notification</span>
</span>
</div>
<p>Be the first to read our new liveRES blog posts</p>
</div>
</div>
<div class="item">
<div class="item-inner selected">
<div class="checkbox-row">
<span class="fakelabel">
<input id="id_1044442" type="checkbox" name="id_1044442" checked="checked">
<span>Food for Thought monthly blog roundup</span>
</span>
</div>
<p>Must-read moments from the liveRES blog</p>
</div>
</div>
<div class="item">
<div class="item-inner selected">
<div class="checkbox-row">
<span class="fakelabel">
<input id="id_4811083" type="checkbox" name="id_4811083" checked="checked">
<span>Industry insights and research</span>
</span>
</div>
<p>Keep on top of the latest hospitality facts and figures</p>
</div>
</div>
</div>
<div class="subscribe-options" style="margin-right: 0">
<p class="header">Or check here to never receive any emails:</p>
<p>
<label for="globalunsub">
<input name="globalunsub" id="globalunsub" type="checkbox">
<span>
Unsubscribe me from all mailing lists.
</span>
</label>
</p>
</div>
<input type="submit" class="hs-button primary" id="submitbutton" value="Update email preferences">
<div class="clearer"></div>
</div>
You want it like this?
Just removed float:left;
#content {
text-align: center;
text-align: center;
width: 100%;
height: auto;
border: 1px solid red;
}
.email-prefs .item {
width: 27.0%;
margin: 0;
line-height: 25px;
color: #36383d;
font-family: Helvetica, sans-serif;
padding: 10px;
display: inline-block;
margin: auto;
border: 1px solid blue;
}
.subscribe-options {
clear: both;
}
<div id="content" class="email-prefs">
<p class="header">Uncheck the types of emails you do not want to receive:</p>
<input type="hidden" name="subscription_ids" value="">
<div class="item">
<div class="item-inner selected">
<div class="checkbox-row">
<span class="fakelabel">
<input id="id_896974" type="checkbox" name="id_896974" checked="checked">
<span>Food for Thought instant blog notification</span>
</span>
</div>
<p>Be the first to read our new liveRES blog posts</p>
</div>
</div>
<div class="item">
<div class="item-inner selected">
<div class="checkbox-row">
<span class="fakelabel">
<input id="id_1044442" type="checkbox" name="id_1044442" checked="checked">
<span>Food for Thought monthly blog roundup</span>
</span>
</div>
<p>Must-read moments from the liveRES blog</p>
</div>
</div>
<div class="item">
<div class="item-inner selected">
<div class="checkbox-row">
<span class="fakelabel">
<input id="id_4811083" type="checkbox" name="id_4811083" checked="checked">
<span>Industry insights and research</span>
</span>
</div>
<p>Keep on top of the latest hospitality facts and figures</p>
</div>
</div>
<div class="subscribe-options" style="margin-right: 0">
<p class="header">Or check here to never receive any emails:</p>
<p>
<label for="globalunsub">
<input name="globalunsub" id="globalunsub" type="checkbox">
<span>
Unsubscribe me from all mailing lists.
</span>
</label>
</p>
</div>
<input type="submit" class="hs-button primary" id="submitbutton" value="Update email preferences">
<div class="clearer"></div>
</div>
I'm trying to add css to my website but It just load half of the page and stop. Anyone have an idea about this problem? Thank you so much.
It stopped loading right before the confirm textfield, the whole page was loaded correctly.
Sorry if the code is hard to read. I'm new to coding.
<%#page contentType="text/html" pageEncoding="UTF-8"%>
<%#taglib uri="/struts-tags" prefix="s"%>
<html>
<head>
<title>HVH's Store</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.4.2/js/swiper.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.4.2/css/swiper.min.css">
<style>
html, body {
position: relative;
}
ul.navbar-hungdtq > li {
font-weight: bold;
text-align: center;
}
.navbar{
margin-bottom: 0;
}
.navbar-footer > li {
font-weight: bold;
text-align: center;
}
.login-form{
padding: 10px;
}
.swiper-container {
width: 100%;
height: 100%;
}
.swiper-slide {
text-align: center;
font-size: 18px;
background: #fff;
/* Center slide text vertically */
display: -webkit-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
-webkit-justify-content: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center;
}
div.swiper-slide > img {
width: 600px;
height: 800px;
}
.container-hungdtq{
background: white;
padding: 1%;
width: 100%;
height: 10vh;
}
.main-hungdtq{
background: white;
padding-top: 1%;
}
.mega-menu {
position: absolute;
padding: 10px 0px;
width: 110vh;
height: 82vh;
border-radius: 0;
margin-top: 0px;
}
.mega-menu li {
display: inline-block;
float: left;
font-size: 0.94rem;
padding: 3px 0px;
}
.mega-menu li.mega-menu-column {
margin-right: 20px;
width: 20vh;
}
.mega-menu .nav-header {
padding: 0 !important;
margin-bottom: 10px;
display: inline-block;
width: 100%;
border-bottom: 1px solid #ddd;
}
li.mega-menu-column > ul > li > a{
color: #777;
}
li.mega-menu-column > ul {
display: inline-block;
}
li.mega-menu-column > ul > li {
font-size: 1.5vh;
}
.well{
padding: 8vh 0vh;
}
h4 {
font-size: 8vh;
}
/* Profile container */
.profile {
margin: 20px 0;
}
/* Profile sidebar */
.profile-sidebar {
padding: 20px 0 10px 0;
background: #fff;
}
.profile-userpic img {
float: none;
margin: 0 auto;
width: 50%;
height: 50%;
-webkit-border-radius: 50% !important;
-moz-border-radius: 50% !important;
border-radius: 50% !important;
}
.profile-usertitle {
text-align: center;
margin-top: 20px;
}
.profile-usertitle-name {
color: #5a7391;
font-size: 16px;
font-weight: 600;
margin-bottom: 7px;
}
.profile-usertitle-job {
text-transform: uppercase;
color: #5b9bd1;
font-size: 12px;
font-weight: 600;
margin-bottom: 15px;
}
.profile-userbuttons {
text-align: center;
margin-top: 10px;
}
.profile-userbuttons .btn {
text-transform: uppercase;
font-size: 11px;
font-weight: 600;
padding: 6px 15px;
margin-right: 5px;
}
.profile-userbuttons .btn:last-child {
margin-right: 0px;
}
.profile-usermenu {
margin-top: 30px;
}
.profile-usermenu ul li {
border-bottom: 1px solid #f0f4f7;
}
.profile-usermenu ul li:last-child {
border-bottom: none;
}
.profile-usermenu ul li a {
color: #93a3b5;
font-size: 14px;
font-weight: 400;
}
.profile-usermenu ul li a i {
margin-right: 8px;
font-size: 14px;
}
.profile-usermenu ul li a:hover {
background-color: #fafcfd;
color: #5b9bd1;
}
.profile-usermenu ul li.active {
border-bottom: none;
}
.profile-usermenu ul li.active a {
color: #5b9bd1;
background-color: #f6f9fb;
border-left: 2px solid #5b9bd1;
margin-left: -2px;
}
/* Profile Content */
.profile-content {
padding: 20px;
background: #fff;
min-height: 460px;
}
input.hidden {
position: absolute;
left: -9999px;
}
#profile-image1 {
cursor: pointer;
width: 100px;
height: 100px;
border:2px solid #03b1ce ;}
.tital{ font-size:16px; font-weight:500;}
.bot-border{ border-bottom:1px #f8f8f8 solid; margin:5px 0 5px 0}
</style>
<s:head/>
</head>
<body>
<!--Tool bar-->
<nav class="navbar navbar-default navbar-fixed-top main-hungdtq">
<div class="container-hungdtq">
<div class="col-md-1" >
<a class="navbar-brand" rel="home" href="#">
<img style="max-width: 100px; margin-top: -50px;" src="https://i.pinimg.com/736x/6f/55/e1/6f55e1ddd3d428846ab97062f9af3ad8--line-logo-design-logo-k.jpg">
</a>
</div>
<div class="col-md-1">
</div>
<div class="col-md-5">
<form action="SearchForBookAction">
<div class="input-group">
<input type="text" class="form-control" placeholder="Tìm kiếm" name="search">
<div class="input-group-btn">
<button class="btn btn-default" type="submit"><i class="glyphicon glyphicon-search"></i></button>
</div>
</div>
</form>
</div>
<div class="col-md-1">
</div>
<s:set var="username" value="%{#session.USERNAME}"/>
<s:set var="fail" value="%{#session.failed}"></s:set>
<ul class="nav navbar-nav col-md-4">
<s:if test="%{#username == null || #username == ''}">
<li class="col-md-3"><span class="glyphicon glyphicon-user"></span> Đăng ký</li>
<!--Login-->
<li class="col-md-3">
<a class="dropdown-toggle" data-toggle="dropdown" href="#"><span class="glyphicon glyphicon-user"></span>Đăng nhập</a>
<div class="dropdown-menu login-form" style="padding: 15px; padding-bottom: 0px;">
<form action="login" class="form-inline">
<div class="form-group">
<label>Username: </label>
<input class="form-control" type="text" placeholder="Enter username" name="username">
</div>
<div>
<label>Password: </label>
<input class="form-control" type="password" placeholder="Enter password" name="password">
</div>
<input type="submit" value="Đăng nhập" class="btn btn-success" style="margin-top: 5px; margin-bottom: 5px; margin-left: 25%">
</form>
<script>
<s:if test="%{#fail != null}">
alert("Wrong username or password!");
</s:if>
</script>
</div>
</li>
<!--End of Login-->
</s:if>
<s:if test="%{#username != null || #username == ''}">
<li class="col-md-4"><span class="glyphicon glyphicon-log-in">Welcome, <s:property value="#username"/></span></li>
<li class="col-md-4"><span claRedirectToProfileActionss="glyphicon glyphicon-log-in"></span> Tài khoản của tôi</li>
<li class="col-md-2"><span class="glyphicon glyphicon-shopping-cart"></span></li>
</s:if>
</ul>
</div>
<!--Navigation bar-->
<nav class="navbar navbar-default">
<ul class="navbar-hungdtq nav navbar-nav row" style="width: 100%;">
<li class="col-md-1"></li>
<li class="col-md-2">SÁCH BÁN CHẠY</li>
<li class="col-md-2">KHUYẾN MÃI HOT</li>
<li class="dropdown col-md-2">
<a class="dropdown" data-toggle="dropdown" href="#">KHO SÁCH<span class="caret"></span></a>
<ul class="dropdown-menu mega-menu">
<li class="mega-menu-column">
<ul>
<li class="nav-header">Khoa học kỹ thuật</li>
<li>Tin học</li>
<li>Y học</li>
<li>Điện - điện tử</li>
<li>Cơ khí</li>
</ul>
</li>
<li class="mega-menu-column">
<ul>
<li class="nav-header">Kinh tế</li>
<li>Quản trị - Lãnh đạo</li>
<li>Nhân vật - Bài học kinh doanh</li>
<li>Khởi nghiệp - Làm giàu</li>
<li>Marketing - Bán hàng</li>
<li>Tài chính - Ngân hàng</li>
</ul>
</li>
<li class="mega-menu-column">
<ul>
<li class="nav-header">Thiếu nhi</li>
<li>Truyện tranh</li>
<li>Truyện đọc</li>
<li>Tô màu - Luyện chữ</li>
<li>Kiến thức bách khoa</li>
<li>Manga</li>
</ul>
</li>
<li class="mega-menu-column">
<ul>
<li class="nav-header">Văn học trong nước</li>
<li>Phóng sự - Ký sự</li>
<li>Nhân vật văn học</li>
<li>Thơ ca</li>
<li>Tiểu thuyết lịch sử</li>
<li>Tiểu thuyết lãng mạng</li>
</ul>
</li>
<li class="mega-menu-column">
<ul>
<li class="nav-header">Văn học nước ngoài</li>
<li>Cổ tích - Thần thoại</li>
<li>Truyện lịch sử</li>
<li>Truyện ngắn</li>
<li>Truyện trinh thám</li>
<li>Vụ án</li>
</ul>
</li>
</ul>
</li>
<li class="col-md-2">SỰ KIỆN SÁCH</li>
<li class="col-md-2">KHO SÁCH CŨ</li>
</ul>
</nav>
<!--End of Navigation bar-->
</nav>
<!--End of Tool bar-->
<!--Body-->
<div style="padding-top: 180px ">
<div class="container">
<s:form cssClass="well form-horizontal" action="register" method="get" id="contact_form" theme="simple">
<center><h4>REGISTER</h4></center>
<!-- Text input-->
<div class="form-group">
<label class="col-md-4 control-label">Tên của bạn:</label>
<div class="col-md-4 inputGroupContainer">
<div class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span>
<s:textfield name="name" placeholder="" cssClass="form-control" type="text"/>
</div>
</div>
</div>
<!-- Text input-->
<div class="form-group">
<label class="col-md-4 control-label">Username</label>
<div class="col-md-4 inputGroupContainer">
<div class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span>
<s:textfield name="username" placeholder="Tên tài khoản" cssClass="form-control" type="text"/>
</div>
</div>
</div>
<!-- Text input-->
<div class="form-group">
<label class="col-md-4 control-label" >Mật khẩu:</label>
<div class="col-md-4 inputGroupContainer">
<div class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span>
<s:textfield name="password" placeholder="" cssClass="form-control" type="password"/>
</div>
</div>
</div>
<!-- Text input-->
<div class="form-group">
<label class="col-md-4 control-label" >Xác nhận:</label>
<div class="col-md-4 inputGroupContainer">
<div class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span>
<s:textfield name="confirm "placeholder=" mật khẩu của bạn" cssClass="form-control" type="password"/>
</div>
</div>
</div>
<!-- Pick -->
<div class="form-group">
<label class="col-md-4 control-label">Giới tính</label>
<div class="col-md-4 selectContainer">
<div class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-list"></i></span>
<s:combobox label="Hãy chọn giới tính của bạn" name="gender" cssClass="form-control selectpicker"
list="{'1':'Nam', '2':'Nu'}
"/>
</div>
</div>
</div>
<!-- Text input-->
<div class="form-group">
<label class="col-md-4 control-label">E-Mail</label>
<div class="col-md-4 inputGroupContainer">
<div class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-envelope"></i></span>
<s:textfield name="email" placeholder="Địa chỉ E-Mail" cssClass="form-control" type="text"/>
</div>
</div>
</div>
<!-- Text input-->
<div class="form-group">
<label class="col-md-4 control-label">Địa chỉ</label>
<div class="col-md-4 inputGroupContainer">
<div class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span>
<s:textfield name="address" placeholder="Địa chỉ của bạn" cssClass="form-control" type="text"/>
</div>
</div>
</div>
<!-- Text input-->
<div class="form-group">
<label class="col-md-4 control-label">Số điện thoại</label>
<div class="col-md-4 inputGroupContainer">
<div class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-earphone"></i></span>
<s:textfield name="phone" placeholder="(08)" cssClass="form-control" type="text"/>
</div>
</div>
</div>
<!-- Button -->
<div class="form-group">
<label class="col-md-4 control-label"></label>
<div class="col-md-4"><br>
<s:submit type="submit" cssClass="btn btn-warning" name="Đăng ký" /><span class="glyphicon glyphicon-send"></span>
</div>
</div>
</s:form>
</div>
</div>
<!--End of Body-->
<!--Footer-->
<footer class="footer">
<nav class="navbar navbar-default">
<ul class="navbar-footer nav navbar-nav row" style="width: 100%;">
<li class="col-md-1"></li>
<li class="col-md-2">VỀ CHÚNG TÔI</li>
<li class="col-md-2">LIÊN HỆ</li>
<li class="col-md-2">ĐỊA ĐIỂM</li>
<li class="col-md-2">ĐÓNG GÓP Ý KIẾN</li>
<li class="col-md-2">CHÍNH SÁCH</li>
</ul>
</nav>
</footer>
<!--End of Footer-->
</body>
This is the image of my website after being loaded
The onhover for the labels in the accordion work in Firefox and IE but not in Chrome. No curser and no color change when using Chrome. Been looking online for hours and can't find any solution. In chrome you can not tell there is a link for the tabs because there is no pointer or color change when you hover over them. Mu first thoughts are positioning, a needed web-kit, or maybe it has something to do with the depreciated tags. This is old code written by someone else that I'm updating. Any help is appreciated. FYI- I took out alot of the unnecessary code because they will only let me put so much in here. The checked input + label works fine and the hover uses basically the same css so I don't understand why it doesn't work in Chrome.
#accordion {margin-top:30px;}
#mainSpec {
margin: 20px 20px 0 0;
}
sectionSpec {
display: none;
margin-right: 20px;
}
input {
display: none;
}
label {
display: inline-block;
margin: 0 0 -1px;
padding: 15px 10px;
border: 1px solid transparent;
}
label:before {
margin-right: 10px;
font-size:18px;
}
input:hover + label {
color: #2f4977;
border-top: 2px solid #2f4977;
cursor: pointer;
}
input:checked + label {
color: #df7c29;
border-top: 2px solid #df7c29;
}
#tab1:checked ~ #content1,
#tab2:checked ~ #content2,
#tab3:checked ~ #content3,
#tab4:checked ~ #content4,
#tab5:checked ~ #content5 {
display: block;
}
label:before {
margin: 0;
font-size: 18px;
}
}
}
#accordion h4 {color:#df7c29;}
</asp:content>
<div class="container content" id="spectators" style="margin-top:40px;">
<section class="row">
<div class="col-sm-8" style="padding-bottom:80px;">
<h3 class="tickets grounds">Information</h3>
<div id="accordion">
<div id="mainSpec">
<input id="tab1" type="radio" name="tabs" checked />
<label for="tab1" class="fa-bullhorn">Policies</label>
<input id="tab2" type="radio" name="tabs" />
<label for="tab2" class="fa-calendar">Schedule</label>
<input id="tab3" type="radio" name="tabs" />
<label for="tab3" class="fa-bus">Transportation</label>
<input id="tab4" type="radio" name="tabs" />
<label for="tab4" class="golf">
<img src="img/golf.png" alt="" class="golf">Course</label>
<input id="tab5" type="radio" name="tabs" />
<label for="tab5" class="fa-question">FAQs</label>
<sectionspec id="content1">
<div accordian-container>
<h4>Policies</h4>
<div class="col-md-7">
<img src="img/Policies_Image.jpg" alt="" class="policy-images">
</div>
<div class="col-md-5">
<p>
Review policies on prohibited items.
</p>
<div class="btn-group">
<a class="btn btn-default btn-md" style="color: #fff; background: #df7c29;" role="button" href="policies.aspx">More ></a>
</div>
</div>
</div>
</sectionspec>
<sectionspec id="content2">
<div accordian-container>
<h4>Schedule</h4>
<div class="col-md-7">
<img src="img/schedule_image.jpg" alt="" class="schedule-images">
</div>
<div class="col-md-5">
<p>Check out the schedule of events </p>
<div class="btn-group">
<a class="btn btn-default btn-md" style="color: #fff; background: #df7c29;" role="button" href="schedule.aspx">More ></a>
</div>
</div>
</div>
</sectionspec>
<sectionspec id="content3">
<div accordian-container>
<h4>Transportation</h4>
<div class="col-md-7">
<img src="img/transportation_image.jpg" alt="" class="transportation">
</div>
<div class="col-md-5">
<p><strong>PLEASE NOTE:</strong> Parking locations are still TBD. </p>
<div class="btn-group">
</div>
</div>
</div>
</sectionspec>
<sectionspec id="content4">
<div accordian-container>
<h4>Course</h4>
<div class="col-md-7">
<img src="img/course_image.jpg" alt="" class="golf course" />
</div>
<div class="col-md-5">
<p style="font-weight: bold; color: red">
coming soon!
</p>
<p><span style="font-weight: bold">PAR/YARDAGE:</span>Par: 36--36-72; Yards: 7,259<br />(subject to change)</p>
<p style="font-weight: bold; color: red">View aerial</p>
</div>
</div>
</sectionspec>
<sectionspec id="content5">
<div accordian-container>
<h4>FAQs</h4>
<div class="col-md-7">
<img src="img/faqs_image.jpg" alt="" class="faq">
</div>
<div class="col-md-5">
<p>Frequently Asked Questions. </p>
<div class="btn-group">
<a class="btn btn-default btn-md" style="color: #fff; background: #df7c29;" role="button" href="faq.aspx">More ></a>
</div>
</div>
</div>
</sectionspec>
</div>
</div><!--close accordion-->
</div><!--close col-sm-8-->
</section>
</div>
</asp:content>
I think you should change your hover declaration:
Use: input + label:hover
Intead of: input:hover + label
Why? Because (If I'm not misunderstanding) what you want is apply the effect on the label, not in the input.
#accordion {margin-top:30px;}
#mainSpec {
margin: 20px 20px 0 0;
}
sectionSpec {
display: none;
margin-right: 20px;
}
input {
display: none;
}
label {
display: inline-block;
margin: 0 0 -1px;
padding: 15px 10px;
border: 1px solid transparent;
}
label:before {
margin-right: 10px;
font-size:18px;
}
input + label:hover {
color: #2f4977;
border-top: 2px solid #2f4977;
cursor: pointer;
}
input:checked + label {
color: #df7c29;
border-top: 2px solid #df7c29;
}
#tab1:checked ~ #content1,
#tab2:checked ~ #content2,
#tab3:checked ~ #content3,
#tab4:checked ~ #content4,
#tab5:checked ~ #content5 {
display: block;
}
label:before {
margin: 0;
font-size: 18px;
}
}
}
#accordion h4 {color:#df7c29;}
</style>
</asp:content>
<div class="container content" id="spectators" style="margin-top:40px;">
<section class="row">
<div class="col-sm-8" style="padding-bottom:80px;">
<h3 class="tickets grounds">Information</h3>
<div id="accordion">
<div id="mainSpec">
<input id="tab1" type="radio" name="tabs" checked />
<label for="tab1" class="fa-bullhorn">Policies</label>
<input id="tab2" type="radio" name="tabs" />
<label for="tab2" class="fa-calendar">Schedule</label>
<input id="tab3" type="radio" name="tabs" />
<label for="tab3" class="fa-bus">Transportation</label>
<input id="tab4" type="radio" name="tabs" />
<label for="tab4" class="golf">
<img src="img/golf.png" alt="" class="golf">Course</label>
<input id="tab5" type="radio" name="tabs" />
<label for="tab5" class="fa-question">FAQs</label>
<sectionspec id="content1">
<div accordian-container>
<h4>Policies</h4>
<div class="col-md-7">
<img src="img/Policies_Image.jpg" alt="" class="policy-images">
</div>
<div class="col-md-5">
<p>
Review policies on prohibited items.
</p>
<div class="btn-group">
<a class="btn btn-default btn-md" style="color: #fff; background: #df7c29;" role="button" href="policies.aspx">More ></a>
</div>
</div>
</div>
</sectionspec>
<sectionspec id="content2">
<div accordian-container>
<h4>Schedule</h4>
<div class="col-md-7">
<img src="img/schedule_image.jpg" alt="" class="schedule-images">
</div>
<div class="col-md-5">
<p>Check out the schedule of events </p>
<div class="btn-group">
<a class="btn btn-default btn-md" style="color: #fff; background: #df7c29;" role="button" href="schedule.aspx">More ></a>
</div>
</div>
</div>
</sectionspec>
<sectionspec id="content3">
<div accordian-container>
<h4>Transportation</h4>
<div class="col-md-7">
<img src="img/transportation_image.jpg" alt="" class="transportation">
</div>
<div class="col-md-5">
<p><strong>PLEASE NOTE:</strong> Parking locations are still TBD. </p>
<div class="btn-group">
</div>
</div>
</div>
</sectionspec>
<sectionspec id="content4">
<div accordian-container>
<h4>Course</h4>
<div class="col-md-7">
<img src="img/course_image.jpg" alt="" class="golf course" />
</div>
<div class="col-md-5">
<p style="font-weight: bold; color: red">
coming soon!
</p>
<p><span style="font-weight: bold">PAR/YARDAGE:</span>Par: 36--36-72; Yards: 7,259<br />(subject to change)</p>
<p style="font-weight: bold; color: red">View aerial</p>
</div>
</div>
</sectionspec>
<sectionspec id="content5">
<div accordian-container>
<h4>FAQs</h4>
<div class="col-md-7">
<img src="img/faqs_image.jpg" alt="" class="faq">
</div>
<div class="col-md-5">
<p>Frequently Asked Questions. </p>
<div class="btn-group">
<a class="btn btn-default btn-md" style="color: #fff; background: #df7c29;" role="button" href="faq.aspx">More ></a>
</div>
</div>
</div>
</sectionspec>
</div>
</div><!--close accordion-->
</div><!--close col-sm-8-->
</section>
</div>
</asp:content>
Let me know if it works.
Thanks
I'm not sure if this is enough information, please let me know if you need more. I'm very inexperienced so not sure what is necessary.
I have a section that is displayed on various web pages. For some reason it is not wrapping...the images and corresponding text areas all just keep running off the pages.
Here is the HTML. The are where I'm having trouble is just under <hr style=" width: 114%;">, the Block NewProducts, id: "HomeNewProducts".
/* Product Listings */
.ProductList,
.ProductList li {
horizontal-align: center;
list-style: none;
padding: 0px;
margin: 0;
}
.Content .ProductList,
.Content .ProductList li {}
.ProductList li {
list-style: none;
min-height: 250px;
width: 260px !important;
display: table-cell;
font-size: 1em;
/*margin-right: -1px;*/
padding-bottom: 1px;
overflow: hidden;
}
#home .Content ul.ProductList li {
width: 260px !important;
}
.ProductList .ProductPriceRating {
padding-bottom: 0px;
}
.ProductList .ProductImage,
.brand-img {
padding: 0px;
text-align: center;
overflow: hidden;
vertical-align: middle;
/* border: 1px solid #d4d3d3; */
}
.ProductList .ProductImage img {
vertical-align: bottom;
max-width: 270px;
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<html xmlns="http://www.w3.org/1999/xhtml">
<!-- HEAD GOES HERE -->
<body>
<div id="Container">
<div><img src="http://www.somethingorother.com" /> LoadingPleaseWait
</div>
<div id="Outer">
<div id="TopMenu">
<ul>
<li>
<div class="phoneIcon">CALL US</div>
</li>
<li>Some line of other</li>
<li class="last CartLink" style="display:HideCartOptions">
<i class="icon" title="View Cart"> </i><span>Items / $0.00</span>
</li>
</ul>
<br class="Clear">
</div>
<div id="Header" class="clearfix">
<div id="Logo">
HeaderLogoGoesHere
</div>
<div class="right">
<div id="SearchForm">
<form action=".../search.php" method="get" onsubmit="return check_small_search_form()">
<label for="search_query">Search</label>
<input type="text" name="search_query" id="search_query" class="Textbox autobox" value="Search" />
<input type="submit" class="Button" value="" name="Search" title="Search" />
</form>
</div>
<script type="text/javascript">
var QuickSearchAlignment = 'right';
var QuickSearchWidth = '390px';
lang.EmptySmallSearch = "EmptySmallSearch";
</script>
</div>
</div>
<div id="Wrapper">
<div class="Left fleft" id="LayoutColumn1">
<div class="CategoryList" id="SideCategoryList">
<div class="BlockContent">
<div class="SideCategoryListClass">
<li class="LastChildClass">CategoryName
</li>
</div>
</div>
</div>
</div>
<div class="Content Wide" id="LayoutColumn2">
<script type="text/javascript" src=".../javascript/jquery/plugins/jquery.flexslider.js"></script>
<script type="text/javascript" charset="utf-8">
$(window).load(function() {
$('.slide-show').flexslider({
slideshowSpeed: $('.slide-show').attr('data-swap-frequency') * 1000,
animation: "slide",
pauseOnHover: true,
controlNav: true,
directionNav: true
});
});
</script>
<div class="slide-show slide-show-render slide-show-render-full" id="HomeSlideShow">
<ol class="slides">
<li class="slide" xmlns="http://www.w3.org/1999/html">
<a href="Slide_Link_Url">
<div class="slide-content">
<div class="slide-overlay">
<h2 class="slide-heading" style="color: #000">Slide_Heading_Text</h2>
<p class="slide-text" style="color: #000">Slide_Text_Text</p>
<p class="slide-button" style="Slide_Button_Hide"><span style="color: #000">Slide_Button_Text</span></p>
</div>
<span class="slide-image-wrapper">
<img class="slide-image" src="Slide_Image_Url" alt="Slide_Image_AlternateText">
</span>
</div>
</a>
</li>
</ol>
</div>
<hr style="width: 114%;">
<div class="Block NewProducts Moveable Panel" id="HomeNewProducts" style="display:HideHomeNewProductsPanel">
<div class="BlockContent">
<ul class="ProductList">
<li class="AlternateClass">
<div class="ProductImage" data-product="ProductId">
<img src="http://www.somethingorother.com" />
</div>
<div class="ProductDetails">
ProductName
<em class="p-price">ProductPrice</em>
<div class="ProductPriceRating">
<span class="Rating Rating4"><img src=".../ProductRating.png" alt="" /></span>
</div>
<div class="ProductActionAdd" style="display: HideActionAdd;">
ProductAddText
</div>
</div>
</li>%
</ul>
<br class="Clear" />
</div>
<br class="Clear" />
</div>
</div>
<div class="clear"></div>
</div>
</div>
</body>
</html>
Finally figured this out....was just a matter of my Wrapper and Container dimensions being out of whack. Adjusted the sizes and everything now lines up perfectly.
I am trying to create a log in box which should look like this but this is what I get. Here is my code. login.html
<html>
<head>
<title>Login Page</title>
<script type="javascript" src="js/login.js"></script>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<div class="logo">
<img src="images/logo.gif"/>
</div>
<div class="line">
</div>
<div class="loginImage">
<img src="images/login_banner.jpg" />
</div>
<div class="loginTop">
<img src="images/log_top.gif" />
</div>
<div class="loginBox">
<br/>
<div class="innerLogin">
<text>Secure Login</text>
<br/><br/>
<img src="images/field_top.gif" />
<div class="innerLoginBox">
<br/>
<div class="loginControls">
Login Id
<div style="position:relative;top:15px;">
<input type="text" name="txtLogin" />
</div>
<div style="position:relative;top:30px;">
Password
</div>
<div style="position:relative;top:36px;">
<input type="password" name="txtPass" / >
</div>
<div style="position:relative;top:45px;">
<input type="button" value="Log In" />
</div>
</div>
</div>
<img src="images/field_bottom.gif" />
</div>
</div>
<div class="loginBottom">
<img src="images/log_bottom.gif" />
</div>
</body>
</html>
style.css
.logo
{
position:absolute;
top:15px;
left:80px;
}
.line{
position:absolute;
top:65px;
left:80px;
width:955px;
height:5;
background:#B60548;
}
.loginImage
{
position:absolute;
top:85px;
left:80px;
}
.loginTop
{
position:absolute;
top:85px;
left:770px;
}
.loginBottom
{
position:relative;
top:339px;
left:762px;
}
.loginBox
{
position:absolute;
top:88px;
left:770px;
background-color:#E5E5E5;
width:255px;
}
.innerLogin
{
position:relative;
left:15px;
}
.innerLoginBox
{
position:relative;
background-color:white;
width:226px;
}
.loginControls
{
position:relative;
left:10px;
}
text
{
color:#A4003F;
font: bold 16px Arial,Helvetica,sans-serif;
}
I don't know what's wrong with my html code. Can some one point me in a right direction ?Thanks.
Remove position:relative; and top:xx; then replace with padding-top:xx
<div class="loginControls"> Login Id
<div style="padding-top:10px">
<input type="text" name="txtLogin" />
</div>
<div style="padding-top:10px"> Password </div>
<div style="padding-top:10px">
<input type="password" name="txtPass" />
</div>
<div style="padding-top:10px">
<input type="button" value="Log In" />
</div>
</div>
You can also update this
<div style="padding-top:10px">
<input type="button" value="Log In" />
</div>
to
<div style="padding-top:10px;padding-bottom:10px">
<input type="button" value="Log In" />
</div>