TheOGNip
Reputation: 7
Formatting my site
So my school is doing this competition, the five best websites win a RaspBerry Pi. I have a dilemma with mine currently. I have looked lost of places but nothing seems to work. Here is a link to some of my code on JSFiddle.
https://jsfiddle.net/kdn1x2hk/
My problem is, I have a DIV for my middle column where all of my info. goes and I'm trying to format it to where I can have an image on the left and text on the left, the only problem with that is I want to have it to where the div its in covers the text completely. If you see where the text goes beyond the grey background, thats what the problem is.
<!DOCTYPE! html>
<html>
<head>
<style>
body,
html {
margin-top: -11px;
margin: 0;
height: 100%;
min-width: 1000px;
background-color: red;
}
.bg {
margin-left: 20%;
width: 60%;
background-color: grey;
border-left: thick solid black;
border-right: thick solid black;
}
.background {
background-image: url("images/background.jpg");
background-position: center;
background-repeat: no-repeat;
background-size: cover;
background-attachment: fixed;
min-height: 100%;
}
.banner {
width: 100%;
border-bottom: thick solid black;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
border-bottom: thick solid black;
}
li {
float: left;
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none!important;
font-family: "Arial Black", Gadget, sans-serif;
}
li a:hover:not(.active) {
background-color: #111;
}
.active {
background-color: #FFD700;
color: black;
}
.header {
font-size: 80pt;
font-family: "Arial Black", Gadget, sans-serif;
color: black;
text-align: center;
min-width: 80pt;
}
.dotted_line {
border-top: 2px dashed black;
width: 70%;
}
.paragraph {
font-size: 15pt;
width: 500px;
margin-left: 0%;
color: black;
}
.sub_header {
text-align: center;
font-size: 50pt;
color: black;
}
.credit {
width: 560;
size: 20pt;
text-align: center;
font-style: italic;
}
.video {
width: 70%;
margin-left: 15%;
border: thick solid black;
}
.credit_link {
text-decoration: none;
}
#image {
width: 45%;
}
#text {
width: 45%;
float: left;
font-size: 15pt;
color: black;
padding-top: 20px;
-webkit-text-size-adjust: none;
-ms-text-size-adjust: none;
-moz-text-size-adjust: none;
text-size-adjust: none;
}
.format {
width: 90%;
margin-left: 10%;
}
</style>
</head>
<body>
<div class="background">
<div class="bg">
<img src="https://i.imgur.com/gsceMM5.png" class="banner">
<ul>
<li><a class="active" href="index.html">Home</a></li>
<li><a href="stats.html">Stats</a></li>
<li><a href="history.html">History</a></li>
<li><a href="info.html">Info</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
<p class="header"> WELCOME</p>
<hr class="dotted_line" />
<p class="sub_header">What is Bitcoin?</p>
<video class="video" poster="images/thumbnail.jpg" controls>
<source src="videos/info.mp4" type="video/mp4">
</video>
<p class="credit">
(Credit to <a class="credit_link"
href="https://www.youtube.com/user/weusecoins">WeUseCoins</a> on
youtube.com)
</p>
<div class="format">
<img src="https://i.imgur.com/BGsKZms.png" id="image" />
<p id="text">
Bitcoin is a new currency that was created in 2009 by an unknown
person using the alias Satoshi Nakamoto. Transactions are made with no
middle men – meaning, no banks! Bitcoin can be used to book hotels on
Expedia, shop for furniture on Overstock and
buy Xbox games. But much of the hype is about getting rich by
trading it. The price of bitcoin skyrocketed into the thousands in 2017.
</p>
</div>
</div>
</div>
</body>
</html>
My code isn't organized on here for some reason, but I just copied the important stuff, leave out all the organizing and stuff I have to do because ill get to the eventually.
Upvotes: 1
Views: 30
Answers (1)
Obsidian Age
Reputation: 42304
This is fortunately a really easy fix. All you're looking to do is add overflow: hidden to .format, so that the container expands to allow the background to cover all of the text contained within, without any scrollbars:
body,
html {
margin-top: -11px;
margin: 0;
height: 100%;
min-width: 1000px;
background-color: red;
}
.bg {
margin-left: 20%;
width: 60%;
background-color: grey;
border-left: thick solid black;
border-right: thick solid black;
}
.background {
background-image: url("images/background.jpg");
background-position: center;
background-repeat: no-repeat;
background-size: cover;
background-attachment: fixed;
min-height: 100%;
}
.banner {
width: 100%;
border-bottom: thick solid black;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
border-bottom: thick solid black;
}
li {
float: left;
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none!important;
font-family: "Arial Black", Gadget, sans-serif;
}
li a:hover:not(.active) {
background-color: #111;
}
.active {
background-color: #FFD700;
color: black;
}
.header {
font-size: 80pt;
font-family: "Arial Black", Gadget, sans-serif;
color: black;
text-align: center;
min-width: 80pt;
}
.dotted_line {
border-top: 2px dashed black;
width: 70%;
}
.paragraph {
font-size: 15pt;
width: 500px;
margin-left: 0%;
color: black;
}
.sub_header {
text-align: center;
font-size: 50pt;
color: black;
}
.credit {
width: 560;
size: 20pt;
text-align: center;
font-style: italic;
}
.video {
width: 70%;
margin-left: 15%;
border: thick solid black;
}
.credit_link {
text-decoration: none;
}
#image {
width: 45%;
}
#text {
width: 45%;
float: left;
font-size: 15pt;
color: black;
padding-top: 20px;
-webkit-text-size-adjust: none;
-ms-text-size-adjust: none;
-moz-text-size-adjust: none;
text-size-adjust: none;
}
.format {
width: 90%;
margin-left: 10%;
overflow: hidden;
}<!DOCTYPE html>
<body>
<div class="background">
<div class="bg">
<img src="https://i.imgur.com/gsceMM5.png" class="banner">
<ul>
<li><a class="active" href="index.html">Home</a></li>
<li><a href="stats.html">Stats</a></li>
<li><a href="history.html">History</a></li>
<li><a href="info.html">Info</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
<p class="header"> WELCOME</p>
<hr class="dotted_line" />
<p class="sub_header">What is Bitcoin?</p>
<video class="video" poster="images/thumbnail.jpg" controls>
<source src="videos/info.mp4" type="video/mp4">
</video>
<p class="credit">
(Credit to <a class="credit_link" href="https://www.youtube.com/user/weusecoins">WeUseCoins</a> on youtube.com)
</p>
<div class="format">
<img src="https://i.imgur.com/BGsKZms.png" id="image" />
<p id="text">
Bitcoin is a new currency that was created in 2009 by an unknown person using the alias Satoshi Nakamoto. Transactions are made with no middle men – meaning, no banks! Bitcoin can be used to book hotels on Expedia, shop for furniture on Overstock and
buy Xbox games. But much of the hype is about getting rich by trading it. The price of bitcoin skyrocketed into the thousands in 2017.
</p>
</div>
</div>
</div>
</body>I've also created a snippet showcasing this here.
Hope this helps! :)
Upvotes: 1