Working through a tutorial to learn about CSS and I am trying to figure out how some whitespace is being created. When I inspect the page, the whitespace is within the body tag. I thought the body tag would put all text within the background image. But when I re-size the window there is various degrees of white space created (as you can see in the image).
I would like to create a new row for the More Text so that when the screen is re-sized smaller, the row remains below the image--instead of creating the whitespace between. Thanks for any help.
html
{% load staticfiles %}
<html>
<head>
<title>Title</title>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css">
<link rel="stylesheet" href="{% static 'css/blog.css' %}">
<link href="//fonts.googleapis.com/css?family=Lobster&subset=latin,latin-ext" rel="stylesheet" type="text/css">
</head>
<body>
<div class="page-header">
<h1>Title</h1>
</div>
<div class="page-footer">
<h1>More text</a></h1>
</div>
</body>
</html>
css
h1 a {
color: #666699;
font-family: 'Lobster';
}
body {
background-image: url('../images/Death_to_stock_photography_wild_6.jpg');
background-repeat: no-repeat;
background-size: 100%;
}
.page-header {
background-color: transparent;
margin-top: 0;
padding: 20px 20px 20px 40px;
}
.page-footer {
background-color: transparent;
position:absolute;
padding: 20px 20px 20px 40px;
bottom:0;
}
.page-header h1, .page-header h1 a, .page-header h1 a:visited, .page-header h1 a:active {
color: gray;
font-size: 26pt;
text-decoration: none;
position: relative;
bottom: 10px;
height: 5px;
}
.content {
margin-left: 40px;
}
h1, h2, h3, h4 {
font-family: 'Lobster', cursive;
color: #666699;
}
You can use media queries to define attributes for a given element for smaller screen.
#media screen and (max-width: 800px){
.myclass{
myattribute:myvalue;
}
}
A easier and better solution would be using a third party framework like bootstrap or foundation which has a grid system for responsive design.
I looked at your css on codepen:
http://codepen.io/artchibald/pen/KrJdpY
It seems you have a bottom 0 declared in the css, below is the corrected version:
h1 a {
color: #666699;
font-family: 'Lobster';
}
body {
background-image: url('../images/Death_to_stock_photography_wild_6.jpg');
background-repeat: no-repeat;
background-size: 100%;
}
.page-header {
background-color: transparent;
margin-top: 0;
padding: 20px 20px 20px 40px;
}
.page-footer {
background-color: transparent;
position:absolute;
padding: 20px 20px 20px 40px;
/* REMOVE THIS--------bottom:0; */
}
.page-header h1, .page-header h1 a, .page-header h1 a:visited, .page-header h1 a:active {
color: gray;
font-size: 26pt;
text-decoration: none;
position: relative;
bottom: 10px;
height: 5px;
}
.content {
margin-left: 40px;
}
h1, h2, h3, h4 {
font-family: 'Lobster', cursive;
color: #666699;
}
Related
Just curious, why when I do print preview the headings are still colored after I've set a class selector to black? If by putting .container within the media rule and setting the color too black, should every text including headings be set to black? I know I can easily add h1, h2... I'm just curious as to why I can not set a selector to a specific color and everything within that selector be set to that during print? Thanks for the feedback!
/* reset style */
html {
font-size: 12px;
}
/* body and page container */
.container {
max-width: 600px;
margin: 0 auto;
border: 3px red;
}
/* headings */
header {
text-align: center;
padding: .4em;
background-color: darkgrey;
}
h1 {
text-shadow:2px -4px 5px black;
color: #EADCDC;
font-size: 5em;
}
h2 {
color: brown;
font-size: 3em;
}
p {
font-size: 1.2em;
line-height: 1.4em;
}
body {
font-family: Tahoma, Arial, Helvetica, sans-serif;
background-color: #dee9f9;
}
h3 {
color: green;
font-size: 2em;
}
article {
background-color: gold;
padding: 3%;
}
.accent {
text-decoration: underline;
text-align: center;
line-height: .8em;
}
/* unordered list */
ul {
list-style: circle;
font-size: 1.2em;
line-height: 1.4em;
}
aside {
background-color: #EADCDC;
width: 45%;
padding: 2%;
margin: 2%;
box-shadow: 3px 3px 3px black;
border-radius: 30px;
float: right;
line-height:4em;
}
footer {
padding: 0.6em;
color: ivory;
background-color: darkgrey;
text-align: center;
}
/// This is what I am referring to
#media print {
body, .container, aside, article {
color: black;
background-color: white;
box-shadow: none;
}
}
#page {
margin: 1in;
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Battle</title>
<meta charset = "utf-8">
<meta name = "viewport" content = "width=device-width">
<link href="https://fonts.googleapis.com/css2?family=Bree+Serif&display=swap" rel="stylesheet">
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="container">
<header>
<h1>Super Battle</h1>
</header>
<aside>
<h2 class="accent"> ARE YOU READY?</h2>
<h3>DATE</h3>
<p>10/31/2022</p>
<p>12AM - 12pm</p>
<h3>LOCATION</h3>
<p>LAS VEGAS</p>
<p>NEVADA</p>
<p>MGM GRAND CASINO</p>
</aside>
<article>
<h3>PRICES</h3>
<p>$200General</p>
<p>$400 VIP</p>
<p>$1000 ALL ACCESS</p>
<h3>SPONSORS</h3>
<ul>
<li>ELON MUSK</li>
<li>DONALD TRUMP</li>
<li>TEKASHI 69</li>
<li>BARACK OBAMAS X WIFE</li>
</ul>
</article>
<footer>
<p> www.LASVEGASBATTLE.us</p>
</footer>
</div>
</body>
</html>
If I want to change the background color of my text inside the parallax scrolling effect there's a white bar on top of it. I tried changing every color that I wrote down but it didn't disappeared. You can see the white bar here. Do I need to change a color in CSS or do I need to need to create a new div?
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
* {box-sizing: border-box;}
.parallax {
background-image: url("pexels-philippe-donn-1169754.jpg");
/* specific heigh */
min-height: 500px;
/*parallax scrolling effect */
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
body {
margin: 0;
font-family: Arial, Helvetica, sans-serif;
}
.header {
overflow: hidden;
background-color: #f1f1f1;
padding: 20px 10px;
}
.header a {
float: left;
color: black;
text-align: center;
padding: 12px;
text-decoration: none;
font-size: 18px;
line-height: 25px;
border-radius: 4px;
}
.header a.logo {
font-size: 25px;
font-weight: bold;
}
.header a:hover {
background-color: #ddd;
color: black;
}
.header a.active {
background-color: dodgerblue;
color: white;
}
.header-right {
float: right;
}
#media screen and (max-width: 500px) {
.header a {
float: none;
display: block;
text-align: left;
}
.header-right {
float: none;
}
}
</style>
</head>
<body>
<div class="header">
Space, Universe And Other Stuff
<div class="header-right">
<a class="active" href="#home">Home</a>
Chat
Personal Projects
Contact
About
</div>
</div>
<div class="parallax"></div>
<div style="height:700px;background-color:lightgrey;font-size:36px">
<div style="padding-left:20px">
<h1>Text</h1>
<p>Text....</p>
<p>More text...</p>
</div>
<div class="parallax"></div>
</body>
</html>
Default margin to h1 is causing the issue.
....
<div style="padding-left:20px">
<h1 style="margin-top:0px">Text</h1>
<p>Text....</p>
<p>More text...</p>
</div>
....
you should add a class instead of adding style attribute
It appears to be the <h1> tag's default margin sticking out the top. Try clearing the margin with
h1 {margin: 0;}
If you do need some gray space above the <h1> you could add padding instead.
Set margin: 0; on your h1 element.
* {
box-sizing: border-box;
}
h1 {
margin: 0;
}
.parallax {
background-image: url("https://i0.wp.com/www.fmxexpress.com/wp-content/uploads/2020/09/pexels-philippe-donn-1169754.jpg");
/* specific heigh */
min-height: 500px;
/*parallax scrolling effect */
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
body {
margin: 0;
font-family: Arial, Helvetica, sans-serif;
}
.header {
overflow: hidden;
background-color: #f1f1f1;
padding: 20px 10px;
}
.header a {
float: left;
color: black;
text-align: center;
padding: 12px;
text-decoration: none;
font-size: 18px;
line-height: 25px;
border-radius: 4px;
}
.header a.logo {
font-size: 25px;
font-weight: bold;
}
.header a:hover {
background-color: #ddd;
color: black;
}
.header a.active {
background-color: dodgerblue;
color: white;
}
.header-right {
float: right;
}
#media screen and (max-width: 500px) {
.header a {
float: none;
display: block;
text-align: left;
}
.header-right {
float: none;
}
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div class="header">
Space, Universe And Other Stuff
<div class="header-right">
<a class="active" href="#home">Home</a>
Chat
Personal Projects
Contact
About
</div>
</div>
<div class="parallax"></div>
<div style="height:700px;background-color:lightgrey;font-size:36px">
<div style="padding-left:20px">
<h1>Text</h1>
<p>Text....</p>
<p>More text...</p>
</div>
<div class="parallax"></div>
</body>
</html>
I creating a page and was lost when I noticed that when I increase or decrease the font size of the header, the surrounding space increases in a drastic size. I don't have a padding for the h1 tag, but it looks like it is being added. I tried removing the padding for the nav, but it is only affecting the nav text itself, not the extra space that's bothering me.
Here is the code:
body {
margin: 0;
font-family: Caviar, "Times New Roman", sans-serif;
float: clear;
text-align: center;
}
#main {
width: 100%;
padding: 0;
}
/* start the whole heading section */
h1 {
font-size: 5em;
color: #000000;
font-family: "Alex Brush", "Times New Roman", sans-serif;
padding-left: 2%;
float: left;
}
nav h2 {
font-weight: normal;
}
nav {
float: right;
font-family: Junction, "Times New Roman", sans-serif;
font-size: 1.1em;
/*padding-top: 5.2%;
padding-right: 2%;*/
}
nav a {
color: #000000;
text-decoration: none;
}
nav a:hover {
text-decoration: underline;
}
nav a:visited {
color: #000b26;
}
#header {
background-color: #FF6978;
display: block;
width: 100%;
text-align: left;
position: fixed;
overflow: hidden;
top: 0;
z-index: 999;
box-shadow: 5px 6px 5px #000000;
}
/*end heading section*/
#container {
margin: 0 auto 0 auto;
margin-left: 0 auto;
width: 96%;
margin-top: 13%;
}
.small_head {
font-family: Capsuula, "Times New Roman", sans-serif;
font-size: 2.2em;
border: 3px solid #FFFF61;
padding: .5% 5% .5% 5%;
display: inline-block;
margin: 0 auto;
}
<!doctype html>
<html lang="en">
<head>
<title>Check</title>
<meta charset="UTF-8">
<link href="styles.css" rel="stylesheet" type="text/css">
<link href="font.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="main">
<!--open main div-->
<div id="header">
<h1>Checking Head</h1>
<nav>
<h2>
Navigator
</h2>
</nav>
</div>
<!--close header-->
<div id="container">
<div class="small_head">Small Head</div>
</div>
<!--close container-->
</div>
<!--close main-->
</body>
</html>
Please help!
Note: I have embedded fonts in another css, so please ignore the fonts.
Thank you
This is because the <h1> tag naturally has a margin applied on it scaling with font-size. You want this in your css:
h1 { margin:0 }
The h1 element has margin that is related to the font size via em. If you increase the font size, em is relative to the font size and, thus, margin is increased.
Or you can use max-height: <number of pixels> px instead of h1 { margin:0 } and you will not affect the h1 margins.
I'm trying to get my conatiner.png transparent background to apply to my "indexbar" div, but it just simply won't show. It works on my main container, I'm doing it the same way in my style.css but it won't apply.
index.html:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="style.css">
<title>Reapers Overpoch Store</title>
</head>
<body>
<center>
<div class="banner"><img src="images/banner.png" width="1000" height="400"></div>
<div class="indexbar"><p style="color: #FFF; font-size: 24px">Loadouts | Crates | Buildings | Vehicles & Insurance | Misc</p></div>
<div class="container">
<div class="content">
<h2 style="color: #FFF">Welcome to the Reapers Overpoch Store!</h2>
<p style="color: #FFF">This is where you will find all the donator perks for the Reapers Midnight Recon DayZ servers! All payments are final and specified items will be charged monthly if not cancelled! All items are always up to date and include full details along with pictures.</p>
<p style="color: #FFF"><strong>How to Donate:</strong> If you would like to purchase an item, then click the <strong><i>Buy Now</i></strong> or <strong><i>Donate</i></strong> button associated with it and continue via PayPal.</p>
<p style="color: #FFF"><strong>Delivery Notice:</strong> We do our best to get your items either applied to your character, or added in-game as soon as possible. If there are any delays, it due to unavailability of an admin or coder.</p>
</div>
</div>
</center>
</body>
</html>
style.css:
body {
font: 100%/1.4 Verdana, Arial, Helvetica, sans-serif;
background-image: url("images/background.jpg");
background-size: cover;
background-attachment: fixed;
margin: 80;
padding: 0;
color: #000;
}
ul, ol, dl {
padding: 0;
margin: 0;
}
h1, h2, h3, h4, h5, h6, p {
margin-top: 0;
padding-right: 15px;
padding-left: 15px;
}
a img {
border: none;
}
a:link {
color: #42413C;
text-decoration: underline;
}
a:visited {
color: #6E6C64;
text-decoration: underline;
}
a:hover, a:active, a:focus {
text-decoration: none;
font-weight: normal;
}
.container {
width: 1000px;
background-image: url("images/container.png");
margin: 0 auto;
}
.content {
padding: 10px;
font-weight: normal;
margin: 10px;
}
.banner {
height: 400px;
width: 1000px;
margin: 10px;
}
.fltrt {
float: right;
margin-left: 8px;
}
.fltlft {
float: left;
margin-right: 8px;
}
.clearfloat {
clear:both;
height:0;
font-size: 1px;
line-height: 0px;
.container .content p em {
font-size: 50%;
}
.container .content p {
}
.banner {
margin: 10px;
height: 400px;
width: 1000px;
}
.indexbar {
background-image: url(images/container.png);
margin: 10px;
height: 50px;
width: 1000px;
padding: 10px;
}
Thanks in advance.
You are missing the quotes:
.indexbar {
background-image: url(images/container.png);
margin: 10px;
height: 50px;
width: 1000px;
padding: 10px;
}
Should be:
.indexbar {
background-image: url("images/container.png");
margin: 10px;
height: 50px;
width: 1000px;
padding: 10px;
}
The only difference I see is that you dont have quotes in but that not usually a problem for me
background-image: url(images/container.png);
I used a border to figure out that my wrapper is only wrapping my Header and I'm stumped as to why...I want to wrap the Header, all the way down to the footer... Anyone have any pointers?
I've seen a lot of articles say to specify a width and the height is set to auto if not stated, too, right?
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="index.css" />
<title>Personal Transportation/Errands Services</title>
</head>
<body>
<header>
<div id="headleft">
<img src="images/new logo flattened.jpg" />
</div>
<div id="headright">
(717)***-****
<br />
********#yahoo.com
</div>
</header>
<nav>
Home
Contact
</nav>
<article>
Test
</article>
<aside>
<img src="images/car 1.png" id="car" />
</aside>
<footer>
Ftest
</footer>
</body>
</html>
/* Makeshift CSS Reset */
{
margin: 0;
padding: 0;
}
/* Tell the browser to render HTML 5 elements as block */
footer, header, aside, nav, article {
display: block;
}
body{
width:940px;
height: 100%;
margin:0 auto;
border-style: solid;
border-width: 3px;
}
header {
background-color: #1a8cff;
}
nav {
width: 100%;
float: left;
text-align: right;
background-color: #ff7f00;
font-family: bold 'Oswald', sans-serif;
color: #ffffff;
letter-spacing: 1px;
}
a {
text-decoration: none;
}
/* unvisited link */
a:link {
color: #FFFFFF;
}
/* visited link */
a:visited {
color: #FFFFFF;
}
/* mouse over link */
a:hover {
color: #FFFF00;
}
/* selected link */
a:active {
color: #FFFF00;
}
#headleft {
display:inline;
background-color: #1a8cff;
width: 100%;
}
#headright {
height: 87px;
padding-top: 37.5px;
vertical-align: middle;
display: inline;
float: right;
background-color: #1a8cff;
border-style: solid;
border-width: 3px;
}
body {
margin: 0 auto;
width: 1000px;
font: 13px/22px Helvetica, Arial, sans-serif;
background-color: white;
background-size: 100%;
}
article{
float: left;
}
aside{
float: right;
}
footer{
float:left;
background-color: #1a8cff;
width: 100%;
}
you need to clear your floated elements, you can use a clearfix or an empty div set to clear:both.
FIDDLE
You could also use a wrapper inside the body that wraps every element on the page and set that to overflow: hidden
ALT FIDDLE