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
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>
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;
};
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!
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;