#font-face {
font-family: 'Muli';
font-style: normal;
font-weight: 400;
src: local('Muli'), url(https://fonts.gstatic.com/s/muli/v7/minRpKQdEvXRRS8oAbAtWvesZW2xOQ-xsNqO47m55DA.woff) format('woff');
}
body {
font-family: 'Muli', Helvetica, Ariel, Georgia, serif;
font-size: medium;
margin: 0px;
}
#initial {
max-width: 100%;
max-height: 100%;
min-height: 100%;
padding: 0px;
margin: 0px;
}
h1 {
font-size: 3.5em;
font-style: italic;
font-weight: normal;
text-align: center;
border-color: red;
border-style: solid;
margin-top: 0px;
margin-bottom: 10px;
padding: 0px;
}
div.tableRow {
display: table-row;
}
div.tableContainer {
display: table;
}
#profile {
display: table-cell;
width: 250px;
height: auto;
margin-right: 20px;
margin-bottom: 20px;
}
#bio_text {
display: table-cell;
vertical-align: top;
padding-left: 20px;
padding-right: 20px;
}
#ccb, #cfc {
max-width: 100%;
max-height: 100%;
border-color: red;
border-style: solid;
}
#contactForm {
display: table-cell;
border-color: red;
border-style: solid;
}
#contactInfo {
display: table-cell;
border-color: red;
border-style: solid;
}
#contactInfo ul li {
list-style-type: none;
}
#contactInfo h2 {
text-align: center;
}
footer {
border-top-width: 1px;
border-top-style: solid;
border-top-color: black;
text-align: center;
}
footer ul li {
list-style-type: none;
display: inline;
padding: 0px 50px 0px 50px;
border-color: red;
border-style: solid;
}
footer p {
text-align: center;
border-color: red;
border-style: solid;
}
footer ul li a:link, footer ul li a:visited {
text-decoration: none;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Chris Wang</title>
<link rel="stylesheet" type="text/css" href="homepage.css">
</head>
<body>
<header>
<img id="initial" src="img/background_final.jpg" alt="Chris Wang">
</header>
<section id="bio">
<h1>Who Am I?</h1>
<div class="tableContainer">
<div class="tableRow">
<div id="bio_text">
<p>
blah blah blah personal description
</p>
<p>
personal description
</p>
<p>
more personal stuffs
</p>
<p>
more personal stuffs
</p>
</div>
<img id="profile" src="img/profile_edit.jpg" alt="This is me!">
</div>
</div>
</section>
<h1>What Have I Done?</h1>
<section id="past">
<div class="tableRow">
<div id="ccb">
<a href="pages/ccb/index.html">
<img id="ccb_thumbnail" src="pages/ccb/img/thumbnail_resize.jpg" alt="Cranbrook Culture Book">
</a>
</div>
<div id="cfc">
<a href="pages/cfc/index.html">
<img id="cfc_thumbnail" src="pages/cfc/img/thumbnail_resize.jpg" alt="Cranes for Change">
</a>
</div>
<!--<div id="trombetta">
<a href="pages/trombetta/index.html">
<img id="trombetta_thumbnail" src="pages/trombetta/img/thumbnail.jpg" alt="Trombetta Intern">
</a>
</div>-->
</div>
</section>
<h1>Let's Talk!</h1>
<div class="tableContainer">
<fieldset id="contactForm">
<form action="contact.php" method="post">
<div class="tableRow">
<label for="name">Full Name:</label>
<input type="text" id="name" name="name" value="" placeholder="Steve Jobs" required>
</div class="tableRow">
<div class="tableRow">
<label for="email">Email Address:</label>
<input type="email" id="email" name="email" value="" placeholder="stevejobs#apple.com" required>
</div>
<div class="tableRow">
<label for="phone">Phone Number:</label>
<input type="tel" id="phone" name="phone" value="" placeholder="(000)-000-0000">
</div>
<div class="tableRow">
<label for="message">Message:</label>
<textarea id="message" name="message" required></textarea>
</div>
<div class="tableRow">
<label></label>
<input type="submit" value="Send!">
</div>
</fieldset>
<div id="contactInfo">
<h2>Contact Info</h2>
<ul>
<li>Chris Wang</li>
<li>chriswang.work</li>
<li>xxx#icloud.com </li>
<li>###-###-####</li>
</ul>
<img id="linkedin" src="img/linkedin.png" alt="LinkedIn Account">
<img id="twitter" src="img/twitter.png" alt="Twitter Account">
</div>
</div>
<footer>
<ul>
<li>Bio</li>
<li>Experience</li>
<li><a target="_blank" href="file/resume.pdf" title="Resume">Resume</a></li>
<li>Quotes</li>
</ul>
<p>© 2016 Chris Wang</p>
</footer>
</body>
</html>
I'm trying to build a personal website that has full page slides with just HTML & CSS (maybe a bit of super simple PHP for backend stuff), here's an example of what I'm talking about: http://www.hannahsilverton.com
Now I used the max height and weight rule for the opening slide with a jpeg where I layered my initial on top of a cool pic with photoshop. However, when I can't seem to figure out how to make my 2 paragraph bio w/ picture into a full page slide.
Furthermore, I'm also having trouble on the past experience section. I want to have them in the form of a couple of cards across the screen (2 or 3 per roll). However, when I used table display w/ css, all it does is putting the two cards right next to each other (same result as if I was using inline).
Thanks in advance! I just learned the language about a month ago, so excuse me if I make any noob mistake :P
Lastly, if anyone wants to see the code I have now, comment below and I'll inbox you.
Thanks again!
This is not really a complete answer, but I assume you dont want a complete solution but a step for step guide, so I take the risk of getting downvoted. Here we go:
Create the CSS for a "slide" or "page", propably divs, which have width: 100%; and height: 100%;. Put them in another div, class content, also width: 100%; height: 100%; or so. It will contain all of the slides. Make the content div overflow-x: hidden; overflow-y: auto;
If you want to "snap" to each slide, you have to get there via javascript and propably some kind of framework, there is an extension for jQuery which provides mousewheel-listeners which i tend to use quite often but its up to you which one youd like to use.
So basically thats the most important steps, look at this example here
Related
I'm making a webpage for my mums baking business (and to practice my novice coding skills, otherwise I'd just use a simpler solution rather than learning bootstrap).
I've got a header, then 3 bootstrap columns below it, one with an order form, one with images of her bakes, then one with links. I've sized them 3-6-3. I like the way the page looks fullscreen on my desktop but I want the columns to stack when browser gets smaller, or on another device. Currently they just smoosh together, the images get smaller, and after a certain point, a horizontal scrollbar appears. No stacking.
I'm sure I'm either trying to use bootstrap completely wrong, or there's a few glaring errors. I've been staring at it, and trying 'fixes' on here for so long, but I can't solve my issue. Some advice would be greatly appreciated.
one problem I know, is that the and aren't all formatted correctly, I can solve this myself with a bit of time, I just styled it whilst I had it wrongly formatted and when I do it correctly it all looks ugly again, so I'm leaving it for another day. My main problem is the stacking issue.
body {
background-image: url(../images/background.jpg);
}
* {
list-style: none;
text-decoration: none;
font-family: 'Open Sans', sans-serif;
}
header {
margin: 10px 10px 10px 0px;
width: 100%;
height: 100px;
display: block;
background-color: #539e8a;
}
#inner_header {
width: 1000px;
height: 100%;
display: block;
margin: 0 auto;
}
header h1 {
font-family: 'Redressed', cursive;
font-size: 333%;
color: #f6c5be;
top: 15px;
left: 43%;
position: absolute;
}
#logo {
float: left;
padding: 17px 0px 0px 0px;
}
#myname {
float: right;
color: #f6c5be;
margin: 40px 0px 0px 0px;
font-size: 130%;
font-weight: 200;
}
/* ----------------------------------------------- */
.row {
display: table;
margin: 0px 5px 0px 5px;
}
[class*="col-"] {
float: none;
display: table-cell;
vertical-align: top;
}
.row div {
background: #f6c5be;
/*border: 2px solid #539e8a;*/
}
.pics img {
width: auto;
height: auto;
margin: 20px 0px 20px 0px;
display: block;
}
.main2 {
width: 100%;
}
#media-text {
float: none;
margin: 0 auto;
color: #539e8a;
}
#links-text {
float: none;
margin: 0 auto;
color: #539e8a;
}
a:link {
color: #539e8a;
}
a:visited {
color: darkolivegreen;
}
a:hover {
color: #539e8a;
}
#orderform-text {
float: none;
margin: 0 auto;
color: #539e8a;
}
input[type=text] {
border: 0;
box-shadow: 0 0 5px 4px #539e8a;
float: right;
}
input[type=date] {
border: 0;
box-shadow: 0 0 5px 4px #539e8a;
float: right;
}
input[type=tel] {
border: 0;
box-shadow: 0 0 5px 4px #539e8a;
float: right;
}
select[name=orderItems] {
border: 0;
box-shadow: 0 0 5px 4px #539e8a;
float: right;
}
textarea[name=orderBrief] {
border: 0;
box-shadow: 0 0 5px 4px #539e8a;
float: right;
}
input[type=checkbox] {
border: 0;
margin-top: 15px;
}
input[type=submit] {
border: 0;
box-shadow: 0 0 5px 4px #539e8a;
float: right;
}
<head>
<link href="https://fonts.googleapis.com/css2?
family=Open+Sans:wght#300&family=Redressed&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link type="text/css" rel="stylesheet" href="css/mysite.css">
</head>
<body>
<header>
<div id="inner_header">
<img id="logo" src="images/newlogo.png" alt="logo, a cupcake">
<h1>redacted</h1>
<div id="myname">
<p>
by redacted
</p>
</div>
</div>
</header>
<div class="container-fluid">
<div class="row">
<div id="col1" class="col-xs-3">
<div class="row" id="orderform-text">
<div class="col-xs-12">
<h2><b>Order Form</b></h2>
</div>
</div>
<form action="xxx.xxx.xxx" method="post">
<div class="tableRow">
<p></p>
</div>
<div class="tableRow">
<p>
<label for="name">Name:</label>
<input type="text" name="name">
</p>
</div>
<div class="tableRow">
<p>
<label for="address">Address:</label>
<input type="text" name="Address">
</p>
</div>
<div class="tableRow">
<p>
<label for="contactNumber">Contact Number:</label>
<input type="tel" name="contactNumber">
</p>
</div>
<div class="tableRow">
<p>
<label for="deliveryDate">Delivery Date:</label>
<input type="date">
</p>
</div>
<div class="tableRow">
<p>
<label for="orderItems">What would you like?:</label>
<select name="orderItems">
<option value="Cake">Cake</option>
<option value="Cupcakes">Cupcakes</option>
<option value="Brownies">Brownies</option>
<option value="Scones">Scones</option>
<option value="Wedding Cake">Wedding Cake</option>
<option value="Custom Order">Custom Order (detail below)</option>
</select>
</p>
</div>
<div class="tableRow">
<p>
<label for="orderBrief">Order brief:
<br>
<br>
<textarea name="orderBrief" rows="5" cols="50" placeholder="Tell me in detail what you would like to order!"></textarea></label>
</p>
</div>
<div class="tableRow">
<p>
<label for="DietaryRequirements">Dietary requirements?:
Vegan<input type="checkbox" name="dietaryRequirements" value="Vegan">
Dairy-Free<input type="checkbox" name="dietaryRequirements" value="Dairy-free (can eat egg)">
Gluten-Free<input type="checkbox" name="dietaryRequirements" value="Gluten-free"></label>
</p>
</div>
<div class="tableRow">
<p>
<label for="giftwrap">Giftwrap?
yes <input type="radio" name="giftwrap" value="yes">
no <input type="radio" name="giftwrap" value="no"></label>
</p>
</div>
<div class="tableRow">
<p>
<input type="submit" value="Place Order">
</p>
<br>
</div>
<br>
</form>
</div>
<div id="col2" class="col-xs-6">
<div class="row" id="media-text">
<div class="col-xs-12">
<h2><b>Media</b></h2>
</div>
</div>
<div class="row">
<div class="col-xs-4 pics">
<img src="images/cake1.jpg" id="picture1" class="img-responsive" alt="wedding cake">
</div>
<div class="col-xs-4 pics">
<img src="images/cake2.jpg" id="picture2" class="img-responsive" alt="birthday cake">
</div>
<div class="col-xs-4 pics">
<img src="images/cake3.jpg" id="picture3" class="img-responsive" alt="cupcakes">
</div>
</div>
</div>
<div id="Links" class="col-xs-3">
<div class="row" id="links-text">
<div class="col-xs-12">
<h2><b>Links</b></h2>
<a href="link removed">
<h3>Facebook</h3>
</a>
<a href="link removed">
<h3>5 star hygiene rating</h3>
</a>
<a href="">
<h3>Reviews!</h3>
</a>
</div>
</div>
</div>
</div>
</div>
</body>
Newbie here. I am trying to come up with a simple one-page site but my contact form first name label is not attaching with the correct section.
I am attaching the image where the underlined "First Name" is not with the input, even though I have added it under another section and container.
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>Sitemize Hoşgeldiniz</title>
</head>
<body>
<nav class="nav-bar">
<ul class="nav-list">
<li class="nav-items">Home</li>
<li class="nav-items">Contact</li>
<li class="nav-items">About</li>
</ul>
</nav>
<section id="information">
<div class="container">
<div class="information-showcase">
<h1 id="header"><span id="header-span">Sitemize</span> Hoşgeldiniz</h1>
</div>
</div>
</section>
<section id="short-info">
<div class="container">
<div class="container-image-1">
<div class="row">
<div class="column">
<h2>Anında Sipariş</h2>
<i class="fas fa-shopping-cart fa-5x"></i>
</div>
<div class="column">
<h2>Hızlı Teslimat</h2>
<i class="fas fa-truck fa-5x"></i>
</div>
<div class="column">
<h2>Mmnuniyet Garantisi</h2>
<i class="fas fa-smile-beam fa-5x"></i>
</div>
</div>
</div>
</div>
</section>
<section class="contact-us">
<div class="container">
<form action="#">
<label for="fname">First Name</label>
<input type="text" id="fname" placeholder="Enter your first name">
<label for="fname">Last Name</label>
<input type="text" id="lname" placeholder="Enter your last name">
<label for="subject">Subject</label>
<textarea id="subject" name="subject" placeholder="Write something.." style="height:200px"></textarea>
<input type="submit" value="Submit">
</form>
</div>
</section>
</body>
<script src="app.js"></script>
<script src="https://kit.fontawesome.com/a076d05399.js"></script>
</html>
/* Body */
body {
background-color: burlywood;
}
/* Navigation Bar */
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #0A800C
}
.nav-items {
display: inline;
float: left;
}
.nav-items a {
text-decoration: none;
display: block;
color: white;
text-align: center;
padding: 14px 16px;
font-family: Arial, Helvetica, sans-serif;
}
.nav-items a:hover {
background-color: #111;
}
/* Image section */
.column {
float: left;
width: 25%;
padding: 10px;
margin-top: 25px;
margin-left: 100px;
background-color: aqua;
}
#information {
background:url("resim2.jpg");
background-repeat: no-repeat;
background-position: center;
height: 400px;
}
#header {
text-align: center;
padding-top: 150px;
color: aqua;
font-size: 60px;
}
.lead {
text-align: center;
}
/* Create three equal columns that floats next to each other */
.column {
float: center;
width: 20%;
padding: 10px;
height: 200px;
text-align: center;
background-color: burlywood;
}
.row {
margin-left:150px;
}
Thank you
Onur
the problem is you are using the
float
in your css that is makeing the problem
if you need your elements to be horizantly
add this to .row
.row {
margin-left: 150px;
display:flex;
}
remove this property from your css
.column
and wrap the items with a div that has this property
display:flex;
you can learn more about it here
https://www.youtube.com/watch?v=fYq5PXgSsbE
good luck!
look how i did it
https://stackblitz.com/edit/js-qjmbgj?file=index.html
https://js-qjmbgj.stackblitz.io
if you cant use display flex
use position :absolute ;
for more understanding
go here
https://www.khanacademy.org/computing/computer-programming/html-css/css-layout-properties/pt/css-position
So I am making a website for class, Ive got one more page to make and its the login page. The thing is, it seems I cant move forms and things in forms around like I can with text boxes. what I want to do is sort of like the steam login page which I will link here. Basically I want box in the middle of the page with a text box for username and password on the left side of the box, then I want a thin line going down the middle of the box separating the two halves and on the right side I want three boxes one for the username and two for the password. The thing is I cant seem to move what I have to the left side of the box yet. https://store.steampowered.com/login/ thats the steam login site itll give you an idea of what i want to do.
Here is what I have so far, I just want to move the grey box down a bit and then put the form that i have now on the left side of the box and write a new form on the right side of the box with a dividing line in the middle.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Portal 2 Launch site</title>
<link rel="stylesheet" href="style.css">
<script src="script.js"></script>
<h1> <img src="logo.png" class="center"><h1>
</head>
<body>
<!-- The navigation menu -->
<div class="navbar" style="width 100%">
Home
About
Media
<div class="subnav" style="width:20%">
<button class="subnavbtn" style="width: 100%">OtherGames</button>
<div class="subnav-content">
Half Life
Team Fortress 2
Counter strike: Global Offensive
</div>
</div>
Account
</div>
<center>
<div class="container">
forgot password?
<form>
<div class="input-wrap">
<label>Username:</label><br>
<input type="text">
</div>
<div class="input-wrap">
<label>Password:</label><br>
<input type="password">
</div>
</form>
<button class="submit" type="submit" form="form1" value="Submit">Submit</button
</div>
<center>
</body>
</html>
body {
background-color: black;
color: black;
opacity: 300;
}
.container {
display: flex;
flex-direction: column;
background: gray;
border: 10px black;
margin:0;
width: 420px;
padding: 20px
}
.container1 {
display: flex;
flex-direction: column;
background: gray;
border: 10px black;
margin:0;
width: 620px;
padding: 20px
}
.input-wrap1 {
width:620px;
}
form {
display: flex;
flex-direction: column;
width: 200px;
}
.input-wrap {
margin: 5px;
}
input {
background-color: white;
border: 1px solid #4C4B63;
}
.submit{
background: #333;
color: white;
border-style: outset;
border-color: #0066A2;
height: 50px;
width: 100px;
font: bold 15px arial, sans-serif;
text-shadow:none;
cursor: pointer;
}
.submit:hover {
background: green;
color: #eee;
border: 1px solid #eee;
text-shadow:none;
cursor: pointer;
}
I leave you a snippet with the idea you have for the login. You will have to tinker with it to fit your own styles. I leave you a link to a little game to learn flexbox, which I use on the snippet.
.wrapper {
height: 500px;
display: flex;
align-items: center;
justify-content: center;
background-color: slategrey;
}
.login {
display: flex;
width: 400px;
height: 300px;
background-color: lightgrey;
padding: 10px;
}
.side {
flex: 1
}
.separator {
flex: 0;
border-left: 1px solid black;
width: 2px;
height: 250px;
margin: auto 16px;
}
.side {
flex: 1;
}
<div class="wrapper">
<div class="login">
<div class="side">
<form>
<div>
<label>Username:</label><br>
<input type="text">
</div>
<div>
<label>Password:</label><br>
<input type="password">
</div>
</form>
<button class="submit" type="submit" form="form1" value="Submit">Submit</button>
</div>
<div class="separator"></div>
<div class="side">
<form>
<div>
<label>Username:</label><br>
<input type="text">
</div>
<div>
<label>Password:</label><br>
<input type="password">
</div>
<div>
<label>Confirm password:</label><br>
<input type="password">
</div>
</form>
<button class="submit" type="submit" form="form2" value="Submit">Submit</button>
</div>
</div>
</div>
I am trying to float 4 boxes along the full width of my webpage with equal spacing between them.
Currently the output looks as follows:
This was achieved with the following HTML and CSS
.info {
background-color: black;
padding: 20px 20px 40px 20px;
margin-bottom: 10%;
}
.go_button {
width: 175px;
background-color: #01C3A7;
border: none;
cursor: pointer;
border-radius: 0.429rem;
color: #FFFFFF;
font-family: Circular, Helvetica, Arial, sans-serif;
font-size: 1.429rem;
font-weight: bold;
letter-spacing: 0px;
padding: 3px;
}
.box {
float: left;
}
<div class="info">
<div class="box_container">
<div class="box">
<input type="text" placeholder="Departure Station" id="depart">
<input type="hidden" id="departID" name="DeptStationID" style="display: none">
</div>
<div class="box">
<input type="text" placeholder="Arrival Station" id="arrive">
<input type="hidden" id="arriveID" name="ArrvStationID" style="display: none">
</div>
<div class="box">
<input type="text" id="datepicker" value="#DateTime.Now.Date.ToString(" yyyy/MM/dd ")" name="DeptDate">
</div>
<div class="box">
<input type="text" id="timepicker" name="time">
</div>
<div class="box"><button type="submit" name="Submit" class="go_button">Go</button></div>
</div>
</div>
The output I am trying to require is as follows:
I want this to be able to resize according to the screen display and therefore cannot set a margin using pixels. Currently when i do resize the output, it produces the following:
As you can see, the background color does not fill all four boxes. I have added height:auto and this does not fix the issue.
Please can you let me know how to fix these issues.
I would use flexbox with justify-content:space-between rather than floats
.info {
background-color: black;
padding: 20px 20px 40px 20px;
margin-bottom: 10%;
}
.go_button {
width: 175px;
background-color: #01C3A7;
border: none;
cursor: pointer;
border-radius: 0.429rem;
color: #FFFFFF;
font-family: Circular, Helvetica, Arial, sans-serif;
font-size: 1.429rem;
font-weight: bold;
letter-spacing: 0px;
padding: 3px;
}
.box_container {
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: space-between;
}
<div class="info">
<div class="box_container">
<div class="box">
<input type="text" placeholder="Departure Station" id="depart">
<input type="hidden" id="departID" name="DeptStationID" style="display: none">
</div>
<div class="box">
<input type="text" placeholder="Arrival Station" id="arrive">
<input type="hidden" id="arriveID" name="ArrvStationID" style="display: none">
</div>
<div class="box">
<input type="text" id="datepicker" value="#DateTime.Now.Date.ToString(" yyyy/MM/dd ")" name="DeptDate">
</div>
<div class="box">
<input type="text" id="timepicker" name="time">
</div>
<div class="box"><button type="submit" name="Submit" class="go_button">Go</button></div>
</div>
</div>
You could use flex box.
try something out like the following:
FIDDLE
https://jsfiddle.net/pcehxx7f/16/
HTML
<div class="container">
<div class="box">
<input type="text">
</div>
<div class="box">
<input type="text">
</div>
<div class="box">
<input type="text">
</div>
<div class="box">
<input type="text">
</div>
</div>
CSS
.container {
display: flex;
justify-content: space-between;
}
.box {
padding: 0 10px;
}
.box input {
width: 100%;
}
I would use the next hack...
.box_container:after{
content:'';
display:block;
clear:both;
}
This adds a last element in your container, using the clear property, this is happening because the float element don't take space in its container..
.info {
background-color: black;
padding: 20px 20px 40px 20px;
margin-bottom: 10%;
}
.go_button {
width: 175px;
background-color: #01C3A7;
border: none;
cursor: pointer;
border-radius: 0.429rem;
color: #FFFFFF;
font-family: Circular,Helvetica,Arial,sans-serif;
font-size: 1.429rem;
font-weight: bold;
letter-spacing: 0px;
padding: 3px;
}
.box {
float: left;
}
.box_container:after{
content:'';
display:block;
clear:both;
}
<div class="info">
<div class="box_container">
<div class="box">
<input type="text" placeholder="Departure Station" id="depart">
<input type="hidden" id="departID" name="DeptStationID" style="display: none">
</div>
<div class="box">
<input type="text" placeholder="Arrival Station" id="arrive">
<input type="hidden" id="arriveID" name="ArrvStationID" style="display: none">
</div>
<div class="box">
<input type="text" id="datepicker" value="#DateTime.Now.Date.ToString("yyyy/MM/dd")" name="DeptDate">
</div>
<div class="box">
<input type="text" id="timepicker" name="time">
</div>
<div class="box"><button type="submit" name="Submit" class="go_button">Go</button></div>
</div>
</div>
Use Clearfix to automatically close elemts float.
How it works is well described in this question:
What is a clearfix?
But much better solution is to use flexbox.
Nice flexbox guide can be found on css-tricks.com
I'm having a couple of bugs with my layout and was wondering if anyone could help me out. I need to have the white space removed above the nav bar and below the footer. Secondly, I'd like to have all of the footer elements on the same line, instead of being slightly staggered. I've attached a picture of the site, as well as the HTML and CSS that goes with it. Thanks in advance!
HTML:
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>21st Century Dad</title>
<link type="text/css" rel="stylesheet" href="css/reset.css" />
<link type="text/css" rel="stylesheet" href="styles.css" />
<link href="//cdn-images.mailchimp.com/embedcode/classic-10_7.css" rel="stylesheet" type="text/css">
<style type="text/css">
#mc_embed_signup{background:#26ADE4; float:right; font:14px 'Kanit',Helvetica,Arial,sans-serif; margin-right: 20px; margin-top: 20px; text-align:center; padding:10px; border-radius:20px;}
/* Add your own MailChimp form style overrides in your site stylesheet or in this style block.
We recommend moving this block and the preceding CSS link to the HEAD of your HTML file. */
</style>
</head>
<body>
<header>
<div id="header-content">
<img src="../website/images/logo-big.png" alt="21st Century Dad" height="110" style="margin-left:20px; margin-top:20px;" />
<!-- Begin MailChimp Signup Form -->
<div id="mc_embed_signup">
<form action="//fb.us15.list-manage.com/subscribe/post?u=48be460d4492dcbdd2828666e&id=f7d2ed069d" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate>
<div id="mc_embed_signup_scroll">
Sign up for our newsletter!
<div class="indicates-required"><span class="asterisk"></span></div>
<div class="mc-field-group">
<label for="mce-EMAIL">Email Address <span class="asterisk">*</span>
</label>
<input type="email" value="" name="EMAIL" class="required email" id="mce-EMAIL">
</div>
<div id="mce-responses" class="clear">
<div class="response" id="mce-error-response" style="display:none"></div>
<div class="response" id="mce-success-response" style="display:none"></div>
</div> <!-- real people should not fill this in and expect good things - do not remove this or risk form bot signups-->
<div style="position: absolute; left: -5000px;" aria-hidden="true"><input type="text" name="b_48be460d4492dcbdd2828666e_f7d2ed069d" tabindex="-1" value=""></div>
<div class="clear"><input type="submit" value="Subscribe" name="subscribe" id="mc-embedded-subscribe" class="button" style="background-color:#D1E751; font:14px 'Kanit',Helvetica,Arial,sans-serif; margin-top:4px; border-radius:5px; border-color:#D1E751;"></div>
</div>
</form>
</div>
<!--End mc_embed_signup-->
<nav>
<ul>
<li>About</li>
<li>DIY Projects</li>
<li>Dad Tech</li>
<li>Kid Stuff</li>
<li>Ask a Dad</li>
<li>Dad Jokes</li>
</ul>
</nav>
</div>
</header>
<div id="wrapper">
<main>
<div class = "container">
<div class = "blocks">
<h1>What's New with Dad?</h1>
<img src="../website/images/whatsnew.png" alt="About Me Picture" style="border:1px solid #000;">
</div>
<div class = "blocks">
<h1>DIY Project of the Week</h1>
<img src="../website/images/diyproject.jpg" alt="DIY Project Picture" style="border:1px solid #000;">
</div>
<div class = "blocks">
<h1>Dad Gadget of the Week</h1>
<img src="../website/images/dadgadget.jpg" alt="Dad Gadget of the Week Picture" style="border:1px solid #000;">
</div>
<div class = "blocks">
<h1>Activity / Meal of the Week</h1>
<img src="../website/images/dadactivity.jpg" alt="Kid Activity & Meal of the Week" style="border:1px solid #000;">
</div>
<div class = "blocks">
<h1>Dad Q & A of the Week</h1>
<img src="../website/images/askadad.png" alt="Dad Q & A of the Week" style="border:1px solid #000;">
</div>
<div class = "blocks">
<h1>Dad Joke of the Week</h1>
<img src="../website/images/dadjokes.jpg" alt="Dad Joke of the Week" style="border:1px solid #000;">
</div>
</div><!-- end container -->
</main>
<footer>
<div id="footer">
<p class="left">
21stcenturydad#gmail.com
<p class="right">
<a href="https://www.facebook.com/">
<img src="../website/images/Facebook.png" alt="Facebook Logo"/></a>
<a href="https://www.snapchat.com/">
<img src="../website/images/Snapchat.png" alt="Snapchat Logo"/></a>
<a href="https://www.instagram.com/">
<img src="../website/images/Instagram.png" alt="Instagram Logo"/></a>
<p class="centered">
© Copyright 2017 21st Century Dad
</div>
</footer>
</div>
</body>
</html>
CSS:
#charset "UTF-8";
/* CSS Document */
#import url('https://fonts.googleapis.com/css?family=Kanit:200,300,500');
body {
background-color: #FFF;
background-image:url(../website/images/background.png);
font-size: 13px;
font-family: 'Kanit', sans-serif;
font-weight: 200;
color: #363636;
}
p {
line-height: 140%;
}
header {
background-color: #D1E751;
width: 960px;
z-index:1000;
margin-right:auto;
margin-left:auto;
}
#header-content {
width: 960px;
margin-left: auto;
margin-right: auto;
height: 130px;
position:relative;
left:0px;
top:0px;
}
nav {
background-color: #26ADE4;
color: #fff;
width: 100%;
text-align: center;
font-size: 16px;
font-weight:bold;
}
nav ul {
display: block;
padding:14px 0 14px;
}
nav li {
display: inline-block;
}
nav a {
padding: 5px 30px 5px;
}
nav a:link {
color: #fff;
text-decoration: none;
}
nav a:hover {
background-color: #D1E751;
color: #FFF;
}
nav a:visited{color:#FFF;}
#wrapper {
width: 960px;
margin-left: auto;
margin-right: auto;
background-color: #fff;
overflow: hidden;
padding-top:60px;
}
.container{width:960px;
margin-left:auto;
margin-right:auto;
text-align:center;}
.blocks{display:inline-block;
width:300px;
padding-left:5px;
padding-right:5px;
}
h1 {
font-size: 20px;
color: #26ADE4;
font-weight: 500;
margin-bottom: 2px;
}
h2 {
font-weight:500;
font-size: 60px;
color: #fff;
position:absolute;
left:-2px;
bottom:-9px;
}
footer {
background-color: #D1E751;
color: #fff;
font-size: 10px;
padding: 12px;
font-weight:bold;
clear: both;
}
.left{text-align:left;
font-size:14px;
float:left;
padding-top:8px;
padding-bottom:8px;
}
.right{float:right;
text-align:right;
}
.centered{text-align:center;
font-size:14px;
padding-top:8px;
padding-bottom:8px;
max-width:300px;
margin-left:auto;
margin-right:auto;}
Screenshot
take out margin:auto to the body to get rid of surrounding whitespace
For a simple footer, you can position the element fixed to the screen
For elements in the footer, You can use a display flex property on the div with id footer
CSS rules below and pen is here
body {
margin: auto;
}
.left,
right,
.centered {
margin-left: 50px;
margin-right: 50px;
margin-top: 0;
}
footer {
position: fixed;
bottom: 0;
left: 0;
width: 100%;
}