I have a 3-column layout. The furthest right column contains a table. Everything works when I delete the table. When the table is there, it breaks the float and pushes the div under the other two, which is wrong. The table is not wider than the div. Here's the HTML:
<html>
<head>
<title> Packard Carburetors </title>
<link rel="stylesheet" type="text/css" href="css/reset.css" />
<link rel="stylesheet" type="text/css" href="css/style.css" />
</head>
<body>
<div class="wrapper">
<div id="header">
<h1 id="banner">Packard Carburetors</h1>
</div><!--Header-->
<div id="navbar" class="green">
<ul id="navigation">
<li>HOME</li>
<li>PACKARD
<ul class="sub-nav">
<li>-1930 Speedster</li>
<li>-1929-31 Super 8</li>
<li>-Late 1931-32 Super 8</li>
<li>-1929-31 Standard 8</li>
<li>-Late 1931-32 Standard 8</li>
<li>-Rare Parts</li>
<li class="last">-745 Parts</li>
</ul>
</li>
<li>CADILLAC
<ul class="sub-nav">
<li>-1932-33 V12 & V16</li>
<li class="last">-1934-1937 V12 & V16</li>
</ul>
</li>
<li>SHOPPING CART</li>
<li>CHECK OUT</li>
<li>CONTACT US</li>
</ul><!--Navigation-->
<img id="#navbar-logo" src="img/logo.png">
<p id="nav-phone" class="black center bold">775.842.4282</p>
<p class="black center nav-small bold">packardcarbs#gmail.com</p>
<p class="black center nav-small bold">Sparks, NV USA</p>
</div><!--Navbar-->
<div id="content">
<h1 class="home-banner green center bold">All Packard Carburetors 1929-'32</h1>
<h2 class="home-banner green center bold">1930 Speedster <span class="black">|</span> 1929-32 Super 8 <span class="black">|</span> 1929-32 Standard 8</h2>
<hr>
<h1 class="home-banner green center bold">Cadillac Carburetors</h1>
<h2 class="home-banner green center bold">1932 - 1937 V-12 & V-16</h2>
<img id="detroit-lubricator" src="img./detroit-lubricator.png">
<div id="middle-column">
<ul id="feature-list-home">
<li>Silicone Bronze Investment Casting</li>
<li>Precision CNC Brass Machine Parts</li>
<li>Viton-Tipped Needles</li>
<li>Current Design
<ul id="sub-feature-list-home">
<li>-Needle Seats</li>
<li>-Pressure Valves</li>
</ul>
</li>
<li>Authentic Polished Brass Components</li>
<li>Gasoline and Ethanol Proof Exterior Coating</li>
<li>Exact Size as Original</li>
</ul>
<img id="middle-bar-spacer" src="img/divider-bar.png">
<div id="box-and-copy">
<img id="boxes" src="img/packard-boxes.png">
<p class="bold">All Components In-Stock!</p>
<p>Your Carburetor will be professionally assembled, engine tested and shipped quickly worldwide.</p>
</div><!-- Box and copy -->
</div><!--Middle Column -->
<div id="right-column">
<table>
<tr>
<td><img src="img/carb-1.png"></td>
<td><img src="img/carb-1.png"></td>
</tr>
<tr>
<td>1930 Speedster</td>
<td>1929-1931 Super 8</td>
</tr>
<tr>
<td><img src="img/carb-3.png"></td>
<td><img src="img/carb-4.png"></td>
</tr>
<tr>
<td>1932 Super 8</td>
<td>1929-1931 Standard 8</td>
</tr>
</table>
</div> <!--Right Column-->
</div><!--Content-->
</div><!--Wrapper-->
</body>
</html>
And the CSS:
/*General styles*/
.wrapper {
width: 940px;
margin: 0 auto;
text-align: left;
background-image: url('../img/body-bg.png');
background-repeat: repeat-y;
overflow: auto;
}
body {
font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
font-size: 12px;
}
h1 {
font-size: 3em;
}
h2 {
font-size: 2em;
}
#content {
float: left;
width: 700px;
padding: 10px 0px 0px 20px;
}
#banner {
display: inline-block;
text-indent: -9999px;
width: 940px;
height: 201;
background-image: url('../img/banner.png');
}
/* Nav Stuff */
#navbar {
width: 190px;
font-weight: bold;
font-size: 1.33em;
padding: 20px 20px 0px 10px;
float: left;
}
#navigation li {
padding-bottom: 20px;
}
.sub-nav{
font-size: .87em;
padding-top: 20px;
padding-left: 2.5em;
}
#navigation li ul.sub-nav li.last {
padding-bottom: 0px;
}
#nav-phone {
font-size: 1.19em;
padding-top: 15px;
}
.nav-small {
font-size: .75em;
padding-top: 5px;
}
/* Middle Column */
#middle-column{
width: 220px;
padding-right: 20px;
margin-top: 40px;
border-right: 2px solid #000000;
}
#feature-list-home {
list-style-image: url('../img/bullet.png');
font-size: 1.17em;
padding-left: 20px;
font-weight: bold;
padding-bottom: 40px;
}
#feature-list-home li {
padding-bottom: 20px;
}
#sub-feature-list-home {
padding-left: 10px;
}
#sub-feature-list-home li {
padding-bottom: 0px;
}
#middle-bar-spacer {
padding-bottom: 20px;
}
#boxes {
padding-bottom: 10px;
}
#box-and-copy {
font-size: 1.33em;
line-height: 1.5em;
text-align: center;
}
/* Home Page Right Column */
#right-column {
float: left;
width: 460px;
overflow: hidden;
}
/* Home Content Banner Stuff */
.home-banner {
line-height: 1.25em;
}
#detroit-lubricator {
margin-top: 10px;
}
/* OOCSS properties */
.green{
color: #117041;
}
.black{
color: #000000;
}
.center {
text-align: center;
}
.bold {
font-weight: bold;
}
#middle-column {float:left;}
#right-column {width:450px;}
Related
.page-wrapper {
grid-template-columns: 100%;
}
.middle-wrapper {
max-width: 960px;
margin-left: auto;
margin-right: auto;
padding: 25px;
border: 3px solid #ffffff;
}
.main-page-content {
margin-bottom: 0.5rem;
padding: 0;
}
.title1 {
font-family: tahoma;
font-size: 20px;
text-align: center;
margin-bottom: 2rem;
}
p {
margin: 1rem 0 2rem;
}
.callout {
background: rgba(238, 238, 238, 0.395);
border-radius: var(--elem-radius);
box-shadow: rgb(95, 95, 95);
display: flex;
flex-direction: column;
gap: 1rem;
margin: 2rem 0;
padding: 2rem;
text-align: left;
}
.boxed {
border: 1px solid rgb(78, 78, 78) ;
padding: 1rem;
width: 37em;
margin-left: auto;
margin-right: auto;
}
.textinrect {
word-spacing: 100px;
}
.sidebar {
grid-area: sidebar;
padding-top: 3rem;
max-width: 200px;
}
.list {
list-style: none;
padding-left: 0.5em;
}
.sidebar-heading {
color: Black;
font-size: 18px;
font-family: tahoma;
letter-spacing: 1.5px;
margin-left: 7px;
}
.subject-header {
color: rgba(0, 0, 0, 0.749);
font-size: 14px;
font-family: tahoma;
letter-spacing: 1px;
}
.subject {
margin-bottom: 1em;
}
.toggle {
margin-bottom: 15px;
}
.sub-topic {
color: black;
}
.toggle1 {
padding-top: 1em;
}
.toggle0 {
list-style: none;
padding-left: 1.5em ;
}
a {
text-decoration: none;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="fortest.css">
</head>
<body>
<div class="page-wrapper">
<div class="main-wrapper">
<div class="middle-wrapper">
<article class="main-page-content">
<h2 class="title1">How to create an HTML website</h2>
<div class="section1">
<p>1. Nav Bar</p>
<div class="callout">
<div class="boxed">
<div class="textinrect">
Yourwebsitename home about page3
</div>
</div>
</div>
</div>
</article>
</div>
<aside class="sidebar">
<nav class="sidebar-inner">
<p class="sidebar-heading">Subjects</p>
<div>
<ol class="list">
<li class="subject">
<a href="#">
<h5 class="subject-header">Subject1</h5>
</a>
</li>
<li class="toggle">
<details>
<summary>
All the school sunjects
</summary>
<ol class="toggle0">
<li class="toggle1">
<a class="sub-topic" href="#">The molecular mass and power</a>
</li>
<li class="toggle1">
<a class="sub-topic" href="#">the molecular mass and power</a>
</li>
</ol>
</details>
</li>
<li class="toggle">
<details>
<summary>
Not all school subjects
</summary>
</details>
</li>
</ol>
</div>
</nav>
</aside>
</div>
</body>
</html>
My goal is that the sidebar stays on the side at the very beginning of the document on the left side of the main text. For some reason it says down below the main section. I know this is a matter of position but I can not find the correct position. I would deeply appreciate any answer that you may give.
Try this,
#sidebar {
float: left;
width: 208px;
padding-top: 30px;
background-color:#D2D2D2;
margin-left:initial;
/*position: fixed;*/ //remove it
}
#content {
float: left; // change right to left
width: 564px;
padding-top: 30px;
}
I believe my understanding of positioning is causing me multiple issues:
'Donate' in the navigation header keeps overflowing and not staying inline. I have experimented with display:inline-block, but it still is not working. I am trying to ensure that the navbar elements are responsive to different-sized pages and stay in the same line.
'Our work' section will not center in the middle of the page, even when I tried margin:auto
Unable to align the elements in the problem section correctly. I would like row2 to be 10% below row1, so it's like a 2x2 table configurement.
I've been struggling with this for a while, so if anyone has any ideas on how to solve any of these and suggestions moving forward - it would be well appreciated!
*{
margin:0;
padding:0;
}
header{
font-family:'Ubuntu';
}
body{
font-family: 'Montserrat';
text-align: left;
}
/* Header */
header{
position: fixed;
width:100%;
height:122px;
background:#FFFFFF;
z-index:1;
}
.wrapper{
width:90%;
margin:0 auto;
}
.logo{
width:30%;
float: left;
text-align:left;
line-height: 122px;
}
nav{
float: center;
line-height: 122px;
}
nav a{
font-family:'Ubuntu';
font-weight: 500;
font-size:calc(50px+1vw);
line-height: calc(23px+1vw);
text-decoration: none;
letter-spacing: 4px;
color:#616161;
padding: 20px 20px;
}
.links:hover {
background:#F3EA65;
}
.CTA{
padding: 15px 100px;
border: none;
background: #F28A31 ;
border-radius: 15px ;
font-family: Ubuntu;
font-style: normal;
font-weight: bold;
line-height: calc(13px+1wv);
font-size: calc(20px+1vw);
color: #FFFFFF;
text-align: center;
letter-spacing: 0.5px;
display: inline-flex;
}
.CTA:hover {
background-color: #F3EA65;
color: #FFFFFF;
cursor: pointer;
}
/*Our work*/
#ourwork{
background:#fff;
position:absolute;
width: 932px;
height: 92px;
top: 700px;
left: 50%;
padding:10px;
}
/*Problem section */
#problembackground{
position: absolute;
width: 100%;
height: 561px;
top:852px;
background: linear-gradient(90.14deg, #DE5135 -20.57%, #6975A7 88.83%);
}
#problemcontent{
position: relative;
top: 25%;
left:5%;
}
.row1{
position: relative;
display: inline-block;
padding-right:10%
}
.row2{
position: relative;
display: inline-block;
top:10%;
}
<body>
<header>
<div class="wrapper">
<div class="logo">
<a href="....">
<img src="Home.png" alt="Logo" width="25%";>
</a>
</div>
<nav>
<a class="links" href="#">about</a>
<a class="links" href="#">our team</a>
<a class="links" href="#">who we help</a>
<a class="links" href="#">get involved</a>
<a href="#">
<button class="CTA">Contact</button>
</a>
<a href="#">
<button class="CTA">Donate</button>
</a>
</nav>
</div>
</header>
<main>
<section>
<div id="ourwork">
<h4>OUR WORK</h4><br>
<p id="largertext">
Youth Housing Project Association Inc. (YHP) provides supported, unsupervised,<br> medium-term accommodation in Brisbane to young people aged from 16-21 years old<br> who are homeless or at risk of homelessness.
</p>
</div>
</section>
<section>
<div id="problembackground">
<div id="problemcontent">
<h2 id="the problem">the problem</h2><br>
<div id="p1" class="row1">
<h3>1 in 5</h3>
<p>young Australians report high levels of<br> psychological distress</p>
</div>
<div id="p2" class="row1">
<h3>28 000</h3>
<p>12 to 24-year olds are homeless on any given<br> night in Australia</p>
</div>
<div id="p3" class="row2">
<h3>1 in 6</h3>
<p>16 to 24-year olds live below the poverty line</p>
</div>
<div id="p4" class="row2">
<h3>35%</h3>
<p>of 16 to 24-year olds have experienced<br> domestic violence at home</p>
</div>
</div>
</div>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
header {
font-family: 'Ubuntu';
}
body {
font-family: 'Montserrat';
text-align: left;
padding-top: 122px;
}
/* Header */
header {
position: fixed;
width: 100%;
height: 122px;
background: #FFFFFF;
z-index: 1;
text-align: center;
top: 0;
}
.wrapper {
max-width: 90%;
margin: 0 auto;
}
.logo {
width: 200px;
float: left;
text-align: left;
line-height: 122px;
}
nav {
float: right;
line-height: 122px;
width: calc(100% - 200px);
text-align: right;
}
nav a {
font-family: 'Ubuntu';
font-weight: 500;
font-size: calc(50px+1vw);
line-height: calc(23px+1vw);
text-decoration: none;
letter-spacing: 4px;
color: #616161;
padding: 20px 20px;
}
.links:hover {
background: #F3EA65;
}
.CTA {
padding: 15px 50px;
border: none;
background: #F28A31;
border-radius: 15px;
font-family: Ubuntu;
font-style: normal;
font-weight: bold;
line-height: calc(13px+1wv);
font-size: calc(20px+1vw);
color: #FFFFFF;
text-align: center;
letter-spacing: 0.5px;
display: inline-flex;
}
.CTA:hover {
background-color: #F3EA65;
color: #FFFFFF;
cursor: pointer;
}
main,
section {
float: left;
width: 100%;
}
/*Our work*/
.ourworksec {
background: #fff;
padding: 100px 25px;
}
#ourwork {
width: 100%;
max-width: 620px;
margin: 0 auto;
text-align: center;
}
/*Problem section */
h2#theproblem {
padding: 20px;
}
#problembackground {
width: 100%;
float: left;
padding: 100px 20px;
background: linear-gradient(90.14deg, #DE5135 -20.57%, #6975A7 88.83%);
}
#problemcontent {
position: relative;
}
.row1 {
position: relative;
display: inline-block;
padding: 20px;
float: left;
width: 50%;
}
.row2 {
position: relative;
float: left;
margin-top: 50px;
padding: 20px;
width: 50%;
}
#media only screen and (max-width: 1200px) {
.logo {
width: 80px;
}
nav {
width: calc(100% - 80px);
}
nav a {
padding: 15px 10px;
}
.CTA {
padding: 15px 30px;
}
}
<header>
<div class="wrapper">
<div class="logo">
<a href="....">
<img src="Home.png" alt="Logo" width="25%" ;>
</a>
</div>
<nav>
<a class="links" href="#">about</a>
<a class="links" href="#">our team</a>
<a class="links" href="#">who we help</a>
<a class="links" href="#">get involved</a>
<a href="#">
<button class="CTA">Contact</button>
</a>
<a href="#">
<button class="CTA">Donate</button>
</a>
</nav>
</div>
</header>
<main>
<section class="ourworksec">
<div id="ourwork">
<h4>OUR WORK</h4><br>
<p id="largertext">
Youth Housing Project Association Inc. (YHP) provides supported, unsupervised,<br> medium-term accommodation in Brisbane to young people aged from 16-21 years old<br> who are homeless or at risk of homelessness.
</p>
</div>
</section>
<section>
<div id="problembackground">
<div id="problemcontent">
<h2 id="theproblem">the problem</h2><br>
<div id="p1" class="row1">
<h3>1 in 5</h3>
<p>young Australians report high levels of<br> psychological distress</p>
</div>
<div id="p2" class="row1">
<h3>28 000</h3>
<p>12 to 24-year olds are homeless on any given<br> night in Australia</p>
</div>
<div id="p3" class="row2">
<h3>1 in 6</h3>
<p>16 to 24-year olds live below the poverty line</p>
</div>
<div id="p4" class="row2">
<h3>35%</h3>
<p>of 16 to 24-year olds have experienced<br> domestic violence at home</p>
</div>
</div>
</div>
</section>
</main>
Regarding this one you simply don't have enough space at certain window widths to display them all, so you need to make their sizes responsive. #media queries at certain widths is one option.
"Our work" is absolutely positioned, which messes with things like margin: 0 auto to center things. In general you use position: absolute WAY too often. Honestly you could avoid it all together looking at your page so far. position: absolute is a pain to work with when you come back to your project at a later stage too.
Here your problem is that the third element is still on the same line because you set display: inline-block. You could wrap both rows each in another div (which are display: block by default). Also work with margin-bottom here in my opinion. You are making it way harder with the way you use several position properties.
Here: I removed the floats and used flexbox and grid
Quick note: This website is not responsive, so pls open it in the full window not hte mini window. If you want a responsive site, dang man, that's a big request
Code:
<body>
<style>
*{
margin:0;
padding:0;
}
header{
font-family:'Ubuntu';
}
body{
font-family: 'Montserrat';
text-align: left;
}
/* Header */
header{
position: fixed;
width:100%;
height:122px;
background:#ffffff;
z-index:1;
}
.wrapper{
width:90%;
margin:0 auto;
display: flex;
justify-content: center;
align-items: center;
}
.logo{
text-align:left;
line-height: 100px;
height: fit-content;
display: inline-block;
width: fit-content;
padding: 30px;
margin: 0px;
}
.logo image {
width: 200px;
height: 200px;
}
.wrapper a{
font-family:'Ubuntu';
font-weight: 500;
font-size:calc(50px+1vw);
line-height: calc(23px+1vw);
text-decoration: none;
letter-spacing: 4px;
color:#616161;
padding: 20px 20px;
}
.links:hover {
background:#F3EA65;
}
.CTA{
padding: 15px 100px;
border: none;
background: #F28A31 ;
border-radius: 15px ;
font-family: Ubuntu;
font-style: normal;
font-weight: bold;
line-height: calc(13px+1wv);
font-size: calc(20px+1vw);
color: #FFFFFF;
text-align: center;
letter-spacing: 0.5px;
display: inline-flex;
}
.CTA:hover {
background-color: #F3EA65;
color: #FFFFFF;
cursor: pointer;
}
/*Our work*/
#ourwork{
background:#fff;
position:absolute;
width: 932px;
height: 92px;
top: 700px;
left: 300px;
padding:10px;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
#work{
display: flex;
justify-content: center;
align-items: center ;
}
/*Problem section */
#problembackground{
position: absolute;
width: 100%;
height: 561px;
top:852px;
background: linear-gradient(90.14deg, #DE5135 -20.57%, #6975A7 88.83%);
}
#problemcontent{
position: relative;
top: 25%;
left:5%;
}
#the-problem{
margin: auto;
width: 300px;
}
.row1{
position: relative;
display: inline-block;
padding-right:10%;
margin: auto;
}
.row2{
position: relative;
display: inline-block;
top:10%;
margin: auto;
}
.problem{
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: 1fr 1fr;
}
li{
list-style: none;
}
</style>
<header>
<ul class="wrapper">
<div class="logo">
<a href="....">
<img src="/logo.png" alt="Logo" width="25%";>
</a>
</div>
<li> <a class="links" href="#">about</a> </li>
<li> <a class="links" href="#">our team</a> </li>
<li> <a class="links" href="#">who we help</a> </li>
<li> <a class="links" href="#">get involved</a> </li>
<button class="CTA">Contact</button>
</a>
<a href="#">
<button class="CTA">Donate</button>
</a>
</ul>
</header>
<main>
<section id="work">
<div id="ourwork">
<h4>OUR WORK</h4><br>
<p id="largertext">
Youth Housing Project Association Inc. (YHP) provides supported, unsupervised,<br> medium-term accommodation in Brisbane to young people aged from 16-21 years old<br> who are homeless or at risk of homelessness.
</p>
</div>
</section>
<section>
<div id="problembackground">
<div id="problemcontent">
<h2 id="the-problem">the problem</h2><br>
<div class="problem">
<div id="p1" class="row1">
<h3>1 in 5</h3>
<p>young Australians report high levels of<br> psychological distress</p>
</div>
<div id="p2" class="row1">
<h3>28 000</h3>
<p>12 to 24-year olds are homeless on any given<br> night in Australia</p>
</div>
<div id="p3" class="row2">
<h3>1 in 6</h3>
<p>16 to 24-year olds live below the poverty line</p>
</div>
<div id="p4" class="row2">
<h3>35%</h3>
<p>of 16 to 24-year olds have experienced<br> domestic violence at home</p>
</div>
</div>
</div>
</div>
I am creating a portfolio website from scratch. I am stuck on the footer part. The footer I have created for other pages works as intended but for the Resume page it stays in the middle of the page rather than at the bottom of the page. I have already tried to search for similar problem and try their solutions but sadly it didn't work for me.
Here is my HTML code
<!doctype html>
<html>
<head>
<title> Game Programmer </title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="reset-fonts-grids.css"/>
<link rel="stylesheet" type="text/css" href="resume.css"/>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="main.js"></script>
</head>
<body>
<ul id="nav">
<li>Home</li>
<li>Projects</li>
<li><a class="active" href="resume.html">Resume</a></li>
<li>Contact</li>
</ul>
<div id = "container">
<div id="doc2" class="yui-t7">
<div id="inner">
<div id="hd">
<div class="yui-gc">
<div class="yui-u first">
<h1>a</h1>
<h2>Game Programmer</h2>
</div>
<div class="yui-u">
<div class="contact-info">
<h3><a id="pdf" href="#">Download PDF</a></h3>
<h3>1#gmail.com</h3>
</div><!--// .contact-info -->
</div>
</div><!--// .yui-gc -->
</div><!--// hd -->
<div id="bd">
<div id="yui-main">
<div class="yui-b">
<div class="yui-gf">
<div class="yui-u first">
<h2>Profile</h2>
</div>
<div class="yui-u">
<p class="enlarge">
Game Programmer with 2+ years of experience with multiple game engine and a shipped AA title for PC and Consoles. Possesses a Masters in Game Programming.
</p>
</div>
</div><!--// .yui-gf -->
<div class="yui-gf">
<div class="yui-u first">
<h2>Skills</h2>
</div>
<div class="yui-u">
<div class="talent">
<h2>Time Management</h2>
</div>
<div class="talent">
<h2>Strong Work Ethics</h2>
</div>
<div class="talent">
<h2>Team Player</h2>
</div>
</div>
</div><!--// .yui-gf -->
<div class="yui-gf">
<div class="yui-u first">
<h2>Technical</h2>
</div>
<div class="yui-u">
<ul class="talent">
<li>C</li>
<li class="last">C++</li>
</ul>
<ul class="talent">
<li>C#</li>
<li class="last">Unity</li>
</ul>
<ul class="talent">
<li>Unreal Engine 4</li>
<li class="last">SVN / Perforce</li>
</ul>
</div>
</div><!--// .yui-gf-->
<div class="yui-gf">
<div class="yui-u first">
<h2>Experience</h2>
</div><!--// .yui-u -->
<div class="yui-u">
<div class="job">
<h2>a</h2>
<h3>b</h3>
<h4>c</h4>
<p>d</p>
<p>•e</p>
</div>
<div class="job">
<h2>a</h2>
<h3>b</h3>
<h4>c</h4>
<p>d</p>
</div>
<div class="job last">
<h2>a</h2>
<h3>b</h3>
<h4>c</h4>
<p>d</p>
<p>e</p>
</div>
</div><!--// .yui-u -->
</div><!--// .yui-gf -->
<div class="yui-gf last">
<div class="yui-u first">
<h2>Education</h2>
</div>
<div class="yui-u">
<h2>a</h2>
<h3>b</h3>
</div>
<div class="yui-u">
<h2>a</h2>
<h3>b</h3>
</div>
</div><!--// .yui-gf -->
</div><!--// .yui-b -->
</div><!--// yui-main -->
</div><!--// bd -->
</div><!-- // inner -->
</div><!--// doc -->
<!--Footer-->
<footer class="social-footer">
<div class="social-footer-icons">
<ul class="menu-simple">
<li><i class="fa fa-facebook" aria-hidden="true"></i></li>
<li><i class="fa fa-instagram" aria-hidden="true"></i></li>
<li><i class="fa fa-pinterest-p" aria-hidden="true"></i></li>
<li><i class="fa fa-twitter" aria-hidden="true"></i></li>
</ul>
</div>
</footer>
</div>
</body>
</html>
Here is CSS code
body {
background: url(Images/px_by_Gre3g.png);
font: 16px Helvetica, Arial, Sans-Serif; color: #636363;
}
/* //-- yui-grids style overrides -- */
#inner { padding: 10px 80px; margin: 80px auto; background: #f5f5f5; border: solid #666; border-width: 8px 0 2px 0; }
.yui-gf { margin-bottom: 2em; padding-bottom: 2em; border-bottom: 1px solid #ccc; }
/* //-- header, body, footer -- */
#hd { margin: 2.5em 0 3em 0; padding-bottom: 1.5em; border-bottom: 1px solid #ccc }
#hd h2 { text-transform: uppercase; letter-spacing: 2px; }
#bd, #ft { margin-bottom: 2em; }
/* //-- footer -- */
#ft { padding: 1em 0 5em 0; font-size: 92%; border-top: 1px solid #ccc; text-align: center; }
#ft p { margin-bottom: 0; text-align: centezr; }
/* //-- core typography and style -- */
#hd h1 { font-size: 48px; text-transform: uppercase; letter-spacing: 3px; margin-bottom: 10px;}
h2 { font-size: 152% }
h3, h4 { font-size: 122%; }
h1, h2, h3, h4 { color: #333; }
p { font-size: 100%; line-height: 18px; padding-right: 3em; }
a { color: #990003 }
a:hover { text-decoration: none; }
strong { font-weight: bold; }
li { line-height: 24px; border-bottom: 1px solid #ccc; }
p.enlarge { font-size: 144%; padding-right: 6.5em; line-height: 24px; }
p.enlarge span { color: #000 }
.contact-info { margin-top: 7px; }
.first h2 { font-style: italic; }
.last { border-bottom: 0 }
/* //-- section styles -- */
a#pdf { display: block; float: left; background: #666; color: white; padding: 6px 50px 6px 12px; margin-bottom: 6px; text-decoration: none; }
a#pdf:hover { background: #222; }
.job { position: relative; margin-bottom: 1em; padding-bottom: 1em; border-bottom: 1px solid #ccc; }
.job h4 { position: absolute; top: 0.35em; right: 0 }
.job h3 {margin-top : 5px; margin-bottom : 10px;}
.last { border: none; }
.skills-list ul { margin: 0; }
.skills-list li { margin: 3px 0; padding: 3px 0; }
.skills-list li span { font-size: 152%; display: block; margin-bottom: -2px; padding: 0 }
.talent { width: 32%; float: left }
.talent h2 { margin-bottom: 6px; }
#srt-ttab { margin-bottom: 100px; text-align: center; }
#srt-ttab img.last { margin-top: 20px }
/* --// override to force 1/8th width grids -- */
.yui-gf .yui-u{width:80.2%; padding-bottom: 20px;}
.yui-gf div.first{width:12.3%;}
ul#nav{
width: 1300px; list-style: none; overflow: hidden; margin: 80px 18em 0 auto;
}
#nav li {
width: 100px; height: 35px; float: left; padding: 13px 0 0 0;
background: url(Images/nav-bg.png);
font-weight: bold; text-align: center; text-transform: uppercase;
border-radius: 4px;
}
#nav li:nth-child(1) {
margin: 0 10px 0 0;
}
#nav li:nth-child(2) {
margin: 0 10px 0 0;
}
#nav li:nth-child(3) {
margin: 0 10px 0 0;
}
ul#nav li:nth-child(4) {
margin: 0 10px 0 0;
}
ul#nav li a.active {
color:cadetblue;
text-decoration: underline ;
}
ul#nav li a {
color: #616369; text-decoration: none;
}
ul#nav li a:hover {
color: #a12121;
}
#container {
width: 1300px;
margin: 0 250px;
}
.menu-simple {
margin:auto;
list-style:none;
display: inline-block;
}
.menu-simple li {
font-size:20px;
cursor:pointer;
width:100px;
margin:0;
padding:12px 0;
float:left;
display:block;
height:40px;
}
footer {
text-align: center;
position: absolute;
bottom: 0;
padding:10px 0 auto 0;
width: 100%;
}
.social-footer {
bottom:20px;
background: #8a8a8a;
height:50px;
position: absolute;
bottom: 0;
width: inherit;
}
.social-footer .social-footer-icons .fa {
font-size: 30px;
color: #fefefe;
}
.social-footer .social-footer-icons .fa:hover {
color: #4a4a4a;
transition: color 0.15s ease-in;
}
I am not a web designer so don't mind messy code.
Thanks in advance.
I think you need to change the position of both footer and .social-footer to 'relative' instead of 'absolute'
footer {
text-align: center;
//position: absolute;
position: relative;
bottom: 0;
padding:10px 0 auto 0;
width: 100%;
}
.social-footer {
bottom:20px;
background: #8a8a8a;
height:50px;
position: relative;
//position: absolute;
bottom: 0;
width: inherit;
}
This Stackoverflow thread seems to explain the difference between the two and when to use both.
Position Relative vs Absolute?
change your social-footer class like this :
.social-footer {
background: #8a8a8a;
height:50px;
position: relative;
left: 0;
bottom: 0;
width: inherit;
}
body {
background: url(Images/px_by_Gre3g.png);
font: 16px Helvetica, Arial, Sans-Serif; color: #636363;
}
/* //-- yui-grids style overrides -- */
#inner { padding: 10px 80px; margin: 80px auto; background: #f5f5f5; border: solid #666; border-width: 8px 0 2px 0; }
.yui-gf { margin-bottom: 2em; padding-bottom: 2em; border-bottom: 1px solid #ccc; }
/* //-- header, body, footer -- */
#hd { margin: 2.5em 0 3em 0; padding-bottom: 1.5em; border-bottom: 1px solid #ccc }
#hd h2 { text-transform: uppercase; letter-spacing: 2px; }
#bd, #ft { margin-bottom: 2em; }
/* //-- footer -- */
#ft { padding: 1em 0 5em 0; font-size: 92%; border-top: 1px solid #ccc; text-align: center; }
#ft p { margin-bottom: 0; text-align: centezr; }
/* //-- core typography and style -- */
#hd h1 { font-size: 48px; text-transform: uppercase; letter-spacing: 3px; margin-bottom: 10px;}
h2 { font-size: 152% }
h3, h4 { font-size: 122%; }
h1, h2, h3, h4 { color: #333; }
p { font-size: 100%; line-height: 18px; padding-right: 3em; }
a { color: #990003 }
a:hover { text-decoration: none; }
strong { font-weight: bold; }
li { line-height: 24px; border-bottom: 1px solid #ccc; }
p.enlarge { font-size: 144%; padding-right: 6.5em; line-height: 24px; }
p.enlarge span { color: #000 }
.contact-info { margin-top: 7px; }
.first h2 { font-style: italic; }
.last { border-bottom: 0 }
/* //-- section styles -- */
a#pdf { display: block; float: left; background: #666; color: white; padding: 6px 50px 6px 12px; margin-bottom: 6px; text-decoration: none; }
a#pdf:hover { background: #222; }
.job { position: relative; margin-bottom: 1em; padding-bottom: 1em; border-bottom: 1px solid #ccc; }
.job h4 { position: absolute; top: 0.35em; right: 0 }
.job h3 {margin-top : 5px; margin-bottom : 10px;}
.last { border: none; }
.skills-list ul { margin: 0; }
.skills-list li { margin: 3px 0; padding: 3px 0; }
.skills-list li span { font-size: 152%; display: block; margin-bottom: -2px; padding: 0 }
.talent { width: 32%; float: left }
.talent h2 { margin-bottom: 6px; }
#srt-ttab { margin-bottom: 100px; text-align: center; }
#srt-ttab img.last { margin-top: 20px }
/* --// override to force 1/8th width grids -- */
.yui-gf .yui-u{width:80.2%; padding-bottom: 20px;}
.yui-gf div.first{width:12.3%;}
ul#nav{
width: 1300px; list-style: none; overflow: hidden; margin: 80px 18em 0 auto;
}
#nav li {
width: 100px; height: 35px; float: left; padding: 13px 0 0 0;
background: url(Images/nav-bg.png);
font-weight: bold; text-align: center; text-transform: uppercase;
border-radius: 4px;
}
#nav li:nth-child(1) {
margin: 0 10px 0 0;
}
#nav li:nth-child(2) {
margin: 0 10px 0 0;
}
#nav li:nth-child(3) {
margin: 0 10px 0 0;
}
ul#nav li:nth-child(4) {
margin: 0 10px 0 0;
}
ul#nav li a.active {
color:cadetblue;
text-decoration: underline ;
}
ul#nav li a {
color: #616369; text-decoration: none;
}
ul#nav li a:hover {
color: #a12121;
}
#container {
width: 1300px;
margin: 0 250px;
}
.menu-simple {
margin:auto;
list-style:none;
display: inline-block;
}
.menu-simple li {
font-size:20px;
cursor:pointer;
width:100px;
margin:0;
padding:12px 0;
float:left;
display:block;
height:40px;
}
footer {
text-align: center;
position: absolute;
bottom: 0;
padding:10px 0 auto 0;
width: 100%;
}
.social-footer {
background: #8a8a8a;
height:50px;
position: relative;
left: 0;
bottom: 0;
width: inherit;
}
.social-footer .social-footer-icons .fa {
font-size: 30px;
color: #fefefe;
}
.social-footer .social-footer-icons .fa:hover {
color: #4a4a4a;
transition: color 0.15s ease-in;
}
<!doctype html>
<html>
<head>
<title> Game Programmer </title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="reset-fonts-grids.css"/>
<link rel="stylesheet" type="text/css" href="resume.css"/>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="main.js"></script>
</head>
<body>
<ul id="nav">
<li>Home</li>
<li>Projects</li>
<li><a class="active" href="resume.html">Resume</a></li>
<li>Contact</li>
</ul>
<div id = "container">
<div id="doc2" class="yui-t7">
<div id="inner">
<div id="hd">
<div class="yui-gc">
<div class="yui-u first">
<h1>a</h1>
<h2>Game Programmer</h2>
</div>
<div class="yui-u">
<div class="contact-info">
<h3><a id="pdf" href="#">Download PDF</a></h3>
<h3>1#gmail.com</h3>
</div><!--// .contact-info -->
</div>
</div><!--// .yui-gc -->
</div><!--// hd -->
<div id="bd">
<div id="yui-main">
<div class="yui-b">
<div class="yui-gf">
<div class="yui-u first">
<h2>Profile</h2>
</div>
<div class="yui-u">
<p class="enlarge">
Game Programmer with 2+ years of experience with multiple game engine and a shipped AA title for PC and Consoles. Possesses a Masters in Game Programming.
</p>
</div>
</div><!--// .yui-gf -->
<div class="yui-gf">
<div class="yui-u first">
<h2>Skills</h2>
</div>
<div class="yui-u">
<div class="talent">
<h2>Time Management</h2>
</div>
<div class="talent">
<h2>Strong Work Ethics</h2>
</div>
<div class="talent">
<h2>Team Player</h2>
</div>
</div>
</div><!--// .yui-gf -->
<div class="yui-gf">
<div class="yui-u first">
<h2>Technical</h2>
</div>
<div class="yui-u">
<ul class="talent">
<li>C</li>
<li class="last">C++</li>
</ul>
<ul class="talent">
<li>C#</li>
<li class="last">Unity</li>
</ul>
<ul class="talent">
<li>Unreal Engine 4</li>
<li class="last">SVN / Perforce</li>
</ul>
</div>
</div><!--// .yui-gf-->
<div class="yui-gf">
<div class="yui-u first">
<h2>Experience</h2>
</div><!--// .yui-u -->
<div class="yui-u">
<div class="job">
<h2>a</h2>
<h3>b</h3>
<h4>c</h4>
<p>d</p>
<p>•e</p>
</div>
<div class="job">
<h2>a</h2>
<h3>b</h3>
<h4>c</h4>
<p>d</p>
</div>
<div class="job last">
<h2>a</h2>
<h3>b</h3>
<h4>c</h4>
<p>d</p>
<p>e</p>
</div>
</div><!--// .yui-u -->
</div><!--// .yui-gf -->
<div class="yui-gf last">
<div class="yui-u first">
<h2>Education</h2>
</div>
<div class="yui-u">
<h2>a</h2>
<h3>b</h3>
</div>
<div class="yui-u">
<h2>a</h2>
<h3>b</h3>
</div>
</div><!--// .yui-gf -->
</div><!--// .yui-b -->
</div><!--// yui-main -->
</div><!--// bd -->
</div><!-- // inner -->
</div><!--// doc -->
<!--Footer-->
<footer class="social-footer">
<div class="social-footer-icons">
<ul class="menu-simple">
<li><i class="fa fa-facebook" aria-hidden="true"></i></li>
<li><i class="fa fa-instagram" aria-hidden="true"></i></li>
<li><i class="fa fa-pinterest-p" aria-hidden="true"></i></li>
<li><i class="fa fa-twitter" aria-hidden="true"></i></li>
</ul>
</div>
</footer>
</div>
</body>
</html>
Adding this tag to your css made everything seem okay for me!
html {
position: relative;
}
I used this as a reference: How can I position my div at the bottom of its container?
Some other folks have already pointed out that you need to have position set to relative, left set to 0, and only one value defined for the 'bottom' property. I don't want to steal their thunder. While looking through your code, I noticed that a lot of dimensions are hard-coded, though, and you seem to be doing your grid system from scratch. I think you could save yourself a lot of headache and make your page look more professional if you include this
<meta name="viewport" content="width=device-width, initial-scale=1">
in your header and define your dimensions in 'vw' (meaning "percent of view width") instead of px. You would probably be better off than that, even, if you were to at least reuse the grid system from Bootstrap, even if you don't want any styling from the rest of the framework.
Try to change the position from absolute to fixed
footer {
text-align: center;
position: fixed;
bottom: 0;
padding:10px 0 auto 0;
width: 100%;
}
.social-footer {
bottom:20px;
background: #8a8a8a;
height:50px;
position: fixed;
bottom: 0;
width: inherit;
}
I'm trying to get my Nav menu text to sit beside one another beside the logo like a real website would have.
I made a mockup of the side for reference linked below for viewing purposes.
I've been literally stressing myself out over this simply mundane task, messing with margins, padding, floating, etc and no matter what I do to any of my elements either NOTHING happens or a whole bunch of shit will start flying all over the place and I can't even understand why.
My mockup Preview
How mine looks at present
/*The Main Background*/
body {
background-image: url(../img/background.png);
background-repeat: repeat-x
}
.container {
width: 960px;
margin: 0 auto;
font-family: 'Montserrat', sans-serif;
font-size: 100%;
line-height: 1.5;
}
.HeaderBike{
background-image: url(../img/HeaderBike.png);
background-position: 260px 70px;
background-repeat: no-repeat;
height: 382px;
}
/* Nav Element */
/* Header Element */
.site-navigation li {
height: 21px;
width: 49px;
margin-left: 35px;
margin-right: 11px;
float: left;
}
.site-navigation a {
color: white;
text-decoration: none;
font-weight: bold;
float:left;
text-align: center;
}
.site-navigation a:hover {
padding-bottom: 2px;
border-bottom: 1px solid white;
}
/* navmenu */
.navmenu{
margin-top:15px;
width: 490px;
font-family: 'Montserrat', sans-serif;
font-weight: bold;
color: #fff;
}
.search{
float: left;
}
.SearchGlass{
margin: 30px 900px;
float: left;
}
h2 {
line-height: 0.8;
font-size: 72px;
font-weight: bold;
color: #fff;
width: 450px;
padding-bottom: 42px;
float:left;
text-align: left;
}
h1{
}
/* Class For Articles*/
.article{
float: left;
width: 100%;
margin-bottom: 72px
}
.article img{
width: 400px;
height: 225px;
margin-right: 1%
}
.article h1{
float:left;
width: 70%;
margin: 5px 0;
text-align: left;
font-weight: bold;
font-size: 22.5px;
}
.article p{
float:left;
width: 70%;
margin: 5px 0;
text-align: left;
font-weight: bold;
font-size: 12px;
}
footer{
display: block;
width: 100%;
float: left;
}
<!DOCTYPE html>
<html lang="en-us">
<head>
<meta charset="utf-8">
<title>Assignment3</title>
<link href='https://fonts.googleapis.com/css?family=Montserrat' rel='stylesheet' type='text/css'>
<link rel="stylesheet" type="text/css" href="css/reset.css">
<link rel="stylesheet" type="text/css" href="css/styles.css">
<!--[if lt IE 9]>
<script src="js/html5shiv.js"></script>
<![endif]-->
</head>
<body>
<div class="container">
<header class="Team Sky">
<img src="img/TeamSkyLogo.png" alt="Team Sky Logo" style="float: left;">
<nav class="site-navigation">
<ul class="clearfix navmenu">
<li>shop</li>
<li>checkout</li>
<li>video</li>
<li>
<form class="search">
<input id="search" type="text" name="search" placeholder="search">
</form>
</li>
</ul>
</nav>
<div id="HeaderBike" class="HeaderBike">
<div>
<h1>Team Sky</h1>
<P>the road to yellow</P>
</div>
</div>
</header>
Display your list items inline block.
/*The Main Background*/
body {
background-image: url(../img/background.png);
background-repeat: repeat-x
}
.container {
width: 960px;
margin: 0 auto;
font-family: 'Montserrat', sans-serif;
font-size: 100%;
line-height: 1.5;
}
.HeaderBike {
background-image: url(../img/HeaderBike.png);
background-position: 260px 70px;
background-repeat: no-repeat;
height: 382px;
}
/* Nav Element */
/* Header Element */
.site-navigation li {
height: 21px;
width: 49px;
margin-left: 35px;
margin-right: 11px;
float: left;
}
.site-navigation a {
color: white;
text-decoration: none;
font-weight: bold;
float: left;
text-align: center;
}
.site-navigation a:hover {
padding-bottom: 2px;
border-bottom: 1px solid white;
}
/* navmenu */
.navmenu {
margin-top: 15px;
width: 490px;
font-family: 'Montserrat', sans-serif;
font-weight: bold;
color: #fff;
}
.navmenu li {
display: inline-block;
}
.search {
float: left;
}
.SearchGlass {
margin: 30px 900px;
float: left;
}
<!DOCTYPE html>
<html lang="en-us">
<head>
<meta charset="utf-8">
<title>Assignment3</title>
<link href='https://fonts.googleapis.com/css?family=Montserrat' rel='stylesheet' type='text/css'>
<link rel="stylesheet" type="text/css" href="css/reset.css">
<link rel="stylesheet" type="text/css" href="css/styles.css">
<!--[if lt IE 9]>
<script src="js/html5shiv.js"></script>
<![endif]-->
</head>
<body>
<div class="container">
<header class="Team Sky">
<img src="img/TeamSkyLogo.png" alt="Team Sky Logo" style="float: left;">
<nav class="site-navigation">
<ul class="clearfix navmenu">
<li>shop</li>
<li>checkout</li>
<li>video</li>
<li>
<form class="search">
<input id="search" type="text" name="search" placeholder="search">
</form>
</li>
</ul>
</nav>
<div id="HeaderBike" class="HeaderBike">
<div>
<h1>Team Sky</h1>
<P>the road to yellow</P>
</div>
</div>
</header>
Either you're not posting the needed code for the solution or you have some indentation erros in your html.
<body>
<div class="container">
<header class="Team Sky">
<img src="img/TeamSkyLogo.png" alt="Team Sky Logo" style="float: left;">
<nav class="site-navigation">
<ul class="clearfix navmenu">
<li>shop</li>
<li>checkout</li>
<li>video</li>
<li>
<form class="search">
<input id="search" type="text" name="search" placeholder="search">
</form>
</li>
</ul>
</nav>
<div id="HeaderBike" class="HeaderBike"> <--- open never closed
<div>
<h1>Team Sky</h1>
<P>the road to yellow</P>
</div>
</header> <--- this was after div that goes next
</div>
A simple way to do this would be to split your header into 3 columns and then place your logo, navigation and search fields into each of those sections.
I have included an example below:
.clearfix {
overflow: auto;
}
.header__section {
float: left;
width: 30%;
margin-right: 5%;
}
.header__section:last-child {
margin-right: 0;
}
<header class="header clearfix">
<section class="header__section">
Logo
</section>
<section class="header__section">
Nav
</section>
<section class="header__section">
Search
</section>
</header>
So i recently got into html and css and i've been messing around with it for a few days right now.
The problem is that i can't manage to center the header with background-image: center;
When i do that, my header becomes white instead of the image.
h1 {
font-family: 'Raleway', sans-serif;
color: #09AA34;
margin-left: auto;
margin-right: auto;
}
p1 {
font-size: 200px;
}
.header {
height: 120px;
width: 900px;
padding-left: 650px;
padding-bottom: 100px;
background-image: url("header.jpg")
background-position: center;
}
.navigation {
background-color: #c6e2ff ;
background-image: url("ocean.jpg");
text-align: center;
width: 100%;
border-style: solid;
border-width: thin;
}
.navigation ul {
list-style-type: none;
margin-bottom: 0;
}
.navigation li {
color: #ffffff;
display: inline-block;
font-family: 'Raleway', bold;
padding: 25px 100px;
font-weight: uppercase;
text-align: left;
}
.NavigationWords{
background-color: #ffffff;
width: 90%;
margin-left: 195px;
float: left;
}
h2 {
text-align: center;
font-family: 'Raleway', sans-serif;
background-color: #c6e2ff;
color: #ffffff;
padding: 20px;
margin: 0;
background-image: url("ocean.jpg");
}
p {
margin-top: 0;
font-family: 'Raleway', bold;
line-height: 1.5em;
font-size: 20px;
margin-bottom: 0;
vertical-align: middle;
padding: 10px 20px;
}
.Join {
margin-top: 0;
}
.LeftPanel {
border-style: solid;
max-width: 190px;
max-height: 510px;
text-align: center;
position: absolute;
width:195px;
min-height:510px;
}
.LeftPanel ul {
list-style-type: none;
padding: 0;
}
.LeftPanel li {
padding: 20px 10px;
}
.wrap {
position:relative;
}
<!DOCTYPE html>
<html>
<head>
<title>Belgian Entertainment</title>
<link href="belgian.css" rel="stylesheet" type="text/css">
<link href="https://fonts.googleapis.com/css?family=Oswald:300,700|Varela+Round" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Raleway" rel="stylesheet">
</head>
<body>
<div class="header">
</div>
<div class="navigation">
<ul>
<li> ABOUT </li>
<li> JOIN </li>
<li> PORTFOLIO </li>
<li> FUTURE </li>
</ul>
</div>
<div class="wrap">
<div class="NavigationWords">
<div class="About">
<h2>About</h2>
<p> text
<br/>
<br/>
</p>
</div>
<div class="Join">
<h2>Join</h2>
<p> text
<br/>
<br/>
</p>
</div>
<div class="Portfolio">
<h2> Portfolio </h2>
<p> text.
BE Portfolio
<br/>
<br/>
</p>
</div>
<div class="Future">
<h2> Future </h2>
<p> text</p>
</div>
</div>
</div>
<div class="LeftPanel">
<ul>
<li id="toplogin">Login</li>
<br/>
<br/>
<li id="bordersign">Sign-up</li>
<br/>
<br/>
<li id="bordersign">Portfolio</li>
<br/>
<br/>
<li id="bordersign">Contact</li>
</ul>
</div>
</body>
</html>
You lost a ";" at the end of background-image definition of css:
fiddle
h1 {
font-family: 'Raleway', sans-serif;
color: #09AA34;
margin-left: auto;
margin-right: auto;
}
p1 {
font-size: 200px;
}
.header {
height: 120px;
width: 900px;
padding-left: 650px;
padding-bottom: 100px;
background-image: url("http://en-support.files.wordpress.com/2009/10/twentythirteen-header2.jpg");
background-position: center;
}