it's pretty simple. If referenced everything popular, and I'm the exact same code as my video I'm watching so I'm not sure what's going on. What happens if if I click my dropdown menu, it doesn't drop down.
Here's my code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap 101 Template</title>
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<div class="container">
<div class="row">
<div class="cox-md-12">
<ul class="nav nav-pills">
<li class="active">Index</li>
<li>Push Pull</li>
<li>Nesting</li>
<li>Dropdown<span class="caret"></span>
<ul class="dropdown-menu">
<li>Item 1</li>
<li>Item 2</li>
</ul>
</li>
</ul>
</div>
</div>
</div>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="js/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
</body>
</html>
My CSS code:
html{
position: relative;
width: 100%;
min-height: 100%;
}
body{
font-family: "Roboto";
margin-bottom: 60px;
}
a{
color:#00A0F0;
}
.spacer{
height:70px;
width: 100%;
}
.spacer-1{width:100%;height:10px;}.spacer-2{width:100%;height:20px;}.spacer-3{width:100%;height:30px;}.spacer-4{width:100%;height:40px;}
.spacer-5{width:100%;height:50px;}.spacer-6{width:100%;height:60px;}.spacer-7{width:100%;height:70px;}.spacer-8{width:100%;height:80px;}
.spacer-9{width:100%;height:90px;}.spacer-10{width:100%;height:100px;}.spacer-11{width:100%;height:110px;}.spacer-12{width:100%;height:120px;}
.locationTitle{
text-align: left;
font-weight: 700;
font-size: 2em;
color:#06a;
margin-bottom: 24px;
margin-left: 24px;
margin-top: 24px;
}
.subTitle{
text-align: center;
}
.subHead{
line-height: 1em;
font-size: .6em;
}
.navbar{
border: 0px solid #white;
border-bottom: 2px solid #CCC;
box-shadow: 0 0 2px 1px grey;
height: 100px;
background-color: white;
}
.navbar>.container-fluid{
height: 100px;
padding: 0;
}
.navbar>.container-fluid>*{
height: 100px;
}
.navbar>.container-fluid img{
height: 100px;
}
.branding *{
display: block;
text-align: center;
padding: 2px 6px 6px;
color: #06a
}
.navRows{
height: 100%;
padding: 0px;
}
.navRows>div{
font-size: 1.4em;
line-height: 40px;
padding: 5px 0;
text-align: center;
}
.navRows[data-expand="false"]>div{
height: 50%;
}
.navRows[data-expand="true"]>div{
background-color: #06a;
text-align: left;
z-index: 9999;
}
.contactspacer {
margin-top: 45px;
}
.navIcon{
padding: 10px;
border-radius: 50%;
color:white;
background-color: #06a;
}
.navTopRow{
background-color: #06a;
color: white
margin-top: 50px;
}
.navTopRow a{
margin-top: 25px;
color: white;
font-size: 16px;
}
.navbar > li > a:hover{
text-shadow: 0 1px 3px #CDF;
}
.navbar li:not(.navSep):hover{
margin: 0 0 -2px 0;
border-bottom: 2px solid white;
}
.navSep{
width:2px;
height: 40px;
margin: 5px 2px 5px 2px;
background-color: #A9AFDD;
}
.imgCon{
max-height: 100%;
max-width:100%;
}
.imgCon img{
width: auto;
height: auto;
max-width:100%;
max-height: 100%;
}
.page{
width: 100%;
height: 100%;
padding-bottom:50px;
}
#media (max-width:768px){
div[aria-expanded="true"] .navSep{
display: none;
}
}
.mainTitle{
font-size: 1.5em;
font-weight: 700;
background-color: white;
}
.extraInfo{
background-color: #333;
color:white;
box-shadow: 1px 1px 2px 1px grey;
font-size: 1.2em;
}
.footer{
background-color: #06a;
position: absolute;
bottom: 0;
width: 100%;
height: 100px;
text-align: right;
}
.footer a{
text-align: center;
border-top: 1px solid grey;
height: 100%;
color: white;
}
.footer p{
text-align: center;
height: 100%;
color: white;
}
#media (min-width : 1200px) {
.col-xl-0{display:none;}
}
#media (max-width : 1200px){
.col-lg-0{display:none;}
}
#media (max-width : 992px){
.col-md-0{display:none;}
}
#media (max-width : 768px){
.col-sm-0{display:none;}
}
#media (max-width : 480px){
.col-xs-0{display:none;}
}
#font-face {
font-family: 'Roboto';
font-style: normal;
font-weight: 400;
src: local('Roboto'), local('Roboto-Regular'), url(https://fonts.gstatic.com/s/roboto/v15/CWB0XYA8bzo0kSThX0UTuA.woff2) format('woff2');
}
#font-face {
font-family: 'Roboto';
font-style: normal;
font-weight: 700;
src: local('Roboto Bold'), local('Roboto-Bold'), url(https://fonts.gstatic.com/s/roboto/v15/d-6IYplOFocCacKzxwXSOFtXRa8TVwTICgirnJhmVJw.woff2) format('woff2');
}
It is working if you pasted your CDN's correctly
As
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
Then It will work perfectly as follows,
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<div class="row">
<div class="cox-md-12">
<ul class="nav nav-pills">
<li class="active">Index</li>
<li>Push Pull</li>
<li>Nesting</li>
<li>Dropdown<span class="caret"></span>
<ul class="dropdown-menu">
<li>Item 1</li>
<li>Item 2</li>
</ul>
</li>
</ul>
</div>
</div>
</div>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="js/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
</body>
</html>
Check that you use the latest version of bootsrap
And check https://jsfiddle.net/qy59y2fs/
<div class="dropdown">
Related
I have created a html page where the header navigation is created on a separate html navigation.html and linked to the index page. While I designed and developed the navigation bar with header tag and run it, its works perfectly and is even totally responsive.
But one I connect the navigation.html to index.html, the header navigation is broken and doesn't work. I tried every fix available and nothings working.
Please Help.
Thanks in advance.
Here's my code.
Here's the css file.
header {
font-family: "Poppins", sans-serif;
display: flex;
background-color: #5459ff;
padding: 1rem 0;
align-items: center;
}
header a {
text-decoration: none;
}
.logo {
margin: 0 0 0 3%;
}
nav {
margin: 0 6% 0 auto;
right: 0;
}
.nav_list {
display: flex;
align-items: center;
}
.nav_item {
margin: 0 8px;
}
.nav a:link,
.nav a:visited,
.nav a:active,
.nav a:hover {
color: #fff;
text-decoration: none;
}
.nav_link {
padding: 10px;
color: #fff;
font-size: 14px;
border-radius: 5px;
}
.nav_link:hover {
border-bottom: 1px solid #f9f070;
}
.header_toggle,
.header_close {
display: none;
}
#media screen and (max-width: 768px) {
header {
height: 80px;
justify-content: space-between;
padding: 0 28px;
}
.header_toggle {
display: inline;
font-size: 32px;
color: #f9f070;
}
.header_close {
position: absolute;
right: 24px;
color: #f9f070;
display: block;
font-size: 32px;
border-radius: 50%;
}
.nav {
position: fixed;
top: 0;
right: -100%;
margin-right: 0%;
background-color: #5459ff;
color: #fff;
width: 60%;
height: 100vh;
padding: 24px 0;
z-index: 100;
transition: 0.5s;
}
.nav_list {
display: flex;
flex-direction: column;
margin: 30% 10% 0 0;
}
.nav_item {
margin: 30% 0 0 0;
}
.show {
right: 0;
}
}
.main-page {
display: grid;
width: 100%;
height: 100%;
background-color: #000241;
font-family: "Roboto", sans-serif;
}
.headp {
display: grid;
grid-template-columns: 2fr 2fr;
}
.headp-head {
color: #f9f070;
font-size: 90px;
font-family: "Secular One", cursive;
line-height: 1.1;
margin: 4% auto auto 6%;
}
.head-desc {
color: #f9f070;
font-size: 18px;
font-weight: 600;
font-family: "Roboto", sans-serif;
word-spacing: 4px;
margin: 10px 0 0 50px;
}
.exp-button {
border: 1px solid #f9f070;
border-radius: 10px;
color: #f9f070;
text-align: center;
display: inline-block;
font-size: 16px;
margin: 30px 0 0 50px;
padding: 10px 20px 10px 20px;
cursor: pointer;
transition: all 1s;
}
.headp a:link {
color: #f9f070;
text-decoration: none;
}
.headp a:visited {
color: #f9f070;
text-decoration: none;
}
.headp a:active {
color: #f9f070;
text-decoration: none;
}
.headp a:hover {
color: #f9f070;
}
Index.html
<!DOCTYPE html>
<html class="no-js" lang="en">
<head>
<meta charset="utf-8">
<title>Page</title>
<link href="site.webmanifest" rel="manifest">
<link href="icon.png" rel="apple-touch-icon">
<link href="css/normalize.css" rel="stylesheet">
<link href="css/main.css" rel="stylesheet">
<link href="https://fonts.googleapis.com" rel="preconnect">
<link href="https://fonts.gstatic.com" rel="preconnect">
<link href="https://fonts.googleapis.com/css2?family=Secular+One&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Roboto&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght#700&display=swap" rel="stylesheet">
<link href="https://api.fontshare.com/css?f[]=nippo#500&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght#500;600&display=swap" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.4.0/gsap.min.js">
</script>
<script src="https://code.jquery.com/jquery-3.3.1.js">
</script>
<script>
$(function(){
$("#mainnav").load("navigation.html");
$("#footer").load("footer.html");
});
</script>
</head>
<body>
<div class="page-container main-page">
<div class="page-wrap">
<div class="cursor"></div>
<div id="mainnav"></div>
<div class="headp">
<div>
<p class="headp-head">Heading</p>
<p class="head-desc">Subheading</p>
</div>
<div id="footer"></div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js">
</script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.0/dist/umd/popper.min.js">
</script> f
<script src="js/vendor/modernizr-3.8.0.min.js">
</script>
<script src="https://code.jquery.com/jquery-3.4.1.min.js">
</script>
<script>
window.jQuery || document.write('<script src="js/vendor/jquery-3.4.1.min.js"><\/script>')
</script>
<script src="https://unpkg.com/ionicons#5.5.2/dist/ionicons/ionicons.esm.js" type="module">
</script>
<script src="https://unpkg.com/ionicons#5.5.2/dist/ionicons/ionicons.js">
</script>
<script src="js/plugins.js">
</script>
<script src="js/main.js">
</script>
</div>
</body>
</html>
navigation.html
<!DOCTYPE html>
<html class="no-js" lang="en">
<head>
<meta charset="utf-8">
<meta content="width=device-width, initial-scale=1.0, maximum-scale=5.0" name="viewport">
<link href="css/main.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Roboto&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght#700&display=swap" rel="stylesheet">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght#500;600&display=swap" rel="stylesheet">
</head>
<body>
<header>
<div class="logo">
<img src="./img/logo.svg" style="pointer-events: none;" draggable="false" ondragstart="return false;" alt="logo_main">
</div>
<nav class="nav" id="nav-menu">
<ion-icon name="close-outline" class="header_close" id="close-menu"></ion-icon>
<ul class="nav_list">
<li class="nav_item">Link1</li>
<li class="nav_item">Link2</li>
<li class="nav_item">Link3</li>
<li class="nav_item">Link4</li>
</ul>
</nav>
<ion-icon name="grid-outline" class="header_toggle" id="toggle-menu"></ion-icon>
</header>
<script type="module" src="https://unpkg.com/ionicons#5.5.2/dist/ionicons/ionicons.esm.js"></script>
<script nomodule src="https://unpkg.com/ionicons#5.5.2/dist/ionicons/ionicons.js"></script>
<script src="js/main.js"></script>
</body>
</html>
main.js
const navMenu = document.getElementById("nav-menu"),
toggleMenu = document.getElementById("toggle-menu"),
closeMenu = document.getElementById("close-menu");
toggleMenu.addEventListener("click", () => {
navMenu.classList.toggle("show");
});
closeMenu.addEventListener("click", () => {
navMenu.classList.remove("show");
});
I've been working on my website the entire day but now I suddenly noticed that in mobile format my buttons (the logo and the menu button they are called #logo and #menu-icon) don't work anymore. The used to work some time ago. And in the desktop (over 768 pixel wide) version they all work fine.
/*--------STYLE.CSS--------*/
#import url('https://fonts.googleapis.com/css?family=Alegreya+Sans:300,500,700');
* {
margin: 0;
padding: 0;
border: 0;
}
html {
height: 100%;
}
body {
height: 100%;
background: #424949;
color: #f5f5f5;
font-family: 'Alegreya Sans', sans-serif;
margin: 0;
}
h2 {
font-size: 250%;
font-weight: 700;
text-align: center;
padding-top: 2%;
}
p {
font-size: 160%;
font-weight: 500;
line-height: 150%;
padding: 3%;
text-indent: 2%;
text-align: justify;
}
img {
max-width: 100%;
height: auto;
width: auto;
margin-bottom: -4px;
}
header {
background-color: #1a1a1a;
width: 100%;
height: 86px;
}
#header-inner {
max-width: 1200px;
margin: 0 auto;
}
#logo {
margin: -5px 0 -5px 20px;
padding: 0 10px 0 10px;/*top right bottom left*/
float: left;
width: 96px;
height: 96px;
background: url(img/logohead96x.png) no-repeat center; /*org img/logo128x.png*/
}
nav {
float: right;
padding: 4px 20px 0 0;
}
#menu-icon {
display: hidden;
width: 40px;
height: 40px;
background: url(img/nav.png) center;
}
a:hover#menu-icon {
border-radius: 4px 4px 0 0;
}
ul {
list-style-type: none;
margin-right: 10px;
}
nav ul li {
font-family: 'Alegreya Sans', sans-serif;
font-size: 150%;
display: inline-block;
float: left;
margin-top: 35px;
}
nav ul li a {
color:#f5f5f5;
text-decoration: none;
padding: 25px;
}
nav ul li a:hover {
color: #707b7c;
}
.current {
color: #707b7c;
}
.container {
overflow: hidden;
width: 100%;
height: auto; /*calc(100% - 86px - 29px)*/
background-color: #1a1a1a;
}
.container-inner {
height: 100%;
max-width: 1100px;
margin: 0 auto;
}
.container img {
max-height: 100%;
min-width: 100%;
height: 100%;
}
.container video {
max-height: 100%;
min-width: 100%;
height: 100%;
}
footer {
background: #1a1a1a;
width: 100%;
}
.social {
list-style-type: none;
text-align: center;
}
.social li {
display: inline;
}
.social i {
font-size: 460%;
margin: 1%;
padding: 5% 5% 5% 4%;
color: #707b7c
}
.social i:hover {
color: #f5f5f5;
}
footer.second {
background-color: #424949;
margin: 0;
}
footer.second p {
margin: 4px 0 0 0; /*top right bottom left*/
padding: 0 0 0 0;
text-align: left;
font-size: 130%;
font-family: 'Alegreya Sans', sans-serif;
}
/*--------MEDIA--------*/
#media screen and (max-width: 768px) {
h2 {
font-size: 150%;
}
p {
font-size: 120%;
}
header {
position: absolute;
}
#logo {
margin: -5px 5px -5px 5px;
background: url(img/logohead64x.png) no-repeat center;
}
#menu-icon {
display: inline-block;
}
nav {
padding: 25px;
}
nav ul, nav:active ul {
display: none;
z-index: 1;
position: absolute;
padding: 20px;
background: #1a1a1a;
right: 20px;
top: 60px;
border: 3px solid #ffffff;
border-radius: 10px 0 10px 10px;
width: 40%;
}
nav:hover ul {
display: block;
}
nav li {
text-align: center;
width: 100%;
padding: 10px 0 10px 0;
}
.banner {
padding-top: 86px;
}
.social i {
font-size: 180%;
}
}
<!-- Home page of slothy.cloud -->
<!DOCTYPE html>
<html>
<!--
My small cozy website.
© veryslothysloth 2018
-->
<head>
<!-- Links -->
<link rel="apple-touch-icon" sizes="180x180" href="img/favicon/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="img/favicon/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="img/favicon/favicon-16x16.png">
<link rel="manifest" href="site.webmanifest">
<link rel="mask-icon" href="img/favicon/safari-pinned-tab.svg" color="#2e86c1">
<link rel="stylesheet" type="text/css" href="style.css">
<link rel="stylesheet" href="css/font-awesome.min.css">
<!-- Open Graph Protocol -->
<meta property="og:url" content="://slothy.cloud" />
<meta property="og:type" content="website" />
<meta property="og:title" content="slothy.cloud | by veryslothysloth" />
<meta property="og:description" content="A small slothy website." />
<meta property="og:image" content="img/slothyicon.png" />
<meta property="og:image:secure_url" content="img/slothyicon.png" />
<!-- Twitter card -->
<meta name="twitter:card" content="summary">
<meta name="twitter:title" content="slothy.cloud |by veryslothysloth">
<meta name="twitter:description" content="A small slothy website.">
<meta name="twitter:image" content="img/slothyicon.png">
<meta name="twitter:image:src" content="img/slothyicon.png">
<!-- Data -->
<title>slothy.cloud | by veryslothysloth</title>
<meta charset="utf-8">
<meta name="description" content="A small slothy website.">
<meta name="keywords" content="sloth,slothy,veryslothysloth,file,upload,hosting,lolisafe">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<meta name="msapplication-TileColor" content="#2d89ef">
<meta name="theme-color" content="#aed6f1">
</head>
<body>
<header>
<!-- Header -->
<div id="header-inner">
<nav>
<ul>
<li>Home</li>
<li>Cloud</li>
<li>Stat</li>
<li>Contact</li>
</ul>
</nav>
</div>
</header>
<!-- Main Body -->
<div class="container">
<video loop>
<source src="img/alley.mp4" type="video/mp4">
</video>
<!--<div class="container-inner">
<p>Test Text</p>
</div>-->
</div>
<!-- Footer -->
<footer>
<ul class="social">
<li><i class="fa fa-twitter"></i></li>
<li><i class="fa fa-instagram"></i></li>
<li><i class="fa fa-steam"></i></li>
<li><i class="fa fa-at"></i></li>
</ul>
</footer>
<!-- Second Footer -->
<footer class="second">
<p>© veryslothysloth</p>
</footer>
</body>
</html>
This may be a completely stupid mistake or small typo but I'm quite tired and can't seem to figure this out myself with my really limited coding skills... I'm quite new to all this. Thanks in advance!
The div .container lies over the nav and menu-icon. So the hover doesnt works.
add a z-index to the header to solve it
header {
z-index: 99;
}
I'm not 100% sure what "they don't work" means, but it does stand out that one of the links is to index.html and the other is to #. The first will reload the current page (assuming the HTML you provided is index.html, the second will scroll the current page to the top. What behavior are you seeing, and what behavior are you looking for?
So everywhere i go to this code does something weird with the vertical scrollbar. If you know what it is tell me the error and how i can solve it.
The error is probably in the css but I included all the code just so you can take a look.
I'll just give all the code and you tell me what's wrong. Thx
I need to write some random words so I can post this.
*::selection {
background: #333;
}
*::-moz-selection {
background: #333;
}
#font-face {
font-family: 'watchmen';
src: url('--watchmen---webfont.woff2') format('woff2'),url('--watchmen---webfont.woff') format('woff');
font-weight: normal;
font-style: normal;
}
body {
background-color: red;
font-family: 'Hind', sans-serif;
}
* {
padding: 0;
margin: 0;
}
#titletext {
font-family: watchmen;
color: #FEEE2E;
font-size: 6.5vw;
}
#logo_span {
color: #146EAD;
}
#linktotwo {
text-decoration: none;
color: #146EAD;
}
#title {
position: absolute;
width: 82vw;
height: 12vh;
text-align: center;
line-height: 12vh;
top: 50%;
left: 50%;
margin-top: -6vh;
margin-left: -41vw;
}
#one {
background-color: #030200;
background-size: cover;
width:100vw;
height: 100vh;
}
#two {
height: 100vh;
width: 100vw;
background-color: #0B4F77;
}
#favul {
list-style-type: decimal;
font-family: 'Josefin Sans', sans-serif;
padding-left: 8vw;
margin: 6.5vh auto;
}
#favul > li {
margin: 1vw 0;
}
#favtit {
text-align: center;
}
#fav {
border: 1px solid #000;
position: absolute;
font-size: 48px;
left: 50%;
padding: 15px;
width: 600px;
height: 50vh;
margin-left: -316px;
overflow: hidden;
top: 150vh;
margin-top: -32vh;
background-color: #0A4366;
}
#flash {
color: #FF4500;
}
#bat {
color: #000;
}
#arrow {
color: green;
}
#manh {
color: #1580c1;
}
#images {
position: absolute;
bottom: 0%;
left: 0%;
}
#images > img {
width: 100%;
}
<html lang="en">
<!DOCTYPE html>
<html>
<head>
<title>I Love DC Comics</title>
<meta charset="UTF-8">
<link rel="icon" type="image/png" href="favicon-32x32.png" sizes="32x32" />
<link rel="icon" type="image/png" href="favicon-16x16.png" sizes="16x16" />
<meta name="description"
content="I just love DC Comics and I write some stuff on this Website"/>
<meta name="robots" content="index,follow"/>
<link rel="stylesheet" type="text/css" href="styles.css">
<link href="https://fonts.googleapis.com/css?family=Hind:600" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Josefin+Sans:300" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script type="text/javascript" src="jumpto.js"></script>
<script type="text/javascript" src="script.js"></script>
</head>
<body>
<div id="one">
<div id="title">
<p id="titletext">ONLY DC <span id="logo_span"><a id="linktotwo" href="#two">¤</a></span> COMICS!</p>
</div>
</div>
<div id="two">
<div id="fav">
<p id="favtit">My Favorite Characters</p>
<ul id="favul">
<li>The <span id="flash">Flash</span></li>
<li><span id="bat">Batman</span></li>
<li><span id="arrow">Green</span> Arrow</li>
<li>Dr. <span id="manh">Manhattan</span></li>
</ul>
<div id="images">
<img src="characters.jpeg" alt="characters"/>
</div>
</div>
</div>
</body>
</html>
#one {
width: 100%;
}
#two {
width: 100%;
}
First of all vw is not the same as %. Have a look at this explanation:
Difference between Width:100% and width:100vw?
So you have to use % instead of vw and also I would give #fav box-sizing: border-box:
*::selection {
background: #333;
}
*::-moz-selection {
background: #333;
}
#font-face {
font-family: 'watchmen';
src: url('--watchmen---webfont.woff2') format('woff2'),url('--watchmen---webfont.woff') format('woff');
font-weight: normal;
font-style: normal;
}
body {
background-color: red;
font-family: 'Hind', sans-serif;
}
* {
padding: 0;
margin: 0;
}
#titletext {
font-family: watchmen;
color: #FEEE2E;
font-size: 6.5vw;
}
#logo_span {
color: #146EAD;
}
#linktotwo {
text-decoration: none;
color: #146EAD;
}
#title {
position: absolute;
width: 82vw;
height: 12vh;
text-align: center;
line-height: 12vh;
top: 50%;
left: 50%;
margin-top: -6vh;
margin-left: -41vw;
}
#one {
background-color: #030200;
background-size: cover;
width:100%;
height: 100vh;
}
#two {
height: 100vh;
width: 100%;
background-color: #0B4F77;
}
#favul {
list-style-type: decimal;
font-family: 'Josefin Sans', sans-serif;
padding-left: 8vw;
margin: 6.5vh auto;
}
#favul > li {
margin: 1vw 0;
}
#favtit {
text-align: center;
}
#fav {
border: 1px solid #000;
position: absolute;
font-size: 48px;
left: 50%;
padding: 15px;
width: 600px;
height: 50vh;
margin-left: -302px;
overflow: hidden;
top: 150vh;
margin-top: -32vh;
background-color: #0A4366;
box-sizing: border-box;
}
#flash {
color: #FF4500;
}
#bat {
color: #000;
}
#arrow {
color: green;
}
#manh {
color: #1580c1;
}
#images {
position: absolute;
bottom: 0%;
left: 0%;
}
#images > img {
width: 100%;
}
<html lang="en">
<!DOCTYPE html>
<html>
<head>
<title>I Love DC Comics</title>
<meta charset="UTF-8">
<link rel="icon" type="image/png" href="favicon-32x32.png" sizes="32x32" />
<link rel="icon" type="image/png" href="favicon-16x16.png" sizes="16x16" />
<meta name="description"
content="I just love DC Comics and I write some stuff on this Website"/>
<meta name="robots" content="index,follow"/>
<link rel="stylesheet" type="text/css" href="styles.css">
<link href="https://fonts.googleapis.com/css?family=Hind:600" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Josefin+Sans:300" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script type="text/javascript" src="jumpto.js"></script>
<script type="text/javascript" src="script.js"></script>
</head>
<body>
<div id="one">
<div id="title">
<p id="titletext">ONLY DC <span id="logo_span"><a id="linktotwo" href="#two">¤</a></span> COMICS!</p>
</div>
</div>
<div id="two">
<div id="fav">
<p id="favtit">My Favorite Characters</p>
<ul id="favul">
<li>The <span id="flash">Flash</span></li>
<li><span id="bat">Batman</span></li>
<li><span id="arrow">Green</span> Arrow</li>
<li>Dr. <span id="manh">Manhattan</span></li>
</ul>
<div id="images">
<img src="characters.jpeg" alt="characters"/>
</div>
</div>
</div>
</body>
</html>
I am using pdfkit in order to generate pdfs from html strings, rendered by my Django's views.
For some reason, the output pdf is small.
My pdfkit option dictionary is -
options = {
'quiet': '',
'page-size': 'A4',
'margin-top': '0.75in',
'margin-right': '0.75in',
'margin-bottom': '0.75in',
'margin-left': '0.75in',
'disable-smart-shrinking': ''
}
and the output file is here
Html code is -
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="pdfkit-orientation" content="Portrait"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<title>Dribble</title>
<!-- Bootstrap -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css">
<!-- Google Font -->
<link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,700,800" rel="stylesheet">
<!-- Custom Font -->
<style>
body {
font-family: 'Open Sans', sans-serif;
}
p, a {
color: #002f54;
}
.nav {
background: #002f54;
color: #FFFFFF;
border-radius: 5px;
}
.ico {
padding-right: 5px;
top: 3px;
}
.nav > li p {
text-align: center;
font-size: 36px;
font-weight: 800;
}
.right-align {
float: right;
}
.pad-mar {
font-size: 18px;
padding-top: 10px;
padding-bottom: 10px;
margin-left: 30px !important;
margin-right: 30px;
}
.pad-mar-middle {
font-size: 18px;
padding-top: 78px;
padding-bottom: 25px;
margin-left: 30px !important;
margin-right: 30px;
}
.pad-mar-bottom {
font-size: 18px;
padding-top: 10px;
padding-bottom: 90px;
margin-left: 30px !important;
margin-right: 30px;
}
.pad-mar-footer {
padding-top: 20px;
margin-left: 30px !important;
margin-right: 30px;
}
.bor-bottom {
border-bottom: 2px solid #ccc;
}
.no-pad {
padding-left: 0;
}
.section {
margin-top: 20px;
margin-bottom: 20px;
}
.bold {
font-weight: 700;
color: #002f54;
}
.small {
font-size: 14px;
}
.bolder {
color: #002f54;
font-weight: 800;
font-size: 22px;
}
.normal {
color: #002f54;
font-weight: 700;
}
.smaller {
font-size: 14px;
font-weight: 700;
}
h3 .bold {
margin-top: 0;
}
.neg-mar {
margin-top: -25px;
}
.cus-img {
max-width: 85px;
margin-bottom: 10px;
}
.nav-stacked.mob > li {
font-size: 16px;
margin-left: 0px !important;
margin-right: 0px;
margin-bottom: 10px;
padding-top: 5px;
border: 1px solid #EB6C6D;
border-radius: 5px;
font-weight: 300;
text-align: center;
color: #EB6C6D;
}
.nav-stacked.mob > li p {
color: #002f54;
}
.nav.mob {
background: #FFFFFF;
}
.pad-mar-bottom.mob {
margin-left: 0px !important;
padding-bottom: 10px;
}
.pad-mar-footer.mob {
margin-left: 0px !important;
text-align: center;
padding-top: 10px;
}
.l-mar {
margin-left: 40px;
}
.titl {
color: #EB6C6D;
font-size: 16px;
}
.bot-mar {
margin-bottom: 20px;
}
.container {
max-width: 575px;
}
</style>
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<section class="section">
<div class="container">
<div class="row bor-bottom bot-mar">
<div class="col-xs-6 ">
<img src="https://api.figo.me/assets/images/accounts/north_channel_bank_144.png"
class="img-responsive cus-img"/>
<p> Commerzbank Service-BZ</p>
<p>First line</p>
</div>
<div class="col-xs-6">
<div class="right-align neg-mar">
<h3 class="bold">First line</h3>
<p class="bold">First line</p>
<p class="bold">First line</p>
</div>
</div>
</div>
<div class="row">
<div class="">
<ul class="nav nav-stacked mob">
<li><span class="glyphicon glyphicon glyphicon-user ico"></span>From<p>Rewe GmbH</p></li>
<li><span class="glyphicon glyphicon glyphicon-credit-card ico"></span>Amount<p>$ 32,10 USD</p></li>
<li><span class="glyphicon glyphicon glyphicon-calendar ico"></span>Payment Date<p>Nov 5, 2017</p>
</li>
</ul>
</div>
</div>
<div class="row pad-mar-bottom mob bor-bottom">
<p class="titl"><span class="glyphicon glyphicon-tag ico"></span>Payment Reference</p>
<div class="l-mar">
<p class="normal">Hello Ennio,</p>
<p class="normal">You sent a payment of <span class="bolder">$20.00 USD</span> to Dribble. (paypal#dribble.com)</p>
<div class="no-pad">
<p class="smaller">It may take a few moments for this transaction to appear in your account.</p>
</div>
</div>
</div>
<footer>
<div class="row pad-mar-footer mob">
<a class="smaller" href="#">This document was automatically generated by Koryo</a>
</div>
</footer>
</div><!-- Container -->
</section>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</body>
</html>
The problem was about setting the dpi parameter for pdfkit.
So if you encounter the same problem, just set the dpi according to your need. For me, this what I was needed
options = {
'page-size': 'A4',
'dpi': 400
}
I had this same issue. I just changed the default configuration:
PDFKit.configure do |config|
config.default_options = {
page_size: 'A4',
print_media_type: true,
dpi: 400
}
end
you can try to disable shrinking through the options as below
options = { 'disable-smart-shrinking': ''}
I was trying to use font icons in IE7+8 and ran into a problem that could easily be solved by an IE7 only stylesheet. Long story short, now both IE7 and IE9 run my IE7 only stylesheet somehow (IE8 runs perfectly fine). I can't understand why.
<head>
<!-- CSS3 in IE7+8 -->
<!--[if (gte IE 6)&(lte IE 8)]>
<script src="js/selectivizr.js"></script>
<noscript><link rel="stylesheet" href="css/style.css" /></noscript>
<![endif]-->
<!-- META -->
<meta charset="utf-8" />
<!-- TITLE -->
<title>title</title>
<!-- STYLESHEETS -->
<link rel="stylesheet" href="css/style.css" />
<link rel="stylesheet" href="css/normalize.css" />
<link rel="shortcut icon" href="img/favicon.ico" />
<!-- Icomoon in IE7 / IE7.CSS -->
<!--[if lte IE 7]>
<script src="js/lte-ie7.js"></script>
<link rel="stylesheet" href="css/ie7.css" />
<![endif]-->
<!--FONTS-->
<link href='http://fonts.googleapis.com/css?family=Maiden+Orange' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Droid+Sans' rel='stylesheet' type='text/css'>
</head>
<body>
<div id="container">
<div id="header" role="banner">
<img src="img/logo.png" title="title" alt="" />
</div> <!-- end #HEADER -->
<div id="main" role="main">
<div class="left content">
<h2>WHAT WE DO</h2>
</div>
<div class="center content">
<h2>OUR SPECIALTIES</h2>
<ul>
<li><a aria-hidden="true" data-icon="f">WATER</a></li>
<li><a aria-hidden="true" data-icon="$">FIRE</a></li>
<li><a aria-hidden="true" data-icon="#">LIGHTING</a></li>
<li><a aria-hidden="true" data-icon="a">AUDIO</a></li>
<li><a aria-hidden="true" data-icon="!">TECH F/X</a></li>
</ul>
</div>
<div class="left content">
<h2>CONTACT US</h2>
<div class="info">
<p>Name</p>
<p>e: <span class="brown">email</span></p>
<p>p: <span class="brown">888-888-8888</span></p>
</div>
<div class="info">
<p>Name</p>
<p>e: <span class="brown">email</span></p>
<p>p: <span class="brown">888-888-8888</span></p>
</div>
</div>
</div> <!-- end #MAIN -->
<div id="footer" role="contentinfo">
<p>©</p>
</div> <!-- end #FOOTER -->
</div> <!-- end #CONTAINER -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
</body>
</html>
CSS
#font-face {
font-family: 'icomoon';
src:url('/fonts/icomoon.eot');
src:url('/fonts/icomoon.eot?#iefix') format('embedded-opentype'),
url('/fonts/icomoon.woff') format('woff'),
url('/fonts/icomoon.ttf') format('truetype'),
url('/fonts/icomoon.svg#icomoon') format('svg');
font-weight: normal;
font-style: normal;
}
/* UNIVERSAL
=================================*/
body {
background-color: #292929;
background: url("/img/bg.png") repeat;
font-family: 'Droid Sans', Arial, Helvetica, sans-serif;
font-size: 62.5%; /* 1em = 10px */
-webkit-font-smoothing: antialiased;
}
#container {
width: 960px;
margin: 0 auto;
}
h2 {
display: inline-block;
font-family: 'Maiden Orange', cursive;
font-size: 3.5em;
font-weight: 100;
color: #3c2811;
padding: 0 0 2px 0;
border-bottom: 1px #3c2811 solid;
}
a,
.center a:hover {
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
p {
color: #fff;
}
a,
.brown,
.center a:hover {
color: #3c2811;
}
li {
list-style: none;
margin: 0 0 20px 10px;
}
/* HEADER
=================================*/
#header {
background: url("/img/ribbon.png") no-repeat center;
height: 99px;
margin: 60px 0 0 0;
position: relative;
}
#header img {
display: inline-block;
position: absolute;
top: 13%;
left: 35%;
}
/* MAIN
=================================*/
#main {
overflow: hidden;
}
#main div:first-child h2 {
margin-left: 65px;
}
#main div:nth-child(2) h2 {
margin-left: 40px;
}
#main div:last-child h2 {
margin-left: 65px;
}
.content {
margin: 20px 0 0 0;
float: left;
height: 439px;
width: 320px;
}
.left {
background: url("/img/left-bg.png") no-repeat;
}
.left p {
font-size: 2em;
margin: 0 40px 0 20px;
line-height: 1.9;
}
/* CENTER */
.center {
background: url("/img/center-bg.png") no-repeat;
}
.center a {
color: #fff;
font-size: 3em;
-webkit-transition: color 0.15s ease-in;
-moz-transition: color 0.15s ease-in;
transition: color 0.15s ease-in;
}
[data-icon]:before {
font-family: 'icomoon';
content: attr(data-icon);
speak: none;
padding: 0 30px 0 0;
}
/* CONTACT */
.info {
margin: 0 0 30px 0;
}
.info p:first-child {
padding: 0 0 10px 0;
}
.info p:nth-child(n+2) {
font-size: 1.7em;
line-height: 1.5;
}
/* FOOTER
=================================*/
#footer {
text-align: center;
font-family: 'Maiden Orange';
font-size: 2.4em;
margin: 0 0 20px 0;
}
What is before your <head> tag? Incorrect markup might trigger quirks mode or compatibility mode.
Try explicitly asking IE to render your page with the latest rendering engine available by adding this tag inside <head></head>:
<meta http-equiv="X-UA-Compatible" content="IE=edge">
As #Phil mentioned, it could be quirks mode is triggering this. Too specific DOCTYPE tend to trigger it. To avoid triggering quirks mode with DOCTYPE, don't be specific. Use:
<!DOCTYPE html>
HTML5 for the win!