My website will not scroll vertically. This is stopping some of the content being displayed. I have tried to fix this but so far I have had no success using the the CSS overflow property. This is not scrolling in Google Chrome and is not bringing up any errors when I use the developer tools.
This is the code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta charset="UTF-8">
<title>Football Informer</title>
<link rel="stylesheet" type="text/css" href="styles.css">
<script src="scripts.js"></script>
</head>
<body>
<div class="container">
<img src="https://www.freewebheaders.com/wordpress/wp-content/gallery/football/world-cup-goal-keeper-sport-website-header.jpg" class="header_img" alt="Error">
<div class="text">
<h1>The Football Informer</h1>
<p class="strapline">The Home of Football</p>
</div>
</div>
<ul>
<li><a class="active" href="home.html">Home</a></li>
<li>About</li>
</ul>
<div class="main_text">
<p class="intro_home_page">Welcome to The Football Informer. This is the place to keep up to date with the footballing world.<br>
Keep up to date with the big roomers about transfers and club takeovers. Or follow the Premier League fight in the leagues featured section. If you have any suggestions about the site please see the About page to see our contact information.</p>
<div class="heading">
<h1>Featured Articles</h1>
</div>
<div class="featured_articles_format">
<div class="grey_background">
<a href="http://thefootballfaithful.com/allardyce-reveals-cenk-tosun-struggles/" target="blank">
<p class="article_title ">Allardyce reveals Cenk Tosun struggles.</p>
<img src="https://i1.wp.com/thefootballfaithful.com/wp-content/uploads/2018/02/img_7476.jpg?resize=660%2C330" class="interesting_article_img" alt="Error">
</a>
</div>
<p class="article_strapline">Less than a month after joining Everton for £27m, Sam Allardyce has revealed that Cenk Tosun is struggling to adapt to life in the Premier League.</p>
<p class="article_intro">The Turkish international sat out of the Toffees’ 5-1 humbling at the hands of Arsenal on Saturday evening, with the once outcasted Oumar Niasse selected to start the game.<br>
Speaking after the defeat, Allardyce that the 26-year-old has struggled with the ‘pace and physicality of the game.’</p>
</div>
<div class="featured_articles_format">
<div class="grey_background">
<a href="http://www.skysports.com/football/news/11715/11237193/leeds-sack-head-coach-thomas-christiansen-after-cardiff-thrashing" target="blank">
<p class="article_title ">Leeds sack head coach Thomas Christiansen after Cardiff thrashing</p>
<img src="http://e0.365dm.com/17/09/16-9/20/skysports-thomas-christiansen-leeds_4110664.jpg?20170925180918" class="interesting_article_img" alt="Error">
</a>
</div>
<p class="article_strapline">Leeds have sacked head coach Thomas Christiansen after a 4-1 thrashing at home to Cardiff on Saturday - their sixth Championship game without a win.</p>
<p class="article_intro">Christiansen's side had been without a win since Boxing Day and a spate of ill-discipline had seen three different players sent-off in four games.<br>
Leeds had been pushing for a place in the top six but slipped to 10th after the Cardiff defeat and the club announced his departure just over 24 hours later.<br>
Statement "Leeds United can confirm that head coach Thomas Christiansen has left the club."
</p>
</div>
<div class="featured_articles_format">
<div class="grey_background">
<a href="http://www.skysports.com/football/news/11685/11240190/patrice-evra-completes-free-transfer-to-west-ham" target="blank">
<p class="article_title ">Patrice Evra completes free transfer to West Ham</p>
<img src="https://www.wessexfm.com/news/images/feed.php?url=http%3A%2F%2Fe3.365dm.com%2F18%2F02%2F640x380%2Fskysports-patrice-evra-west-ham-united-premier-league-football-pose-posing_4225196.jpg%3F20180207173535" class="interesting_article_img" alt="Error">
</a>
</div>
<p class="article_strapline">Patrice Evra has completed his free transfer to West Ham and signed a contract until the end of the season.</p>
<p class="article_intro">Evra, 36, arrived at the club's Rush Green training complex on Wednesday morning before passing a medical and signing a short-term contract until the end of June 2018.<br>
Sky Sports News understands Everton were also interested in the former Manchester United, Juventus and Monaco left-back but the player favoured a move to London.</p>
</div>
<div class="featured_articles_format">
<div class="grey_background">
<a href="http://www.skysports.com/football/news/11685/11240190/patrice-evra-completes-free-transfer-to-west-ham" target="blank">
<p class="article_title ">Patrice Evra completes free transfer to West Ham</p>
<img src="https://www.wessexfm.com/news/images/feed.php?url=http%3A%2F%2Fe3.365dm.com%2F18%2F02%2F640x380%2Fskysports-patrice-evra-west-ham-united-premier-league-football-pose-posing_4225196.jpg%3F20180207173535" class="interesting_article_img" alt="Error">
</a>
</div>
<p class="article_strapline">Patrice Evra has completed his free transfer to West Ham and signed a contract until the end of the season.</p>
<p class="article_intro">Evra, 36, arrived at the club's Rush Green training complex on Wednesday morning before passing a medical and signing a short-term contract until the end of June 2018.<br>
Sky Sports News understands Everton were also interested in the former Manchester United, Juventus and Monaco left-back but the player favoured a move to London.</p>
</div>
</div>
</body>
</html>
.container {
position: relative;
margin-top: 0;
margin-bottom: 0;
height:150px;
}
.header_img {
width:100%;
height:150px;
margin:0;
}
.text {
font-size:26px;
position: absolute;
top: 20%;
left: 50%;
transform: translate(-50%, -50%);
color:red;
}
.strapline {
font-size:22px;
position: absolute;
top: 70px;
left: 50%;
transform: translate(-50%, -50%);
color:red;
}
body {
margin: 0;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
width: 15%;
background-color: #666666;
position: fixed;
height: 100%;
overflow: auto;
}
li a {
display: block;
color: #000;
padding: 8px 16px;
text-decoration: none;
}
li a.active {
background-color: #4CAF50;
color: white;
}
li a:hover:not(.active) {
background-color: #555;
color: white;
}
.main_text {
margin-left:15%;
width:85%;
position: fixed;
height:100%;
background-color: #b3b3b3;
margin-top: 0;
margin-bottom: 0;
}
.intro_home_page {
font-size:20px;
text-align: center;
}
.heading {
background-color:red;
}
.article_title {
color:white;
font-size:24px;
}
.article_intro {
font-size:18px;
}
.article_strapline {
font-size:18px;
font-weight:bold;
}
.grey_background {
background-color:grey;
height:30px;
}
.interesting_article_img {
height:165px;
width:330px;
float: left;
}
img {
border: 0;
}
p, h1 {
margin: 0;
}
.featured_articles_format{
height:195px;
}
Any suggestions are greatly appreciated and I hope that I have asked a precise enough question.
You need to change the .main-text style. The position fixed is preventing scrolling.
.main_text {
margin-left:15%;
width:85%;
position: relative;
height:100%;
background-color: #b3b3b3;
margin-top: 0;
margin-bottom: 0;
}
This will fix the scrolling problem, may have to refactor the markup to make it look proper. Maybe look into using a css library/framework. Save you a lot of time and effort.
http://jsbin.com/qabewarawi/1/edit?html,css,output
Related
How would I add a border around the div "border" class? within CSS, I tried doing it before but the border would just show as a straight line on the top of the site and nothing around the div contents. please help! I want there to be a border around the first image along with the h2, h3, menchies class, h4, and walgreens class.
Here is the HTML Code:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Employment</title>
<meta charset="utf-8">
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1> Joshua Eachus</h1>
<div class="border">
<img class="img" src="headshot.jpg" alt="Joshua Eachus">
<h2>Job Experience</h2>
<h3>Menchies</h3>
<p class="menchies"> Between January 2020-November 2020 I was a team member at menchies,
I would mainly greet customers, help them around the store if needed and cash them out
with the cash register when ready. I also am constantly busy
making sure every topping and yogurt machine is filled up for the customers.
I would usually be closing so I work 5 to 8 hour shifts every time.
When closing I would put all the toppings away, clean the whole store
completely and prep food for the next day.</p>
<h4>Walgreens</h4>
<p class="Walgreens"> I am currently working at Walgreens, which has been a great introduction into retail
and has truly taught me many things. There is a diverse and large amount of tasks I do at Walgreens,
one of the main tasks is running the photo department, where I print many kinds of photos,
create canvases and many more projects. Other tasks includes stocking,
outdating, cleaning duties and counting registers.</p>
</div>
<h5>Achievements</h5>
<img class="img2" src="ptk.jpg" alt="PTK">
<p class="ptk">I am a member of Phi Theta Kappa. Founded on November 19, 1918 Phi Theta Kappa is the world’s largest organization specifically
devoted to recognizing the achievements of honor students at 2-year institutions. Currently,
PTK has approximately 3 million members globally.</p>
</body>
</html>
Here is the CSS Code:
html{background-color:white;}
h1{text-align:center;
font-size:50px;}
h2{position:fixed;
top:180px;
left:475px;
font-size:40px;}
h3{position:fixed;
top:230px;
left:365px;
font-size:33px;}
h4{position:fixed;
top:450px;
left:365px;
font-size:33px;}
h5{position:fixed;
top:130px;
right:430px;
font-size:33px;}
.img{height:470px;
width:320px;
position:fixed;
top:220px; left:15px;}
.img2{width:500px;
height=100px;
position:fixed;
top:250px; right:280px;}
.menchies{position:fixed;
top:290px;
left:350px;
font-size:20px;
width:30%;}
.Walgreens{position:fixed;
top:520px;
left:350px;
font-size:20px;
width:30%;}
.ptk{position:fixed;
top:540px;
right:250px;
font-size:18px;
width:30%;}
Stop using position fixed
You are using CSS to shoot yourself in the foot, stop it. Go watch some Layout Land and take Kevin Powell's free Conquering Responsive Layouts course.
/*
html {
background-color: white; Background is already white
}
*/
h1 {
text-align: center;
font-size: 3rem;
/* Use font sizes that respect the user setting */
}
body {
max-width: 60ch;
margin-inline: auto;
}
.border {
border: 2px solid tomato;
}
/*
DO NOT POSITION FIX EVERYTHING
h2 {
position: fixed;
top: 180px;
left: 475px;
font-size: 40px;
}
h3 {
position: fixed;
top: 230px;
left: 365px;
font-size: 33px;
}
h4 {
position: fixed;
top: 450px;
left: 365px;
font-size: 33px;
}
h5 {
position: fixed;
top: 130px;
right: 430px;
font-size: 33px;
}
.img {
height: 470px;
width: 320px;
position: fixed;
top: 220px;
left: 15px;
}
.img2 {
width: 500px;
height=100px;
position: fixed;
top: 250px;
right: 280px;
}
.menchies {
position: fixed;
top: 290px;
left: 350px;
font-size: 20px;
width: 30%;
}
.Walgreens {
position: fixed;
top: 520px;
left: 350px;
font-size: 20px;
width: 30%;
}
.ptk {
position: fixed;
top: 540px;
right: 250px;
font-size: 18px;
width: 30%;
}
*/
<h1> Joshua Eachus</h1>
<div class="border">
<img class="img" src="headshot.jpg" alt="Portrait of Joshua Eachus">
<h2>Job Experience</h2>
<h3>Menchies</h3>
<p class="menchies"> Between January 2020-November 2020 I was a team member at menchies, I would mainly greet customers, help them around the store if needed and cash them out with the cash register when ready. I also am constantly busy making sure every topping and yogurt
machine is filled up for the customers. I would usually be closing so I work 5 to 8 hour shifts every time. When closing I would put all the toppings away, clean the whole store completely and prep food for the next day.</p>
<h3>Walgreens</h3>
<p class="Walgreens"> I am currently working at Walgreens, which has been a great introduction into retail and has truly taught me many things. There is a diverse and large amount of tasks I do at Walgreens, one of the main tasks is running the photo department, where I
print many kinds of photos, create canvases and many more projects. Other tasks includes stocking, outdating, cleaning duties and counting registers.</p>
</div>
<h2>Achievements</h2>
<img class="img2" src="ptk.jpg" alt="PTK">
<p class="ptk">I am a member of Phi Theta Kappa. Founded on November 19, 1918 Phi Theta Kappa is the world’s largest organization specifically devoted to recognizing the achievements of honor students at 2-year institutions. Currently, PTK has approximately 3 million
members globally.</p>
Here I have rearranged your site layout! Just have a look at it and try to understand how to do it in proper way. Please click on full page when you run this in the Stack Overflow code snippet because this is not mobile friendly.
If you want to learn more about this, visit W3Schools CSS Website Layout tutorial or any other one which is related to this.
h1{
font-size: 50px;
text-align: center;
line-height: 5px;
}
h2{
font-size: 40px;
text-align: center;
line-height: 0px;
padding-bottom: 10px;
}
h3{
font-size: 30px;
line-height: 5px;
}
p{
font-size: 20px;
text-align: justify;
}
.container{
width: 100%;
border: 1px solid #ff00ff;
padding: 10px;
box-sizing: border-box;
}
.section{
padding: 15px;
display: inline-block;
vertical-align: middle;
}
.one{
width: 20%;
}
.two{
width: 35%;
}
.three{
width: 35%;
}
img{
width: 100%;
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Employment</title>
<meta charset="utf-8">
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>Joshua Eachus</h1>
<div class="container">
<div class="section one">
<img src="https://i.ibb.co/VLV0qfv/Wood-Floor-Texture-Seamless.jpg" alt="Joshua Eachus">
</div>
<div class="section two">
<h2>Job Experience</h2>
<h3>Menchies</h3>
<p class="menchies"> Between January 2020-November 2020 I was a team member at menchies,
I would mainly greet customers, help them around the store if needed and cash them out with the cash register when ready. I also am constantly busy making sure every topping and yogurt machine is filled up for the customers. I would usually be closing so I work 5 to 8 hour shifts every time. When closing I would put all the toppings away, clean the whole store completely and prep food for the next day.</p>
<h3>Walgreens</h3>
<p class="Walgreens"> I am currently working at Walgreens, which has been a great introduction into retail and has truly taught me many things. There is a diverse and large amount of tasks I do at Walgreens, one of the main tasks is running the photo department, where I print many kinds of photos, create canvases and many more projects. Other tasks includes stocking, outdating, cleaning duties and counting registers.</p>
</div>
<div class="section three">
<h3>Achievements</h3>
<img src="https://i.ibb.co/VLV0qfv/Wood-Floor-Texture-Seamless.jpg" alt="PTK" style="height: 200px;">
<p>I am a member of Phi Theta Kappa. Founded on November 19, 1918 Phi Theta Kappa is the world’s largest organization specifically devoted to recognizing the achievements of honor students at 2-year institutions. Currently, PTK has approximately 3 million members globally.</p>
</div>
</div>
</body>
</html>
Your problem is because you have used position:fixed; in almost every element. Please stop doing that and if you want to clarify whether your border is working properly or not, please give some padding to it and then you will see it works properly.
.border{
border: 1px solid #ff00ff;
padding: 10px;
}
<div class="border">
</div>
If you can show what you actually need to make, I will be able to do it without using position: fixed; If you have a image of what you exactly need, just share it with us.
Thanks and best regards!
Hello I have a problem regarding the footer part of this web page like for some reason the footer doesnt line up properly and im not sure whats wrong with it
this is what its supposed to look like (https://imgur.com/Bmvfbrx) but this is what it looks like (https://imgur.com/vY1kPTH). Just please tell me what i did wrong and that will be appreiated please and thank you.Also I have 0 errors on validator too.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="cyclestyle.css">
<title>Cycling Tours</title>
</head>
<body>
<div id="container">
<section id="header">
<header>
<nav>
<ul>
<li>About us</li>
<li>Ask Us</li>
<li>Destination</li>
<li>FAQ</li>
<li>Reviews</li>
<li>Reviews</li>
<li>Trip Prep</li>
</ul>
</nav>
<h1>Cycling Tours</h1>
<figure>
<img id="banner" src="images/cycling_banner.png" alt="cycling">
</figure>
</header>
</section>
<section id="aboutus">
<h3> About Us </h3>
<p> Cycling Tours began when Bill Randolf and three of his friends from high school began to cycle regularly every weekend. Their routine cycling evolved into frequent cycling trips and they cultivated a following. Before they knew it, other friends and family members asked to join them in their trips.</p>
<img src = "images/cyclists.jpeg" alt="cyclists" class = "floatright">
<p>Cyclists are enthusiastic and very health and environmentally conscious. For this reason, all of our trips include vegan options for meals, recycled paper food serving utensils, and hybrid vehicles to escort the cyclists.</p>
<p>Our trips are suitable for solo cyclists, couples, friends, and families. We provide camping accommodation for off-road cycling trips, and shared accommodations for couples, friends and families. If you are travelling solo, we can match you with someone for shared accommodations. You can also pay the single-supplement if you wish to have a room of your own.</p>
<p>After you've completed one trip with us, we're sure you'll want to do more. Over 80% of our customers have been on at least one prior trip with us. We're always looking for new ideas for trips, so please let us know if you have any ideas!</p>
</section>
<section id="tripinfo">
<h3>Trip Information</h3>
<br>
<p>Our trips are planned carefully to provide the best experience for cyclists.</p>
<br>
<p>Types of trips include self-contained camping tours, inn-to-inn tours and other adventure cycling.</p>
</section>
<footer>
<div id = "footer">
<hr>
<hr>
<p>Cycling Tours✻ P.O. Box 4455✻ Brantford,ON✻ N3T 2J0 <br> Image Credit: http://www.bikelink.com/images/banner01.jpg </p>
</div>
</footer>
</div>
</body>
</html>
cyclestyle.css
* {
margin: 0;
padding: 0;
}
body {
height:90vh;
}
p {
text-indent: 50px;
line-height:1.5em;
}
#tripinfo {
background-color:#bbccdd;
float:right;
width:20%;
height:68.5vh;
}
header {
}
#banner {
width:100%;
}
nav {
list-style-type: none;
text-align: center;
text-decoration: none;
}
nav li {
display: inline ;
}
#container {
width: 1000px;
margin: 20px auto;
}
* {
box-sizing: border-box;
}
nav a{
border: 2px solid black;
padding: 8px;
border-radius:10px 10px 0px 10px;
text-decoration:none;
background-color:#bbccdd;
color:white;
font-family: verdana;
font-weight:bold;
}
a:hover {
color: black;
}
#aboutus {
float:left;
width:80%;
height:80vh;
}
h1 {
position:absolute;
font-family:Verdana;
color:White;
font-size:3.5em;
}
h3 {
font-family:Verdana;
}
p {
font-family:Verdana;
font-size:.90em;
}
#footer {
text-align:centre;
font-weight:bold;
}
#container {
width: 1000px;
}
You are almost there. Need to remember when you use the float. Always create another div that use CSS clear:both and it will push the next div to the bottom.
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="cyclestyle.css">
<title>Cycling Tours</title>
</head>
<body>
<div id="container">
<section id="header">
<header>
<nav>
<ul>
<li>About us</li>
<li>Ask Us</li>
<li>Destination</li>
<li>FAQ</li>
<li>Reviews</li>
<li>Reviews</li>
<li>Trip Prep</li>
</ul>
</nav>
<h1>Cycling Tours</h1>
<figure>
<img id="banner" src="images/cycling_banner.png" alt="cycling">
</figure>
</header>
</section>
<section id="aboutus">
<h3> About Us </h3>
<p> Cycling Tours began when Bill Randolf and three of his friends from high school began to cycle regularly every weekend. Their routine cycling evolved into frequent cycling trips and they cultivated a following. Before they knew it, other friends and family members asked to join them in their trips.</p>
<img src = "images/cyclists.jpeg" alt="cyclists" class = "floatright">
<p>Cyclists are enthusiastic and very health and environmentally conscious. For this reason, all of our trips include vegan options for meals, recycled paper food serving utensils, and hybrid vehicles to escort the cyclists.</p>
<p>Our trips are suitable for solo cyclists, couples, friends, and families. We provide camping accommodation for off-road cycling trips, and shared accommodations for couples, friends and families. If you are travelling solo, we can match you with someone for shared accommodations. You can also pay the single-supplement if you wish to have a room of your own.</p>
<p>After you've completed one trip with us, we're sure you'll want to do more. Over 80% of our customers have been on at least one prior trip with us. We're always looking for new ideas for trips, so please let us know if you have any ideas!</p>
</section>
<section id="tripinfo">
<h3>Trip Information</h3>
<br>
<p>Our trips are planned carefully to provide the best experience for cyclists.</p>
<br>
<p>Types of trips include self-contained camping tours, inn-to-inn tours and other adventure cycling.</p>
</section>
<div class="clearfix"></div>
<footer>
<div id = "footer">
<hr>
<hr>
<p>Cycling Tours✻ P.O. Box 4455✻ Brantford,ON✻ N3T 2J0 <br> Image Credit: http://www.bikelink.com/images/banner01.jpg </p>
</div>
</footer>
</div>
</body>
</html>
CSS
* {
margin: 0;
padding: 0;
}
body {
height:90vh;
}
p {
text-indent: 50px;
line-height:1.5em;
}
#tripinfo {
background-color:#bbccdd;
float:right;
width:20%;
height:68.5vh;
}
header {
}
#banner {
width:100%;
}
nav {
list-style-type: none;
text-align: center;
text-decoration: none;
}
nav li {
display: inline ;
}
#container {
width: 1000px;
margin: 20px auto;
}
* {
box-sizing: border-box;
}
nav a{
border: 2px solid black;
padding: 8px;
border-radius:10px 10px 0px 10px;
text-decoration:none;
background-color:#bbccdd;
color:white;
font-family: verdana;
font-weight:bold;
}
a:hover {
color: black;
}
#aboutus {
float:left;
width:80%;
/* height:80vh; */ /* I remove this line */
}
h1 {
position:absolute;
font-family:Verdana;
color:White;
font-size:3.5em;
}
h3 {
font-family:Verdana;
}
p {
font-family:Verdana;
font-size:.90em;
}
.clearfix {
clear:both;
}
#footer {
text-align:center;
font-weight:bold;
}
#footer p {
padding-top:10px;
}
#container {
width: 1000px;
}
DEMO
To fix the margin you could try adding float:right;width:100%; into #footer and adding:
#footer p {
padding-top:10px;
padding-left:20%;
}
to fix the whacky text format.
#footer and #footer p:
#footer {
text-align:centre;
font-weight:bold;
float:right;
width:100%;
}
#footer p {
padding-top:10px;
padding-left:20%;
}
If you want to add some thickness into your hr line you could also add:
hr {
border: none;
height: 1px;
/* Set the hr color */
color: #333; /* old IE */
background-color: #333; /* Modern Browsers */
}
Result:
Hey everyone I am having an issue where my social media buttons for my website are not staying in the nav header area. I have tried using the float attribute and it wont stay in the header here are some images to show you what I am talking about.
http://imgur.com/zwmtXju
as you can see in this image the social media buttons wont stay in the header area, any help would be appreciated. Thanks in advance.
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/main.css">
<script src="js/jquery-2.1.1.min.js"></script>
<script src="js/main.js"></script>
</head>
<body>
<div id="container">
<header>
<nav class="clearfix">
<a href="#" id="brand">
<h1>Skull</h1>
</a>
<ul class="clearfix">
<li>Moonshine</li>
<li>Recipes</li>
<li>The Blog</li>
<li>The Store</li>
<div id="socialMedia">
<img src="imgs/fbsm.png" alt=""/>
<img src="imgs/tsm.png" alt=""/>
<img src="imgs/psm.png" alt=""/>
</div>
</ul>
Skull®
</nav>
</header>
<div id="content">
<div id="story">
<p id="ourStory">Our Story</p>
<h1 id="bootleg">Bootlegging</h1>
<p id="storyBoard">
<span class="storyTelling">This is our history,</span>
<span class="storyTelling">our story,</span>
<span class="storyTelling">of how we became one of the greatest</span>
<span class="storyTelling">moonshine brands on the planet.</span>
<span class="storyTelling">A story of struggle,</span>
<span class="storyTelling">and independence,</span>
<span class="storyTelling">accompanied by expert craftmanship.</span>
<span class="storyTelling">Using years as chapters of our book of life</span>
<span class="storyTelling">we will show you what makes our moonshine so great.</span>
<span class="storyTelling">Scroll down and enjoy.</span>
</p>
</div>
<div id="timeLine">
<div id="present">
<h1>Here and Now</h1>
<p>Now in 2014 we are a globally recognized brand that many people know and love. </p>
<img src="imgs/skullBrand.png" alt=""/>
</div>
<div id="2000">
<h1>2000</h1>
<p>In 2000, bars started buying our moonshine to make drinks with. This was a huge milestone for Skull®
Because, it brought our brand to the attention of many people that were not yet customers of our great alcohol. </p>
<img src="imgs/skullBrand.png" alt=""/>
</div>
<div id="1960">
<h1>1960</h1>
<p>By 1960 we were booming with popularity. Skull alcohol became a recognized brand.</p>
<img src="imgs/skullBrand.png" alt=""/>
</div>
<div id="1933">
<h1>1933</h1>
<p>By 1933 Prohibition was repealed, and the market grew thin. But that didn't stop us. Skull alcohol was born.
With our superior craftsmanship skills, and our excellent customer satisfaction our legacy continued</p>
<img src="imgs/prohibitionends.jpg" width="263" height="185" alt=""/>
</div>
<div id="1920">
<h1>1920</h1>
<p>By the early 1900s, states began passing laws that banned alcohol sales, and consumption. in 1920,
nationwide Prohibition went in to effect. It was the greatest thing moonshiners could have asked for.
Because there was no legal alcohol available, the demand for moonshine shot up like a rocket. Moonshiners
had so much business they couldn't even keep up with the demand. Hidden saloons called speakeasies were even
opened in every city. they were used to sell the illegal whisky.</p>
<img src="imgs/dry.jpg" height="200" alt=""/>
</div>
<div id="1860">
<h1>1860</h1>
<p>The hatred from the Whisky Rebellion escalated in to the 1860s as the government continued
to try and collect excise tax to fund the Civil War. At this time Moonshiners and many other anti-governmental
groups, such as the KKK, joined forces to kill anyone who would release the location of their stills and attack IRS officials and
their families.</p>
<img src="imgs/kkk.jpg" width="263" height="185" alt=""/>
</div>
<div id="1794">
<h1>1794</h1>
<p>The American people, who had just fought a war to get out from under oppressive British taxes
(among other things), were not particularly pleased. So, they decided to just keep making their own
whisky, completely ignoring the federal tax. All the resentment that the citizens had toward the
government eventually exploded when several hundred angry citizens took over the city of Pittsburgh,
Pennsylvania. President George Washington called apon the militia, a group of 13,000 troops to disperse
The angry mob. The Whiskey Rebellion was a failure.</p>
<img src="imgs/wr.jpg" alt=""/>
</div>
<div id="1791">
<h1>1791</h1>
<p>Moon shining began very early in American history. Shortly after the Revolution,
the United States found itself struggling to pay for the expense of fighting a long war.
The solution was to place a federal tax on liquors and spirits that would soon be known
as the whisky tax.</p>
<img src="" alt=""/>
</div>
</div>
</div>
<footer>
<div class="footerContent"></div>
<div class="footerContent"></div>
<div class="footerContent"></div>
</footer>
</div><!--containerEnd-->
</body>
</html>
/* Clearfix */
.clearfix:before,
.clearfix:after {
content: " ";
display: table;
}
.clearfix:after {
clear: both;
}
.clearfix {
*zoom: 1;
}
body {
width: 1920px;
background-color: #202021;
}
#container{
width: 100%;
margin: 0;
background: url('../imgs/565.jpeg') repeat-y center center fixed ;
}
header{
width: 100%;
height: 100px;
}
nav{
width: 100%;
height: 100px;
position: relative;
border-bottom: 2px solid #cccccc;
}
#brand{
margin-top:15px;
width: 250px;
height: 70px;
float: left;
background: url('../imgs/skullAlcoholText.png') no-repeat;
}
#brand h1{
display: none;
}
nav ul{
padding: 0;
margin: 0 auto;
width: 600px;
height: 100px;
list-style: none;
color: #fff;
border-bottom: 2px solid #cccccc;
}
nav li{
display: inline;
float: left;
}
nav a{
color: #fff;
display:inline-block;
width: 150px;
text-align: center;
text-decoration: none;
line-height: 100px;
}
nav li a{
border-right: 1px solid #cccccc;
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
}
nav li:first-child a{
border-left: 1px solid #cccccc;
}
nav a:hover, nav a:active {
color: #ffffff ;
}
#socialMedia{
width: 320px;
float: right;
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
}
#socialMedia a:first-child{
}
#socialMedia a{
width: 100px;
}
nav a#pull {
display: none;
}
#content {
text-align: center;
}
#story{
margin: auto;
line-height: 2;
width: 300px;
height: 200px;
}
#ourStory, #bootleg, #storyBoard{
text-align: center;
color: #ffffff;
}
Your nav ul width is 600px. It's too small to contain all these elements. Therefore div is on next row. I also prefer to change div on something more semantic, like ul.
Put your code in table
<table width="646" border="0">
<tr><td width="98"><ul class="clearfix"><li>Moonshine</li></td><td width="82"><li>Recipes</li></td><td width="88"><li>The Blog</li></td><td width="110"><li>The Store</li></td>``<td width="78"><div id="socialMedia"><img src="imgs/fbsm.png" alt=""/></div></td><td width="78"><div id="socialMedia"><img src="imgs/tsm.png" alt=""/></div></td><td width="82"><div id="socialMedia"><img src="imgs/psm.png" alt=""/></div></td></tr></table></ul>
In my current HTML project I am using a side navigation bar for website navigation. If I scroll to the right too much on the page however the side navigation bar will overlay onto the body text of the page. How to I keep the side bar from adjusting for the view-port present in the browser. Here are some screenshots and my code for the page.
http://cjcahala.imgur.com/all/
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="">
<meta name="description" content="">
<meta name="author" content="">
<title>cjcahala.net</title>
<style>
* {
font-family: "Arial Rounded MT Bold", "Helvetica Rounded", Arial, sans-serif;
}
/***********************************/
#media only screen and (max-width: 640px) {
body {
width: 100%;
margin: 0 auto;
}
.btn {
font-family: Arial;
color: #ffffff;
font-size: 12px;
padding: 0px;
text-decoration: none;
margin: auto;
text-align:center;
}
.btn:hover {
background: #3cb0fd;
text-decoration: none;
}
.btn2 {
font-family: Arial;
color: #ffffff;
font-size: 18px;
padding: 8px;
text-decoration: none;
margin: auto;
text-align:center;
background: #3498db;
}
.btn2:hover {
background: #3cb0fd;
text-decoration: none;
}
.top {
position:absolute;
left:178px; right:0;
height: 92px;
margin:auto;
}
.left {
position: fixed;
left:0; top:0; bottom: 0;
width: 125px;
background: #3498db;
margin:auto;
}
.main {
position: absolute;
left:125px; top:92px; right:0; bottom:0;
width:400px;
margin:auto;
}
p {
position:relative;
left:20px;
}
.peppy {
position:relative;
left:10px;
}
}
/***********************************/
#media only screen and (min-width: 640px) {
body {
width: 100%;
margin: 0 auto;
}
.btn {
font-family: Arial;
color: #ffffff;
font-size: 18px;
padding: 0px;
text-decoration: none;
margin: auto;
text-align:center;
}
.btn:hover {
background: #3cb0fd;
text-decoration: none;
}
.btn2 {
font-family: Arial;
color: #ffffff;
font-size: 18px;
padding: 8px;
text-decoration: none;
margin: auto;
text-align:center;
background: #FFFF00;
}
.btn2:hover {
background: #3cb0fd;
text-decoration: none;
}
.top {
position:absolute;
left:178px; right:0;
height: 92px;
}
.left {
position: fixed;
left:0; top:0; bottom: 0;
width: 178px;
background: #3498db;
}
.main {
position: absolute;
left:178px; top:92px; right:0; bottom:0;
width:400px;
}
p {
position:relative;
left:20px;
}
.peppy {
position:relative;
left:10px;
}
}
</style>
</head>
<body>
<div class="left">
<a class="btn" href="./index.html">Home</a><br><br>
<a class="btn" href="./about.html">About</a><br><br>
<a class="btn" href="./contact.html">Contact</a><br><br>
<a class="btn" href="./media.html">Media</a><br><br>
<a class="btn" href="http://cjcahala.tumblr.com/">Blog</a><br><br>
<a class="btn" href="./donate.html">Donate</a><br><br>
<a class="btn" href="https://twitter.com/share" data-related="cjcahala" data-hashtags="cjcahala">Share This Page On Twitter</a><br><br>
<a class="btn" href="https://twitter.com/intent/tweet?button_hashtag=cjcahala" data-related="cjcahala">Tweet #cjcahala</a><br><br>
<a class="btn" href="https://twitter.com/cjcahala" data-show-count="false">Follow Me #cjcahala</a><br><br>
<a class="btn" href="https://twitter.com/intent/tweet?screen_name=cjcahala" data-related="cjcahala">Tweet To Me #cjcahala</a><br><br>
<a class="btn" href="https://www.facebook.com/cjcahalparaolympic" data-action="like" data-send="true">Like Me On Facebook</a><br><br>
<a class="btn" href="http://www.youtube.com/channel/UCdUcO0wCP3Fu2RbF8uo-iCQ/featured">Subscribe To My Youtube Feed</a><br><br>
<a class="btn" href="https://plus.google.com/109790307919254113898/posts">Add Me To Your Google Plus Circle</a><br><br>
<a class="btn" href="http://cjcahala.tumblr.com/">Follow Me On Tumblr</a><br><br>
<a class="btn" href="http://instagram.com/cj_cahala">Follow Me On Instagram</a><br><br>
</div>
<div class="main">
<h1 class="peppy">Hello There</h1>
<p>
Thanks for taking the time to check out my site. I am an aspiring paralympic athlete with some big goals for the future. I come from a blue collar home and the world of snowboarding is a really expensive one. Check out the website, take a look at my videos, or email me, and of course be social. If you are feeling particularly awesome today, you can even donate below.
</p>
<p>
<a class="btn2" href="https://adaptiveadventures.webconnex.com/2013donate">Awesomeness-Infused Donate Button</a>
</p>
<h1 class="peppy">About Me</h1>
<p>
Hello, my name is CJ Cahala and I am hoping to accomplish a dream. It was always a thought in the back of my head of being a paralympic athlete, living life on the mountain and hopefully having some medals to show for it. I was born after several hours of fetal distress and a lack of oxygen causing permanent brain damage in the form of ataxic cerebral palsy, generalized dystonia, and cervical dystonia. To make some big words small, its hard for me to balance at times, my head shakes constantly, and my hands tremor badly enough that ever since about second grade I’ve had to use a computer to write things down and complete my school work. And then there’s the people that meet me and think I’m just a heroin junkie, but that’s another story. As I grew up I didn’t really find learning to walk with the assistance of a walker or riding a three wheeled bicycle was weird or not normal until about second grade. Due to the tremors in my hands I couldn’t write down the day’s writing assessment, and this was when I started to cry. The reason being was that I wasn’t like the other kids, but little did I know that no-one really cared about anything in elementary school except getting to recess on time and trading up your cold lunch as much as possible so that you got the best lunch at the table. As I grew older I started to realize that my disability was more of a discussion topic than a reason for people not to converse with me. By the time I outgrew my first board I found that it was time to step my game up. I got decked out with the best board I could find and soon got out to Colorado for the first time. It was when I got out to Colorado that I thought, “I could so do this for a living!”. And now, that is exactly what I want to do. My mom is a teacher’s aid at the local high school and my dad is a screen printer, and I just got a minimum wage job, which is why I need sponsorship for my travels to training camps and snowboardcross competitions. If you could find a way to get me connected with any corporate sponsors, organizations who sponsor kids like me, or individual people that you think may be interested to hear my story, my thanks will be endless. If you love powder days out on the mountain, then you must understand my yearn to be able to spend my life living my dream snowboarding.
</p>
<h4 class="peppy">Be Social</h4>
<p>
A website like mine thrives on you-the viewer- being social. As you may have seen, I threw up some socialte buttons at the top of the page. Though it may sound cheesy, sharing is caring in my world. The more people who see the site, the more energy it has behind it, and energy is what I need to keep doing what I love.
</p>
<h4 class="peppy">Updates and More</h4>
<p>
So, you see my site, but want know what I'm doing. You are supporting me, so I don't mind internet stalkers. Check out my blog here and from there, you will see links to follow me on twitter or get all caught up on my Youtube uploads (plus many other ways to network with me), all of which are awesome non-productive ways to spend time on the internet. If you want come check out my Blog
</p>
<h4 class="peppy">Want To Learn More About Me</h4>
<p>
If you really want to know more about me or if you have a media inquiry, send me an email at is-cj#anche.no
<h1 class="peppy">Contacting Me</h1>
<p class="lead">
To contact me please email me at is-cj#anche.no. The social networking buttons at the top of the page can also be used to connect with me. If you wish to donate, you can click on the donate button below and be sure to put "This donation is for CJ Cahala" in the "notes" section of the Adaptive Adventures donate page. If you have any donation questions, you can send me an email again at is-cj#anche.no.
</p>
<h1 class="peppy">Check Out My Videos</h1>
<p>
<!--Video player-->
<iframe width="640" height="360" src="http://www.youtube.com/embed/InaOC5h2Ebo?rel=0" frameborder="0" allowfullscreen></iframe>
<!--Video Description-->
</p>
</div>
</body>
</html>
Change position: fixed to position: absolute under the .left class.
.left {
position: absolute;
left:0; top:0; bottom: 0;
width: 125px;
background: #3498db;
margin:auto;
}
DEMO FIDDLE
I am creating a website and I came across a problem which i cant seemed to get my head around it. I have managed to put border around my webpage. I have a gradient strip image outside the border, but inside border I would like to put background color. I know, I need to put the the background color in BODY and I have done that. The background image (gradient one) works but its all over the webpage and I only want it around the border, and inside the i want a background color.
<!doctype html>
<html>
<head>
<title>QPI FAN CLUB</title>
<link rel="stylesheet" href="style.css">
<style>
#bod {
padding: 5em;
}
</style>
</head>
<body>
<div id="wrap">
<div id="logo">
<img class="p" src="images/logo.png" align="left">
</div>
<img class="d" src="images/title.gif" align="middle">
<div id="menu">
<div id="menu2">
<ul>
<li><span>Home</span>
</li>
<li><span>About Us</span>
</li>
<li><span>Teams and Fixtures</span>
</li>
<li><span>Shop</span>
</li>
<li><span>Contact Us</span>
</li>
</ul>
</div>
</div>
</div>
<div id=bod>
<b><header style="color:black"></a> Manchester United </b>
</header>
<P>Manchester United Football Club is an English professional football club, based in Old Trafford, Greater Manchester, that plays in the Premier League. Founded as Newton Heath LYR Football Club in 1878, the club changed its name to Manchester United
in 1902 and moved to Old Trafford in 1910.</p>
<b><header style="color:black"></a> Manchester City </b>
</header>
<p>Manchester City Football Club is an English Premier League football club based in Manchester. Founded in 1880 as St. Mark's (West Gorton), they became Ardwick Association Football Club in 1887 and Manchester City in 1894. The club has played at
the City of Manchester Stadium since 2003, having played at Maine Road from 1923. The club's most successful period was in the late 1960s and early 1970s when they won the League Championship, FA Cup, League Cup and European Cup Winners' Cup
under the management team of Joe Mercer and Malcolm Allison.</p>
</div>
</body>
</html>
Stylesheet:
body {
text-align: center;
margin: 0px 12%;
background-image: url("images/mainbk.gif");
background-repeat: repeat;
border: 1px solid gray;
background-color: white;
}
#wrap {
width: 80%;
margin: 0 auto;
text-align: left;
}
img.d {
padding-top: 3em;
width: 450px;
}
#menu2 ul li {
display: block;
float: left;
padding: 0 10px;
background-image: url("bk2.gif");
}
#menu {
padding-top: .5em;
}
#menu a {
display: inline-block;
padding: 0 25px;
background-image: url("images/bk.gif");
color: White;
text-decoration: none;
font: bold 12px Arial;
line-height: 32px;
line-width: 10px;
}
#menu a:hover {
background-position: 0 -60px;
}
#logo img {
position: relative;
top: 0px;
right: 0px;
height: 125px;
width: 125px;
}
You should have a container div.
I edited your code like that.
Check this http://jsfiddle.net/KLaWa/
HTML
<body>
<div class="container">
<div id="wrap">
<div id="logo">
<img class="p" src="images/logo.png" align="left" />
</div>
<img class="d" src="images/title.gif" align="middle" />
<div id="menu">
<div id="menu2">
<ul>
<li><span>Home</span>
</li>
<li><span>About Us</span>
</li>
<li><span>Teams and Fixtures</span>
</li>
<li><span>Shop</span>
</li>
<li><span>Contact Us</span>
</li>
</ul>
</div>
</div>
</div>
<div id="bod">
<b><header style="color:black"> Manchester United
</header></b>
<p>Manchester United Football Club is an English professional football club, based in Old Trafford, Greater Manchester, that plays in the Premier League. Founded as Newton Heath LYR Football Club in 1878, the club changed its name to Manchester United
in 1902 and moved to Old Trafford in 1910.</p>
<b><header style="color:black"> Manchester City
</header></b>
<p>Manchester City Football Club is an English Premier League football club based in Manchester. Founded in 1880 as St. Mark's (West Gorton), they became Ardwick Association Football Club in 1887 and Manchester City in 1894. The club has played at
the City of Manchester Stadium since 2003, having played at Maine Road from 1923. The club's most successful period was in the late 1960s and early 1970s when they won the League Championship, FA Cup, League Cup and European Cup Winners' Cup
under the management team of Joe Mercer and Malcolm Allison.</p>
</div>
</div>
</body>
CSS
#bod {
padding: 5em;
}
.container {
text-align: center;
margin: 0px 12%;
background-image: url("images/mainbk.gif");
background-repeat: repeat;
border: 1px solid gray;
background-color: #999;
}
#wrap {
width: 80%;
margin: 0 auto;
text-align: left;
}
img.d {
padding-top: 3em;
width: 450px;
}
#menu2 ul li {
display: block;
float: left;
padding: 0 10px;
background-image: url("bk2.gif");
}
#menu {
padding-top: .5em;
}
#menu a {
display: inline-block;
padding: 0 25px;
background-image: url("images/bk.gif");
color: White;
text-decoration: none;
font: bold 12px Arial;
line-height: 32px;
line-width: 10px;
}
#menu a:hover {
background-position: 0 -60px;
}
#logo img {
position: relative;
top: 0px;
right: 0px;
height: 125px;
width: 125px;
}
If I understood you, I think you need to add css rule for div with "bod" id...
So, you need to write this in your style.css file...
#bod {
background-color : #ffffff; (or any other color)
}
to get color in the area inside the border...
You added that rule for body, and that is not correct because body represents the whole page, not just area inside the border.