I can't seem to get my 4th section to fall into line with the other sections.
Any help or clues would be greatly appreciated. I am at a loss as to what is wrong, I keep messing around with the chrome devolper tool trying to luck into a solution.
http://landonsimmons.altervista.org/School/assign7/assign7.html
<!doctype html>
<html lang="en">
<head>
<meta charset="utc-8">
<link rel="stylesheet" type="text/css" href="css/main.css">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<header>
<img src="img/logo.png" />
<span>Computer Science Department</span>
</header>
<nav>
<ul>
<li>Contact</li>
<li>Faculty</li>
<li>Programs</li>
<li>Classes</li>
<li>Program List</li>
</ul>
</nav>
<section id="left">
<ul>
<li>
<a>Computer Programming</a>
<a>Computer Specialist</a>
</li><br>
<li>
<a>Information Technology Analysis</a>
</li><br>
<li>
<a>Information Technology Management</a>
</li><br>
<li>
<a>Network System Developer</a>
</li><br>
<li>
<a>Web Development Specialist</a>
</li>
</ul>
</section>
<section id="middle">
<h1 id="hist">History of College</h1>
<p id="first">
</p>
<p>
</p>
<h1 id="comp">About Computer Science</h1>
<p>
<img id="img" src="img/Capture3.PNG" />
While the computing field is one of the fastest growing segments of industry,
it is also one of the fastest changing areas technologically. Computing professionals
education does not stop with the college degree, but continues with seminars, conferences, and advanced courses and training.
In computer theory and applications, new ideas are developed every day.
Success requires an ongoing commitment to learning to maintain knowledge, skills and career opportunities.
</p>
</section>
<section id="right">
<h1 id="gain">Gainful Employment Information</h1>
<p>
The U.S. Department of Education requires colleges to disclose a variety of information for any financial
aid eligible program that <q>prepares students for gainful employment in a recognized occupation.</q> The information provided
here describes the graduation rates, the median debt of students who
completed the program and other important information regarding gainful employment for the latest completed academic year (as of July 1).
</p>
<br>
<p style="font-size: 13px">— US Labor Department</p>
</section>
<section id="bot">
<video height=260 width=323 >
<source src="vid/a1.mp4"/>
</video>
</section>
<footer>
<address>
</address>
</footer>
</body>
</html>
/***********************************************
font
***********************************************/
pre {
font-family: serif;
}
#first::first-letter {
font-size: 45px;
}
#big b {
letter-spacing: 4px;
font-family: serif;
font-size: 20px;
text-align: center;
margin-left: 180px
}
#middle p {
margin-right: 5px;
margin-top: -10px;
}
#right p {
margin: 16px 30px;
}
h1 {
padding: 5px 40px;
letter-spacing: 2px;
font-family: "Times New Roman", Times, serif;
font-weight: lighter;
}
footer address {
color: green;
font-variant: small-caps;
font-style: normal;
font-weight: bolder;
font-size: 12px;
text-align: center;
font-family: sans-serif;
}
/***********************************************
page setup
***********************************************/
body {
background-image: url(../img/parch.jpg);
display: inline-block;
max-width: 850px;
margin: 25px 8px 0 8px;
}
#left {
width: 20%;
float: left;
text-align: center;
}
#middle {
width: 40%;
border-right: 1px solid black;
border-left: 1px solid black;
display: inline-block;
}
video {
overflow: hidden;
}
#bot {
float: right;
border-top: 1px solid black;
border-right: 1px solid black;
border-left: 1px solid black;
width: 38%;
display: inline-block;
vertical-align: sub;
}
#right {
border-bottom: 1px solid black;
border-right: 1px solid black;
border-left: 1px solid black;
width: 38%;
display: inline-block;
float: right;
}
#small {
width: 18%;
text-align: center;
display: inline-block;
float: left;
}
#big a {
letter-spacing: 8px;
}
#big {
width: 75%;
border-left: 1px solid gray;
display: inline-block;
padding-left: 25px;
}
#img {
max-height: 90px;
max-width: 140px;
margin: 10px 10px 10px 10px;
float: right;
}
/***********************************************
color scheme
***********************************************/
#comp {
background-color: gray;
text-align: center;
color: #872E3F;
}
#gain {
background-color: #B28570;
text-align: center;
}
#hist {
background-color: black;
color: #872E3F;
text-align: center;
}
#right {
background-color: #FFC1A2;
}
/***********************************************
Header
***********************************************/
header {
width: 100%;
height: 120px;
background-color: #000;
}
header span {
color: #D2E1FF;
font-size: 25px;
margin: 30px;
letter-spacing: 4px;
position: relative;
top: -30px;
}
/***********************************************
nav + list
***********************************************/
#left ul {
list-style: none;
padding: 0 0 0 0;
}
#left ul li a {
text-decoration: none;
color: black;
}
#small ul {
list-style: none;
padding: 0 0 0 0;
}
#small ul li a {
text-decoration: none;
color: black;
}
nav ul li a {
color: #fff;
font-size: 18px;
text-decoration: none;
padding: 0 15px 0 50px;
font-weight: bold;
letter-spacing: 2px;
}
nav ul {
list-style: none;
margin: 0 0 0 0;
}
nav {
width: 100%;
height: 25px;
background-color: #0000FC;
}
nav ul li {
display: inline;
}
nav ul li a:hover {
color: red;
}
#small ul li a:hover,
#left ul li a:hover {
color: #ff6666;
outline: 1px double black;
}
/***********************************************
footer
***********************************************/
footer {
clear: right;
border-top: 1px solid black;
}
Here are the two changes you will have to made
Add float:left; to #middle and change clear:right to clear:both for footer css.
footer { clear:both; }
#middle {float:left;width: 40%;border-right: 1px solid black;border-left: 1px solid black;display: inline-block;}
Working CODEPEN
Or you can do this :
put right and bot section in a new div
the new div should have the right styles as a class style = .right so you can keep the #right section style
take out borders, floats, and #right and #bot
Look at the result there :
http://lespointscom.com/a/misc/demo/2016_06_21/question_2/assign7.html
changed HTML
<div class="right">
<section id="right">
<h1 id="gain">Gainful Employment Information</h1>
<p>
The U.S. Department of Education requires colleges to disclose a variety of information for any financial
aid eligible program that <q>prepares students for gainful employment in a recognized occupation.</q> The information provided
here describes the graduation rates, the median debt of students who
completed the program and other important information regarding gainful employment for the latest completed academic year (as of July 1).
</p>
<br>
<p style="font-size: 13px">— US Labor Department</p>
</section>
<section id="bot">
<video height="260" width="323">
<source src="http://landonsimmons.altervista.org/School/assign7/vid/a1.mp4">
</video>
</section>
</div>
changed CSS
#bot {
/*float: right;
border-top: 1px solid black;
border-right: 1px solid black;
border-left: 1px solid black;
width: 38%;*/
display: inline-block;
vertical-align: sub;
}
#right {
/*border-bottom: 1px solid black;
border-right: 1px solid black;
border-left: 1px solid black;
width: 38%;*/
display: inline-block;
/*float: right;*/
}
Related
I need to align my text.
Current it reads in the nav menu:
Home
Visit us Shop Our History
I need it to be on the same line, and not have home above the rest.
.navigation {
background-color: #333333;
Width: 1024px;
color: #fefefe;
font-size: 120%;
}
#current {
border-bottom: 3px;
border-style: solid;
border-color: #ff0000;
border-top: 0px;
border-left: 0px;
border-right: 0px;
width: 200px;
}
<nav class="navigation">
<p>
<div id="current"> Home </div>
Visit Us
Shop
our History
</p>
</nav>
I am SUPER new to this niche.
You can use flexbox here
.navigation {
...
display: flex;
align-items: center;
}
.navigation {
background-color: #333333;
width: 1024px;
color: #fefefe;
font-size: 120%;
display: flex;
align-items: center;
}
#current {
border-bottom: 3px;
border-style: solid;
border-color: #ff0000;
border-top: 0px;
border-left: 0px;
border-right: 0px;
width: 200px;
}
<nav class="navigation">
<p>
<div id="current"> Home </div>
Visit Us
Shop
our History
</p>
</nav>
Using an 'inline element' like <span> as opposed to a 'block-level element' like <div> will fix that.
MDN
.navigation {
background-color: #333333;
Width: 1024px;
color: #fefefe;
font-size: 120%;
}
#current {
border-bottom: 3px;
border-style: solid;
border-color: #ff0000;
border-top: 0px;
border-left: 0px;
border-right: 0px;
width: 200px;
}
<nav class="navigation">
<p>
<span id="current">Home</span>
Visit Us
Shop
our History
</p>
</nav>
I am trying to get a White Border Around Everything present in the <main> tag, but I have not had any luck. It will only to around the <nav> section for some reason. Help?
header{
background-color: #030303;
color:#ffffff;
height: 60px;
text-align: center;
padding-top: 30px;
padding-left: 3em;
background-image: url("assets/dndlogo.jpg");
background-repeat: no-repeat;
background-position: right;
}
#dndlogo{
float: right;
height: 50px;
}
header h1{
font-family: Georgia, "Times New Roman", Serif;
margin-top: 0px;
font-size: 3em;
letter-spacing: 0.25em;
}
#schedulebox{
float: left;
height: 750px;
width: 15%;
float: left;
background-color: aqua;
text-align: center;
}
#homecontent{
height: 750px;
width: 84.3%;
float: left;
background-color: aquamarine;
border: red solid;
}
nav {
overflow: hidden;
background-color: #030303;
font-family: Arial;
float: top;
margin: 0;
padding: 0;
}
nav li{
float: left;
font-size: 20px;
color: black;
text-align: center;
padding: 15px 20px;
text-decoration: none;
list-style-type: none;
color: white;
height: 15px;
}
nav li:hover{
background-color: white;
border-radius: 15px;
transition: 0.5s;
color: black;
}
nav ul{
margin: 0;
padding-bottom: 10px;
padding-left: 0;
}
footer{
background-color: #030303;
float: bottom;
color: white;
}
#schedulebox h1{
border-bottom: solid;
padding-top: 0;
margin: 0;
}
html{
background-color: #030303;
}
a{
color: white;
text-decoration: none;
}
a:hover{
color: black;
}
main{
border: white solid;
order-radius: 10px;
}
#wrapper{
background-color: #030303;
}
#schedulebox{
border: red solid;
}
#dragonpic{
width: 1600px;
height: auto;
}
<html lang="en">
<link rel="stylesheet" href="style.css" type="text/css">
<head>
<meta charset="UTF-8">
<title>D&D WCTC Home</title>
</head>
<body>
<div id="wrapper">
<header>
<h1>Dungeons and Dragons: WCTC</h1>
</header>
<main>
<nav><ul><li>Home</li> <li><a>Page2</a></li> <li><a>Page3</a></li></ul></nav>
<div id="schedulebox">
<h1>Schedule</h1>
<p>We will usually have games twice every week. However, we will switch games every week so please look at the schedule for the one you wish to join.</p>
<h2>Campaigns in Progress:</h2>
<ul><li>Plague of The Gods</li><li>Inheritence of Felwinter</li></ul>
<h2>Upcoming Campaigns</h2>
<ul><li>Plague of The Gods</li><li>Inheritence of Felwinter</li></ul>
<h3>We run games at 5pm CST to 8pm CST on Wednesdays and Fridays 5pm CST to 8pm CST</h3>
</div>
<div id="homecontent">
<img src="assets/dragon.png" id="dragonpic">
<h2>Who are we?</h2>
<h3>We are a local Dungeons and Dragons club at Waukesha County Technical College. We host multiple games occuring at the same time with as many as 6 players at once. Each party's actions effect the in game universe that other parties will have to deal with. We are always welcoming new members and are also looking for people looking to become Dungeon Masters!</h3>
<h2>Looking to Join?</h2>
<h3>Head over to our join page to learn how to get started!</h3>
</div>
</main>
<footer>
<div id="footercontent">
<small><i>Copyright © 2020 Company</i></small>
</div>
</footer>
</div>
</body>
</html>
I am just trying to get a white border around the main website content and not the <nav> or <header> section. I've tried having a separate division in the code for the content, but to no avail.
You need to have clearfix hack to clear floats. Refer to w3schools tutorial for more info.
<main class="clearfix">
.clearfix::after {
content: "";
clear: both;
display: table;
}
header {
background-color: #030303;
color: #ffffff;
height: 60px;
text-align: center;
padding-top: 30px;
padding-left: 3em;
background-image: url("assets/dndlogo.jpg");
background-repeat: no-repeat;
background-position: right;
}
#dndlogo {
float: right;
height: 50px;
}
header h1 {
font-family: Georgia, "Times New Roman", Serif;
margin-top: 0px;
font-size: 3em;
letter-spacing: 0.25em;
}
#schedulebox {
float: left;
height: 750px;
width: 15%;
float: left;
background-color: aqua;
text-align: center;
}
#homecontent {
height: 750px;
width: 84.3%;
float: left;
background-color: aquamarine;
border: red solid;
}
nav {
overflow: hidden;
background-color: #030303;
font-family: Arial;
float: top;
margin: 0;
padding: 0;
}
nav li {
float: left;
font-size: 20px;
color: black;
text-align: center;
padding: 15px 20px;
text-decoration: none;
list-style-type: none;
color: white;
height: 15px;
}
nav li:hover {
background-color: white;
border-radius: 15px;
transition: 0.5s;
color: black;
}
nav ul {
margin: 0;
padding-bottom: 10px;
padding-left: 0;
}
footer {
background-color: #030303;
float: bottom;
color: white;
}
#schedulebox h1 {
border-bottom: solid;
padding-top: 0;
margin: 0;
}
html {
background-color: #030303;
}
a {
color: white;
text-decoration: none;
}
a:hover {
color: black;
}
main {
border: thick solid white;
border-radius: 10px;
}
.clearfix::after {
content: "";
clear: both;
display: table;
}
#wrapper {
background-color: #030303;
}
#schedulebox {
border: red solid;
}
#dragonpic {
width: 1600px;
height: auto;
}
<html lang="en">
<link rel="stylesheet" href="style.css" type="text/css">
<head>
<meta charset="UTF-8">
<title>D&D WCTC Home</title>
</head>
<body>
<div id="wrapper">
<header>
<h1>Dungeons and Dragons: WCTC</h1>
</header>
<main class="clearfix">
<nav>
<ul>
<li>Home</li>
<li><a>Page2</a></li>
<li><a>Page3</a></li>
</ul>
</nav>
<div id="schedulebox">
<h1>Schedule</h1>
<p>We will usually have games twice every week. However, we will switch games every week so please look at the schedule for the one you wish to join.</p>
<h2>Campaigns in Progress:</h2>
<ul>
<li>Plague of The Gods</li>
<li>Inheritence of Felwinter</li>
</ul>
<h2>Upcoming Campaigns</h2>
<ul>
<li>Plague of The Gods</li>
<li>Inheritence of Felwinter</li>
</ul>
<h3>We run games at 5pm CST to 8pm CST on Wednesdays and Fridays 5pm CST to 8pm CST</h3>
</div>
<div id="homecontent">
<img src="assets/dragon.png" id="dragonpic">
<h2>Who are we?</h2>
<h3>We are a local Dungeons and Dragons club at Waukesha County Technical College. We host multiple games occuring at the same time with as many as 6 players at once. Each party's actions effect the in game universe that other parties will have to
deal with. We are always welcoming new members and are also looking for people looking to become Dungeon Masters!</h3>
<h2>Looking to Join?</h2>
<h3>Head over to our join page to learn how to get started!</h3>
</div>
</main>
<footer>
<div id="footercontent">
<small><i>Copyright © 2020 Company</i></small>
</div>
</footer>
</div>
</body>
</html>
make a div under <div id="wrapper"></div> then give padding around 20px to the wrapper div , and then give border value to the new div you will make under the div with id wrapper
When I removed the float:left, it worked for me like this.
#schedulebox{
height: 750px;
width: 15%;
background-color: aqua;
text-align: center;
}
#homecontent{
height: 750px;
width: 84.3%;
background-color: aquamarine;
border: red solid;
}
Then I added border to wrapper
#wrapper{
border:1vw solid white;
background-color: #030303;
}
This worked for me!
Since there are floated elements in main, you need to add overflow: auto; to main to include all floated elements in it.
header{
background-color: #030303;
color:#ffffff;
height: 60px;
text-align: center;
padding-top: 30px;
padding-left: 3em;
background-image: url("assets/dndlogo.jpg");
background-repeat: no-repeat;
background-position: right;
}
#dndlogo{
float: right;
height: 50px;
}
header h1{
font-family: Georgia, "Times New Roman", Serif;
margin-top: 0px;
font-size: 3em;
letter-spacing: 0.25em;
}
#schedulebox{
float: left;
height: 750px;
width: 15%;
float: left;
background-color: aqua;
text-align: center;
}
#homecontent{
height: 750px;
width: 84.3%;
float: left;
background-color: aquamarine;
border: red solid;
}
nav {
overflow: hidden;
background-color: #030303;
font-family: Arial;
float: top;
margin: 0;
padding: 0;
}
nav li{
float: left;
font-size: 20px;
color: black;
text-align: center;
padding: 15px 20px;
text-decoration: none;
list-style-type: none;
color: white;
height: 15px;
}
nav li:hover{
background-color: white;
border-radius: 15px;
transition: 0.5s;
color: black;
}
nav ul{
margin: 0;
padding-bottom: 10px;
padding-left: 0;
}
footer{
background-color: #030303;
float: bottom;
color: white;
}
#schedulebox h1{
border-bottom: solid;
padding-top: 0;
margin: 0;
}
html{
background-color: #030303;
}
a{
color: white;
text-decoration: none;
}
a:hover{
color: black;
}
main{
border: white solid;
border-radius: 10px;
overflow: auto;
}
#wrapper{
background-color: #030303;
}
#schedulebox{
border: red solid;
}
#dragonpic{
width: 1600px;
height: auto;
}
<html lang="en">
<link rel="stylesheet" href="style.css" type="text/css">
<head>
<meta charset="UTF-8">
<title>D&D WCTC Home</title>
</head>
<body>
<div id="wrapper">
<header>
<h1>Dungeons and Dragons: WCTC</h1>
</header>
<main>
<nav><ul><li>Home</li> <li><a>Page2</a></li> <li><a>Page3</a></li></ul></nav>
<div id="schedulebox">
<h1>Schedule</h1>
<p>We will usually have games twice every week. However, we will switch games every week so please look at the schedule for the one you wish to join.</p>
<h2>Campaigns in Progress:</h2>
<ul><li>Plague of The Gods</li><li>Inheritence of Felwinter</li></ul>
<h2>Upcoming Campaigns</h2>
<ul><li>Plague of The Gods</li><li>Inheritence of Felwinter</li></ul>
<h3>We run games at 5pm CST to 8pm CST on Wednesdays and Fridays 5pm CST to 8pm CST</h3>
</div>
<div id="homecontent">
<img src="assets/dragon.png" id="dragonpic">
<h2>Who are we?</h2>
<h3>We are a local Dungeons and Dragons club at Waukesha County Technical College. We host multiple games occuring at the same time with as many as 6 players at once. Each party's actions effect the in game universe that other parties will have to deal with. We are always welcoming new members and are also looking for people looking to become Dungeon Masters!</h3>
<h2>Looking to Join?</h2>
<h3>Head over to our join page to learn how to get started!</h3>
</div>
</main>
<footer>
<div id="footercontent">
<small><i>Copyright © 2020 Company</i></small>
</div>
</footer>
</div>
</body>
</html>
I'm trying to apply one background color to the left and the right of my main site content, while keeping the middle header/body/footer sections of the website a different color. In other words, I want the left and right sections of the page to be blue (for example) while the middle (which displays all the content) is white.
I've tried a few things--resulting in a mostly white main section--but if there's no content taking up the rest of the page, the surrounding color fills in the space rather than the white. You can see an example of this issue in the "Welcome!" section.
section, aside, h1 {
margin: 0;
padding: 0;
}
section, aside {
margin-top: 1.5em;
margin-bottom: 1em;
}
/*Body styles*/
body {
height: 100%;
width: 1100px;
margin: 0 auto;
border-left: 1px solid gray;
border-right: 1px solid gray;
background-color: #eff0f6;
}
/*Header styles*/
header {
border-bottom: 1px solid gray;
background-color: #ffffff;
}
header #logo {
height: 120px;
width: 120px;
float: left;
padding-top: 5px;
padding-bottom: 5px;
padding-left: 5px;
}
header h1 {
color: black;
margin-left: 100px;
padding-top: 0.5em;
padding-left: 1em;
}
header h2 {
color: black;
margin-left: 100px;
margin-bottom: .2em;
padding-left: 1.5em;
}
/*Navigation styles*/
#nav_menu {
list-style: none;
font-weight: bold;
margin-bottom: 0px;
border-bottom: 1px solid gray;
width: 100%;
text-align: center;
background-color: #ffffff;
height:40px;
}
#nav_menu ul {
list-style-type: none;
margin: 0px;
padding: 0;
width: 100%;
float: left;
}
#nav_menu li {
margin: 0px;
}
#nav_menu li a {
padding-top: 10px;
padding-right: 30px;
padding-bottom: 10px;
padding-left: 30px;
text-decoration: none;
font-weight: bold;
color: #000000;
background-color: #ffffff;
float: left;
}
#nav_menu li a:hover {
color: #FFFFFF;
background-color: #cf2033;
}
.social {
height: 35px;
weight; 35px;
padding-top: 2px;
padding-right: 2px;
padding-left: 2px;
}
/*Section styles*/
section {
width: 764px;
padding-top: 40px;
padding-left: 10px;
padding-right: 10px;
float: left;
background-color: #ffffff;
margin-top: 0px;
}
/*Aside styles*/
aside {
width: 275px;
float: right;
padding-top: 40px;
padding-right: 20px;
padding-bottom: 10px;
padding-left: 20px;
border-left: 1px solid gray;
background-color: #ffffff;
margin-top: 0px;
margin-bottom: 0px;
}
aside h1 {
font-size: 125%;
}
aside #johnjenkinsphoto1 {
height: 200px;
width: 275px;
padding-right: 2px;
padding-bottom: 20px;
float: left;
}
aside p {
margin-bottom: .5em;
}
/*Footer styles*/
footer {
clear: both;
padding: 5px;
margin-top: 1em;
border-top: 1px solid gray;
background-color: #ffffff;
}
<html>
<head>
<title>Coach John R. Jenkins | Consultant, Personal Trainer, Speaker</title>
<link rel="stylesheet" href="main.css">
</head>
<body>
<header>
<img src="fitness icon1.png" alt="Title of Website" id="logo" width="80">
<hgroup>
<h1>Coach John R. Jenkins</h1>
<h2>Your Virtual Guide to Wellness, Performance, and Success</h2>
</hgroup>
<br>
</header>
<nav id="nav_menu">
<ul>
<li>START HERE</li>
<li>CONSULTING</li>
<li>TRAINING</li>
<li>SPEAKING</li>
<li>CONTACT</li>
<img src="pinterest.png" alt="Coach John Jenkins on Pinterest" class="social" align="right">
<img src="instagram.png" alt="Coach John Jenkins on Instagram" class="social" align="right">
<img src="flickr.png" alt="Coach John Jenkins on Flickr" class="social" align="right">
<img src="facebook.png" alt="Coach John Jenkins on Facebook" class="social" align="right">
</ul>
</nav>
<aside>
<h1 align="center">About Coach Jenkins</h1><br>
<img src="coachjohnjenkinsphoto1.png" alt="Photo of Coach John Jenkins" id="johnjenkinsphoto1"><br><br>
<p>A brief collection of biographical information for Coach Jenkins may go here. <br><br>
Unfortunately, Coach Jenkins and I are still planning and revising website content. Thus, I am inserting this information as a placeholder for that information once we have finalized everything.
</p>
</aside>
<section>
<h1>Welcome!</h1>
<p>In this section, I intend to provide summary information pertaining to the purpose of this website. Such information will first be quickly broken down as follows:
<ul>
<li>First piece of summary information goes here.</li>
<li>Second piece of summary information goes here.</li>
<li>Third piece of summary information goes here.</li>
</ul>
Unfortunately, Coach Jenkins and I are still planning and revising website content. Thus, I am inserting this information as a placeholder for that information once we have finalized everything.
</p>
</section>
<footer>© Copyright 2016 John R. Jenkins</footer>
</body>
</html>
I've also put both my HTML and CSS into a fiddle here: https://jsfiddle.net/js_jenkins/oLdo5m7e/
Any suggestions?
You have to keep the body as width:100% and add another div to control the width to 1100px by
body {
height: 100%;
width: 100%;
margin: 0;
background-color: #eff0f6;
}
body > div {
height: 100%;
width: 1100px;
margin: 0 auto;
border-left: 1px solid gray;
border-right: 1px solid gray;
background-color: white;
}
section,
aside,
h1 {
margin: 0;
padding: 0;
}
section,
aside {
margin-top: 1.5em;
margin-bottom: 1em;
}
/*Body styles*/
body {
height: 100%;
width: 100%;
margin: 0;
background-color: #eff0f6;
}
body > div {
height: 100%;
width: 1100px;
margin: 0 auto;
border-left: 1px solid gray;
border-right: 1px solid gray;
background-color: white;
}
/*Header styles*/
header {
border-bottom: 1px solid gray;
background-color: #ffffff;
}
header #logo {
height: 120px;
width: 120px;
float: left;
padding-top: 5px;
padding-bottom: 5px;
padding-left: 5px;
}
header h1 {
color: black;
margin-left: 100px;
padding-top: 0.5em;
padding-left: 1em;
}
header h2 {
color: black;
margin-left: 100px;
margin-bottom: .2em;
padding-left: 1.5em;
}
/*Navigation styles*/
#nav_menu {
list-style: none;
font-weight: bold;
margin-bottom: 0px;
border-bottom: 1px solid gray;
width: 100%;
text-align: center;
background-color: #ffffff;
height: 40px;
}
#nav_menu ul {
list-style-type: none;
margin: 0px;
padding: 0;
width: 100%;
float: left;
}
#nav_menu li {
margin: 0px;
}
#nav_menu li a {
padding-top: 10px;
padding-right: 30px;
padding-bottom: 10px;
padding-left: 30px;
text-decoration: none;
font-weight: bold;
color: #000000;
background-color: #ffffff;
float: left;
}
#nav_menu li a:hover {
color: #FFFFFF;
background-color: #cf2033;
}
.social {
height: 35px;
weight;
35px;
padding-top: 2px;
padding-right: 2px;
padding-left: 2px;
}
/*Section styles*/
section {
width: 764px;
padding-top: 40px;
padding-left: 10px;
padding-right: 10px;
float: left;
background-color: #ffffff;
margin-top: 0px;
}
/*Aside styles*/
aside {
width: 275px;
float: right;
padding-top: 40px;
padding-right: 20px;
padding-bottom: 10px;
padding-left: 20px;
border-left: 1px solid gray;
background-color: #ffffff;
margin-top: 0px;
margin-bottom: 0px;
}
aside h1 {
font-size: 125%;
}
aside #johnjenkinsphoto1 {
height: 200px;
width: 275px;
padding-right: 2px;
padding-bottom: 20px;
float: left;
}
aside p {
margin-bottom: .5em;
}
/*Footer styles*/
footer {
clear: both;
padding: 5px;
margin-top: 1em;
border-top: 1px solid gray;
background-color: #ffffff;
}
<html>
<head>
<title>Coach John R. Jenkins | Consultant, Personal Trainer, Speaker</title>
<link rel="stylesheet" href="main.css">
</head>
<body>
<div>
<header>
<img src="fitness icon1.png" alt="Title of Website" id="logo" width="80">
<hgroup>
<h1>Coach John R. Jenkins</h1>
<h2>Your Virtual Guide to Wellness, Performance, and Success</h2>
</hgroup>
<br>
</header>
<nav id="nav_menu">
<ul>
<li>START HERE
</li>
<li>CONSULTING
</li>
<li>TRAINING
</li>
<li>SPEAKING
</li>
<li>CONTACT
</li>
<a href="http://www.pinterest.com" target="_blank">
<img src="pinterest.png" alt="Coach John Jenkins on Pinterest" class="social" align="right">
</a>
<a href="http://www.instagram.com" target="_blank">
<img src="instagram.png" alt="Coach John Jenkins on Instagram" class="social" align="right">
</a>
<a href="http://www.flickr.com" target="_blank">
<img src="flickr.png" alt="Coach John Jenkins on Flickr" class="social" align="right">
</a>
<a href="http://www.facebook.com" target="_blank">
<img src="facebook.png" alt="Coach John Jenkins on Facebook" class="social" align="right">
</a>
</ul>
</nav>
<aside>
<h1 align="center">About Coach Jenkins</h1>
<br>
<img src="coachjohnjenkinsphoto1.png" alt="Photo of Coach John Jenkins" id="johnjenkinsphoto1">
<br>
<br>
<p>A brief collection of biographical information for Coach Jenkins may go here.
<br>
<br>Unfortunately, Coach Jenkins and I are still planning and revising website content. Thus, I am inserting this information as a placeholder for that information once we have finalized everything.
</p>
</aside>
<section>
<h1>Welcome!</h1>
<p>In this section, I intend to provide summary information pertaining to the purpose of this website. Such information will first be quickly broken down as follows:
<ul>
<li>First piece of summary information goes here.</li>
<li>Second piece of summary information goes here.</li>
<li>Third piece of summary information goes here.</li>
</ul>
Unfortunately, Coach Jenkins and I are still planning and revising website content. Thus, I am inserting this information as a placeholder for that information once we have finalized everything.
</p>
</section>
<footer>© Copyright 2016 John R. Jenkins</footer>
</div>
</body>
</html>
Assuming i got your question correct:
You can go with percentage 90% for body and margin auto and add background to html tag like this.
Also changed section width to auto to prevent overflowing.
html {
background-color: blue;
}
section,
aside,
h1 {
margin: 0;
padding: 0;
}
section,
aside {
margin-top: 1.5em;
margin-bottom: 1em;
}
/*Body styles*/
body {
height: 100%;
width: 90%;
margin: 0 auto;
border-left: 1px solid gray;
border-right: 1px solid gray;
background-color: #eff0f6;
}
/*Header styles*/
header {
border-bottom: 1px solid gray;
background-color: #ffffff;
}
header #logo {
height: 120px;
width: 120px;
float: left;
padding-top: 5px;
padding-bottom: 5px;
padding-left: 5px;
}
header h1 {
color: black;
margin-left: 100px;
padding-top: 0.5em;
padding-left: 1em;
}
header h2 {
color: black;
margin-left: 100px;
margin-bottom: .2em;
padding-left: 1.5em;
}
/*Navigation styles*/
#nav_menu {
list-style: none;
font-weight: bold;
margin-bottom: 0px;
border-bottom: 1px solid gray;
width: 100%;
text-align: center;
background-color: #ffffff;
height: 40px;
}
#nav_menu ul {
list-style-type: none;
margin: 0px;
padding: 0;
width: 100%;
float: left;
}
#nav_menu li {
margin: 0px;
}
#nav_menu li a {
padding-top: 10px;
padding-right: 30px;
padding-bottom: 10px;
padding-left: 30px;
text-decoration: none;
font-weight: bold;
color: #000000;
background-color: #ffffff;
float: left;
}
#nav_menu li a:hover {
color: #FFFFFF;
background-color: #cf2033;
}
.social {
height: 35px;
weight;
35px;
padding-top: 2px;
padding-right: 2px;
padding-left: 2px;
}
/*Section styles*/
section {
width: auto;
padding-top: 40px;
padding-left: 10px;
padding-right: 10px;
float: left;
background-color: #ffffff;
margin-top: 0px;
}
/*Aside styles*/
aside {
width: 275px;
float: right;
padding-top: 40px;
padding-right: 20px;
padding-bottom: 10px;
padding-left: 20px;
border-left: 1px solid gray;
background-color: #ffffff;
margin-top: 0px;
margin-bottom: 0px;
}
aside h1 {
font-size: 125%;
}
aside #johnjenkinsphoto1 {
height: 200px;
width: 275px;
padding-right: 2px;
padding-bottom: 20px;
float: left;
}
aside p {
margin-bottom: .5em;
}
/*Footer styles*/
footer {
clear: both;
padding: 5px;
margin-top: 1em;
border-top: 1px solid gray;
background-color: #ffffff;
}
<html>
<head>
<title>Coach John R. Jenkins | Consultant, Personal Trainer, Speaker</title>
<link rel="stylesheet" href="main.css">
</head>
<body>
<header>
<img src="fitness icon1.png" alt="Title of Website" id="logo" width="80">
<hgroup>
<h1>Coach John R. Jenkins</h1>
<h2>Your Virtual Guide to Wellness, Performance, and Success</h2>
</hgroup>
<br>
</header>
<nav id="nav_menu">
<ul>
<li>START HERE
</li>
<li>CONSULTING
</li>
<li>TRAINING
</li>
<li>SPEAKING
</li>
<li>CONTACT
</li>
<a href="http://www.pinterest.com" target="_blank">
<img src="pinterest.png" alt="Coach John Jenkins on Pinterest" class="social" align="right">
</a>
<a href="http://www.instagram.com" target="_blank">
<img src="instagram.png" alt="Coach John Jenkins on Instagram" class="social" align="right">
</a>
<a href="http://www.flickr.com" target="_blank">
<img src="flickr.png" alt="Coach John Jenkins on Flickr" class="social" align="right">
</a>
<a href="http://www.facebook.com" target="_blank">
<img src="facebook.png" alt="Coach John Jenkins on Facebook" class="social" align="right">
</a>
</ul>
</nav>
<aside>
<h1 align="center">About Coach Jenkins</h1>
<br>
<img src="coachjohnjenkinsphoto1.png" alt="Photo of Coach John Jenkins" id="johnjenkinsphoto1">
<br>
<br>
<p>A brief collection of biographical information for Coach Jenkins may go here.
<br>
<br>Unfortunately, Coach Jenkins and I are still planning and revising website content. Thus, I am inserting this information as a placeholder for that information once we have finalized everything.
</p>
</aside>
<section>
<h1>Welcome!</h1>
<p>In this section, I intend to provide summary information pertaining to the purpose of this website. Such information will first be quickly broken down as follows:
<ul>
<li>First piece of summary information goes here.</li>
<li>Second piece of summary information goes here.</li>
<li>Third piece of summary information goes here.</li>
</ul>
Unfortunately, Coach Jenkins and I are still planning and revising website content. Thus, I am inserting this information as a placeholder for that information once we have finalized everything.
</p>
</section>
<footer>© Copyright 2016 John R. Jenkins</footer>
</body>
</html>
I am not sure if all browser support it, so it might be a good idea to add a simple background color just in case, but I think you are looking for that:
body {
background-color: white;
background-image: linear-gradient(to right, red, white, white, red);
}
I am working on a website for a course I am studying and I have ran into an issue with lists. I need to display a list on a particular page with lower-alpha as the bullet type, but nothing is showing.
I have used the find tool in Notepad++ to search for all lines containing list-style-type and checked they weren't set to none.
I also need the list on the navbar to have images as the style type.
HTML page containing list and CSS:
#font-face{ font-family:customFont; src: url('../fonts/Balkeno.ttf'); }
* {
margin: 0;
border: 0;
padding: 0;
font-size: 12px;
font-family: arial, sans-serif;
}
body {
width: 100%;
height: 300%;
background-color: #D8D8D8;
}
nav {
font-family: customFont;
font-size: 30px;
width: 100%;
height: 50px;
position: fixed;
z-index: 50;
}
.nav-background {
width: 100%;
height: 100%;
background: #12A7CB;
opacity: 0;
position: absolute;
}
.nav-content {
position: relative;
top: 50%;
transform: translateY(-50%);
}
header {
width: 100%;
height: 320px;
}
#slideshow {
position:relative;
height:320px;
width: 100%;
}
#slideshow IMG {
position:absolute;
top:0;
left:0;
z-index:8;
width: 100%;
height: 320px;
box-shadow: 0px 5px 10px #5E5E5E;
}
#slideshow IMG.active {
z-index:10;
}
#slideshow IMG.last-active {
z-index:9;
}
#logo {
float: left;
padding-left: 100px;
padding-right: 200px;
}
#nav {
background: url(http://4.bp.blogspot.com/-dVtgikk-kOY/UprtswP0yGI/AAAAAAAADag/Og0DtZ8t_oQ/s1600/header+base.png) no-repeat scroll top left; background-color: transparent;
width:100%;
height:66px;
box-shadow: 0px 1px 10px #5E5E5E;
position:fixed;
top:0px;
}
.title {
display:none;
color:#EDEDED;
font-size:25px;
width:350px;
margin-top:6px;
margin-left:150px;
font-weight:bold;
float:left;
}
.navigation {
list-style-image: url('navIcon.png');
}
li {
display:inline;
padding:15px;
color: black;
}
.navigation a {
font-size: 19px;
font-family: customFont;
/*text-decoration:none;*/
color: #01ebfe;
}
.navigation a:hover {
opacity:0.36;
}
.wrapper {
width: 900px;
height: 1000%;
margin-top: 25px;
margin-left: auto;
margin-right: auto;
padding: 20px;
background-color: white;
padding-top: 100px;
box-shadow: 10px 10px 5px #888888;
}
p{
font-size: 14px;
padding-bottom: 32px;
}
p:first-letter {
font-size: 32px;
color: #71CAE0;
}
h1 {
font-family: customFont;
font-size: 32px;
font-weight: bolder;
color: #12A7CB;
text-align: center;
}
h2 {
font-family: customFont;
font-size: 22px;
font-weight: bold;
color: #12A7CB;
text-align: left;
text-decoration: underline;
}
section {
width: 100%;
height: 100%;
background-color: #D8D8D8;
}
img.logo {
text-align: center;
margin: auto;
display: block;
}
img.slideshow {
width: 100%;
height: 480px;
}
footer {
width: 900px;
margin: 25px auto 0 auto;
padding-top: 20px;
padding-left: 20px;
padding-right: 20px;
background-color: white;
text-align: center;
box-shadow: 10px 10px 5px #888888;
}
.members {
padding: 10px;
display: inline-block;
background-color: #e4f4f8;
margin-top: 15px;
margin-left: 15px;
border: 1px solid #12A7CB;
float: right;
}
ol {
list-style-type: lower-alpha;
}
li {
list-style-type: lower-alpha;
}
ol.test {
list-style-type: lower-alpha;
}
.members ol {
list-style-type: lower-alpha;
}
.members li {
display: block;
color: #6c6c6c;
list-style-type: lower-alpha;
padding: 5px;
margin-bottom: 5px;
}
/** START TABLE STUFF **/
table, tr, th, td {
border: 1px solid black;
}
th, td {
padding: 5px;
}
table {
margin-top: 500px;
}
.disco {
margin:0px;padding:0px;
width:100%;
box-shadow: 10px 10px 5px #888888;
border:1px solid #000000;
border-bottom-left-radius:8px;
border-bottom-right-radius:8px;
border-top-right-radius:8px;
border-top-left-radius:8px;
}.disco table{
border-collapse: collapse;
border-spacing: 0;
width:100%;
height:100%;
margin:0px;
padding:0px;
}
.disco tr:last-child td:last-child {
border-bottom-right-radius:8px;
}
.disco table tr:first-child td:first-child {
border-top-left-radius:8px;
}
.disco table tr:first-child td:last-child {
border-top-right-radius:8px;
}
.disco tr:last-child td:first-child{
border-bottom-left-radius:8px;
}
.disco td{
vertical-align:middle;
background: green;
border:1px solid #000000;
border-width:0px 1px 1px 0px;
text-align:center;
padding:18px;
font-size:10px;
font-weight:normal;
color:#000000;
}
.disco tr:last-child td{
border-width:0px 1px 0px 0px;
}
.disco tr td:last-child{
border-width:0px 0px 1px 0px;
}
.disco tr:last-child td:last-child{
border-width:0px 0px 0px 0px;
}
.disco tr:first-child td{
background:red;
border:0px solid #000000;
text-align:center;
border-width:0px 0px 1px 1px;
font-size:14px;
font-family:Arial;
color:#ffffff;
}
/** END TABLE STUFF **/
.video-wrapper {
width: 100%;
text-align: center;
}
.video-wrapper a {
color: blue;
text-decoration: none;
font-size: 12px;
font-family: arial, sans-serif;
}
.social img {
padding-top: 32px;
padding-right: 8px;
width: 48px;
height: 48px;
border: none;
}
<!DOCTYPE html>
<html>
<!--
Author: *******
Date: 11/08/2014
-->
<head>
<meta charset="utf-8" />
<title>Biography - Three Doors Down</title>
<link rel="stylesheet" type="text/css" href="../css/style.css" />
<link href='http://fonts.googleapis.com/css?family=Ubuntu' rel='stylesheet' type='text/css'>
<script src="../js/jquery.js"></script>
<script type="text/javascript" src="../js/scroll.js"></script>
<script type="text/javascript" src="../js/header.js"></script>
</head>
<body>
<nav class="nav">
<div class="nav-background">
</div>
<div class="nav-content">
<img src="../images/navTitle.png" alt="Three Doors Down" id="logo" width=250 />
<ul class='navigation'>
<li>Home</li>
<li>Biography</li>
<li>Discography</li>
<li>Video</li>
</ul>
</div>
</nav>
<header class="header">
<div id="slideshow">
<img src="../images/header1.jpg" alt="Three Doors Down" class="active" />
<img src="../images/header2.jpg" alt="Three Doors Down" />
<img src="../images/header3.jpg" alt="Three Doors Down" />
</div>
</header>
<section>
<div class="wrapper">
<h1>Biography</h1>
<div class="members">
<h2>Band Members</h2>
<ol>
<li>Brad Arnold</li>
<li>Chris Henderson</li>
<li>Greg Upchurch</li>
<li>Chet Roberts</li>
<li>Justin Bitonen</li>
</ol>
</div>
<p>If rock ‘n’ roll had fairy tales, the 3 Doors Down story would be one of the most popular. Their story begins in childhood, it celebrates friendship, honesty and making the most of God-given talents. It’s about faith in your teammates and collaboration, trusting instincts and, once success is achieved, lending a hand to help others. </p>
<p>They made their mark early, selling 6 million copies of their debut album, and rather than allow that moment to define themselves, they have developed as musicians, songwriters and friends. The stories and emotions related in their songs resonate with audiences: Their music and lyrics are as approachable as the guys in the band. “The main thing is the lyrics,” says Brad Hardin, a radio programmer in Tampa, Florida, at one of the first stations to play 3 Doors Down's music. “I've watched them mature as a band. They work hard, they do anything for their community and they're so sincere and easy to be around. And that comes out in their music.” “I’ve got to make this life make sense” is a line from one of 3 Doors Down’s most popular songs, “Away From the Sun” and in many ways it sums up a key attraction to the band’s work: The directness of Brad Arnold’s lyrics. “Something I have always tried to do when writing a song: Talk about something besides the rims on the car, something somebody can identify with, but make it open-ended so a listener can make it adapt to their own life,” he says.</p>
<p>Chris Henderson explains “One Light” as song that points out “everyone is looking for the leader to get behind so that change can begin.” Arnold adds: “It’s about giving the world more than you can take from it.” It could also be a description of 3 Doors Down’s Better Life Foundation that they founded in 2003 to help children in need of food, shelter and medical attention. “Every time we do something with our foundation or for the military, we’re just the catalyst,” Arnold says. “When I leave an event, I feel like I have been given something. We’ve been able to do a lot of good things, so it’s hard to look at it as giving back.”</p>
<p>Brad, Todd and Chris all agree they have created a family by being in a band together. They left Mississippi for Nashville and still live just a few miles from one another and share their lives onstage and off. 3 Doors Down is a brotherhood of rock ‘n’ rollers whose bonds with each other and their fans only grow stronger with age.</p>
</div>
</section>
<footer>
<div class="nav-content">
<ul class='navigation'>
<li>Home</li>
<li>Biography</li>
<li>Discography</li>
<li>Video</li>
</ul>
</div>
</footer>
</body>
</html>
I would appreciate any help because this assignment is due tomorrow.
Probably you forgot about something...
li {
display: list-item;
}
In your code there is display:inline which isn't list item and haven't list styles.
Problem:
https://postimg.cc/image/tunhwh8qj/
The trouble I am currently having is that the border around my body is not outlining everything. As I have recently learned I'm guessing this means an element is out of the flow due to floating? However I am not certain how to fix it in this case.
My html is:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<link rel="stylesheet" type="text/css" href="swaggersstyle.css">
<title>Oamaru Backpackers Hostel, Swaggers Backpackers - Home</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<!-- include Cycle plugin -->
<script type="text/javascript" src="http://cloud.github.com/downloads/malsup/cycle/jquery.cycle.all.latest.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('.slideshow').cycle({
fx: 'fade' // choose your transition type, ex: fade, scrollUp, shuffle, etc...
});
});
</script>
</head>
<body>
<img src="final.jpg" id="banner">
<ul id="nav">
<li class="links">Home</li>
<li class="links">Location</li>
<li class="links">Facilities</li>
<li class="links">Attractions</li>
<li id = "endlink">Bookings</li>
</ul>
<div id="leftcolumn">
<p>hghadgadgadg</p>
<p>easfasf</p>
<p>safSFS</p>
<p>afafafadf</p>
<p>safasf</p>
<p>saasfasf</p>
<p>fasfsaf</p>
</div>
<div id="mainc">
<p>Make Yourself at Home</p>
<p>Swaggers Backpackers is a converted old house located within walking distance of all the best parts of Oamaru. Explore the old victorian era buildings and shops of the city centre, or see the penguin colonies down the street. Swaggers is owned and operated by camp mum Agra, who makes all guests feel welcome, informed, and perhaps a bit mothered. </p>
<div class="slideshow">
<img src="1.jpg" width="600" height="450" />
<img src="2.jpg" width="600" height="450" />
<img src="3.jpg" width="600" height="450" />
</div>
</div>
<div id ="footer">
<p> fsafasfasf </p>
</div>
</body>
</html>
and my CSS is:
html{
font-family: sans-serif;
background-color:#464E54;
height: 100%;
}
body{
width: 960px;
margin: auto;
background-color: white;
border: 3px solid black;
padding: 0;
height: 100%;
}
#banner{
padding: 0px;
margin: 0;
display: block;
}
#nav {
list-style-type: none;
padding: 0px;
margin: 0px;
overflow: hidden;
border-bottom: 1px solid #7f7f7f;
border-top: 1px solid #7f7f7f;
}
#mainc {
float: left;
width: 654px;
background-color: white;
margin: 0;
padding-left: 8px;
padding-right: 4px;
height: 100%;
}
#leftcolumn {
padding-left: 3px;
float: left;
background-color: #dad8bf;
width: 290px;
border-right: 1px solid #7f7f7f;
height: 100%;
}
#footer {
clear: both;
position: relative;
bottom: 0.5px;
margin: 0;
background-color: #dad8bf;
border-top: 1px solid #7f7f7f;
}
#footer p{
margin: 0;
}
.links {
float: left;
margin: 0px;
border-right: 1px solid #7f7f7f;
}
#endlink {
float: left;
margin: 0px;
border-right: none;
}
#lastlink{
display: block;
width: 184px;
font-weight: bold;
color: #444444;
background-color: #dad8bf;
text-align: center;
padding: 4px;
text-decoration: none;
text-transform: uppercase;
margin-top: 0px;
}
#lastlink:hover{
background-color: #999999;
}
a:link {
display: block;
width: 183px;
font-weight: bold;
color: #444444;
background-color: #dad8bf;
text-align: center;
padding: 4px;
text-decoration: none;
text-transform: uppercase;
margin-top: 0px;
}
a:visited {
display: block;
width: 183px;
font-weight: bold;
color: #444444;
background-color: #dad8bf;
text-align: center;
padding: 4px;
text-decoration: none;
text-transform: uppercase;
margin-top: 0px;
}
a:hover {
background-color: #999999;
}
a:active{
background-color: #999999;
}
.slideshow {
height: 483px;
width: 632px;
margin: auto;
padding: 0px;
}
.slideshow img {
padding: 0px;
border: 1px solid #ccc;
background-color: #eee;
}
thanks in advance guys!!
This is happening because your body has fix height of 100%.Change body tag css as:
height:auto;
min-height: 100%
if this doesn't work then add following with this:
overflow:auto;
Probably better NOT to use the body element for your container. Instead, just add
<div class="container"></div>
around your code and in your CSS changehtml to body and body to div.container.
body{
font-family: sans-serif;
background-color:#464E54;
height: 100%;
}
div.container{
width: 960px;
margin: auto;
background-color: white;
border: 3px solid black;
padding: 0;
}
Edit: I completely missed the 100%, that's gotta be it.
Add overflow: hidden to your body element. When elements are floated it will not push the parent container height past it unless there is a clearer