Beginner, struglling to see why page has an unknown right margin - javascript

/*
Project Name: Monthly Resolutions
Client: One Month
Author: Christopher Castig | #castig
*/
* {
-moz-box-sizing: border-box; /* Firexfox */
-webkit-box-sizing: border-box; /* Safari/Chrome/iOS/Android */
box-sizing: border-box; /* IE */
font-family: 'Lato', sans-serif;
}
html {
margin: 0px 0px 0px 0px;
}
.clear {
clear: both;
}
h1 {
padding: 0px 0px 0px 0px;
font-size: 60px;
margin-bottom: 0%;
letter-spacing: -4px;
margin-left: 100px;
line-height: 1;
margin-top: 100px;
}
h6 {
font-size: 17.5px;
margin-top: 0%;
margin-left: 100px;
}
body {
background: url(/Users/harshfernandes/Desktop/Coding/fourth-code-resources/images/notebook.png); /* add a fallback color of #d6d6d6 */
color: #000000;
font-family: 'Lato', sans-serif;
font-size: 100%;
width: 1200px;
}
#rheading {
font-size: 40px;
margin-top: 30px ;
margin-bottom: 2px;
}
#container {
width: 1200px;
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
}
#caption {
color: rgb(88, 88, 88);
font-size: 15px;
margin-bottom: 70px;
}
#content {
background: white;
float: left;
width: 680px;
padding-left: 30px;
padding-right: 30px;
margin-left: 100px;
}
#sidebar {
float: left;
background: white;
width: 310px;
border: 3px;
border-style: solid;
border-top: none;
border-right: none;
border-color:rgb(192, 192, 192);
margin-left: 10px;
padding: 15px 15px 15px 15px;
margin-right: 100px;
}
#footer {
margin-top: 30px;
margin-bottom: 20px;
margin-left: 100px;
}
a {
color: orange;
text-decoration: none;
}
.image {
border-radius: 50%;
margin-left: auto;
margin-right: auto;
display: block;
}
blockquote {
font-style: italic;
border-left: 4px solid gray;
padding-left: 20px;
margin-left: 0px;
}
<!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">
<meta name="description" content="">
<meta name="author" content="Chris Castiglione, and the One Month team">
<title>Monthly Resolutions by Harsh Fernandes</title>
<link href='http://fonts.googleapis.com/css?family=Lato' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="fourth-code-resources/css/style.css">
</head>
<body>
<div id="container">
<div id="header">
<h1>Monthly Resolutions</h1>
<h6>Dreaming Aloud. 30 days at a time.</h6>
</div>
<!--header-->
<div id="content">
<p id="rheading"> Learn to Surf </p>
<img src="fourth-code-resources/images/surfing.jpg" alt="surf image" class="aligncenter" width="620px">
<p> This april I will travel to the Carribean and take surfing lessons.</p>
<hr>
<p id="caption">My April Resolution by Harsh Fernandes</p>
<p id="rheading">Read Everyday</p>
<img src="fourth-code-resources/images/book.jpg" alt="book" class="aligncenter" width="620px">
<p>This Month I will read at least 50 pages everyday, including weekends.</p>
<hr>
<p id="caption">My March Resolution by Harsh Fernandes</p>
<p id="rheading">Meditate</p>
<img src="fourth-code-resources/images/meditate-girl.jpg" alt="Meditate" class="aligncenter" width="620px">
<p>I will take a meditation class and practice meditating at least 20 minutes everyday for the month. Hopefully I won't fall asleep every time I meditate.</p>
<hr>
<p id="caption">My February Resolution by Harsh Fernandes</p>
</div>
<!--content-->
<div id="sidebar">
<img class="image" src="fourth-code-resources/images/chris-castiglione.jpg" alt="Chris">
<p>This blog was made by Harsh Fernades (I don't look like that)</p>
<h3>Follow Me</h3>
<ul>
<li>Twitter</li>
<li>Instagram</li>
<li>Facebook</li>
</ul>
<h3>Quote of the Day</h3>
<blockquote>
<p>"We are what we repeatedly do. Excellence, then, is not an act, but a habit."</p>- Aristotle</blockquote>
</div>
<!--sidebar-->
<div class="clear"></div>
<div id="footer">
Made with the help of One Month HTML by Chris Castglione
</div>
<!--footer-->
</div>
<!--container-->
</body>
</html>
strong text
I am learning to code through this website and for my first proper project, we had to build a static website which has to look as similar to the screenshot. I got everything right except for the margin on the right. I even tried using inspect element and it appears to be coming from my body but even after setting my body's margin to 0, nothing changed. Since this is for beginners, it shouldnt be that difficult but I am REALLY struggling with this for hours. Please help me.
This is what it is supposed to look like
This is what it looks like at 100% zoom

It does look pretty close but here are the main issues:
Margin: 0 is All around the body element and the .container class, and in terms of default that means everything is pushed to the left, there is not default centering.
With a static 100px margin and a float: left on your #content it does give a close approximation of what the image is, but again this is based on your screen size. If your screen were widened it would look incorrect from left to right.
SOLUTION: The simplest solution for things like content and containers, or simply body elements, is
{ margin-left: auto; margin-right: auto; }
As you did with the images.
If you want to do it in shorthand you can declare multiple margin attributes in one line, such as Top & bottom being 0 margin and left and right being auto would be
{ margin: 0 auto;}
Source for shorthand
https://developer.mozilla.org/en-US/docs/Web/CSS/margin

This will help you, change your style (body & #container) like this :
body {
background: url(/Users/harshfernandes/Desktop/Coding/fourth-code-resources/images/notebook.png); /* add a fallback color of #d6d6d6 */
color: #000000;
font-family: 'Lato', sans-serif;
font-size: 100%;
width: 100%;
overflow-x: hidden;
}
#container {
display: table;
margin: 0 auto;
}

Related

Why does my bottom right image keep getting stretched?

I'm new at coding (especially html/css/js) and for some reason, my bottom right image, keeps getting strected and it's not at the bottom right. The original image's resolution is 2280 x 2280.
This is for school. Is there any way to fix this simply? I'm really not sure where the error is.`
body {
background-image: url("https://lh3.googleusercontent.com/3ZUxEMdTqMRqUSdgVZ2o-g64VwIIpg9vrudRJ_sgHc0sH8kSyw2wniPdctzoJvYkIWxCdMWG7z02RtSndmuDdtuBRbnC-KiCjJIIWitWyTvbOlSIycuZTwTFYhqGr2qj3YF8K84rlA=w2400?source=screenshot.guru");
height: 100%;
background-position: center;
background-repeat: repeat;
background-size: cover;
font-family: 'Carter One', cursive;
color: white;
}
h1 {
color: white;
text-align: center;
}
h2 {
color: white;
text-align: center;
}
img {
border: 5px solid #FFFFFF;
}
body, html {
height: 100%;
margin: 0;
font-family: 'Carter One', cursive;
}
.topnav {
overflow: hidden;
background-color: #333;
}
.topnav a {
float: left;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
.topnav a:hover {
background-color: #ddd;
color: black;
}
.topnav a.active {
background-color: #F3721D;
color: white;
}
.top_left{
float: left;
position: absolute;
left: 16px;
}
.right {
float: right;
position: absolute;
top: 200px;
right: 16px;
}
.bottom_left {
float: left;
bottom: 0px;
left: 16px;
z-index: 10;
padding: 0px;
margin: 500px 500px 100px 16px;
}
.bottomright {
float: right;
bottom: 0px;
right: 16px;
z-index: 10;
padding: 0px;
margin: 500px 16px 100px 500px;
}
<!DOCTYPE html>
<html>
<head>
<title>Charlotte's super cool art gallery</title>
<link rel="stylesheet" href="C:\Users\blazette\Downloads\bs\CSS\mystyle.css">
<link href="https://fonts.googleapis.com/css2?family=Carter+One&display=swap" rel="stylesheet">
</head>
<body>
<div class="topnav">
<a class="active" href="#home">Home</a>
Commissions
About
</div>
<div class="cubed">
<h1>I design stuff.</h1>
</div>
<div class="cubed">
<h2> My works.</h2>
</div>
<div class="top_left">
<img src="https://lh3.googleusercontent.com/nXUNj-kqfceSzKATH6slZLbb10j9p-WUilkT8v5EFBoA8wsfPJHxaBflhe51roafWlM8FV8z8rlOI4ET_O5j0pyHCoMN9W0_y8XGBcwsS7PSmBMtg-_K6x6VpoxQ0zts8C77DtR7nw=w2400?source=screenshot.guru" img width="310" height="372" id="top_left">
<p>
A digital illustration of Sherlock Holmes <br>from the TV series Sherlock.
</p>
</div>
<div class="bottom_left">
<img src="https://lh3.googleusercontent.com/AiNJsDbDBkv0rXUj0wEe-vdggMKBTNFEyfB-Ukw9DrsLAKj7I_-jWjxOPYMG50ItNXolThQesF3LnVyjsuPSRkhln0nmoL1cdEewTr7H03w2JauCUqseab2Wol-9mP8Adv0dT18iiw=w2400?source=screenshot.guru" img width="310" height="372">
<p>
A digital illustration of Clockson. An <br>original character based on antique clocks
</p>
</div>
<div class="right">
<img src="https://lh3.googleusercontent.com/9NRWdbN3EqE5u6Z4cZDZmBVu2Ar3o8lcBR09C8gtTXDmz0rDdZRuaL23UDM7B-bgBVSfg_4w4lvZiV4I6qwDlHoBsYCbgjybw5ZOGPtu_vj-8whkKHtaKN9PwbNEDix-RHD2zMHLrQ=w2400?source=screenshot.guru" img width="310" height="372" id="right">
<p>
Doctor Who fanart of the 13th Doctor.
</p>
</div>
<div class="bottomright">
<img src="https://lh3.googleusercontent.com/BhntO9ci2WyceI-7qWdlNzsUcS0Bo8_29s2HDO09gM2nSV6Syehodp5q14wQ9vgUUpE8KL9elU9z52xLHDYhigypqpAnFO0inqgoW1fOlTRwlCeXwH6uppVSLBjHBKMfXfQ14xlIJw=w600-h315-p-k" width="310" height="310">
</div>
</body>
</html>
`
You're hard coding the image width and height, it may be the case that some of those images aren't actually that dimension. Try and see if changing the width and height fixes it. Change the width and height in the html tag for the

How to apply Dark Theme Using CSS File

I have this code
/* Themes.css */
:root {
--headerBG: #222;
--headerColor: #fff;
--codeBoxBG: #333;
--codeBoxColor: #fff;
--codeHeaderBG: #121212;
--codeColor: #fff;
--bodyBG: #ccc;
--bodyColor: #000;
--linkColor: #ccc;
--linkHover: #000;
}
/* Styles.css */
#import url('https://fonts.googleapis.com/css2?family=Georama:ital,wght#0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
* { box-sizing: border-box; margin: 0; padding: 0; transition: all .2s ease-in-out; }
body { font-family: 'Georama', sans-serif; width: 100%; background: var(--bodyBG); color: var(--bodyColor); }
header {
background-color: var(--headerBG);
min-height: 300px; min-width: 100vw;
color: var(--headerColor);
display: block;
margin-left: auto;
margin-right: auto;
text-align: left;
padding: 80px 180px 50px 180px;
}
article { padding: 80px 180px 50px 180px; }
header h1 { font-size: 2.2em; margin-bottom: 10px; }
header h2 { font-size: 1.2em; margin-bottom: 30px; }
header a, nav a { color: #ccc; text-decoration: none; }
a:hover { color: #00aeff; }
p { margin-bottom: 8px; }
img { max-width: 100%; display: block; margin: 20px auto; }
article a { color: var(--linkColor); text-decoration: none; }
article a:hover { color: var(--linkHover); }
nav {
height: 50px; padding: 15px;
width: 100%; color: #fff;
background-color: #535353;
align-items: center;
}
nav a { margin: auto 3px; }
nav .items { float: right; }
.heading { margin-bottom: 10px; }
.heading2 { margin-top: 20px; margin-bottom: 10px; }
hr { margin: 30px auto; }
hr.hr1{ border-top: 3px solid #8c8b8b; }
hr.hr2 { border-top: 5px solid #8c8b8b; }
.codebox {
padding: 10px;
font-size: 1em;
line-height: 1.3;
color: var(--codeBoxColor);
background-color: var(--codeBoxBG);
border-radius: 0px 0px 6px 6px;
margin-bottom: 10px;
overflow: auto;
}
code { font-size: 1em; line-height: 1.3; }
.codeheader {
padding: 5px 5px 5px 10px;
font-size: 1.1em;
color: var(--codeColor);
border-radius: 6px 6px 0px 0px;
user-select: none;
background: var(--codeHeaderBG);
border-bottom: 2px solid #00aeff;
}
.codeheader div {
margin-top: 3px;
height: .6em; width: .6em;
background: #fff;
border-radius: 50%;
display: inline-block;
}
.codeheader div:first-child { background: #ff4a4a; }
.codeheader div:nth-child(2) { background: #ffc64a; }
.codeheader div:last-child { margin-right: 6px; background: #59ff4a; }
<!DOCTYPE html>
<html lang="en">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.9.0/css/all.min.css">
<link rel="stylesheet" href="themes.css">
<link rel="stylesheet" href="styles.css">
<nav>
<span class="brand">
MyBlog.com
</span>
<div class="items">
<a class="active" href="#">Home</a>
About
Contact
</div>
</nav>
<header>
<h1>Man must explore, and this is exploration at its greatest</h1>
<h2 class="subheading">Problems look mighty small from 150 miles up</h2>
<span class="meta">
Posted by
Start Bootstrap
on August 24, 2021
</span>
</header>
<article>
<h2 class="heading">The Lorem and Ipsum</h2>
<p>Never in all their history have men been able truly to conceive of the world as one: a single sphere, a globe, having the qualities of a globe, a round earth in which all the directions eventually meet, in which there is no center because every point, or none, is center — an equal earth which all men occupy as equals. The airman's earth, if free men make it, will be truly round: a globe in practice, not in theory.</p>
<p>Science cuts two ways, of course; its products can be used for both good and evil. But there's no turning back from science. The early warnings about technological dangers also come from science.</p>
<p>What was most significant about the lunar voyage was not that man set foot on the Moon but that they set eye on the earth.</p>
<p>A Chinese tale tells of some men sent to harm a young girl who, upon seeing her beauty, become her protectors rather than her violators. That's how I felt seeing the Earth for the first time. I could not help but love and cherish her.</p>
<p>For those who have seen the Earth from space, and for the hundreds and perhaps thousands more who will, the experience most certainly changes your perspective. The things that we share in our world are far more valuable than those which divide us.</p>
<div class="codeheader">
<div></div>
<div></div>
<div></div>
css
</div>
<div class="codebox">
<pre><code>.somecssclass {
padding: 15px;
font-family: Courier, sans-serif;
font-size: 12px;
color: #fff;
background-color: #3d3d3d;
margin-bottom: 10px;
-webkit-border-radius: 0px 0px 6px 6px;
-moz-border-radius: 0px 0px 6px 6px;
border-radius: 0px 0px 6px 6px;
}</code></pre>
</div>
<hr class="hr1">
<h2 class="heading2">The Final Frontier</h2>
<p>There can be no thought of finishing for ‘aiming for the stars.’ Both figuratively and literally, it is a task to occupy the generations. And no matter how much progress one makes, there is always the thrill of just beginning.</p>
<p>There can be no thought of finishing for ‘aiming for the stars.’ Both figuratively and literally, it is a task to occupy the generations. And no matter how much progress one makes, there is always the thrill of just beginning.</p>
<blockquote class="blockquote">The dreams of yesterday are the hopes of today and the reality of tomorrow. Science has not yet mastered prophecy. We predict too much for the next year and yet far too little for the next ten.</blockquote>
<p>Spaceflights cannot be stopped. This is not the work of any one man or even a group of men. It is a historical process which mankind is carrying out in accordance with the natural laws of human development.</p>
<hr class="hr2">
<h2 class="heading2">Reaching for the Stars</h2>
<p>As we got further and further away, it [the Earth] diminished in size. Finally it shrank to the size of a marble, the most beautiful you can imagine. That beautiful, warm, living object looked so fragile, so delicate, that if you touched it with a finger it would crumble and fall apart. Seeing this has to change a man.</p>
<img class="img-fluid" src="assets/img/post-sample-image.jpg" alt="..." />
<span class="caption text-muted">To go places and do things that have never been done before – that’s what living is all about.</span>
<p>Space, the final frontier. These are the voyages of the Starship Enterprise. Its five-year mission: to explore strange new worlds, to seek out new life and new civilizations, to boldly go where no man has gone before.</p>
<p>As I stand out here in the wonders of the unknown at Hadley, I sort of realize there’s a fundamental truth to our nature, Man must explore, and this is exploration at its greatest.</p>
<p>Placeholder text by Space Ipsum · Images by NASA on The Commons</p>
</article>
Where i have a file named styles.css where i have all the code and also i have a file named themes.css in themes.css file i have all the colors defined in that file but is there any way that i can change that color using javascript so that i can change the theme ?
For example when i have Light Theme I Use these colors
:root {
--headerBG: #222;
--headerColor: #fff;
--codeBoxBG: #333;
--codeBoxColor: #fff;
--codeHeaderBG: #121212;
--codeColor: #fff;
--bodyBG: #ccc;
--bodyColor: #000;
--linkColor: #ccc;
--linkHover: #000;
}
And when i have Dark theme selected the colors should be
:root {
--headerBG: #222;
--headerColor: #fff;
--codeBoxBG: #222;
--codeBoxColor: #fff;
--codeHeaderBG: #121212;
--codeColor: #fff;
--bodyBG: #333;
--bodyColor: #fff;
--linkColor: #e7e7e7;
--linkHover: #fff;
}
Define a class, like
.myroot {
--headerBG: yellow;
}
and apply this class where you needed, via
class="myroot"
See:
/* Themes.css */
:root {
--headerBG: #222;
--headerColor: #fff;
--codeBoxBG: #333;
--codeBoxColor: #fff;
--codeHeaderBG: #121212;
--codeColor: #fff;
--bodyBG: #ccc;
--bodyColor: #000;
--linkColor: #ccc;
--linkHover: #000;
}
.myroot {
--headerBG: yellow;
}
/* Styles.css */
#import url('https://fonts.googleapis.com/css2?family=Georama:ital,wght#0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
* { box-sizing: border-box; margin: 0; padding: 0; transition: all .2s ease-in-out; }
body { font-family: 'Georama', sans-serif; width: 100%; background: var(--bodyBG); color: var(--bodyColor); }
header {
background-color: var(--headerBG);
min-height: 300px; min-width: 100vw;
color: var(--headerColor);
display: block;
margin-left: auto;
margin-right: auto;
text-align: left;
padding: 80px 180px 50px 180px;
}
article { padding: 80px 180px 50px 180px; }
header h1 { font-size: 2.2em; margin-bottom: 10px; }
header h2 { font-size: 1.2em; margin-bottom: 30px; }
header a, nav a { color: #ccc; text-decoration: none; }
a:hover { color: #00aeff; }
p { margin-bottom: 8px; }
img { max-width: 100%; display: block; margin: 20px auto; }
article a { color: var(--linkColor); text-decoration: none; }
article a:hover { color: var(--linkHover); }
nav {
height: 50px; padding: 15px;
width: 100%; color: #fff;
background-color: #535353;
align-items: center;
}
nav a { margin: auto 3px; }
nav .items { float: right; }
.heading { margin-bottom: 10px; }
.heading2 { margin-top: 20px; margin-bottom: 10px; }
hr { margin: 30px auto; }
hr.hr1{ border-top: 3px solid #8c8b8b; }
hr.hr2 { border-top: 5px solid #8c8b8b; }
.codebox {
padding: 10px;
font-size: 1em;
line-height: 1.3;
color: var(--codeBoxColor);
background-color: var(--codeBoxBG);
border-radius: 0px 0px 6px 6px;
margin-bottom: 10px;
overflow: auto;
}
code { font-size: 1em; line-height: 1.3; }
.codeheader {
padding: 5px 5px 5px 10px;
font-size: 1.1em;
color: var(--codeColor);
border-radius: 6px 6px 0px 0px;
user-select: none;
background: var(--codeHeaderBG);
border-bottom: 2px solid #00aeff;
}
.codeheader div {
margin-top: 3px;
height: .6em; width: .6em;
background: #fff;
border-radius: 50%;
display: inline-block;
}
.codeheader div:first-child { background: #ff4a4a; }
.codeheader div:nth-child(2) { background: #ffc64a; }
.codeheader div:last-child { margin-right: 6px; background: #59ff4a; }
<!DOCTYPE html>
<html lang="en">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.9.0/css/all.min.css">
<link rel="stylesheet" href="themes.css">
<link rel="stylesheet" href="styles.css">
<nav>
<span class="brand">
MyBlog.com
</span>
<div class="items">
<a class="active" href="#">Home</a>
About
Contact
</div>
</nav>
<header class="myroot">
<h1>Man must explore, and this is exploration at its greatest</h1>
<h2 class="subheading">Problems look mighty small from 150 miles up</h2>
<span class="meta">
Posted by
Start Bootstrap
on August 24, 2021
</span>
</header>
<article>
<h2 class="heading">The Lorem and Ipsum</h2>
<p>Never in all their history have men been able truly to conceive of the world as one: a single sphere, a globe, having the qualities of a globe, a round earth in which all the directions eventually meet, in which there is no center because every point, or none, is center — an equal earth which all men occupy as equals. The airman's earth, if free men make it, will be truly round: a globe in practice, not in theory.</p>
<p>Science cuts two ways, of course; its products can be used for both good and evil. But there's no turning back from science. The early warnings about technological dangers also come from science.</p>
<p>What was most significant about the lunar voyage was not that man set foot on the Moon but that they set eye on the earth.</p>
<p>A Chinese tale tells of some men sent to harm a young girl who, upon seeing her beauty, become her protectors rather than her violators. That's how I felt seeing the Earth for the first time. I could not help but love and cherish her.</p>
<p>For those who have seen the Earth from space, and for the hundreds and perhaps thousands more who will, the experience most certainly changes your perspective. The things that we share in our world are far more valuable than those which divide us.</p>
<div class="codeheader">
<div></div>
<div></div>
<div></div>
css
</div>
<div class="codebox">
<pre><code>.somecssclass {
padding: 15px;
font-family: Courier, sans-serif;
font-size: 12px;
color: #fff;
background-color: #3d3d3d;
margin-bottom: 10px;
-webkit-border-radius: 0px 0px 6px 6px;
-moz-border-radius: 0px 0px 6px 6px;
border-radius: 0px 0px 6px 6px;
}</code></pre>
</div>
<hr class="hr1">
<h2 class="heading2">The Final Frontier</h2>
<p>There can be no thought of finishing for ‘aiming for the stars.’ Both figuratively and literally, it is a task to occupy the generations. And no matter how much progress one makes, there is always the thrill of just beginning.</p>
<p>There can be no thought of finishing for ‘aiming for the stars.’ Both figuratively and literally, it is a task to occupy the generations. And no matter how much progress one makes, there is always the thrill of just beginning.</p>
<blockquote class="blockquote">The dreams of yesterday are the hopes of today and the reality of tomorrow. Science has not yet mastered prophecy. We predict too much for the next year and yet far too little for the next ten.</blockquote>
<p>Spaceflights cannot be stopped. This is not the work of any one man or even a group of men. It is a historical process which mankind is carrying out in accordance with the natural laws of human development.</p>
<hr class="hr2">
<h2 class="heading2">Reaching for the Stars</h2>
<p>As we got further and further away, it [the Earth] diminished in size. Finally it shrank to the size of a marble, the most beautiful you can imagine. That beautiful, warm, living object looked so fragile, so delicate, that if you touched it with a finger it would crumble and fall apart. Seeing this has to change a man.</p>
<img class="img-fluid" src="assets/img/post-sample-image.jpg" alt="..." />
<span class="caption text-muted">To go places and do things that have never been done before – that’s what living is all about.</span>
<p>Space, the final frontier. These are the voyages of the Starship Enterprise. Its five-year mission: to explore strange new worlds, to seek out new life and new civilizations, to boldly go where no man has gone before.</p>
<p>As I stand out here in the wonders of the unknown at Hadley, I sort of realize there’s a fundamental truth to our nature, Man must explore, and this is exploration at its greatest.</p>
<p>Placeholder text by Space Ipsum · Images by NASA on The Commons</p>
</article>
Single Line code convert light theme to dark. Try it
<style>
body
{
filter: invert(1);
}
</style>

How do I get the text body lower but not make it a footer?

HTML
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="NWC.css">
<meta charset="utf-8">
<!--Font Import Links-->
<link href="https://fonts.googleapis.com/css2?family=Josefin+Sans:wght#700&display=swap" rel="stylesheet">
<!---JS File Imports-->
<script src="NWC.js">
</script>
<!--HTML Code Starts Below-->
</head>
<body>
<section>
<div class="header">
<div class="logo_container">
<h1>N W C</h1>
</div>
</div>
</section>
<!--Cover Section-->
<section>
<div class="coverpic">
<img src="file:///C:/Users/jakes/Desktop/NWC/nwcgfrey.png" alt="NWC LOGO" width="60%" height="40%">
</div>
</section>
<!--About Section-->
<section>
<div class="about-section">
<h1>About NWC</h1>
<p>New World Coding is a startup teaching kids to program. Coding is an essential skill to learn because it is our future. All of our technology today whether it's using a computer to making a pot of coffee is run by the code engineers write. Here at NWC, we have group lessons for you and a friend, or 1:1 lessons! For more information about NWC, our lessons, or any other questions, please fill click the button below.</p>
</div>
</section>
</body>
</html>
CSS
*{
margin: 0;
padding: 0;
list-style: none;
text-decoration: none;
}
body {
background-image: url(file:///C:/Users/jakes/nwcWebsitecity.png);
background-size: cover;
}
.header {
display: block;
background-color: #1E1E1E;
background-size: 1000px;
width: 100%;
height: 80px;
}
/*
.inner_header {
width: 1000px;
height: 100%;
display: table-cell;
margin: 0 auto;
}
*/
.logo_container {
height: 100%;
display: table;
float: left;
}
.logo_container h1{
color: white;
height: 100%;
display: table-cell;
vertical-align: middle;
font-family: 'Josefin Sans', sans-serif;
padding-left: 10px;
}
.coverpic {
bottom: 750px;
vertical-align: middle;
text-align: center;
display: table-cell;
}
.about-section {
background-image:
url(file:///C:/Users/jakes/nwcWebsitecity.png);
height: auto;
width: 100%;
position: fixed;
color: white;
font-family: 'Josefin Sans', sans-serif;
color: white;
text-align: center;
transform: rotate(180);
}
[What site looks like now, I just want to move the body section lower1
Basically, I want the text body to move down lower so that you don't see it when you first load into the site, I want the .coverpic to be centered when you first load into the site and when you start scrolling you see the about section.
U can use margine-top in css.
which text u want to lower just write in css margine-top: and how px u want.
Like example
h1 {
margine-top: 50%;}
to be in the middle screen or just lower or more high % to make it in the right position
Add a class to your text (p tag):
<p class= "sample">
and then adjust the margin in your CSS:
.sample {
margin-top: 50px;
}
adjust the margin-top accordingly for how low you want the text to go.
edit: change the "color" in your about-section to black for example. Basically you have white on white right now.
You'll also notice that I added margin-top: 50px on both about-section and sample classes. The first margin-top brings the title down and the second brings the text down.
.about-section {
background-image:
url(file:///C:/Users/jakes/nwcWebsitecity.png);
height: auto;
width: 100%;
position: relative;
font-family: 'Josefin Sans', sans-serif;
color: black;
text-align: center;
transform: rotate(180);
margin-top: 50px;
}
.sample {
margin-top: 50px;
};

Content disappears on mobile then appears when I zoom in (iphone 7, safari and chrome.)

I haven't seen anything like this before and not sure were to look to fix it. I created a website with standard HTML, CSS, Java, and has the magnific popup scripts. Whats interesting is that the rest of the website works fine its just the first 25% of the sites text doesn't show on a physical phone unless you zoom in. Everything shows fine on the developer tools on all devices.
Header image before zoom (text is missing)
Header Image after zoom (until text randomly appears)
HTML header / about section code and CSS #media screen code (error only happens on mobile)
html, body {
margin: 0;
padding: 0;
height: 100%;
width: 100%;
max-width: 100%;
max-height: 100%;
}
h2 {
font-family: 'Playfair Display', serif;
font-size: 200%;
font-weight: 700;
color: #2C2C2C;
text-align: Center;
}
p {
font-family: 'Raleway', serif;
color: #2C2C2C;
font-size: 140%;
line-height: 180%;
text-align: justify;
font-weight: 300;
}
.intro {
height: 100%;
width: 100%;
margin: auto;
background: url(img/Autumn-colors-mountain-sunset_-_Virginia_-_ForestWander.jpg) no-repeat 50% 50%;
background-size: cover;
display: table;
top: 0;
}
.intro .inner {
display: table-cell;
vertical-align: middle;
width: 100%;
max-width: none;
}
.content {
max-width: 600px;
margin: auto;
}
h1 {
font-family: 'Playfair Display', serif;
font-size: 300%;
font-weight: 700;
color: white;
text-align: center;
padding: 2%;
text-shadow: 0px 0px 250px #000;
}
.content p {
color: #fff;
}
.inner {
max-width: 600px;
margin: auto;
font-size: 170%;
line-height: 1.6;
padding: 10px
}
#media screen and (max-width:768px) {
#menu-icon {
margin: 26px 0 0 26px;
}
nav ul, nav:active ul {
padding: 8px 0;
left: 23px;
top: 34px;
width: 50%;
}
.inner {
font-size: 120%;
}
.content h1 {
font-size: 180%;
}
p {
font-size: 120%;
}
h2 {
font-size: 160%;
}
.social{
margin-left: -10%;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="with=device-width, initial-scale=1">
<title>VOTING IS POWER</title>
<link rel="stylesheet" href="dist/magnific-popup.css">
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="dist/jquery.magnific-popup.js"></script>
<script src="js/main.js"></script>
<link href="css/font-awesome.min.css" rel="stylesheet"/>
<link rel="shortcut icon" type="image/png" href="img/ticket.png"/>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<!---- menu----->
<section class="intro">
<nav>
<ul>
<li>About</li>
<li>Register</li>
<li>We did!</li>
</ul>
</nav>
<div class="inner">
<div class ="content">
<h1> “It gives you power.”<br/></h1><p>- Tammy, Richmond</p>
</div>
</div>
</section>
<!---------------------------ABOUT ---------------------->
<a name="about">
<div class="clearfix"></div>
<section class="about">
<h2 style="padding-top: 5%;">ABOUT</h2>
<P style="text-indent: 6%; padding: 4% 2%;" >In 2016, Virginia Governor Terry McAuliffe restored the voting rights of over 200,000 citizens through a courageous executive order. As of earlier this year, only about 50,000 of those individuals were registered to vote.<br><br>
The goal of this project is simple. We want to register - and turn out- as many NEW voters in the state of Virginia to vote in this year’s statewide election on November 7th. With your help, we can reach our goal of registering 25,000 new voters and turning out at least 100,000 voters to the polls on Election Day. Please support this campaign by sharing it first with everyone you know from Virginia, then with all of your friends and family on social media, and last, give what you can to help us reach as many Virginians as possible between now and November 7th.
</P>
<hr>
</section>
Please let me know if there is anyway I can help you help me! And thank you for your time I do appreciate it!

CSS - Formatting a Navigation div beside multiple divs

I designed my site so that a navigation bar spans down the whole site. It is handled in a div. The rest of the site is inside divs as well, and will be placed beside the navigation div.
After placing the first div beside the navigation div, everything worked out. When I tried to add a second div beside the navigation div and under the first div, it goes outside of the body. I can I fix this?
THE ORANGE BORDER DIV IS THE ONE I AM TRYING TO FIX
Here is my site
: JSFiddle would be to large and hard to understand, so please use the console in your browser to help me out.
firstBox is the div that isn't working how I want it to. #navigationPane and #topBox are in the right position
<html>
<head>
<title>Test</title>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/stellar.js/0.6.2/jquery.stellar.min.js"></script>
<script type="text/javascript">
$(document).ready(function (){
function dBug(data) {
console.log(data);
}
dBug("document ready");
$.stellar();
});
</script>
<style type="text/css">
body {
margin-top: 0px;
margin-bottom: 0px;
margin-top: 20px;
margin-bottom: 20px;
width: 1000px;
min-height: 800px;
max-height: 1200px;
margin-left: auto;
margin-right: auto;
font-family: Verdana,Helvetica,Arial,sans-serif;
border: solid green 1px;
}
h1 {
text-align: center;
margin-top: 10px;
color: white;
margin-top: 20px;
}
p {
color: white;
text-align: center;
}
#small {
font-style: italic;
font-size: 10px;
margin-top: -12px;
}
#topBox {
height: 400px;
width: 929px;
border: solid blue 1px;
float: right;
margin-top: -1px;
margin-right: -1px;
background-image: url(image.jpg);
background-size: 1400px 600px;
background-position: -0% 60%;
cursor: default;
}
#firstBox {
height: 400px;
width: 928px;
border: solid orange 1px;
float: right;
cursor: default;
}
#navigationPane {
width: 70px;
margin-left: -1px;
border: solid red 1px;
min-height: 1200px;
max-height: 2000px;
margin-bottom: -1px;
margin-top: -1px;
background-color: purple;
}
#box {
width: 500px;
height: 150px;
border: dotted white 2px;
clear: none;
background-color: rgba(0, 0, 0, 0.85);
margin-left: 200px;
margin-top: 120px;
-webkit-border-radius: 10px;
border-radius: 10px;
}
#navigationPane img {
margin-left: 5px;
margin-top: 10px;
}
a:hover {
opacity: 0.8;
}
</style>
</head>
<body>
<div id="topBox" data-stellar-background-ratio="0.2">
<div id="box" >
<h1>WH Programming</h1>
<p>Will Houle Programming - Student Developer</p>
<p id="small">A site created to host tutorials, past lab assignments, and future endeavors.</p>
</div>
</div>
<div id="navigationPane">
<img src="twitter.png" />
<img src="humber.png" />
</div>
<div id="firstBox">
</div>
</body>
</html>
I know the coding is very unorganized, but for now this is what im working with
Have you tried to add some css property which is useful for you?
however, let me tell you. you should use position and top property for the box which is going out of thr body.
here is that code:
<div id="firstBox" style="
position: relative;
top: -800;"></div>
or
in your #firstdiv of css stylesheet add these two:
position: relative;
top: -800;

Categories