I have created web page
http://jsfiddle.net/KNfrm/embedded/result/
mid div is not extending to the height of left pane and right pane.
mid div has black background color
You need to clear the float after .rightpane, floated elements are removed from the normal html flow. Just add an empty block element after .rightpane with style clear:both
http://jsfiddle.net/KNfrm/1/ - http://jsfiddle.net/KNfrm/1/show
DEMO
CODE:
<!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>Tile Mode</title>
<style>
body {
margin: auto;
background-color:#fff;
font-family:arial, verdana, helvetica;
font-size:12px;
color:#222;
}
.center{
margin-left:auto;
margin-right:auto;
margin-top:0px;
width:1000px;
height:auto;
display:block;
background-color:#000;
}
.frameDiv {
margin-left:auto;
margin-right:auto;
margin-top:0px;
width:1000px;
height:auto;
display:block;
background-color:#000;
}
.header {
width:auto;
height:150px;
background-color:transparent;
}
.logo {
height:100px;/*background-image:url(./images/header.png);*/
}
.menu {
height:50px;
width:auto;
background-color:#ccc;
}
.menus {
list-style-type: none;
list-style-position:outside;
position: relative;
margin: 0;
padding: 0;
}
.menus li {
display: block;
overflow: hidden;
padding: 0;
cursor: pointer;
float: left;
width: 200px;
height: 50px;
margin-right: 0px;
background-image:url(./images/menu.png);
background-repeat:no-repeat;
}
.menus a {
display:block;
height:50px;
text-indent:-9999px;
outline:none;
}
#menu1 {
background-position:0px 0px;
}
#menu2 {
background-position:-200px 0px;
}
#menu3 {
background-position:-400px 0px;
}
#menu4 {
background-position:-600px 0px;
}
#menu5 {
background-position:-800px 0px;
}
#menu1.active, #menu1:hover {
background-position: 0 bottom;
}
#menu2.active, #menu2:hover {
background-position: -200px bottom;
}
#menu3.active, #menu3:hover {
background-position: -400px bottom;
}
#menu4.active, #menu4:hover {
background-position: -600px bottom;
}
#menu5.active, #menu5:hover {
background-position: -800px bottom;
}
.leftpane {
float:left;
width:750px;
height:auto;
display:block;
background-color:transparent;
}
.rightpane {
float:right;
width:250px;
height:auto;
background-color:transparent;
}
.content {
width:auto;
background-color:transparent;
display:block;
border-color:#666;
border-style:solid;
border-width:5px;
}
.footer {
margin:0px;
width:auto;
height:100px;
background-color:#461015;
display:block;
text-align:center;
overflow:hidden;
}
.footer p {
display:inline;
}
.footer p a:link {
color: #fff;
text-decoration:none;
}
.footer p a:visited {
color: #fff;
text-decoration:none;
}
.footer p a:hover {
color: #fff;
text-decoration:none;
}
.footer p a:active {
color: #fff;
text-decoration:none;
}
.quote {
margin-left:35px;
margin-top:20px;
margin-bottom:20px;
margin-right:35px;
width:180px;
height:40px;
display:block;
}
.facebook {
margin-left:35px;
margin-top:20px;
margin-bottom:20px;
margin-right:35px;
width:180px;
height:40px;
display:block;
background-image:url(images/facebook.png);
background-repeat:no-repeat;
}
.linkedin {
margin-left:35px;
margin-top:20px;
margin-bottom:20px;
margin-right:35px;
width:180px;
height:40px;
display:block;
background-image:url(images/linkedin.png);
background-repeat:no-repeat;
}
.twitter {
margin-left:35px;
margin-top:20px;
margin-bottom:20px;
margin-right:35px;
width:180px;
height:40px;
display:block;
background-image:url(images/twitter.png);
background-repeat:no-repeat;
}
.hl {
border: 2px;
width: 80%;
border-color:#999;
}
ul#ticker {
width: 200px;
height: 200px;
overflow: hidden;
margin:auto;
list-style-type:none;
padding:0px;
font-family:Calibri, Arial, Tahoma;
font-style:normal;
}
ul#ticker li {
margin:0px;
padding:0px;
width: 200px;
height: 130px;
white-space:normal;
overflow:none;
text-align:justify;
}
ul#ticker li a:link {
color: #fff;
text-decoration:none;
}
ul#ticker li a:visited {
color: #fff;
text-decoration:none;
}
ul#ticker li a:hover {
color: #fff;
text-decoration:none;
}
ul#ticker li a:active {
color: #fff;
text-decoration:none;
}
ul#ticker li span {
display: block;
color: #06C;
text-align:center;
}
</style>
<script type="text/javascript" src="js/jquery-1.4.min.js"></script>
</script>
<script type="text/javascript">
$(function()
{
var ticker = function()
{
setTimeout(function(){
$('#ticker li:first').animate( {marginTop: '-120px'}, 800, function()
{
$(this).detach().appendTo('ul#ticker').removeAttr('style');
});
ticker();
}, 4000);
};
ticker();
});
</script>
<body>
<div class="center">
<div class="frameDiv">
<div class="header">
<div class="logo"> </div>
<div class="menu">
<ul class="menus">
<li id="menu1">Home</li>
<li id="menu2">About us</li>
<li id="menu3">Services</li>
<li id="menu4">Gallery</li>
<li id="menu5">Contact</li>
</ul>
</div>
</div>
<div class="mid">
<div class="leftpane">
<div class="image" style="margin:5px; margin-right:0px; display:block;">
<img src="http://www.grnyrenovation.com/images/nycpremier.jpg"; style="overflow:hidden; width:745px" />
</div>
<div class="content"></div>
<div class="footer"> <br/>
<hr style="height:2px; border:1px;" noshade="noshade"/>
<p>Home |</p>
<p>About us |</p>
<p>Services |</p>
<p>Gallery |</p>
<p>Contact</p>
<hr style="height:2px; border:1px; width:70%" noshade="noshade"/>
<p style="margin:8px">© Tile</p>
</div>
</div>
<div class="rightpane">
<div style="clear:both;">
<div class="quote"> </div>
<div class="facebook"> </div>
<div class="linkedin"> </div>
<div class="twitter"> </div>
<hr/ class="hl" style="height:2px; border:1px;" noshade="noshade">
<div class="testimonial">
<div style="color:#FFF; font-weight:bold; font-size:large; font-family:'MS Serif', 'New York', serif; text-align:center;">
<h3>Testimonials</h3>
</div>
<div class="tickerclass">
<ul id="ticker">
<li> <span>Title 1</span> Welcome to Monday, to cancel reply. Tuesday, before that I employed a odioeros's more, but my following you to use the. </li>
<li> <span>Title 2</span> Welcome to Monday, to cancel reply. Tuesday, before that I employed a odioeros's more, but my following you to use the </li>
<li> <span>Title 3</span> Welcome to Monday, to cancel reply. Tuesday, before that I employed a odioeros's more, but my following you to use the </li>
<li> <span>Title 4</span> Welcome to Monday, to cancel reply. Tuesday, before that I employed a odioeros's more, but my following you to use the </li>
<li> <span>Title 5</span> Welcome to Monday, to cancel reply. Tuesday, before that I employed a odioeros's more, but my following you to use the </li>
</ul>
</div>
</div>
<br/>
<hr class="hl" style="height:2px; border:1px;" noshade="noshade"/>
<div class="acceridation" style="text-align:center; height:60px;">
<img style="margin:auto;overflow:hidden;width:80px;height:50px;" align="middle" src="http://www.grnyrenovation.com/images/nkba_170x90.jpg" />
<img style="margin:auto;overflow:hidden;width:80px;height:50px;" align="middle" src="http://www.grnyrenovation.com/images/sm_EPA-Lead-Safe-Certified.png"/>
</div>
</div>
</div>
<div style="clear:both"></div>
</div>
</div>
</div>
</div>
</body>
</html>
try this to add in your code to the centre div
.center{ overflow:auto;}
Related
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!
I am attempting to make a header for a page I'm designing for a university project.
I've been playing around with different bits of code, and the best that I can manage is 3 images, one below another. I cannot, for the life of me, see how I can make them next to each other, in a banner, that will then fit the length of the screen.
Header Code:
<header>
<div class="container-fluid">
<div class="row">
<div class="col-md-4">
<div class="span4">
<img class="img-responsive" src="https://i.ibb.co/7vJj2z4/logo-small.png" alt="img">
</div>
</div>
<div class="col-md-4">
<div class="span4">
<img class="img-responsive" src="https://i.ibb.co/Mf8HmH7/Jedi-Mind-Reader-Logo-Small.png" alt="img">
</div>
</div>
<div class="col-md-4">
<div class="span4">
<img class="img-responsive" src="https://i.ibb.co/7vJj2z4/logo-small.png" alt="img">
</div>
</div>
</div>
</div>
</div>
</header>
Styling Code
* {box-sizing: border-box;}
body {
margin: 0;
font-family: Orbitron, sans-serif;
}
.header, .footer {
overflow: hidden;
background-color: black;
}
.footer {
color: white;
}
.header {
color: yellow;
}
.header, .footer a {
float: left;
text-align: center;
text-decoration: none;
font-size: 18px;
line-height: 25px;
border-radius: 4px;
}
.header, .footer a.logo {
font-size: 25px;
font-weight: bold;
}
.header, .footer a:hover {
background-color: black;
color: yellow;
}
.header, .footer a.active {
background-color: black;
color: black;
}
.header-right, .footer-right {
float: right;
}
#media screen and (max-width: 500px) {
.header, .footer a {
float: none;
display: block;
text-align: center;
}
.header-right, .footer-right {
float: none;
}
}
You're trying to apply styles to a class that doesn't exist. You can call just header {} but if you use .header {} then you need to change <header> => <header class="header">
So I wrote a small website and everything was working great, all styles were working but today it only displays the style sheet in mobile view in the normal desktop view it disregards all the styles in my css/style.css
The navbar and header imag keeps their style regardless of the size of the browser just the rest of the styles are gone when in desktop view
My header and footer is included in all pages with php includes the files is in includes/header.php and includes/footer.php
Here is the link to the project as well to look at maxi.maxihome.co.za
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<!-- Bootstrap--!>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<!-- Style sheet -->
<link rel="stylesheet" href="css/style.css">
<!--Google Fonts -->
<link href="https://fonts.googleapis.com/css?
family=Acme|Neuton&display=swap" rel="stylesheet"><link
href="https://fonts.googleapis.com/css?
family=Acme|Neuton|PT+Mono&display=swap" rel="stylesheet"><link
href="https://fonts.googleapis.com/css?
family=Acme|Neuton|PT+Mono|Sintony&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?
family=Acme|Molengo|Neuton|PT+Mono|Sintony&display=swap"
rel="stylesheet">
<!-- js script header -->
<script type="text/javascript"src="js/app.js">
</script>
<title>Maxi Home Renovations</title>
</head>
<body>
<section class="header">
<!-- custom menu -->
<div class="nav">
<div class="logo">
<img class="imagelogo"src="images/name.png" alt="">
</div>
<div class="togg">
<div></div>
<div></div>
<div></div>
</div>
<ul class="firstlevel">
<li></li>
<li></li>
<li>Home</li>
<li>Services</li>
<li class="has-sub"><a>Renovations</a>
<ul class="sub">
<li>Kitchen</li>
<li>Bathroom</li>
<li>Living Area</li>
<li>Total Renovation</li>
</ul></li>
<li>Contact Us</li>
<li><i class="fa fa-facebook-square"></i></li>
</ul>
</div>
<img class="headerImage" src="images/headerImg.png"
alt="HeaderImage">
</section>
</body>
/*index page*/
<?php
include "includes/header.php" ?>
<section class="feature">
<div class="container">
<div class="row">
<div class="col-sm-6">
<div id="carouselExampleInterval" class="carousel slide" data-
ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active" data-interval="5000">
<img class="imgCar"src="images/h1.JPG" class="d-block w-100"
alt="...">
</div>
<div class="carousel-item" data-interval="5000">
<img class="imgCar"src="images/h2.JPG" class="d-block w-100"
alt="...">
</div>
<div class="carousel-item" data-interval="5000">
<img class="imgCar" src="images/h3.jpg" class="d-block w-100"
alt="...">
</div>
</div>
<a class="carousel-control-prev" href="#carouselExampleInterval"
role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true">
</span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselExampleInterval"
role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true">
</span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
<?php
include "includes/footer.php" ?>
.headerImage{
width: 100%;
heigth: 300px;
padding-top:75px;
color:#bf2132;
}
.fimage{
width: 100%;
heigth: 300px;
padding-top:75px;
}
.navbar-default{
background-color:#bf2132;
border-color: #bf2132;
}
/* navigation */
.nav
{
width:100%;
background-color:#ccc;
position:fixed;
top:0;
left:0;
z-index: 9999;
}
.nav .logo
{
display:flex;
width:200px;
height: 50px;
flex-wrap:wrap;
justify-content: center;
align-items: center;
text-transform:uppercase;
cursor:pointer;
}
.imagelogo{
width:100px;
heigth:50px;
}
.togg
{
position:absolute;
right:40px;
top:20px;
display:none;
z-index: 5;
}
.togg div {
width: 36px;
height: 2px;
background-color: red;
margin: 6px 0px;
position: relative;
transition:all .8s ease;
}
.togg.lijo div
{
position:absolute;
transition:all .8s ease;
}
.togg.lijo div:nth-child(1){
transform: rotate(48deg);
top: 7px;
/* position: absolute; */
right: 0px;
}
.togg.lijo div:nth-child(2)
{
width:0px;
top: 7px;
/* position: absolute; */
right: 0px;
}
.togg.lijo div:nth-child(3)
{
transform: rotate(-48deg);
top: 7px;
right: 0px;
}
.nav ul.firstlevel
{
list-style:none;
width:calc(100% - 200px);
background: rgb(191,33,50);
background: linear-gradient(0deg, rgba(191,33,50,1) 0%,
rgba(247,77,5,0.9976365546218487) 33%, rgba(191,33,50,1) 100%);
margin-bottom:0px;
padding-left:0px;
}
.nav ul.firstlevel li
{
display:inline-block;
margin-bottom:0px;
color:#000;
}
.nav ul.firstlevel li a
{
cursor:pointer;
display:block;
padding:15px;
transition:.8s ease;
text-decoration:none;
text-transform:uppercase;
color:#fff;
}
.nav ul.firstlevel li a:hover
{
text-decoration:none;
}
.nav ul.firstlevel li ul.sub li {
display: block;
background-color:rgba(191,33,50,1);
}
.nav ul.firstlevel li ul.sub li:hover {
display: block;
background-color:rgba(172, 78, 2, 0.79);
}
.nav ul.firstlevel li ul.sub li a{
color:#fff;
}
.nav ul.firstlevel li ul.sub
{
width:200px;
position:absolute;
padding-left:0px;
opacity:0;
visibility: hidden;
transform:translateY(30px);
transition:.5s linear;
padding-top:20px;
}
.nav ul.firstlevel li ul.sub:after {
content: '';
width: 41px;
height: 20px;
border-bottom: solid 18px rgba(191,33,50,1);
border-left: solid 20px transparent;
border-right: solid 21px transparent;
top: 0px;
display: block;
position: absolute;
left: 16px;
}
#media(min-width:1024px)
{
.nav ul.firstlevel li:hover ul.sub
{
visibility:visible;
opacity:1;
transform:translateY(0px);
}
.nav ul.firstlevel li:hover
{
display:inline-block;
margin-bottom:0px;
background-color: rgba(27, 27, 27, 0.32);;
color:#fff !important;
}
.nav ul.firstlevel li:hover a
{
color:#fff !important;
}
}
#media(max-width:1024px)
{
.nav
{
min-height:50px;
}
.togg
{
display:block;
top:10px;
}
.nav ul.firstlevel
{
position: absolute;
top: 50px;
transform: translateX(100%);
right: 0;
transition:.8s ease;
width:40%;
height: calc(100vh - 50px);
z-index: fixed;
}
.nav ul.firstlevel li {
display: block;
}
.nav ul.firstlevel.surya {
transform: translateX(0%);
}
.nav ul.firstlevel li ul.sub
{
opacity: 1;
visibility: visible;
display:none;
position:relative;
padding-top:0px;
width:100%;
transition:0s;
transform: translateY(0px);
}
.nav ul.firstlevel li ul.sub:after
{
display:none;
}
/* Feature */
.feature{
padding-left: 100px;
padding-right: 100px;
padding-top: 70px;
padding-bottom: 70px;
background-image: url("../images/paper.jpg");
text-align:center;
}
.houseimg{
width: 400px;
height: 350px;
border:5px solid rgb(191,33,50);
background-color:#ff0;
}
.about{
padding-right: 100px;
padding-left: 100px;
padding-bottom: 70px;
text-align:center;
background-image: url("../images/paper.jpg");
}
/* spinning text */
#blink{
width:100%;
height: 50px;
padding: 15px;
text-align: center;
line-height: 50px;
}
.htext{
font-family: "Alfa Slab One";
color: rgb(191,33,50);
animation: blink 1.5s linear infinite;
padding-bottom: 100px;
}
#keyframes blink{
0%{opacity: 0;}
50%{opacity: .5;}
100%{opacity: 1;}
}
/* paragraph background */
.backpar{
border-radius: 25px;
background: rgb(191,33,50);
background: linear-gradient(0deg, rgba(191,33,50,1) 0%,
rgba(247,77,5,0.9976365546218487) 33%, rgba(191,33,50,1) 100%);
padding: 20px;
width: 100%;
height: 100%;
color: white;
font-family: "Concert One";
}
.footer{
background-image: url("../images/footer.png");
}
/* Contact */
.contact{
padding-left: 70px;
padding-right: 70px;
padding-top: 70px;
padding-bottom: 70px;
background-image:url("../images/paper.jpg");
}
.jumbotron {
background: rgb(191,33,50);
color: #FFF;
border-radius: 0px;
}
.jumbotron-sm { padding-top: 24px;
padding-bottom: 24px; }
.jumbotron small {
color: #FFF;
}
.h1 small {
font-size: 24px;
}
/* carousel homepage*/
.carousel-item{
width: 100% !important;
Height: 350px !important;}
.imgCar{
width: 100% !important;
Height: 350px !important;
border: 2px solid red;
border-radius: 5px;
}
I have noticed I left out a curly bracket everything is working again
Embarrassed Thank you
I want it like this:
So that the #header-nav is a horizontal bar which has the links(#nav-bar) and that the #bar fills out the remaining space but doesn't wrap to the next row or go behind the links. So it would be like one of the links but extends as far as the #header-nav allows.
The HTML:
<div id="header-nav">
<div id="nav-bar">
<ul>
<li>Home</li>
<li>Page1</li>
<li>Page2</li>
<li>Page3</li>
<li>Page4</li>
</ul>
</div>
<div id="bar"></div>
</div>
The CSS:
#header-nav ul
{
padding-left:0px;
margin: 0;
padding-top:10px;
padding-bottom:10px;
list-style-type:none;
text-align: left;
float:center;
margin-top:0px;
}
#header-nav ul li
{
margin-left:1px;
display: inline;
}
#header-nav ul li a
{
text-decoration:none;
padding: .2em .4em;
color: black;
border:1px solid lightgrey;
background-color:lightgrey;
}
Look up display: flex, flex: auto and flex: none. Combined with width: 100% for the container, that should give you what you are looking for.
My brother found out a solution.
Heres the link to jsfiddle
The CSS:
<body>
<div id="header-nav">
<div id="cell1">
<div id="buttons">
<ul>
<li>Home</li>
<li>Page1</li>
<li>Page2</li>
<li>Page3</li>
<li>Page4</li>
</ul>
</div>
</div>
<div id="cell2">
<div id="bar">
</div>
</div>
</div>
</body>
The HTML:
#buttons ul li a {
text-decoration:none;
padding: 5px 10px 5px 10px;
color: black;
border:1px solid lightgrey;
background-color:lightgrey;
}
#buttons ul {
padding-left:0px;
margin: 0;
padding-top:10px;
padding-bottom:10px;
list-style-type:none;
text-align: left;
}
#buttons ul li {
margin-left:1px;
display: inline;
}
#header-nav {
display:table;
width:100%;
}
#cell1 {
display:table-cell;
white-space: nowrap;
vertical-align:top;
}
#buttons {
float:left;
}
#cell2 {
display:table-cell;
width:100%;
padding: 4px 3px 5px 4px;
vertical-align:top;
}
#bar {
float:left;
width:100%;
background-color:black;
height:29px;
background-color:lightgrey;
}
Can you show me your css? Check this out :
http://jsfiddle.net/1ds7t19p/1/
#header-nav {
width:800px;
background:#ccc;
height:50px;
}
#nav-bar ul {
width:465px;
float: left;
padding: 0;
}
#nav-bar ul li{
display: inline-block;
}
#nav-bar ul li a{
padding:10px 25px;
background:#999;
height:50px;
}
#bar {
float: right;
height:50px;
}
I am trying to make a drop-down menu using jQuery/JavaScript, but my menu won't show anything.
Here is my code:
JavaScript:
function toggleMenu(target){
if($(target).css("display")=='none'){
$("#drop_down, drop_menu").hide(500);
$(target).toggle(500);
}
header.php
<?php
?>
<div id="header" class="absolute" >
<ul>
<li class="float_left"><p class="pointer" onclick="toggleMenu('#drop_search')">Search</p></li>
<li class="float_left"><p class="pointer" onclick="toggleMenu('#drop_login')">Log in</p></li>
<li class="float_left"><p class="pointer" onclick="toggleMenu('#drop_chart')">My Cart</p></li>
<li class="float_left"><p class="pointer" onclick="toggleMenu('#drop_menu')">Menu</p></li>
</ul>
<div class="clear_both"></div>
<br/>
<div id="drop_down"class="right">
<div id="drop_search" class="hidden">
<p>Search</p>
</div>
<div id="drop_login" class="hidden">
<p>login</p>
</div>
<div id="drop_chart" class="hidden">
<p>cart</p>
</div>
<div id="drop_menu" class="hidden">
<p>menu</p>
</div>
</div>
</div>
sorry for the long css, i just like to pack it into one file
style.css
body{
position: relative;
width: 100%;
height: 100%;
margin: 0px;
padding: 0px;
font-family: sans-serif;
}
body table{
border-collapse: collapse;
width: 100%;
}
body th, body tr, body td{
padding: 0;
}
body h1, body h2,body h3,body h4,body h5,body h6,body p{
margin: 0px;
}
body p{
font-size: 12px;
}
body h6{
font-size: 14px;
}body h5{
font-size: 16px;
}body h4{
font-size: 18px;
}body h3{
font-size: 20px;
}body h2{
font-size: 24px;
}body h1{
font-size: 28px;
}
body ul,body li{
list-style: none;
margin: 0px;
padding: 0px;
}
body img{
border: none;
}
body hr{
margin: 0px;
border: none;
height: 1px;
}
body a:link{
text-decoration: none;
}
body a:visited{}
body a:hover{}
body .relative{
position: relative;
}
body .absolute{
position: absolute;
}
body .fixed{
position: fixed;
}
body .float_left{
float: left;
}
body .float_right{
float: right;
}
body .clear_both{
clear: both;
}
body input, body select, body textarea{
border-radius: 5px;
}
body .input_text{}
body .input_select{
border-radius: 5px;
font-size: 11px;
}
body .input_option{
background-color: #f6f6f6;
color: #333333;
}
body .input_option_inactive{
background-color: #f6f6f6;
color: #888888;
}
body .input_submit{
background: url("../images/submit.png");
border: none;
font-weight: bold;
color: #efefef;
cursor: pointer;
border-radius: 20px;
height: 20px;
}
body .input_submit:hover{
color: #ffffff;
text-shadow: 0 0 3px #efefef;
}
body .input_submit_inactive{
background: url('#');
border:none;
}
body .input_submit_inactive:hover{
color: #333333;
text-shadow: 0 0 3px #434343;
}
body .input_textarea{}
body .top{
vertical-align: top;
}
body .middle{
vertical-align: middle;
}
body .bottom{
vertical-align: bottom;
}
body .left{
text-align: left;
}
body .center{
text-align: center;
}
body .right{
text-align: right;
}
body .spacer{
width: 10px;
height: 10px;
}
body .bold{
font-weight: bold;
}
body .italic{
font-style: italic;
}
body .strip{
text-decoration: line-through;
}
body .hidden{
display: none;
}
body .show{
display: block;
}
body .pointer{
cursor: pointer;
}
body .scroll-y{
overflow-y: scroll;
}
#whole{
width: inherit;
height:100%;
margin-left: auto;
margin-right: auto;
vertical-align: top;
}
.black{color: #000000;}
.white{color: #ffffff;}
.red{color: #ff0000;}
.green{color: #00ff00;}
.blue{color: #0000ff;}
.yellow{color: #ffff00;}
.toska{color: #00ffff;}
.pink{color: #ff00ff;}
header.css
#header{
right: 0;
top: 0;
}
#header li{ height: 20px;
background: #960000;
}
#header li p{
margin: 0 15px;
color: #cccccc;
height: 12px;
line-height: 20px;
font-weight: bold;
}
#header li p:hover{
color: #f6f6f6;
}
#header #drop_down{
background: url('../images/black20.jpg');
}
Can anyone can help ?
Remove your class="hidden" and set default to style="display: none" (or hide on page load).
You have a sintaxe error in your function
Try with this function
function toggleMenu(target){
if($(target).is(":hidden")){
$("#drop_down div").hide(500);
}
$(target).toggle(500);
}
And give me some feedback...
This code might work as per your requirement. I have not changed your code just remove class="hidden" entirely.
Note: You have not mention your css so i assume as per class names defined by you.
Please let me know if i am lagging some where....
<!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>Untitled Document</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js" type="text/javascript"></script>
<style type="text/css">
#header {
border:1px solid red;
width:100%;
}
.pointer {
cursor:pointer;
}
.absolute {
position:absolute;
}
.float_left {
float:left;
}
.right {
float:right;
}
.clear_both {
clear:both;
}
</style>
</head>
<body>
<div id="header" class="absolute">
<ul>
<li class="float_left">
<p class="pointer" onclick="toggleMenu('#drop_search');">Search</p>
</li>
<li class="float_left">
<p class="pointer" onclick="toggleMenu('#drop_login')">Log in</p>
</li>
<li class="float_left">
<p class="pointer" onclick="toggleMenu('#drop_chart')">My Cart</p>
</li>
<li class="float_left">
<p class="pointer" onclick="toggleMenu('#drop_menu')">Menu</p>
</li>
</ul>
<div class="clear_both"></div>
<br/>
<div id="drop_down" class="right">
<div id="drop_search">
<p>Search</p>
</div>
<div id="drop_login">
<p>login</p>
</div>
<div id="drop_chart">
<p>cart</p>
</div>
<div id="drop_menu">
<p>menu</p>
</div>
</div>
</div>
<script type="text/javascript">
$("#drop_down div").hide();
function toggleMenu(target)
{
if($(target).css("display") != 'none')
{
$(target).hide(500);
}
else
{
$("#drop_down div").hide(500);
$(target).show(500);
}
}
</script>
</body>
</html>