I have a header and navbar (attached) then 2 input boxes below that. When I resize my screen to a smaller resolution, a scroller bar appears horizontally (which is weird as everything on the page is visible without scrolling), when I move this scroller bar, my header (with width 100%) cuts off and I just see the background underneath it. I have had this problem with multiple websites in the past, how do I fix it? My code is below.
assets/header.php
<html>
<link rel="stylesheet" type="text/css" href="/blog/assets/bootstrap.css">
<link rel="stylesheet" type="text/css" href="/blog/assets/style.css">
<head>
</head>
<body>
<div class="header"><br><br><br>
<p>My Blog</p>
</div>
<div class="topnav" align="center">
HOME
LATEST
ALL
ABOUT
SEARCH
</div>
assets/style.css
#import url('https://fonts.googleapis.com/css?family=Indie+Flower');
body {
background-color: #D3D3D3;
margin: 0 0 100px;
font-family: "PT-Sans", sans-serif;
}
.header {
display: block;
width: 100%;
height: 200px;
background-image: url("./img/header-img.png");
background-repeat: no-repeat;
background-size: 100%;
background-size:cover;
background-position: center center;
}
.topnav {
background-color: #333;
overflow: hidden;
position: relative;
top: 0;
}
.topnav a {
display: inline-block;
color: #f2f2f2;
text-align: center;
padding: 14px 100px;
text-decoration: none;
font-size: 17px;
text-align: center;
}
.topnav a:hover {
background-color: #ddd;
color: black;
}
.topnav a.active {
background-color: #4CAF50;
color: white;
}
.header p {
color: white;
font-size: 50px;
text-align: center;
vertical-align: middle;
font-family: 'Indie Flower', cursive;
}
index.php
<?php
include($_SERVER["DOCUMENT_ROOT"]."/blog/assets/header.php");
?>
<head>
<link rel="stylesheet" type="text/css" href="style.css" />
<title>Create Blog</title>
<form action="send.php" method="POST" class="form">
<input type="text" name="title" placeholder="Title" class="input"><br>
<textarea name="blog-text" placeholder="Blog" class="input"></textarea>
</form>
style.css
.input {
width: 50%;
}
.form {
position: relative;
left: 25%;
}
add this in your stylesheet to fill the header 100%
.header{
width: 100%;
margin-left: 0!important;
margin-right: 0!important;
}
Check if that css file is being accessed first. If so then have the following
.header {
display: block;
width: 100% !important;
height: 200px;
background-image: url("./img/header-img.png");
background-repeat: no-repeat;
background-size: 100%;
background-size:cover;
background-position: center center;
}
If still not working add lines one by one and see the effect.
Let me know if you require any further help
.form {
position: relative;
/* left: 25%; */
margin: 0 auto;
text-align: center;
}
If the margin property has three values:
margin: 25px 50px 75px;
top margin is 25px
right and left margins are 50px
bottom margin is 75px
so change your body tag to remove the left and right margin, may be that is why the full width is not filled
There's quite a few things that look wrong here, but I've shuffled your code into one document for testing purposes and it looks like the form is pushing over to the side, which is then making the page width wider, therefore allowing your header to go wider.
So you need to either remove the left: 25% from the form or make give it a width of less than 75%.
You need to be careful to maintain clean code, it looks like you'll end up with two 'head' tags from what you've posted, one of which is not needed and the other is not closed properly.
i have tested this and it worked.when the size of explore become small without any horizontal scroll bar
<?php
include($_SERVER["DOCUMENT_ROOT"]."/blog/assets/header.php");
?>
<style>
.input {
width: 50%;
}
.form {
left: 25%;
}
</style>
</head>
<body>
<continer>
<div class="header"><br><br><br>
<p>My Blog</p>
</div>
<div class="topnav" align="center">
HOME
LATEST
ALL
ABOUT
SEARCH
</div>
<div class="form" style=" text-align: center;">
<form action="send.php" method="POST" class="form">
<input type="text" name="title" placeholder="Title" class="input"><br>
<textarea name="blog-text" placeholder="Blog" class="input"></textarea>
</form>
</div>
</continer>
</body>
</html>
Related
I need to make a pdf page where 90% of height will be container div with background with image inside which will fill whole 100% of the container. But it seems it is not possible in mpdf. CSS and html is simple.
<html>
<head>
<style>
#page {
margin-top: 14px !important;
margin-bottom: 14px !important;
margin-left: 20px !important;
margin-right: 20px !important;
}
body {
font-family: Sans-Serif !important;
box-sizing: border-box;
}
.section-header {
height: 25px !important;
line-height: 25px !important;
font-size: 20px;
margin: 0 0 7px 0 !important;
padding: 0 !important;
text-align: center;
}
.screenshot-container {
width: 100%;
height: 80%;
max-height: 80% !important; // This does not work
background-color: #f4f7fc;
text-align: center;
line-height: 100%;
border: 1px solid red;
}
.screenshot-container img {
height: auto;
max-height: 80%;
max-width: 100%;
}
</style>
</head>
<body>
<div class="info-container">
<h1>{$campaign['name']}</h1>
<div><b>Odkaz na detail kampane</b><br>
<div><b>Naplánovanie kampane: </b>{$campaign['date_start']->format('d.m.Y')} - {$campaign['date_stop']->format('d.m.Y')}</div>
<div><b>Dĺžka kampane:</b> {$campaign['day_diff']} dní</div>
<div><b>Počet lokalít:</b> {$campaign['location_count']}</div>
<div><b>Počet obrazoviek:</b> {$campaign['device_count']}</div>
<div><b>Počet prehratí:</b> {$campaign['impressions']}</div>
<h2>Celková suma</h2>
<div><b>Celkom bez DPH:</b> {$budget}{$currency}</div>
<div><b>Zľava {$discount_sales_percent}%:</b> {$discount}{$currency}</div>
<div><b>Cena po zľave bez DPH:</b> {$discount_price}{$currency}</div>
</div>
</div>
<pagebreak />
<div class="section-header"> </div>
<div class="screenshot-container">
<img src="var:screenshot" />
</div>
<pagebreak />
...
Here is the screenshot where you can see red border around the container which should be 80% height.
What is wrong with that? It looks like container ignores its max-height.
I tried searching and using the codes I found somewhere else where it suggests to put:
margin:0px;
, but it still doesn't resolve my issue about the GAP created between the divs of my file. Here's the code: [The first one's the Jquery, the second is for the CSS, and the last one is the body.]
jQuery(document).ready(function(){
var navOffset = jQuery(".nav").offset().top;
jQuery(".nav").wrap('<div class="nav-placeholder"></div>');
jQuery(".nav-placeholder").height(jQuery(".nav").outerHeight());
jQuery(window).scroll(function(){
var scrollPos = jQuery(window).scrollTop();
if(scrollPos >= navOffset){
jQuery(".nav").addClass("fixed");
}
else{
jQuery(".nav").removeClass("fixed");
}
});
});
body, html {
height: 100%;
background-color:#404040;
margin:0px;
}
.parallax {
background-image: url('images/bg.jpg');
height: 100%;
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
font-size:0;
margin-bottom:0px;
}
.parallax1 {
background-image: url('images/bg.jpg');
height: 46%;
font-size:0;
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
ul.header{
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
width:100%;
top:0;
display: inline-block;
text-align:center;
background-color: #0d0d0d;
}
.nav{
z-index:999;
}
.navlink {
display: inline-block
}
.fixed{
position: fixed;
top:0;
width:100%;
background-color:#222422;
}
.nav-placeholder{
margin:0 0 40px 0;
}
.navlink a{
font-family: caviar;
display: block;
color: #f3f3f3;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size:15pt;
}
.navlink a:hover{
background-color: #f1f1f1;
color:#0d0d0d;
transition-duration: 0.4s;
}
.caption {
position: absolute;
left: 0;
top: 50%;
width: 100%;
text-align: center;
color: #000;
}
.caption span.border {
background-color: #111;
color: #fff;
padding: 18px;
font-size: 25px;
letter-spacing: 10px;
}
<body>
<div class="parallax"></div>
<div class="caption">
<span class="border"> WELCOME </span>
</div>
<div class="nav">
<ul class="header">
<ul class="header-content">
<li class="navlink">Home</li>
<li class="navlink"> Foods </li>
<li class="navlink"> Beverages </li>
</ul>
</ul>
</div>
<!-- Here's where the gap appears -->
<div id="content" style="height:300px;background-color:#f2f2f2;font-size:36px;text-align:center;">
<p>Sample Facebook Icon</p>
</div>
<div class="parallax1"></div>
</body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script type="text/javascript" src="{{ asset('/js/js.js') }}"></script>
Couple of reasons:
p element has margins.
.nav-placeholder class has margin-bottom: 40px;
ul.header (which should be div.header) is displayed as
inline-block and pushes its parent height - leave its default
display as block.
if you are referring to the gap between your nav links, it is because display: inline-block; creates a gap by inserting a space between the elements. One solution to fix this is to set the parent container font-size: 0;.
.nav{
font-size: 0;
}
https://jsfiddle.net/unueg9zL/
The <p> you are adding inside #content is adding the gap, p elements have a default margin=1em (added by the browsers). You should set that margin to 0px explicitly on your CSS rules
#content p {margin:0}
https://jsfiddle.net/hkuo8xdx/
I am using dompdf to generate letters which I want to brand with various different companies branded paper. To do this I'm getting a background image via css. See example image at bottom. I then set appropriate margins to fit the content I want to write out into the white space. However I just want this letterhead to display on the first page only. At present it is repeating onto each page. My css looks like:
<html>
<head>
<meta charset="utf-8">
<title>{$pdf.title}</title>
<style type="text/css">
#page {
size: A4;
margin:0;
padding: 0;
}
body {
padding: {$branding.page_margin_top}cm {$branding.page_margin_right}cm {$branding.page_margin_bottom}cm {$branding.page_margin_left}cm;
font-size: 7pt;
font-family: helvetica !important;
background-image: url('{$base_url}pd-direct.png');
background-position: center center;
background-repeat: no-repeat;
font-size: 10pt;
}
#postal-address {
margin: 0cm;
margin-left: {$branding.address_offset_left}cm;
margin-top: {$branding.address_offset_top}cm;
margin-bottom: {$branding.address_offset_bottom}cm;
font-size: 10pt;
}
#date {
font-weight: bold;
}
</style>
</head>
<body>
<div id="page-body">
<div id="content">
{if $pdf.postal_address}
<div id="postal-address">
{$pdf.postal_address|nl2br}
</div>
{/if}
{$pdf.main_body}
</div>
</div>
</body>
</html>
How can I change this so the background image is only displayed on the first page output by dompdf?
See current html being rendered at: http://eclecticgeek.com/dompdf/debug.php?identifier=ccfb2785f8a8ba3e1e459cbd283ad015
You can put the letterhead as the background image in an div that overlaps the main content div and use z-index to organise the stacking order of the divs, so that background image will appears at the back.
This way, the background image will only show on the first page when you convert it to PDF using DOMPDF.
The CSS below works for A4#150dpi.
CSS
#page {
size: A4;
margin-top:0.5cm;
margin-bottom:0;
margin-left:0;
margin-right:0;
padding: 0;
}
body {
font-family: helvetica !important;
font-size: 10pt;
position: relative;
}
#overlay {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
background-image: url('http://www.showhousesoftware.com/pd-direct.png');
background-position: center top;
background-repeat: no-repeat;
z-index: -1;
}
#content{
padding: 3.5cm 0.50cm 5.00cm 0.50cm;
}
#postal-address {
margin: 0cm;
margin-left: 1.50cm;
margin-top: 0.00cm;
margin-bottom: 1.00cm;
font-size: 10pt;
}
#date {
font-weight: bold;
}
HTML
<body>
<div id="page-body">
<div id="overlay">
</div>
<div id="content">
......
</div>
</div>
</body>
I have a searchbar in my header, which I need centered horizontally and just a little bit above the bottom of the header. I was able to achieve this by using
display: flex;
justify-content: center;
align-items: center;
The problem I am having now is that although it is responsive when you make the window smaller horizontally, It is a total mess when you resize the window vertically. I am pretty sure it's because I used margin-top: 350px; to set the vertical position. I also would much rather not use flex display because it isn't supported by much yet. Below is a screenshot of how it looks normaly, and one of how it looks when the view is altered vertically. Also the code pertaining to it. If anyone could help me figure out how to get the searchbar to be responsive vertically, that would be great!
How it is normally:
How it looks when you change the screen size vertically (the searchbar is behind the images):
HTML:
<div class="outcont">
<div id="top" class="header">
<div class="wrap">
<div class="col1"><img class="logoi" src="<?php bloginfo('stylesheet_directory'); ?>/images/main-logo.png" alt="<?php bloginfo('name'); ?> Logo" /></div>
<div class="col2"><?php wp_nav_menu(array('menu' => 'global-nav', 'container' => '')); ?></div>
</div>
<?php get_search_form(); ?>
</div>
CSS:
#searchform div {
shadow: 4px 7px 4px #000000;
margin-top: 350px;
display: flex;
justify-content: center;
align-items: center;
}
#searchform .text {
font-family: 'Merriweather';
padding-left: 35px;
height: 75px;
width: 600px;
font-size: 220%;
color: #B7B7B7;
border-radius: 50px;
background: white url('images/search-img.png') no-repeat;
background-position: 96% center;
}
#searchform .text:focus {
background-image: none;
}
#searchform .text img {
margin-right: 25px;
}
Check out this Fiddle I have made for you.
I have my main div with a background-image and the input inside of that div with the css like so:
#hero {
background: url('https://i.ytimg.com/vi/ReF6iQ7M5_A/maxresdefault.jpg') no-repeat center center scroll;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
position: relative;
width: 100%;
height: 100vh;
margin-bottom: 0px;
right: 0;
}
#hero input {
position: absolute;
width: 200px;
height: 34px;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;
padding: 5px 10px;
border-radius: 50px;
outline: none;
}
This way the textbox will always stay in the center of the image no matter how the browser is scaled. In order for this to work the textbox must have a defined width and height.
So in your case replace your css for the searchbox with the css I have for #hero input and set the parent divs position to relative with position: relative;.
Please let me know how this works out for you.
Hope this helps!
I'm getting back into web design after a several year break, so a lot of the tips and tricks that I used on a regular basis before just don't seem to be working. I'm designing a guild website for my World of Warcraft guild for some practice, but I'm having issues getting the div background images to show up properly on the page.
The page consists of a container DIV, a header DIV, a Menu DIV, and a three column layout, followed of course by a footer div. Above the menu I have a little artistic background I'm susing, and I managed to get that one to show up; however, I can't get the proper image to show up above the left or right bars properly. I've searched the net a ton, and am still dumbfounded as to what I'm doing wrong. Here is a screen shot of what I sort of want the layout to look like: http://s19.postimage.org/7svzmuaf7/Layout_V2.jpg
Currently, this is what I'm getting when you visit the website in any major browser: http://cirquedufreak.net78.net/
There is obviously some differences in the two, as one is just a jpg, and the other is a css/html combo, and that I'm aware of. Thank you for any help you can provide.
Source Code:
index.php:
<?php
session_start();
include("wowarmoryapi/BattlenetArmory.class.php");
?>
<!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>Home - Cirque du Freak of Vashj</title>
<link rel="stylesheet" type="text/css" href="layout.css" />
<link rel="shortcut icon" type="image/x-icon" href="/favicon.ico">
</head>
<body>
<div id="container">
<div id="header"> </div>
<div id="menu">
<ul>
<li>Home</li>
<li>Roster</li>
<li>Forums</li>
<li>About</li>
<li>Contact</li>
<li>Books</li>
</ul>
</div>
<div id="leftbar">LEFTBAR</div>
<div id="content">
<div id="gmod">
<h1>Important Message</h1>
<p>This is where any "breaking news" or important information that you want to give to the players will be displayed.</p>
</div>
</div>
<div id="rightbar">
<p>For an invitation, contact one of the following players in game:</p>
<?php
?>
</div>
<div id="footer">©2012 Cirque du Freak Guild of Vashj; All Rights Reserved.<br />World of Warcraft and related images and materials are © Blizzard Entertainment.</div>
</div>
</body>
</html>
layout.css:
#charset "utf-8";
/* CSS Document */
/* CSS LAYOUT BEGIN */
body {
margin: 0;
padding: 0;
background-color: #000;
color: #FC3;
text-align: center;
}
div#container {
margin: 0 auto;
text-align: left;
width: 1024px;
height: auto;
}
div#header {
width: 1024px;
height: 147px;
background: url(images/v2_header.png);
}
div#menu {
width:1024px;
height: 70px;
text-align:center;
background: url(images/v2_menuBG.png);
}
div#leftbar {
float: left;
width: 170px;
height: 525px;
min-heigh: 150px;
background-image: url(images/v2_barBG.png) no-repeat;
display: inline-block;
background-position: top left;
}
div#content {
float: left;
width: 684px;
min-height: 50px;
height: 525px;
}
div#rightbar {
float: right;
width: 170px;
height: 525px;
min-height: 50px;
background-image: url(images/v2_barBG.png) no-repeat;
}
div#footer {
width: 1024px;
height: 50px;
text-align: center;
clear: both;
}
/* CSS LAYOUT END */
/* CSS MENU BEGIN */
#menu ul {
margin: 0;
padding: 0;
float: left;
list-style: none;
width: 1024px;
}
#menu ul li {
display: inline;
}
#menu ul li a {
float: left;
text-decoration: none;
padding: 10.5px 11px;
width: 140px;
color: #FF0;
font-weight: bold;
font-size: 24px;
background-color: transparent;
vertical-align: text-bottom;
}
#menu ul li a:visited {
color: #FF0;
}
#menu ul li a:hover, #menu ul li .current {
color: #F00;
text-decoration: underline;
background-color: transparent;
}
/* CSS MENU END */
/* LEFT BAR CSS BEGIN */
/* LEFT BAR CSS END */
/* CONTENT BOX CSS BEGIN */
#content div#gmod {
width: 500px;
height: 150px;
text-align: center;
border: #FFF 3px solid;
background-color: #000;
margin: 0 auto;
color: #FFF;
overflow-style: auto;
overflow: scroll;
overflow-x: hidden;
padding-left: 4px;
padding-right: 4px;
}
#content div#gmod h1 {
text-align: center;
color: #F00;
font-size: 24px;
font-weight: bold;
text-decoration: underline;
padding: 0px 5px;
/* CONTENT BOX CSS END */
/* RIGHT BAR CSS BEGIN */
/* RIGHT BAR CSS END */
/* FOOTER CSS BEGIN */
#footer {
color: #999;
text-align: center;
}
/* FOOTER CSS END */
Thank you very much for taking the time to assist me with this problem.
Don't use
background-image: url(images/v2_barBG.png) no-repeat;
but
background: url(images/v2_barBG.png) no-repeat;
background-image: url(images/v2_barBG.png) no-repeat; should be background-image: url(images/v2_barBG.png); background-repeat: no-repeat;
background-image: url(images/v2_barBG.png) no-repeat; <-- no-repeat should be declared seperatly like this: background-repeat: no-repeat;