So I have multiple divs. Like this:
<div id="LeftContent"></div>
<div id="RightContent"></div>
And so on. My goal is to create a centered div after all that. When I try to, I end up with the div being in the empty spaces between the 'left' and 'right' divs. An answer with some CSS code would be most appreciated.
HTML5:
<!doctype html>
<html>
<link rel="shortcut icon" href="img/favicon.ico" type="image/x-icon">
<link rel="stylesheet" href="css/style.css">
<head>
<meta charset="utf-8">
<title>OneClickLearn</title>
</head>
<body>
<aside>
<br>
<nav>
<ul>
<li>Home</li>
<hr>
<li>Learn HTML</li>
<li>Learn CSS</li>
<li>Learn the Basics of Web Design</li>
<hr class="nav">
<li>Learn PHP</li>
<li>Learn JAVASCRIPT</li>
</ul>
</nav>
</aside>
<a id="nav-toggle" href="#" class="position"><span></span></a>
<main>
<header>
<div href="#" class="container">
<h1 class="title">OneClickLearn</h1>
</div>
</header>
</main>
<div class="header">
<div class="content">
<h1 class="large">Welcome To OneClickLearn</h1>
<hr class="hr">
<h2>A website for web developers everywhere</h2>
</div>
</div>
<div class="left">
<h1>What you can do with us</h1>
<h3>OneClickLearn offers several web design courses, as well as tools like Cascading Style Sheet libraries, and special colors to use for your website! Unlike some other coding websites, OneClickLearn is absolutely free!</h3>
<a class="abutton"><button>Learn More</button></a>
</div>
<div>
<div class="right">
<h1>CSS Libraries</h1>
<h3>What's a CSS Library? Simple. This tool is made for web developers who are advanced in website functionality, but maybe not so great in what we would call, 'the pretties'. A CSS library is all the tools in design you need-- waiting for you on the web.</h3>
<a class="abutton"><button>Learn More</button></a>
<a class="abutton"><button class="buttonop">Get Ocelot.css</button></a>
</div>
</div>
<div class="left">
<h1>Courses</h1>
<h3>All our courses (so far!) are based off of web design. With these courses, you learn the basics of HTML5, CSS3, and more languages coming soon. Also, you can learn our Cascading Style Sheet libraries' functions. If you have any reccomendations, just email us down below</h3>
<a class="abutton"><button>Email Us</button></a>
<a class="abutton"><button class="buttonop">Learn More</button></a>
</div>
<div class="div">
<h1>Having trouble with your website?</h1>
<h3>We'll see what we can do.</h3>
<button class="abutton">Contact Us</button>
</div>
</body>
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.2.1.min.js"></script>
<script src="js/nav.js"></script>
</html>
CSS:
#import url('https://fonts.googleapis.com/css?family=Open+Sans');
.div {
clear: both;
margin: 0 auto;
height: 100px;
width: 600px;
text-align: center;
}
.greyback {
background-color: #4B4949;
}
.nav {
background-color: #bdc3c7;
}
.denied {
color: #bdc3c7;
}
.denied:hover {
cursor: not-allowed;
}
body {
size: 100%;
display: cover;
margin: 0;
padding: 0;
}
p a {
color: #27ae60;
text-decoration: none;
}
p a:hover {
color: #27ae60;
text-decoration: underline;
cursor: pointer;
}
.header {
color: white;
width: 100%;
height: 300px;
background-color: #2980b9;
}
.content {
margin-top: 70px;
padding-top: 60px;
text-align: center;
}
.large {
font-size: 40px;
}
.hr {
width: 100px;
}
.left {
margin: 20px;
float: left;
height: auto;
width: 50%;
color: #4B4949;
}
.right {
margin: 20px;
float: right;
height: auto;
width: 50%;
color: #4B4949;
}
a {
color: #2AABAD;
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
.side {
margin: 20px;
}
.img {
display: inline-block;
}
button {
background-color: #2980b9;
border: none;
border-radius: 5PX;
height: 40px;
width: auto;
color: white;
}
button:hover {
background-color: #3498db;
cursor: pointer;
}
.abutton {
color: none;
text-decoration: none;
}
.buttonop {
background-color: #3498db;
border: none;
border-radius: 5PX;
height: 40px;
width: auto;
color: white;
}
.buttonop:hover {
background-color: #2980b9;
cursor: pointer;
}
.main {
width: 100%;
text-align: center;
}
.main-content {
display: inline-block;
}
P.S. I am using float:left; and float:right; for the left and right divs :)
Thanks :) (If I need any elaboration please let me know)
I'm not 100% clear on what you are asking, but you could try something like the following:
Html
<div id="LeftContent"></div>
<div id="RightContent"></div>
<div id="CentredDiv"></div>
CSS
div {
border: 1px solid #f0f;
height: 50px;
box-sizing: border-box;
width: 400px;
}
#LeftContent,
#RightContent {
float: left;
}
#CentredDiv {
width: 800px;
clear: left;
}
Yeah, not totally sure what you want, but maybe something like this?
#CenteredContent {
clear: both;
margin: 0 auto;
height: 100px;
width: 100px;
background-color: red;
}
What I understand from your question is that you need a centered div. You can do this to achieve centered div.
HTML:
<div class="centered-div">
Some Content
</div>
CSS:
.centered-div {
width: 400px;
min-height: 400px;
margin: 0 auto;
clear: both;
}
I hope that helps :)
Related
I was coding my website when I realized that my Type to search button is quite high on the Website. Is there a way that I can get that to come down a bit? Here is my code For this project. Also if you see anyway that I can improve this website please tell me, also could you please help give me some tips on how I can make my code neater and more readable. Over all the type to search is the biggest problem to fix but if you see some others please let me know. Thank you!
HTML
<!DOCTYPE html>
<html>
<head>
<title>Webpage</title>
<link href="context/styles.css" rel="stylesheet" type="text/css">
<link href="Webfonts/css/all.min.css" rel="stylesheet" type="text/css">
<link href="https://fonts.googleapis.com/css?family=Ubuntu&display=swap" rel="stylesheet">
</head>
<body>
<div class="navbar">
<ul class="navbarlist">
<li class="navbarimg"><img class="navbarlogo" src="img/LOGO.png"></li>
<li class="navbarelementL">Browse</li>
<li class="navbarelementL">Today's Deals</li>
<li class="navbarelementR">Shopping Cart</li>
</ul>
<div class="searchbox">
<input class="search-txt" type="text" name="" placeholder="Type to Search">
<a class="search-btn" href="#"></a>
<i class="fas fa-search"></i>
</div>
</div>
<div class="banner">
<img class="titleimg" src="img/TITLE.jpg">
</div>
<div class="row">
<div class="column">
<img src="img/Grid Panel 1.jpg" style="width:100%">
</div>
<div class="column">
<img src="img/Grid Panel 1.jpg" style="width:100%">
</div>
<div class="column">
<img src="img/Grid Panel 1.jpg" style="width:100%">
</div>
</div>
</div>
<div class="bottomnav">
<div class="bottomlogo">
<img class="navbarlogo2" src="img/LOGO.png">
</div>
<div class='nav'>
<div class='left'>
<ul>
<li class="bottomelement">About Us</li>
<li class="bottomelement">Affiliates</li>
</ul>
</div>
<div class='right'>
<ul>
<li class="bottomelement">TOS</li>
<li class="bottomelement">Fourth </li>
</ul>
</div>
</div>
</div>
</body>
</html>
CSS
/*General*/
h2{
font-family: 'Ubuntu', sans-serif;
justify-content: center;
margin: auto;
}
body{
margin:0;
padding:0;
}
/*Navbar*/
.navbar{
float: left;
width: 100%;
background-color: rgb(248, 138, 180);
}
.navbarlogo{
width: 60px;
height: auto;
}
.navbarlist{
list-style-type:none;
font-family: 'Ubuntu', sans-serif;
}
.navbarelementL{
display: inline-block;
margin-right: 10px;
transition-property: all;
transition-duration: 1s;
float: left;
}
.navbarelementL:hover{
display: inline-block;
margin-right: 10px;
font-size: 20px;
}
.navbarelementR{
display: inline-block;
margin-right: 10px;
transition-property: all;
transition-duration: 1s;
float:right;
}
.navbarelementR:hover{
display: inline-block;
margin-right: 10px;
font-size: 20px;
}
/*end*/
.navbarimg{
display: inline-block;
margin-right: 30px;
float:left;
}
.popupnavimg{
display: inline-block;
margin-right: 30px;
float:left;
}
.popupimg{
width: 40px;
height:auto;
}
.searchbox{
position: absolute;
top: 35px;
left: 50%;
transform: translate(-50%,-50%);
background: rgb(255, 255, 255);
height: 50px;
border-radius: 40px;
padding: 5px;
}
.searchbox:hover > .search-txt{
width: 240px;
padding: 0 6px;
}
.searchbox:hover > .search-btn{
background: white;
}
.search-btn{
color: black;
float: right;
width: 50px;
height: 50px;
border-radius: 50%;
background: skyblue;
display: flex;
justify-content: center;
align-items: center;
transition: 0.7s;
}
.search-txt{
border:none;
background: none;
outline: none;
float: left;
padding: 0;
color: white;
font-size: 16px;
transition: 0.7s;
line-height: 40px;
width: 0;
}
.fas{
position: absolute;
margin-left: 18.0px;
margin-top: 18.5px;
size: 40px;;
}
.titleimg{
width:100%;
}
/*grid1*/
/* Three image containers (use 25% for four, and 50% for two, etc) */
.row {
display: flex;
}
.column {
flex: 33.33%;
padding: 10px;
}
body {
margin:0
}
body {
margin:0
}
.bottomnav {
width: 100%;
background-color: rgb(248, 138, 180);
position: relative;
}
.navbarlogo2 {
display: block;
margin-left: auto;
margin-right: auto;
width: 120px;
text-decoration: none;
position: absolute;
filter: brightness(10);
top: 15px;
left: calc(50% - 60px) /*center top left corner then remove half logo width (120px)*/
}
/*bottombar*/
.nav {
display: grid;
grid-gap: 120px;
grid-template-columns: 1fr 1fr;
}
.nav ul {
padding-left: 0;
}
.nav ul li {
list-style: none;
text-align: center;
padding-left: 0;
}
.left,
.right {
flex: 1;
}
.bottomelement{
font-size: 20px;
}
.bottomelement:hover{
font-size: 25px;
transition-duration: 1s;
}
Try adding margin-top to
.search-txt {
//...
margin-top: 7px;
}
Check the fiddle here
To answer your other questions, normally IDE's has formatting options included. Else you can use online sites like cleancss.com for CSS or htmlformatter.com for HTML or beautifier.io for JavaScript.
I'm new to coding, this is my first week in my Fullstack course and we have some homework that I've been working on for a while now. I've managed to get my wireframe to look similar to the homework example (we're supposed to make it look the same) and I'm not sure where I'm going wrong with this html/css code.
Also, I'm not sure exactly how else to show what I am working on other than posting the majority of my css, so i apologize if I do this wrong.
:)
I've placed red borders around the content I'm attempting to align evenly on all sides. I've tried changing the padding, margins, float positions, width (all that I know that would adjust the box(es), but I still cannot seem to get the "aside" content to align with the rest of the wireframe objects.
`````HTML````
<header class="main-head">
<p>header</p>
</header>
<link rel="stylesheet" href="style.css">
<nav>nav</nav>
<div class="divCont">
<div class="aside1">
<aside>aside</aside>
</div>
<div>
<div>
<article class="sect1">section
<p class="art1">article</p>
<div class="inside1">
<h3>h1, h2, h3</h3>
</div>
<div class="paraCont">
<p class="para1">p</p>
</div>
</article>
</div>
</div>
</div>
<footer>footer</footer>
``` </div>
`````````external css```````````````````
body {
margin: auto;
width: 50%;
background-color: #777;
text-align: center;
}
div.layout {
width: 495px;
}
/* left section */
.sect1 {
padding: 2%;
width: 100%;
}
/* right section */
div.aside1 {
margin-left: 100px;
border: solid red;
padding: 2%;
color: #777;
width: 200px;
height: 165px;
float: right;
font-size: 18px;}
article {
color:#777;
font-size: 18px;
background-color: #ebebeb;
}
div.divCont {
border: solid red;
}
/* article box */
.art1 {
width: 60%;
color: #ebebeb;
background-color: #777;
}
/* h1,h2,h3 box */
.inside1 {
width: 60%;
color: #ebebeb;
background-color: #777;
}
/* para box */
p.para1 {
width: 60%;
color:#ebebeb;
background-color: #777;
}
body {
margin: auto;
width: 50%;
background-color: #777;
text-align: center;
}
div.layout {
width: 495px;
}
/* left section */
.sect1 {
padding: 2%;
width: 100%;
}
/* right section */
div.aside1 {
margin-left: 100px;
border: solid red;
padding: 2%;
color: #777;
width: 200px;
height: 165px;
float: right;
font-size: 18px;
}
article {
color: #777;
font-size: 18px;
background-color: #ebebeb;
}
div.divCont {
border: solid red;
}
/* article box */
.art1 {
width: 60%;
color: #ebebeb;
background-color: #777;
}
/* h1,h2,h3 box */
.inside1 {
width: 60%;
color: #ebebeb;
background-color: #777;
}
/* para box */
p.para1 {
width: 60%;
color: #ebebeb;
background-color: #777;
}
<div class="layout">
<header class="main-head">
<p>header</p>
</header>
<link rel="stylesheet" href="style.css">
<nav>nav</nav>
<div class="divCont">
<div class="aside1">
<aside>aside</aside>
</div>
<div>
<div>
<article class="sect1">section
<p class="art1">article</p>
<div class="inside1">
<h3>h1, h2, h3</h3>
</div>
<div class="paraCont">
<p class="para1">p</p>
</div>
</article>
</div>
</div>
</div>
<footer>footer</footer>
</div>
this is what I'm trying to do - https://gyazo.com/6f27f40e4f3e75831b5e4728387ea11f
this is what I've done so far - https://gyazo.com/79299a16a0eb2208db98519005b3bf9d
This is just a quick edit. Also your link tag should be above in tag
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<style>
body {
margin: auto;
width: 50%;
background-color: #777;
text-align: center;
}
div {
border: 1px solid #000000;
}
.aside1 {
width: 49%;
float: left;
height: 165px;
}
.aside2 {
width: 49%;
float: right;
height: 165px;
}
article {
background-color:green;
padding: 20px;
margin: 5px
}
footer {
width: 100%;
}
</style>
</head>
<body>
<header class="main-head">
<p>header</p>
</header>
<nav>nav</nav>
<section class="divCont">
<div class="aside1">
<p>Section</p>
<article>
Article
<div style="background-color:white; margin: 5px;">
H1,h2,H3
</div>
<div style="background-color:yellow;margin: 5px; ">
p
</div>
</article>
</div>
<div class="aside2">
Aside
</div>
</section>
<footer> Footer </footer>
</body>
</html>
So I am new to coding and stuff and I am wondering why there is a space of the body in between the divs in this fiddle?
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<title>title</title>
<link href="main.css" rel="stylesheet" type="text/css">
<meta charset="UTF-8">
</head>
<!-- body -->
<body>
<div class="top-navbar navbar" id="color-1">
About
Art
Home
</div>
<div class="image">
<img src="sgrumble.png" alt="sg-rumble" class="front-image">
</div>
<div class="top-bar-2 navbar" id="color-1">
Project
Champions
divname2
divname3
</div>
<div class="about-text" id="color-1">
<h4>title</h4>
<p>short info text about text text text text text text text text text</p>
</div>
<div class="collection art" id="project color-2">
<h3>text</h3>
<p>text.</p>
<div class="project-blue">
<img src="/asset/images/project-ashe256x256.png" class="project-ashe">
</div>
CSS:
body {
margin: 0;
padding: 0;
background-color: green;
}
#color-1 {
background-color: #d3d3d3;
}
#color-2 {
background-color: #fff;
}
.top-navbar {
width: 100%;
height: 50px;
}
.top-navbar a {
padding: 14px 16px;
text-align: center;
float: right;
display: block;
color: black;
text-decoration: none;
}
.top-navbar a:hover {
background-color: #8a8a8a;
}
.image {
width: 100%;
height: 491px;
background-color: red;
}
.top-bar-2 {
width: 100%;
height: 50px;
text-align: center;
}
.top-bar-2 a {
padding: 14px 16px;
text-align: center;
display: inline-block;
color: black;
text-decoration: none;
}
.top-bar-2 a:hover {
background-color: #8a8a8a;
}
.collection {
height: 300px;
width: 100%;
text-align: center;
background-color: blue
The green part which is the body is showing in between the second navbar and the two text divs. Anyone know whats wrong cause I can't find it.
The h4 and the p elements have a margin set. You can see that using the "inspect" option right clicking the element in the browser.
its good to use:
* {margin:0;padding:0;}
this will remove every space in your document.
note: in html, document itself have default space. so by above CSS you can remove them easily.
it is a good practice to use above CSS in your every stylesheet files.
This happens because you have not reset the default margins of header elements.
Reset defaults using
* {
margin: 0;
padding: 0;
box-sizing: border-box
}
At the top of your sheet.
* {
margin: 0;
padding: 0;
box-sizing: border-box
}
body {
margin: 0;
padding: 0;
background-color: green;
}
#color-1 {
background-color: #d3d3d3;
}
#color-2 {
background-color: #fff;
}
.top-navbar {
width: 100%;
height: 50px;
}
.top-navbar a {
padding: 14px 16px;
text-align: center;
float: right;
display: block;
color: black;
text-decoration: none;
}
.top-navbar a:hover {
background-color: #8a8a8a;
}
.image {
width: 100%;
height: 491px;
background-color: red;
}
.top-bar-2 {
width: 100%;
height: 50px;
text-align: center;
}
.top-bar-2 a {
padding: 14px 16px;
text-align: center;
display: inline-block;
color: black;
text-decoration: none;
}
.top-bar-2 a:hover {
background-color: #8a8a8a;
}
.collection {
height: 300px;
width: 100%;
text-align: center;
background-color: blue
<!DOCTYPE html>
<html lang="en">
<head>
<title>title</title>
<link href="main.css" rel="stylesheet" type="text/css">
<meta charset="UTF-8">
</head>
<!-- body -->
<body>
<div class="top-navbar navbar" id="color-1">
About
Art
Home
</div>
<div class="image">
<img src="sgrumble.png" alt="sg-rumble" class="front-image">
</div>
<div class="top-bar-2 navbar" id="color-1">
Project
Champions
divname2
divname3
</div>
<div class="about-text" id="color-1">
<h4>title</h4>
<p>short info text about text text text text text text text text text</p>
</div>
<div class="collection art" id="project color-2">
<h3>text</h3>
<p>text.</p>
<div class="project-blue">
<img src="/asset/images/project-ashe256x256.png" class="project-ashe">
</div>
Green is body color. Where is no element with background-color there is body color because nothing is overlapping it.
CSS boxmodel will be helpfull: https://www.w3schools.com/css/css_boxmodel.asp
Margin property is external part of an element.
Solved :
h3,h4,p{
margin:0;
}
body {
margin: 0;
padding: 0;
background-color: green;
}
#color-1 {
background-color: #d3d3d3;
}
#color-2 {
background-color: #fff;
}
.top-navbar {
width: 100%;
height: 50px;
}
.top-navbar a {
padding: 14px 16px;
text-align: center;
float: right;
display: block;
color: black;
text-decoration: none;
}
.top-navbar a:hover {
background-color: #8a8a8a;
}
.image {
width: 100%;
height: 491px;
background-color: red;
}
.top-bar-2 {
width: 100%;
height: 50px;
text-align: center;
}
.top-bar-2 a {
padding: 14px 16px;
text-align: center;
display: inline-block;
color: black;
text-decoration: none;
}
.top-bar-2 a:hover {
background-color: #8a8a8a;
}
.collection {
height: 300px;
width: 100%;
text-align: center;
background-color: blue
<!DOCTYPE html>
<html lang="en">
<head>
<title>title</title>
<link href="main.css" rel="stylesheet" type="text/css">
<meta charset="UTF-8">
</head>
<!-- body -->
<body>
<div class="top-navbar navbar" id="color-1">
About
Art
Home
</div>
<div class="image">
<img src="sgrumble.png" alt="sg-rumble" class="front-image">
</div>
<div class="top-bar-2 navbar" id="color-1">
Project
Champions
divname2
divname3
</div>
<div class="about-text" id="color-1">
<h4>title</h4>
<p>short info text about text text text text text text text text text</p>
</div>
<div class="collection art" id="project color-2">
<h3>text</h3>
<p>text.</p>
<div class="project-blue">
<img src="/asset/images/project-ashe256x256.png" class="project-ashe">
</div>
you can specify (add to existing) the following css and the spaces will be removed.
.about-text {
overflow: hidden;
}
.collection {
overflow: hidden;
}
I'm making a website and i have been struggling to make two or more <div>'s next to each other.
Here is my code:
/*---MAKE PAGE---*/
body {
background: lightblue;
}
.navbar {
background: lightgreen;
height: auto;
width: 1840px;
float: left;
margin: 20px;
padding-left: 10px;
}
.navbar_objects {
text-decoration: none;
float: left;
}
.navobj {
text-decoration: none;
color: #3399FF;
float: left;
margin: 20px;
}
.navobj:hover {
color: white;
}
#title_of_page {
color: darkblue;
margin: 20px;
padding-left: 880px;
}
.title {
padding-top: 1px;
height: 75px;
width: 1850px;
background: lightgreen;
margin: 20px;
}
#title_recent {
color: darkblue;
margin: 20px;
padding-left: 300px;
padding-bottom: 20px;
}
.main {
height: 2000px;
width: 1810px;
background: lightgreen;
padding: 20px;
padding-left: 200px;
margin: 20px;
}
/*---END---*/
/*----------------START DESCRIPTIONS----------------*/
/*---START FIFA DESCRIPTION---*/
#image_div_recent_fifa16 {
margin: 0px;
height: 235px;
width: 250px;
float: left;
}
#text_div_recent_fifa16 {
float: right;
font-size: 20px;
width: auto;
height: auto;
}
/*---END---*/
/*---START NBA CODE---*/
#image_div_recent_nba {
margin: 0px;
height: 235px;
width: 250px;
float: left;
}
#text_div_recent_nba {
float: right;
font-size: 20px;
width: auto;
height: auto;
}
/*---END---*/
/*----------------CODE FOR POSTS----------------*/
/*---START FIFA POST CODE---*/
#post_fifa {
width: 250px;
height: 450px;
padding: 20px;
margin: 10px;
}
#post_fifa:hover {
border: solid black 1px;
}
/*---END---*/
/*---START NBA POST CODE---*/
#post_nba {
width: 250px;
float: up;
height: 450px;
margin: 10px;
padding: 20px;
}
#post_nba:hover {
border: solid black 1px;
}
<html>
<head>
<title>GameGo - Home</title>
<link rel="stylesheet" type="text/css" href="stylesheet.css">
</head>
<body>
<div class="navbar">
<li class="navbar_objects">
<a class="navobj" href="index.html">Home</a>
<a class="navobj" href="games.html">Games</a>
<a class="navobj" href="reviews.html">Reviews</a>
<a class="navobj" href="contactus.html">Contact Us</a>
</li>
</div>
<br>
<br>
<br>
<br>
<br>
<div class="title">
<h1 id="title_of_page">Home</h1>
</div>
<div class="main">
<h2 id="title_recent">Recent</h2>
<br>
<div class="posts">
<div id="post_fifa">
<div class="image_div_recent_fifa16">
<img src="\\ISB-AD2012\Secondary Students\Grade 9\Paul\ICT\Grade 9\9.3 Web Design\fifa16logo.png" class="img_text_recent">
</div>
<div id="text_div_recent_fifa16">
<p class="class_text_recent">FIFA 16 - Fifa 16 is a football game available on most gaming platforms(Xbox one, PS4, PC, PS3, Xbox 360, Wii U). It is a very good game to play with friends, family or other. You can play 4 player co op on same console.
</p>
</div>
</div>
<div id="post_nba">
<div class="image_div_recent_nba">
<img src="\\ISB-AD2012\Secondary Students\Grade 9\Paul\ICT\Grade 9\9.3 Web Design\fifa16logo.png" class="img_text_recent">
</div>
<div id="text_div_recent_nba">
<p class="class_text_recent">FIFA 16 - Fifa 16 is a football game available on most gaming platforms(Xbox one, PS4, PC, PS3, Xbox 360, Wii U). It is a very good game to play with friends, family or other. You can play 4 player co op on same console.
</p>
</div>
</div>
<br>
<br>
</div>
</div>
</body>
</html>
I would like to put post_fifa next to post_nba.
Try adding display: inline-block to your elements:
#post_nba, #post_fifa {
display: inline-block;
}
https://jsfiddle.net/L8w1owr4/
One more solution, float your content divs:
#post_fifa,
#post_nba {
float: left;
}
and, please, correct your navbar, now code is invalid! You can make:
<ul class="navbar_objects">
<li><a class="navobj" href="index.html">Home</a></li>
<li><a class="navobj" href="games.html">Games</a></li>
<li><a class="navobj" href="reviews.html">Reviews</a></li>
<li><a class="navobj" href="contactus.html">Contact Us</a></li>
</ul>
with css classes:
.navbar_objects {
list-style-type: none;
display: inline-block;
}
li {
display: inline;
}
.navobj {
text-decoration: none;
color: #3399FF;
margin: 20px;
}
jsfiddle-link
My question covers it all I cant figure out why my about section div's aren't using the color I set(White). I set it in my css, and for some reason it is not applying correctly. All help would be greatly appreciated
body {
width: 100%;
background: #444444;
}
/*Header styles*/
header {
width: 100%;
height: 77px;
background: #ffffff;
}
header #logo {
background: #444444;
display: inline-block;
width: 150px;
margin-left: 60px;
float: left;
}
header nav {
width: 40%;
height: 100%;
vertical-align: middle;
float: right;
margin-right: 60px;
}
header nav ul {
list-style-type: none;
margin: 0;
padding: 0;
}
header nav li {
height: 100%;
line-height: 77px;
display: inline-block;
margin-left: 55px;
}
header nav a {
color: #000000;
text-decoration: none;
text-transform: uppercase;
}
/*Homepage Styles*/
#homepage {
width: 100%;
background: #444444;
}
#homepage #banner-h {
margin-top: 56px;
height: 751px;
background: #ffffff;
}
#homepage #banner-h #bht {
height: 88px;
margin: auto;
color: #000000;
}
#aboutme {
height: 2400px;
}
.aboutsection {
height: 593 px;
border: 1px solid black;
background: #ffffff;
}
footer {
margin-top: 56px;
background: #ffffff;
width: 100%;
height: 166px;
}
footer #fom {
height: 90%;
text-align: center;
display: table;
width: 100%;
}
footer h1 {
display: table-cell;
vertical-align: middle;
}
/*# sourceMappingURL=style.css.map */
<!DOCTYPE html>
<head lang="en">
<meta charset="UTF-8">
<link rel="stylesheet" href="css/style.css"/>
<link rel="stylesheet" href="css/normalize.css"/>
<title></title>
</head>
<body>
<header>
<div id="logo">
<img src="img/logo/caseywoelfle.com.svg" width="150px" height="77">
</div>
<nav>
<ul>
<li>home</li>
<li>about me</li>
<li>portfolio</li>
<li>blog</li>
<li>contact</li>
</ul>
</nav>
</header>
<div id="aboutme">
<div class="aboutsecton"><p>Test</p></div>
<div class="aboutsecton"><p>Test</p></div>
<div class="aboutsecton"><p>Test</p></div>
<div class="aboutsecton"><p>Test</p></div>
</div>
<footer>
<span id="fom">
<h1>find out more about me</h1>
</span>
</footer>
</body>
</html>
It boils down to a simple typo. You are using .aboutsection in your CSS selector but your div has a class of aboutsecton, missing an i.
Instead of:
<div class="aboutsecion"><p>Test</p></div>
...it should be:
<div class="aboutsection"><p>Test</p></div>
p/s: In addition, your height declaration is not working because of an additional white space in the height declaration. It should be 593px not 593 px.
You mis-spelled section:
<div class="aboutsecton">
should be
<div class="aboutsection">
You mispelled aboutsection. You spelled it aboutsecton in your HTML.
<div class="aboutsecton"><p>Test</p></div>
Should be
<div class="aboutsection"><p>Test</p></div>
Good luck!