html container scrolling bug - php

My html page is working almost as should but i have been scrolling through stackoverflow and can't seems to find any answer specific to mine.
body {
width: 100%;
height: 100%;
padding: 0;
margin: 0;
border: 0;
}
h1 {
font-family: arial;
color: rgb(128, 128, 128);
text-align: center;
margin: 0;
overflow: auto;
}
header {
margin: 0;
width: 100%;
top: 0; left: 0;
padding: 0;
height: 30%;
position: fixed;
line-height: 350%;
background: black;
background-image: url(profile_pic.jpg);
background-repeat: no-repeat;
background-position: right;
background-size: 20% 70%;
color: rgb(190, 190, 190);
text-align: center;
border-spacing: 5px 10px;
border: 1px solid black;
}
nav {
display: flex;
text-align: center;
height: 25px;
position: fixed;
top: 30%;
width: 100%;
background: rgb(80, 80, 80);
border: 1px solid rgb(80, 80, 80);
}
.nav_link {
flex-grow: 1;
line-height: 25px;
}
a {
text-decoration: none;
color: white;
}
a:hover {
text-decoration: underline;
}
.content {
width: 100%;
overflow-y: scroll;
height: 100%;
margin: 20% 0% 0% 0%;
padding-top: 6%;
}
.myPanel {
border: 1px solid black;
border-radius: 7px 7px 7px 7px;
box-shadow: 0px 0px 4px 999;
width: 45%;
margin: 1%;
}
.myPanel .heading {
background: rgb(80, 80, 80);
border-radius: 5px 5px 0px 0px;
color: white;
padding: 5px 20px;
}
.myPanel .panelBody {
padding: 3px 20px;
background: silver;
border-radius: 0px 0px 5px 5px;
}
.myPanel p {
margin: 3px;
}
.myPanel:hover {
box-shadow: 0px 0px 8px black;
}
<?php include 'head.php';?>
<body>
<header>
<h1>Resume</h1>
</header>
<nav>
<div class="nav_link">
Home
</div>
<div class="nav_link">
Resume
</div>
<div class="nav_link">
Side Projects
</div>
<div class="nav_link">
About Me
</div>
</nav>
<div class="content">
<div class="myPanel">
<div class="heading">US ARMY NATIONAL GUARD</div>
<div class="panelBody">
<p>03/2014 -- Current</p>
<div class="showOnHover">
<p>
<p>Crystal River, FL</p>
<ul>
<ui>Rank: PV2</ui></br>
<ui>Diesel Mechanic -- 91H</ui></br>
<ui>Military Police -- 31b</ui></br>
</ul>
</p>
</div>
</div>
</div>
</div>
<div class="myPanel">
<div class="heading">LILLYS ON THE LAKE</div>
<div class="panelBody">
<p>06/2016 -- 02/2017</p>
<div class="showOnHover">
<p>
<p>Clermont FL</p>
<ul>
<ui>Serving</ui></br>
<ui>Bartending</ui></br>
<ui>Service bar</ui></br>
<ui>Card Holder voids/comps</ui></br>
<ui>Open/close</ui></br>
<ui>Food running</ui></br>
<ui>Expediting</ui></br>
</ul>
</p>
</div>
</div>
</div>
</div>
<div class="myPanel">
<div class="heading">PANE D'OR</div>
<div class="panelBody">
<p>08/2015 -- 06/2016</p>
<div class="showOnHover">
<p>
<p>Winter Garden FL</p>
<ul>
<ui>Baking</ui></br>
<ui>Pastry</ui></br>
<ui>Delivering</ui></br>
<ui>Sales at markets / shop</ui></br>
</ul>
</p>
</div>
</div>
</div>
</div>
<div class="myPanel">
<div class="heading">Disney</div>
<div class="panelBody">
<p>06/2015 -- 11/2016</p>
<div class="showOnHover">
<p class>
<p>Orlando FL</p>
<ul>
<ui>Monorail pilot</ui></br>
<ui>Platform operator</ui></br>
<ui>Audience control</ui></br>
<ui>Customer relations</ui></br>
</ul>
</p>
</div>
</div>
</div>
</div>
<div class="myPanel">
<div class="heading">PERFORMANCE YEARS GTO</div>
<div class="panelBody">
<p>01/2012 -- 02/2015</p>
<div class="showOnHover">
<p>
<p>Hatfield PA</p>
<ul>
<ui>Shipping</ui></br>
<ui>Receiving</ui></br>
<ui>Pulling/packing/sorting</ui></br>
<ui>Picker operator</ui></br>
<ui>Forklift operator</ui></br>
<ui>Customer service</ui></br>
<ui>In house sales</ui></br>
<ui>Show sales</ui></br>
<ui>Inventory</ui></br>
</ul>
</p>
</div>
</div>
</div>
</div>
<div class="myPanel">
<div class="heading">GIANT FOODS</div>
<div class="panelBody">
<p>01/2012 -- 03/2013</p>
<div class="showOnHover">
<p>
<p>Montgomeryville PA</p>
<ul>
<ui>Stocking shelves</ui></br>
<ui>Rotate merchandise</ui></br>
</ul>
</p>
</div>
</div>
</div>
</div>
</div>
</body>
so with the fiddle its slightly modified to work on that application. the only differences are that i use some php to form a template for the header and nav bar on my computer.
okay so if you view the fiddle the scroll bar is not only the area i want to scroll but the entire page. i would like to keep the header fixed and have the "body" or for my page the container scroll but not have a full length scroll bar on side of page.


Add position:fixed; to body and overflow-y:scroll to .content
Also don't "close" /br
It's just br or, br/ for extra compatibility.
<br/>
You also can't nest p tags (have a p tag inside another p tag) or have a list inside a p tag - a list gets its own styling - so get rid of the p around your list+list heading. And you have an extra /div at the end of each myPanel - there should only be three.
Also, 0 values shouldn't have units (eg %) after them. Run your CSS through csslint.net
You've also got some unecessary CSS attributes in there - e.g., your header and nav don't need top/right positioning or position:fixed.
https://jsfiddle.net/Kass_P/kg6uppnm/25/
body {
width: 100%;
height: 100%;
padding: 0;
margin: 0;
border: 0;
position:fixed;
}


Simply remove height from body class.
Set height:40% or so for content class.
Also, make all <div class="myPanel"> inside the <div class="content"> div
Hope it helps


See the full working code:
<html>
<head>
<style>
body {
width: 100%;
padding: 0;
margin: 0;
border: 0;
}
h1 {
font-family: arial;
color: rgb(128, 128, 128);
text-align: center;
margin: 0;
overflow: auto;
}
header {
margin: 0;
width: 100%;
top: 0; left: 0;
padding: 0;
height: 30%;
position: fixed;
line-height: 350%;
background: black;
background-image: url(profile_pic.jpg);
background-repeat: no-repeat;
background-position: right;
background-size: 20% 70%;
color: rgb(190, 190, 190);
text-align: center;
border-spacing: 5px 10px;
border: 1px solid black;
}
nav {
display: flex;
text-align: center;
height: 25px;
position: fixed;
top: 30%;
width: 100%;
background: rgb(80, 80, 80);
border: 1px solid rgb(80, 80, 80);
}
.nav_link {
flex-grow: 1;
line-height: 25px;
}
a {
text-decoration: none;
color: white;
}
a:hover {
text-decoration: underline;
}
.content {
width: 100%;
overflow-y: scroll;
height: 40%;
margin: 20% 0% 0% 0%;
padding-top: 6%;
}
.myPanel {
border: 1px solid black;
border-radius: 7px 7px 7px 7px;
box-shadow: 0px 0px 4px 999;
width: 45%;
margin: 1%;
}
.myPanel .heading {
background: rgb(80, 80, 80);
border-radius: 5px 5px 0px 0px;
color: white;
padding: 5px 20px;
}
.myPanel .panelBody {
padding: 3px 20px;
background: silver;
border-radius: 0px 0px 5px 5px;
}
.myPanel p {
margin: 3px;
}
.myPanel:hover {
box-shadow: 0px 0px 8px black;
}
</style></head>
<body>
<header>
<h1>Resume</h1>
</header>
<nav>
<div class="nav_link">
Home
</div>
<div class="nav_link">
Resume
</div>
<div class="nav_link">
Side Projects
</div>
<div class="nav_link">
About Me
</div>
</nav>
<div class="content">
<div class="myPanel">
<div class="heading">US ARMY NATIONAL GUARD</div>
<div class="panelBody">
<p>03/2014 -- Current</p>
<div class="showOnHover">
<p>
<p>Crystal River, FL</p>
<ul>
<ui>Rank: PV2</ui></br>
<ui>Diesel Mechanic -- 91H</ui></br>
<ui>Military Police -- 31b</ui></br>
</ul>
</p>
</div>
</div>
</div>
<div class="myPanel">
<div class="heading">LILLYS ON THE LAKE</div>
<div class="panelBody">
<p>06/2016 -- 02/2017</p>
<div class="showOnHover">
<p>
<p>Clermont FL</p>
<ul>
<ui>Serving</ui></br>
<ui>Bartending</ui></br>
<ui>Service bar</ui></br>
<ui>Card Holder voids/comps</ui></br>
<ui>Open/close</ui></br>
<ui>Food running</ui></br>
<ui>Expediting</ui></br>
</ul>
</p>
</div>
</div>
</div>
<div class="myPanel">
<div class="heading">PANE D'OR</div>
<div class="panelBody">
<p>08/2015 -- 06/2016</p>
<div class="showOnHover">
<p>
<p>Winter Garden FL</p>
<ul>
<ui>Baking</ui></br>
<ui>Pastry</ui></br>
<ui>Delivering</ui></br>
<ui>Sales at markets / shop</ui></br>
</ul>
</p>
</div>
</div>
</div>
<div class="myPanel">
<div class="heading">Disney</div>
<div class="panelBody">
<p>06/2015 -- 11/2016</p>
<div class="showOnHover">
<p class>
<p>Orlando FL</p>
<ul>
<ui>Monorail pilot</ui></br>
<ui>Platform operator</ui></br>
<ui>Audience control</ui></br>
<ui>Customer relations</ui></br>
</ul>
</p>
</div>
</div>
</div>
<div class="myPanel">
<div class="heading">PERFORMANCE YEARS GTO</div>
<div class="panelBody">
<p>01/2012 -- 02/2015</p>
<div class="showOnHover">
<p>
<p>Hatfield PA</p>
<ul>
<ui>Shipping</ui></br>
<ui>Receiving</ui></br>
<ui>Pulling/packing/sorting</ui></br>
<ui>Picker operator</ui></br>
<ui>Forklift operator</ui></br>
<ui>Customer service</ui></br>
<ui>In house sales</ui></br>
<ui>Show sales</ui></br>
<ui>Inventory</ui></br>
</ul>
</p>
</div>
</div>
</div>
<div class="myPanel">
<div class="heading">GIANT FOODS</div>
<div class="panelBody">
<p>01/2012 -- 03/2013</p>
<div class="showOnHover">
<p>
<p>Montgomeryville PA</p>
<ul>
<ui>Stocking shelves</ui></br>
<ui>Rotate merchandise</ui></br>
</ul>
</p>
</div>
</div>
</div>
</div>
</body>
</html>


Firstly you need to do what you said they all should be ! ...
Then you must fix the height of div content to the screen. In other way if you want your body has not scroll bar, You must set your elements so fixed to the screen and your body has not vertical overflow. Some thing like this:
header{height: 60px;}
nav{height: 40px;}
.content{height: calc(100vh - 100px);}
Then you can set a vertical scroll bar for div content.
#content{overflow-y: auto;}
See this simplified of your page:
header {
margin: 0;
width: 100%;
top: 0;
left: 0;
padding: 0;
height: 60px;
position: fixed;
line-height: 350%;
background: black;
background-image: url(profile_pic.jpg);
background-repeat: no-repeat;
background-position: right;
background-size: 20% 70%;
color: rgb(190, 190, 190);
text-align: center;
border-spacing: 5px 10px;
border: 1px solid black;
}
.content {
width: 100%;
overflow-y: scroll;
height: 100%;
margin-top: 60px;
height: calc(100vh - 70px);
}
.myPanel {
border: 1px solid black;
border-radius: 7px 7px 7px 7px;
box-shadow: 0px 0px 4px 999;
width: 45%;
margin: 1%;
}
.myPanel .heading {
background: rgb(80, 80, 80);
border-radius: 5px 5px 0px 0px;
color: white;
padding: 5px 20px;
}
.myPanel .panelBody {
padding: 3px 20px;
background: silver;
border-radius: 0px 0px 5px 5px;
}
.myPanel p {
margin: 3px;
}
.myPanel:hover {
box-shadow: 0px 0px 8px black;
}
<!--?php include 'head.php';?-->
<header>
<h1>Resume</h1>
</header>
<div class="content">
<div class="myPanel">
<div class="heading">LILLYS ON THE LAKE</div>
<div class="panelBody">
<p>06/2016 -- 02/2017</p>
<div class="showOnHover">
<p>
</p><p>Clermont FL</p>
<ul>
<ui>Serving</ui><br>
<ui>Bartending</ui><br>
<ui>Service bar</ui><br>
<ui>Card Holder voids/comps</ui><br>
<ui>Open/close</ui><br>
<ui>Food running</ui><br>
<ui>Expediting</ui><br>
</ul>
<p></p>
</div>
</div>
</div><div class="myPanel">
<div class="heading">LILLYS ON THE LAKE</div>
<div class="panelBody">
<p>06/2016 -- 02/2017</p>
<div class="showOnHover">
<p>
</p><p>Clermont FL</p>
<ul>
<ui>Serving</ui><br>
<ui>Bartending</ui><br>
<ui>Service bar</ui><br>
<ui>Card Holder voids/comps</ui><br>
<ui>Open/close</ui><br>
<ui>Food running</ui><br>
<ui>Expediting</ui><br>
</ul>
<p></p>
</div>
</div>
</div><div class="myPanel">
<div class="heading">LILLYS ON THE LAKE</div>
<div class="panelBody">
<p>06/2016 -- 02/2017</p>
<div class="showOnHover">
<p>
</p><p>Clermont FL</p>
<ul>
<ui>Serving</ui><br>
<ui>Bartending</ui><br>
<ui>Service bar</ui><br>
<ui>Card Holder voids/comps</ui><br>
<ui>Open/close</ui><br>
<ui>Food running</ui><br>
<ui>Expediting</ui><br>
</ul>
<p></p>
</div>
</div>
</div><div class="myPanel">
<div class="heading">LILLYS ON THE LAKE</div>
<div class="panelBody">
<p>06/2016 -- 02/2017</p>
<div class="showOnHover">
<p>
</p><p>Clermont FL</p>
<ul>
<ui>Serving</ui><br>
<ui>Bartending</ui><br>
<ui>Service bar</ui><br>
<ui>Card Holder voids/comps</ui><br>
<ui>Open/close</ui><br>
<ui>Food running</ui><br>
<ui>Expediting</ui><br>
</ul>
<p></p>
</div>
</div>
</div><div class="myPanel">
<div class="heading">LILLYS ON THE LAKE</div>
<div class="panelBody">
<p>06/2016 -- 02/2017</p>
<div class="showOnHover">
<p>
</p><p>Clermont FL</p>
<ul>
<ui>Serving</ui><br>
<ui>Bartending</ui><br>
<ui>Service bar</ui><br>
<ui>Card Holder voids/comps</ui><br>
<ui>Open/close</ui><br>
<ui>Food running</ui><br>
<ui>Expediting</ui><br>
</ul>
<p></p>
</div>
</div>
</div>
</div>

Related

Problem with wordpress managing my custom pages content

I have a problem that, like I wrote at title, though its because wordpress.
Im working with a basic wordpress theme but I made my own header, my own footer and my own pages.
Heres my header:
<body>
<div class="wrapper">
<header>
<script src="<?php echo get_stylesheet_directory_uri(); ?>/assets/js/scriptmain.js" type="text/javascript"></script>
<nav>
<div class="menu-icon">
<i class="fa fa-bars fa-2x"></i>
</div>
<div class="logo">
ArvanJobs
</div>
<?php
wp_nav_menu( array(
'theme location' => 'top',
'container' => 'div',
'container_class' => 'menu',
));
?>
</nav>
</header>
And here's the footer:
<?php
/**
*
* #link arvanjobs.com
*
* #package Klmfsk
*/
?>
<!DOCTYPE html>
<html lang="en">
<head>
<title>Footer</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<link href="https://fonts.googleapis.com/css?family=Playfair+Display:400,700,900" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700" rel="stylesheet">
</head>
<footer class="container-fluid bg-grey py-5">
<div class="container">
<div class="row">
<div class="col-md-6">
<div class="row">
<div class="col-md-6 ">
<div class="logo-part">
<img src="http://localhost/wordpress/wp-content/themes/twentytwentyone-child/img/logo.png" class="w-50 logo-footer" >
<p>7637 Laurel Dr. King Of Prussia, PA 19406</p>
<p>Use this tool as test data for an automated system or find your next pen</p>
</div>
</div>
<div class="col-md-6 px-4">
<h6> About Company</h6>
<p>But horizontal lines can only be a full pixel high.</p>
More Info <br>
Contact Us
</div>
</div>
</div>
<div class="col-md-6">
<div class="row">
<div class="col-md-6 px-4">
<h6> Help us</h6>
<div class="row ">
<div class="col-md-6">
<ul>
<li> Home </li>
<li> About </li>
<li> Service </li>
<li> Team </li>
<li> Help </li>
<li> Contact </li>
</ul>
</div>
<div class="col-md-6 px-4">
<ul>
<li> Cab Faciliy </li>
<li> Fax </li>
<li> Terms </li>
<li> Policy </li>
<li> Refunds </li>
<li> Paypal </li>
</ul>
</div>
</div>
</div>
<div class="col-md-6 ">
<h6> Newsletter</h6>
<div class="social">
<i class="fa fa-facebook" aria-hidden="true"></i>
<i class="fa fa-instagram" aria-hidden="true"></i>
</div>
<p>That's technology limitation of LCD monitors</p>
</div>
</div>
</div>
</div>
</div>
</div>
<?php wp_footer(); ?>
</body>
</html>
Then, my method is:
1- To make a new wp page. Named for example: Index.
2-Make a page-index.php and I code there calling the header and the footer.
U can se at arvanjobs.com. I made a page-index.php, and I code this: (and works fine.)
<?php get_header(); ?>
<div class="main-container">
<div class="item1 cnt">
<video id="vid" src="http://localhost/wordpress/wp-content/themes/twentytwentyone-child/img/coffee1.mp4" width="1920" height="1080" autoplay loop muted type="video/mp4"> </video>
</div>
<div class="item2 cnt">
<p style="font-size:50px; color:white;"> Join Us! </P>
<button type="button" class="btn btn-outline-warning" style="font-family:forum; font-weight:bold; background-color:transparent; border-radius: 3px; color:yellow; font-size:50px; border: 2px solid yellow;">Warning</button>
</div>
<div class="item3 cnt">
<img src="http://localhost/wordpress/wp-content/themes/twentytwentyone-child/img/logo.png" />
</div>
<div class="item4 cnt">
</div>
<div class="item5 cnt">
<h4>WHO WE ARE?</h4>
<p>
ArvanJobs is above all peace of mind. It is a new way
of working, of traveling, of training, of advancing in
your career. Whether you are a company looking for
workers or you are looking for a new job
opportunity, ArvanJobs will always be by your side,
selecting the best workers and the best companies
that will boost your career.
</p>
</div>
<div class="item6 cnt">
<h4>WHY WORK WITH US?</h4>
<p>
For our personal treatment, our advice, and above
all for our experience working in hotels in
numerous countries.
Because we know how difficult it is to take that step
of daring to work in a foreign country. Because we
know how hard it is to find the right staff.
</p>
</div>
<div class="item7 cnt">
</div>
<div class="item8 cnt">
<img src="http://localhost/wordpress/wp-content/themes/twentytwentyone-child/img/arvan3.jpg">
</div>
<div class="item9 cnt">
<h4>HOW WE WORK?</h4>
<p>
All candidates are interviewed by staff who have
worked in hotels, not offices
The same happens with our clients who have to
satisfy a series of criteria and guarantees for the
worker to work with us.</p>
</div>
<div class="item10 cnt">10</div>
<div class="item11 cnt">
<img src="http://localhost/wordpress/wp-content/themes/twentytwentyone-child/img/arvan2.jpg" />
</div>
<div class="item12 cnt">
<img src="http://localhost/wordpress/wp-content/themes/twentytwentyone-child/img/arvan4.jpg" />
</div>
<div class="item13 cnt">
<!--<img src="http://localhost/wordpress/wp-content/themes/twentytwentyone-child/img/arvan3.jpg" />-->
</div>
</div>
<?php get_footer(); ?>
As u can see at arvanjobs.com, the header is at top, the footer at bottom...well, nice. Then I do THE SAME EXACTLY THING, I make a wp page called "Candidates", then I make a .php called "page-candidates.php" with this:
<?php get_header(); ?>
<body>
<div class="bg">
<section class="form">
<div class="formwrap">
<form method="POST" id="Form" action="https://www.arvanjobs.com/wp-content/themes/astra/registered.php" enctype="multipart/form-data">
<h4>My short CV</h4>
<label for="lastname">Last name:</label>
<input class="controls" type="text" name="lname" id="lname" placeholder="Ex: Sorribes" required="">
<label for="name">Name:</label>
<input class="controls" type="text" name="name" id="name" placeholder="Ex: Pablo" required="">
<label for="bcountry">Country of birth:</label>
<select id="bcountry" name="bcountry" class="date" placeholder="Ex: Spain" required="">
</select>
<div>
<label for="email">Email:</label>
<input class="controls" type="email" name="email" id="email" placeholder="Ex: pablo#sorribes.com" required="">
</div>
<div>
<label for="phone">Phone number</label><br>
<input type="tel" id="phone" name="phone" maxlength="12" required="">
</div>
<!-- country codes (ISO 3166) and Dial codes. -->
<select name="countryCode" id="prefix">
<option data-countrycode="ES" value="34" selected="">ES (+34)</option>
<option data-countrycode="US" value="1">USA (+1)</option>
<optgroup label="Other countries">
</optgroup>
</select>
<div>
<label for="date">Birthday</label>
<input class="date" type="date" name="date" id="date" required="">
</div>
<label for="jcountries">Where do you wanna work?:</label>
<div class="jcountries" id="countrys">
<div class="left">
<div>
<input type="checkbox" id="ireland" name="jcountries[]" value="ireland">
<label for="ireland">Ireland</label>
</div>
<div>
<input type="checkbox" id="iceland" name="jcountries[]" value="iceland">
<label for="iceland">Iceland</label>
</div>
</div>
</div>
<label for="jobs">What kind of job do you want?:</label>
<div class="jcountries" id="job">
<div class="left">
<div>
<input type="checkbox" id="reception" name="jobs[]" value="reception">
<label for="reception">Reception</label>
</div>
<div>
<input type="checkbox" id="housekeeping" name="jobs[]" value="housekeeping">
<label for="housekeeping">Housekeeping</label>
</div>
</div>
<div class="right right1">
<div>
<input type="checkbox" id="chefs" name="jobs[]" value="chefs">
<label for="chefs">Chefs</label>
</div>
<div>
<input type="checkbox" id="waiters" name="jobs[]" value="waiters">
<label for="waiters">Waiters</label>
</div>
</div>
</div>
<label for="cv">Send your CV</label>
<div class="scv">
<input type="file" id="cv" name="cv" accept=".pdf, .doc, .docx, .docm, .odt, .odf, .odt, .ods, .odp" required="">
</div>
<input class="botons" type="submit" value="Send" onclick="location.href='http://www.google.com'">
</form>
<!--<div class="alert alert-info" style="display: none;"></div>-->
<script src="https://www.arvanjobs.com/wp-content/themes/astra/assets/js/script.js"></script>
<!--<script>
/**Make the plugin location-aware*/
function getIp(callback) {
fetch('https://ipinfo.io/json?token=<your token>', { headers: { 'Accept': 'application/json' }})
.then((resp) => resp.json())
.catch(() => {
return {
country: 'us',
};
})
.then((resp) => callback(resp.country));
}
const phoneInputField = document.querySelector("#phone");
const phoneInput = window.intlTelInput(phoneInputField, {
utilsScript:
"https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/17.0.8/js/utils.js",
});
/**this is the plugin code that converts the selected country code and user input into the international format.*/
const info = document.querySelector(".alert-info");
function process(event) {
event.preventDefault();
const phoneNumber = phoneInput.getNumber();
info.style.display = "";
info.innerHTML = `Phone number in E.164 format: <strong>${phoneNumber}</strong>`;
}
</script>-->
</div>
</section>
</div>
</body>
<?php get_footer(); ?>
U can see at arvanjobs.com/candidates what happen. The footer goes crazy. I cant understand why this happen. Its not because the display grid coz I tried to make a grid 1x1 to put in the form there, but the footer stay like it is absolute positioned :/
And this is my css
* {
font-family: "forum";
font-weight:bold;
}
/*GRID CSS*/
/*GRID header*/
.header-container {
display:grid;
background-color:red;
grid-template-columns: 50% 50%;
font-family: "forum";
font-weight: bold;
}
.header-container div{
text-align:center;
font-family: "forum";
font-weight: bold;
z-index:100000000000000;
}
/*GRID index*/
.main-container {
top:0;
display:grid;
background-image:url('http://localhost/wordpress/wp-content/themes/twentytwentyone-child/img/wal.png');
background-attachment:fixed;
grid-template-columns: 50% 50%;
box-sizing:border-box;
z-index:-1;
}
.main-container > * {
text-align:center;
display:flex;
justify-content:center;
align-items:center;
}
.main-container div {
color:black;
border: px solid black;
}
.main-container video {
display:block;
width:100%;
height:100%;
/* Scale video to container size */
object-fit: cover;
object-position: center;
z-index:10000;
}
.main-container h4 {
color:#edbd87;
}
.main-container p {
color:#1f1f1f;
}
.item1{
grid-column: 1 / 3;
background-color: green;
height:1080px;
}
.item2{
right:0;
left:0;
top:300px;
bottom:0;
position:absolute;
grid-column: 1 / 3;
display:inline-block;
z-index:1000000;
}
.item3{
background:#e0e0e0;
grid-column: 1 / 3;
height:40vh;
border-bottom:1px solid #967b5d;
z-index:100000;
}
.item4 {
background-color:#e0e0e0;
padding:30px;
z-index:9;
width:100%;
height:900px;
}
.item4 img{
padding:15px;
justify-self:center;
display:block;
width:90%;
height:80%;
/* Scale video to container size */
object-fit: cover;
object-position: center;
border-radius: 80px 20px;
z-index:10;
}
.item5{
height:900px;
background-color:#e0e0e0;
align-content:start;
align-items:start;
justify-self:start;
justify-content:right;
justify-items:right;
object-position: right;
padding:100px;
width:80%;
display: inline-grid;
z-index:9;
box-sizing:border-box;
align-content:center;
justify-content:center;
justify-items:center;
align-items:center;
z-index:1000;
}
.item5 * {
width:80%;
display:flex;
margin-right:50px;
margin-left:30px;
font-weight:bold;
}
.item5 p{
margin-top:10px;
font-size: 120%;
}
.item5 h4{
display:flex;
justify-content:center;
align-self:center;
margin-top:20px;
font-weight:bold;
font-size: 340%;
}
.item6{
height:900px;
background-color:#e0e0e0;
align-content:end;
align-items:end;
justify-self:end;
justify-content:right;
justify-items:right;
object-position: right;
padding:100px;
width:80%;
display: inline-grid;
z-index:9;
box-sizing:border-box;
align-content:center;
justify-content:center;
justify-items:center;
align-items:center;
z-index:1000;
}
.item6 * {
width:80%;
display:flex;
margin-right:50px;
margin-left:30px;
font-weight:bold;
}
.item6 p{
margin-top:10px;
font-size: 120%;
}
.item6 h4{
display:flex;
justify-content:center;
align-self:center;
margin-top:20px;
font-weight:bold;
font-size: 340%;
}
.item7 {
height:900px;
padding:30px;
z-index:10;
width:100%;
z-index:10000000;
}
.item7 img{
padding:15px;
justify-self:center;
display:block;
width:90%;
height:80%;
/* Scale video to container size */
object-fit: cover;
object-position: center;
border-radius: 80px 20px;
z-index:10;
}
.item8 {
top:110px;
right:309px;
z-index:1888;
width:100%;
height:900px;
background-color:#e0e0e0;
align-content:start;
align-items:start;
justify-self:start;
justify-content:right;
justify-items:right;
object-position: right;
}
.item8 img{
margin-left:140px;
display:block;
width:71%;
height:63%;
/* Scale video to container size */
object-fit: cover;
object-position: center;
border-radius: 80px 20px;
z-index:1000;
}
.item9{
height:900px;
background-color:#e0e0e0;
align-items:start;
align-content:start;
justify-self:start;
justify-content:start;
justify-items:start;
object-position: left top;
padding:100px;
width:80%;
display: inline-grid;
z-index:9;
box-sizing:border-box;
justify-content:center;
justify-items:center;
align-items:center;
z-index:1000;
}
.item9 * {
width:80%;
display:flex;
margin-right:50px;
margin-left:30px;
font-weight:bold;
}
.item9 p{
margin-top:10px;
font-size: 120%;
}
.item9 h4{
display:flex;
justify-content:center;
align-self:center;
margin-top:20px;
font-weight:bold;
font-size: 340%;
}
.item10{
z-index:100000000;
background-color: orange;
grid-column: 1 / 3;
}
.item11 {
top:110px;
right:309px;
position:fixed;
padding:30px;
z-index:11;
width:100%;
height:800px;
}
.item11 img{
padding:15px;
justify-self:center;
display:block;
width:35%;
height:66%;
/* Scale video to container size */
object-fit: cover;
object-position: center;
border-radius: 80px 20px;
z-index:1000;
}
.item12 {
top:110px;
left:309px;
position:fixed;
padding:30px;
z-index:9;
width:100%;
height:800px;
z-index:100;
}
.item12 img{
padding:15px;
justify-self:center;
display:block;
width:35%;
height:66%;
/* Scale video to container size */
object-fit: cover;
object-position: center;
border-radius: 80px 20px;
}
.item13 {
top:110px;
right:309px;
position:fixed;
padding:30px;
z-index:16;
width:100%;
height:800px;
}
.item13 img{
padding:15px;
justify-self:center;
display:block;
width:35%;
height:66%;
/* Scale video to container size */
object-fit: cover;
object-position: center;
border-radius: 80px 20px;
z-index:1000;
}
/*CSS*/
html, body {
margin: 0;
padding: 0;
width: 100%;
height:100%;
font-family: "forum";
font-weight: bold;
}
header {
position:absolute;
width: 100%;
height:80px;
z-index:100000000000000;
}
}
.content {
width: 100%;
font-size: 20px;
line-height: 30px;
text-align: justify;
}
.logo {
line-height: 60px;
position:fixed;
float: left;
margin: 16px 46px;
color: #fff;
font-family:"Forum";
font-weight: bold;
font-size: 25px;
letter-spacing: 2px;
}
nav {
position: fixed;
width: 100%;
line-height: 60px;
}
nav ul {
line-height: 60px;
list-style: none;
background: rgba(0, 0, 0, 0);
overflow: hidden;
color: transparent;
padding: 0;
text-align: right;
margin: 0;
padding-right: 40px;
transition: 1s;
}
nav.black ul {
background: #000;
}
nav ul li {
display: inline-block;
padding: 16px 40px;;
}
nav ul li a {
text-decoration: none;
color: #fff;
font-size: 16px;
}
.menu-icon {
line-height: 60px;
width: 100%;
background: #000;
text-align: right;
box-sizing: border-box;
padding: 15px 24px;
cursor: pointer;
color: #fff;
display: none;
}
login
.loginform {
position:relative;
}
/*footer*/
.w-50 {
width: 100%!important;
}
.bg-grey {
background: #edbd87;
}
.logo-footer {
margin-bottom: 40px;
}
footer {
z-index:1000000000;
position:relative;
color: #1f1f1f;
}
footer p, a {
font-weight:bold;
font-size: 12px;
font-family: 'Forum', sans-serif;
}
footer h6 {
font-family: 'Forum', serif;
margin-bottom: 40px;
position: relative;
font-weight:bold;
}
footer h6:after {
position: absolute;
content: "";
background: #1f1f1f;
width: 12%;
height: 1px;
left: 0;
bottom: -20px;
}
.btn-footer {
font-weight:bold;
color: #1f1f1f;
text-decoration: none;
border: 1px solid;
border-radius: 43px;
font-size: 13px;
padding: 7px 30px;
line-height: 47px;
}
.btn-footer:hover {
font-weight:bold;
text-decoration: none;
}
.form-footer input[type="text"] {
font-weight:bold;
border: none;
border-radius: 16px 0 0 16px;
outline: none;
padding-left: 10px;
}
::placeholder {
font-weight:bold;
font-size: 10px;
padding-left: 10px;
font-style: italic;
}
.form-footer input[type="button"] {
border: none;
background:#1f1f1f;
margin-left: -5px;
color: #fff;
outline: none;
border-radius: 0 16px 16px 0;
padding: 2px 12px;
}
.social .fa {
font-weight:bold;
color: #1f1f1f;
font-size: 22px;
padding: 10px 15px;
background: #967b5d;
}
footer ul li {
font-weight:bold;
list-style: none;
display: block;
}
footer ul {
padding-left: 0;
}
footer ul li a{
text-decoration: none;
color: #1f1f1f;
text-decoration:none;
}
a:hover {
text-decoration: none;
color: #967b5d !important;
}
.logo-part {
font-weight:bold;
border-right: 1px solid #1f1f1f;
height: 100%;
}
#media(max-width: 786px) {
.logo {
position: fixed;
top: 0;
margin-top: 16px;
}
nav ul {
max-height: 0px;
background: #000;
}
nav.black ul {
background: #000;
}
.showing {
max-height: 34em;
}
nav ul li {
box-sizing: border-box;
width: 100%;
padding: 24px;
text-align: center;
}
.menu-icon {
display: block;
}
}
#media all and (max-width: 1400px) {
.main-container div {
grid-column: 1 / span 3;
}
}
/*form*/
/*fondo*/
.bg {
height:600px;
position:absolute;
width:100%
word-wrap: break-word;
background-image:url(' https://www.arvanjobs.com/wp-content/uploads/2022/02/manitas.jpg');
background-position:center;
background-attachment:fixed;
opacity:70%;
padding-top:20px;
padding-bottom:40px;
z-index:-1;
display:grid;
grid-template-columns: 100%;
box-sizing:border-box;
z-index:-1;
height:100vh;
}
.bg2 {
position:relative;
width:100%
word-wrap: break-word;
background-image:url(' https://www.arvanjobs.com/wp-content/uploads/2022/02/manitas.jpg');
background-attachment: fixed;
opacity:70%;
padding-top:20px;
padding-bottom:40px;
z-index:-1;
}
.formwrap {
height:600px;
border:1px solid #967b5d;
padding:30px;
border-radius: 4px;
background: #fff;
}
Ive tried too to make a template for solve this. I made this blank template:
<?php /* Template Name: Blank*/ ?>
<?php
get_header();
?>
<?php
get_template_part( 'template-parts/content/content-page' );
?>
</div>
<?php
get_footer();
?>
Well, if i choose this template when I make a new wp page, it will only show the header and the footer, no content. (for every pages) I have to choose "Default template" for things working. What happen here? Why at page-index.php the footer is working fine, but when i do the same with other page the footer stay at top? Any suggestion? Thanks!

show description when clicked

i will need some help with some coding if possible. I would like to have when clicked Learn More to show description above the button and when clicked back to hide it. Any help would be higly appreciated! Code listed below. Thank you for your time!
One more thing, as you can see the top border is not shown, how can i make it to show? Thank you very much for the time spent!
<style>
/* RELATE PRODUCTS BEGIN */
.cardd {
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
max-width: 600px;
margin: auto;
text-align: center;
font-family: arial;
}
.cardd p {
font-family: "Arial Black", Gadget, sans-serif;
font-size: 24px;
font-weight: bold;
margin-top: 6px;
margin-bottom: 5px;
margin-left: 0px;
text-align: left;
padding-top: 6px;
}
.price {
color: grey;
font-size: 22px;
}
.cardd button {
border: none;
outline: 0;
padding: 12px;
color: white;
background-color: #c41735;
text-align: center;
cursor: pointer;
width: 100%;
font-size: 18px;
}
.cardd button:hover {
opacity: 0.7;
}
hr {
display: block;
height: 1px;
border: 0;
border-top: 1px solid #ccc;
padding: 0;
margin-top: 0px;
margin-bottom: 10px;
}
</style>
<div class="container">
<!-- <div class="row no-margin">
<div class="col-lg-12 text-center">
<h1 class="section-heading">Harnesses</h1>
</div>
</div> -->
<div class="row">
<div class="col-lg-12 scrollReveal sr-bottom sr-ease-in-out-quad sr-delay-1">
<br><br><br>
<h1 class="section-heading page-heading">Engines</h1>
<p></p>
</div>
</div>
<div class="height-60"> </div>
<div class="row">
<div class="col-lg-3 col-md-6 mb-5 col-sm-12">
<div class="scrollReveal sr-bottom sr-ease-in-out-quad sr-delay-1 ">
<div class="cardd">
<img src="g" alt="" style="width:100%">
<h2 class="page-heading">Vittorazi<br> Moster185 Plus MY20</h1>
<span class="price">£1729.99</span>
<p></p>
<p><button>Learn more</button></p>
<p></p>
</div>
</div>
</div> <br>
<div class="col-lg-3 col-md-6 mb-5 col-sm-12">
<div class="scrollReveal sr-bottom sr-ease-in-out-quad sr-delay-1">
<div class="cardd">
<img src="g" alt="" style="width:100%">
<h2 class="page-heading"><br> </h1>
<span class="price">£1729.99</span>
<p></p>
<p><button>Learn more</button></p>
</div>
</div>
</div> <br>
<div class="col-lg-3 col-md-6 mb-5 col-sm-12">
<div class="scrollReveal sr-bottom sr-ease-in-out-quad sr-delay-1">
<div class="cardd">
<img src="" alt="" style="width:100%">
<h2 class="page-heading"><br> </h1>
<span class="price">£1729.99</span>
<p></p>
<p><button>Learn more</button></p>
</div>
</div>
</div> <br>
<div class="col-lg-3 col-md-6 mb-5 col-sm-12">
<div class="scrollReveal sr-bottom sr-ease-in-out-quad sr-delay-1">
<div class="cardd">
<img src="" alt="Atom 80 Vitorazzi" style="width:100%">
<h2 class="page-heading"><br></h1>
<span class="price">£1729.99</span>
<p></p>
<p><button>Learn more</button></p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>

What you're looking for is a collapsible! All you need is a little JavaScript, and you can expand/collapse text using a button.
Expand Above
If you want to make the hidden text appear above the button, try this:
var collapse = document.getElementsByClassName("collapsible");
var i;
for (i = 0; i < collapse.length; i++) {
collapse[i].addEventListener("click", function() {
this.classList.toggle("active");
var expand = this.previousElementSibling;
if (expand.style.display === "block") {
expand.style.display = "none";
} else {
expand.style.display = "block";
}
});
}
.collapsible {
border: none;
outline: 0;
padding: 12px;
color: white;
background-color: #c41735;
text-align: center;
cursor: pointer;
width: 100%;
font-size: 18px;
}
.expand {
padding: 0 18px;
display: none;
overflow: hidden;
background-color: #eee;
}
<div class="expand">
<p>
Hidden text.
</p>
</div>
<button type="button" class="collapsible">Learn more</button>
Expand Below
If you want to make it appear below the button, however, just flip the order in which the <div> and <button> element appear, and switch out previousElementSibling with nextElementSibling:
var collapse = document.getElementsByClassName("collapsible");
var i;
for (i = 0; i < collapse.length; i++) {
collapse[i].addEventListener("click", function() {
this.classList.toggle("active");
var expand = this.nextElementSibling;
if (expand.style.display === "block") {
expand.style.display = "none";
} else {
expand.style.display = "block";
}
});
}
.collapsible {
border: none;
outline: 0;
padding: 12px;
color: white;
background-color: #c41735;
text-align: center;
cursor: pointer;
width: 100%;
font-size: 18px;
}
.expand {
padding: 0 18px;
display: none;
overflow: hidden;
background-color: #eee;
}
<button type="button" class="collapsible">Learn more</button>
<div class="expand">
<p>
Hidden text.
</p>
</div>

To make the text hide and appear above the Button you must make use of toggle() event as
$("document").ready(function(){
$(".collapsible").toggle(
function(){
$(".expand").css({"display" : "block"});},
function(){
$(".expand").css({"display" : "none"});});
});
.collapsible {
border: none;
outline: 0;
padding: 12px;
color: white;
background-color: #c41735;
text-align: center;
cursor: pointer;
width: 100%;
font-size: 18px;
}
.expand {
padding: 0 18px;
display: none;
overflow: hidden;
background-color: #eee;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>
<div class="expand">
<p>
Hidden text.
</p>
</div>
<button type="button" class="collapsible">Learn more</button>
Note: Add the Jquery CDN to use the jquery code.
(<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js">
</script>)

CSS styles are applied only for the first PHP-loop iteration

My problem is that CSS styles are applied only for the first PHP loop iteration. PHP loop outputs Wordpress posts. I've inspected the page structure and saw that it objects have the needed structure (blocks and classes), but CSS is not applied to them except for the first one.
<div id="events-feed">
<div class="container">
<div class="sym rose"></div>
<div class="title-wrapper">
<div class="title-wrap">
<div class="line"></div>
<div class="title">Наши события</div>
<div class="line"></div>
</div>
</div>
<?php
$args = array(
'posts_per_page'=> 5,
'orderby' => 'comment_count',
'category_name=events' );
$q = new WP_Query($args);
if($q->have_posts()) {
while($q->have_posts()){ $q->next_post();
$post_id = $q->post->ID;
$thumbnail = wp_get_attachment_image_src( get_post_thumbnail_id( $post_id ) );
$title = get_the_title($post_id);
$date = get_the_date('d.m.Y', $post_id);
$content = get_post_field('post_content', $post_id);
?>
<div class="event-article">
<div class="events-post">
<div class="post-img" style="backgroung-image:url('$thumbnail[0]\')"></div>
<div class="post-header">
<?php echo $title; ?> </div>
<div class="post-date">
<div class="title-wrap">
<div class="line"></div>
<div class="title">
<?php echo $date; ?> </div>
<div class="line"></div>
</div>
</div>
</div>
<div class="desc">
<?php echo $content; ?>
</div>
</div>
</div>
</div>
<?php } } wp_reset_postdata(); ?>
The Styles & HTML are:
#events-feed {
background-color: #F9F6EB;
padding-top: 0.1px
}
#events-feed .title-wrapper {
padding: 20px 0;
position: relative;
text-align: center;
font-family: "PT Serif", serif;
padding: 0 50px;
margin-bottom: 65px
}
#events-feed .title-wrapper .title-wrap div {
display: inline-block;
vertical-align: middle
}
#events-feed .title-wrapper .title-wrap .line {
background: #0E0304;
height: 1px;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
vertical-align: middle;
width: 15%;
z-index: 99
}
#events-feed .title-wrapper .title-wrap .title {
background-color: #F9F6EB;
color: #0E0304;
font-size: 40px;
padding: 0 20px;
text-transform: uppercase;
z-index: 999
}
#events-feed .event-article {
background-color: #fff;
-webkit-box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
color: #0E0304;
height: 1000px;
margin: 0 10% 100px;
text-align: center;
-webkit-transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
-o-transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1)
}
#events-feed .event-article .events-post .post-img {
background-color: grey;
background-size: cover;
max-width: 2000px;
padding-top: 48%
}
#events-feed .event-article .events-post .post-header {
margin-top: 40px;
font-size: 34px;
text-transform: uppercase
}
#events-feed .event-article .events-post .post-date {
padding: 20px 0;
position: relative;
text-align: center;
margin-bottom: 30px
}
#events-feed .event-article .events-post .post-date .title-wrap div {
display: inline-block;
vertical-align: middle
}
#events-feed .event-article .events-post .post-date .title-wrap .line {
background: #7D8082;
height: 1px;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
vertical-align: middle;
width: 15%;
z-index: 99
}
#events-feed .event-article .events-post .post-date .title-wrap .title {
background-color: #fff;
color: #7D8082;
font-size: 20px;
padding: 0 20px;
text-transform: capitalize;
z-index: 999
}
#events-feed .event-article .desc {
font-size: 20px;
margin: 0 50px
}
#events-feed .event-article .desc p {
margin-bottom: 27px
}
#events-feed .event-article .desc ul {
margin: 0 0 27px 40px;
text-align: left
}
.line {
height: 1px
}
<div id="events-feed" style="margin-top: 160px;">
<div class="container">
<div class="sym rose"></div>
<div class="title-wrapper">
<div class="title-wrap">
<div class="line"></div>
<div class="title">Наши события</div>
<div class="line"></div>
</div>
</div>
<div class="event-article">
<div class="events-post">
<div class="post-img" style="backgroung-image:url('$thumbnail[0]\')"></div>
<div class="post-header"> День рождения ElRumbo </div>
<div class="post-date">
<div class="title-wrap">
<div class="line"></div>
<div class="title"> 18.08.2015 </div>
<div class="line"></div>
</div>
</div>
</div>
<div class="desc">
18.08.2015 мы празднуем день рождения! В этот день с 19:00 мы принимаем гостей только по предзаказу столика. И подарки будем дарить мы!
<ul>
<li>Праздничная лотерея</li>
<li>Скидка 20%</li>
<li>Бокал вина в подарок каждому</li>
</ul>
В 21:45 фаер-шоу от творческой группы "FaBula" Будем рады быть вместе с вами в наш праздничный вечер!
<strong>Подробности при заказе столика.</strong>
</div>
</div>
</div>
</div>
<div class="event-article">
<div class="events-post">
<div class="post-img" style="backgroung-image:url('$thumbnail[0]\')"></div>
<div class="post-header"> День святого Валентина </div>
<div class="post-date">
<div class="title-wrap">
<div class="line"></div>
<div class="title"> 14.02.2016 </div>
<div class="line"></div>
</div>
</div>
</div>
<div class="desc">
Dias de los Enamorados 14 февраля - День Святого Валентина В этот вечер по предзаказу столика вас ждут:
<ul>
<li>Скидка 20% на коктейли группы "Мартини"</li>
<li>Праздничная лотерея</li>
<li>Особый коктейль, которого нет в меню</li>
</ul>
</div>
</div>

Thanks to Mr. or Mrs. FlyffyKitten I found the solution:
I had to move the least two closing tags out of the loop since they refer to parent elements of the looped objects. Sorry for disturbing everyone. Thank you for being helpful!

div content is clipped from bottom of the webpage

If you scroll down on https://jsfiddle.net/rtvrueg9/ you can see that some of the content at the bottom is not showing. any suggestions?
<?php include 'head.php';?>

That's because of position fixed in your body, i added overflow-x: hidden; instead of that to remove horizontal scroll bar.
If that vertical horizontal bar bothers you remove unnessary overflow-y in .content
}
body {
width: 100%;
height: 100%;
padding: 0;
border: 0;
margin: 0;
overflow-x: hidden; /* EDIT */
}
h1 {
font-family: arial;
color: rgb(128, 128, 128);
text-align: center;
margin: 0;
}
header {
margin: 0;
padding: 0;
width: 100%;
height: 30%;
background: black;
background-image: url(profile_pic.jpg);
background-repeat: no-repeat;
background-position: right;
background-size: 20% 70%;
color: rgb(190, 190, 190);
text-align: center;
border-spacing: 5px 10px;
border: 1px solid black;
}
nav {
display: flex;
text-align: center;
height: 25px;
width: 100%;
background: rgb(80, 80, 80);
border: 1px solid rgb(80, 80, 80);
}
.nav_link {
flex-grow: 1;
line-height: 25px;
}
a {
text-decoration: none;
color: white;
}
a:hover {
text-decoration: underline;
}
.content {
width: 100%;
height: 100%;
margin: 0;
overflow-y:scroll; }
.myPanel {
border: 1px solid black;
border-radius: 7px 7px 7px 7px;
box-shadow: 0px 0px 4px 999;
width: 60%;
margin: 1% auto;
}
.myPanel .heading {
background: rgb(80, 80, 80);
border-radius: 5px 5px 0px 0px;
color: white;
padding: 5px 20px;
}
.myPanel .panelTime {
padding: 3px 20px;
background: silver;
border-radius: 0px 0px 5px 5px;
}
.myPanel p {
margin: 3px 0px 0px 3px;
}
.myPanel:hover {
box-shadow: 0px 0px 8px black;
}
.myPanel.heading:hover {
background: white;
border-radius: 5px 5px 0px 0px;
color: black;
font-family: arial;
}
.myPanel.panelTime:hover {
background: rgb(80, 80, 80);
font-family: arial;
color: white;
}
<?php include 'head.php';?>
<body>
<header>
<h1>Resume</h1>
</header>
<nav>
<div class="nav_link">
Home
</div>
<div class="nav_link">
Resume
</div>
<div class="nav_link">
Side Projects
</div>
<div class="nav_link">
About Me
</div>
</nav>
<div class="content">
<div class="myPanel">
<div class="heading">US ARMY NATIONAL GUARD</div>
<div class="panelTime">
<p>03/2014 -- Current</p>
<div class="panelBody">
<p>Crystal River, FL</p>
<ul>
<ui>Rank: PV2</ui></br>
<ui>Diesel Mechanic -- 91H</ui></br>
<ui>Military Police -- 31b<ui></br>
</ul>
</div>
</div>
</div>
<div class="myPanel">
<div class="heading">LILLYS ON THE LAKE</div>
<div class="panelTime">
<p>06/2016 -- 02/2017</p>
<div class="panelBody">
<p>Clermont FL</p>
<ul>
<ui>Serving</ui></br>
<ui>Bartending</ui></br>
<ui>Service bar</ui></br>
<ui>Card Holder voids/comps</ui></br>
<ui>Open/close</ui></br>
<ui>Food running</ui></br>
<ui>Expediting</ui></br>
</ul>
</div>
</div>
</div>
<div class="myPanel">
<div class="heading">PANE D'OR</div>
<div class="panelTime">
<p>08/2015 -- 06/2016</p>
<div class="panelBody">
<p>Winter Garden FL</p>
<ul>
<ui>Baking</ui></br>
<ui>Pastry</ui></br>
<ui>Delivering</ui></br>
<ui>Sales at markets / shop</ui></br>
</ul>
</div>
</div>
</div>
<div class="myPanel">
<div class="heading">Disney</div>
<div class="panelTime">
<p>06/2015 -- 11/2016</p>
<div class="panelBody">
<p>Orlando FL</p>
<ul>
<ui>Monorail pilot</ui></br>
<ui>Platform operator</ui></br>
<ui>Audience control</ui></br>
<ui>Customer relations</ui></br>
</ul>
</div>
</div>
</div>
<div class="myPanel">
<div class="heading">PERFORMANCE YEARS GTO</div>
<div class="panelTime">
<p>01/2012 -- 02/2015</p>
<div class="panelBody">
<p>Hatfield PA</p>
<ul>
<ui>Shipping</ui></br>
<ui>Receiving</ui></br>
<ui>Pulling/packing/sorting</ui></br>
<ui>Picker operator</ui></br>
<ui>Forklift operator</ui></br>
<ui>Customer service</ui></br>
<ui>In house sales</ui></br>
<ui>Show sales</ui></br>
<ui>Inventory</ui></br>
</ul>
</div>
</div>
</div>
<div class="myPanel">
<div class="heading">GIANT FOODS</div>
<div class="panelTime">
<p>01/2012 -- 03/2013</p>
<div class="panelBody">
<p>Montgomeryville PA</p>
<ul>
<ui>Stocking shelves</ui></br>
<ui>Rotate merchandise</ui></br>
</ul>
</div>
</div>
</div>
</div>

Use:
<?php include_once("head.php"); ?>
be sure the head.php file is in the same directory of your html file, also your htlm file should be renamed from index.html to index.php with the php extension

PDF generating but corrupted

I've checked many threads here and tried them out, but nothing works. It's generating MS Word files but not PDF. Can anyone tell me a quick way to generate PDF files.
Here's the code which I try :
<?php ob_start(); ?>
<style>
#srch-frm {}
.srchfld {
font-size: 16px;
height: 31px;
padding: 4px;
width: 162px;
}
.out-fld {
padding: 11px;
}
.box_search {}
#srch-submit {
font-size: 15px;
height: 34px;
width: 128px;
}
.township_report {
display:none;
}
</style>
<div id="wrapper">
<div id="content">
<p> </p>
<div class="srch_report">
<style>
#report-headings {
font-size: 20px;
font-weight: bold;
position: relative;
top: -5px;}
#report-title {
font-size: 20px;
font-weight: bold;}
#report {
background-color: lightgray;
left: 52px;
padding: 32px;
position: relative;
width: 808px;}
.hdr {
font-family: verdana;
font-size: 14px;}
.hdr-ttl {
padding-left: 39px;}
.hdr-date {padding-left: 195px;}
.hdr-val {padding-left: 5px;}
.fld-ttl {}
.fld-val {
float: right;
padding-right: 127px;}
.fld-row {
height: 23px;}
.fld-col {
float: left;
width: 50%;}
#fld-area {
font-size: 16px;}
.fld2-val {}
.fld2-ttl {
padding-left: 103px;}
.fld2 {
font-weight:bold;}
.fld2-main {
padding-top: 20px;}
.fld2-val-ini {}
</style>
<p> </p>
<div id="report">
<div id='report-headings' align="center">
Law Offices of Patrick C. Doody
</div>
<div id='report-title'>
<p>Township Deadlines </p>
</div>
<div class="hdr">
<spam class=''>Year:</spam> <spam class='hdr-val'>2006</spam>
<spam class='hdr-ttl'>County:</spam> <spam class='hdr-val'>Cook</spam>
<spam class='hdr-ttl'>Township:</spam> <spam class='hdr-val'>Cook</spam>
<spam class='hdr-date'>As Of:</spam> <spam class='hdr-val'>2013-05-14</spam>
</div>
<p> </p>
<div id="fld-area">
<div class="fld-row">
<div class="fld-col">
<spam class="fld-ttl">Assessor Open:</spam><spam class="fld-val">2006-03-07</spam>
</div>
<div class="fld-col">
<spam class="fld-ttl">BofR Opens:</spam><spam class="fld-val">2006-09-11</spam>
</div>
</div>
<div class="fld-row">
<div class="fld-col">
<spam class="fld-ttl">Assessor Closes:</spam><spam class="fld-val">2006-04-05</spam>
</div>
<div class="fld-col">
<spam class="fld-ttl">BofR Closes:</spam><spam class="fld-val">2006-10-18</spam>
</div>
</div>
<div class="fld-row">
<div class="fld-col">
<spam class="fld-ttl">Assr Documents Due:</spam><spam class="fld-val">2006-04-20</spam>
</div>
<div class="fld-col">
<spam class="fld-ttl">BofR Hearing:</spam><spam class="fld-val"></spam>
</div>
</div>
<div class="fld-row">
<div class="fld-col">
<spam class="fld-ttl">Assr Certified:</spam><spam class="fld-val">2006-05-31</spam>
</div>
</div>
</div>
<p> </p>
<p>
<table>
<tr>
<td style="width:140px;font-weight:bold;">File #</td>
<td style="width:140px;font-weight:bold;">Client</td>
<td style="width:190px;font-weight:bold;">Property Name</td>
<td style="width:140px;font-weight:bold;">Atty</td>
</tr>
<p>
<tr><td>00-5009</td><td>DORAN</td><td>Popeye's Chicken</td><td>F&G</td></tr></table> </p>
</div>
<p> </p>
<style>
.prntdiv {
float: left;
padding: 16px 16px 16px 386px;}
.savediv {
float: left;
padding: 16px;}
#print {
font-family: times new roman;
font-size: 15px;
font-weight: bold;
padding: 6px 15px;}
#save {
font-family: times new roman;
font-size: 15px;
font-weight: bold;
padding: 6px 15px;}
</style>
</div>
</p>
</div>
</div>
</div>
<?php
header('Content-type: application/pdf');
header('Content-Disposition: attachment; filename="report.pdf"');
header('Content-Transfer-Encoding: binary');
?>

PDF doesn't work like that.
You're essentially creating a web page (standard HTML/CSS) and then telling the browser "get this as if it were PDF", which isn't going to work because when the browser hands it off to its PDF viewer, it will not be a valid PDF file.
You want to convert that HTML/CSS to PDF. See: Convert HTML + CSS to PDF with PHP?

Categories