So I know that there are other results here that are for this question, however I have a relatively "finished" code which I don't want to mess with too much if I can avoid it.
Basically I have everything on my website looking just the way I want it to, except that on larger displays the footer doesn't stick to the bottom of the screen, and there is this big ugly gap between my footer and the bottom of the screen.
Below are my index and css files. The footer element has been jostled around between the end tags, to no effect. I had it outside of my main body of content and tried bottom: 0; with position: absolute; and it just caused the right end of the footer to shoot off outside of the width I specified in my container.
.header,
.navBar,
.pageTitle {
margin: 0px;
padding: 0px;
}
body {
font-size: 20px;
background-color: #006464;
}
html,
body,
#container {
min-height: 100vh;
}
footer {
background-color: #006400;
}
nav,
h1,
h2 {
font-family: arial;
}
nav a:hover {
background-color: white;
color: black;
}
nav a {
color: white;
}
h2 {
text-align: center;
background-color: white;
}
#container {
width: 1000px;
margin: auto;
min-height: 100%;
}
#navBar {
background-color: #228B22;
padding: 10px;
}
#signUp {
color: white;
font-size: 20px;
font-family: arial;
}
#welcomeFont {
color: white;
font-size: 25px;
font-family: arial;
}
.header {
background-color: #006400;
padding: 20px;
}
.headerAnchor {
text-decoration: none;
color: black;
}
.table {
background: #006400;
max-width: 100%;
border: 1px solid black;
border-spacing: 10px;
margin-left: auto;
margin-right: auto;
}
.tableData {
font-size: 19px;
background: white;
border: 1px solid black;
padding: 8px;
opacity: .75;
}
.resizeAbout {
max-height: 50%;
max-width: 50%;
margin-top: 50px;
margin-bottom: 50px;
}
.resizeHome {
max-height: 50%;
max-width: 50%;
margin-top: 50px;
}
.resizePhotos {
max-height: 40%;
max-width: 40%;
}
.pageTitle {
padding-bottom: 0px;
box-shadow: 0px 8px 25px 0px;
}
.poetryAuthor {
color: white;
font-size: 15px;
font-family: arial;
font-style: italic;
}
.poetryCaptions {
margin-top: 50px;
color: white;
font-size: 25px;
font-family: arial;
}
<body>
<div id="container">
<header>
<h1 class="header"><a class="headerAnchor" href="index.html">TheSingularEffect.Com</a></h1>
</header>
<nav id="navBar">
Home
Music
Photos
Poetry
About
</nav>
<h2 class="pageTitle">
Get the Full Effect!
</h2>
<img class="resizeHome" src="image/homepage.jpg" alt="home page image">
<h3 id="welcomeFont">
Welcome to the home of The Singular Effect!
</h3>
<br>
<form>
<span id="signUp">Sign up for our newsletter!</span>
<br>
<input type="text" name="emailaddress" value="Email Address">
<input type="submit" value="submit">
</form>
</div>
<footer>
© 2016, Chris Hughes - SNHU
</footer>
</body>
You could try using css-tables. I tested it and seems to work as requested. The footer also expands if you add content to it.
Under body add
margin:auto;
display:table;
and under footer
display:table-row;
position:fixed;
width:1000px;
bottom: 0;
Also in this case you should probably remove the margin from the #container as it is defined in the body already.
Where I learned the trick: http://colintoh.com/blog/display-table-anti-hero#sticky-footer
I added 1 more div to target all the body content except footer so I can set the height for that element. Here are code that works:
<!DOCTYPE html>
<! Must have tables, forms, multimedia, and links >
<head>
<title>Home - The Singular Effect</title>
<link rel="stylesheet" href="css/style.css">`enter code here`
<style type="text/css">
* {
margin: 0px;
padding: 0px;
}
body {
font-size: 20px;
background-color: #006464;
}
html, body, #container {
height: 100%;
margin: 0;
}
footer {
margin-top: 50px;
background-color: #006400;
margin-bottom: 0px;
bottom: 0;
}
nav, h1, h2 {
font-family: arial;
}
nav a:hover {
background-color: white;
color: black;
}
nav a {
color: white;
}
h2 {
text-align: center;
background-color: white;
}
#container {
width: 1000px;
margin: auto;
min-height: 100%;
}
#navBar {
background-color: #228B22;
padding: 10px;
}
#signUp {
color: white;
font-size: 20px;
font-family: arial;
}
#welcomeFont {
color: white;
font-size: 25px;
font-family: arial;
}
.header {
background-color: #006400;
padding: 20px;
}
.headerAnchor {
text-decoration: none;
color: black;
}
.table {
background: #006400;
max-width: 100%;
border: 1px solid black;
border-spacing: 10px;
margin-left: auto;
margin-right: auto;
}
.tableData {
font-size: 19px;
background: white;
border: 1px solid black;
padding: 8px;
opacity: .75;
}
.resizeAbout{
max-height: 50%;
max-width: 50%;
margin-top: 50px;
margin-bottom: 50px;
}
.resizeHome{
max-height: 50%;
max-width: 50%;
margin-top: 50px;
}
.resizePhotos{
max-height: 40%;
max-width: 40%;
}
.pageTitle {
padding-bottom: 0px;
box-shadow: 0px 8px 25px 0px;
}
.poetryAuthor {
color: white;
font-size: 15px;
font-family: arial;
font-style: italic;
}
.poetryCaptions {
margin-top: 50px;
color: white;
font-size: 25px;
font-family: arial;
}
.bodyContetExceptFooter{
padding: 20px;
min-height: 90%;
margin: 0 auto -50px;
}
</style>
</head>
<body>
<div id="container">
<div class="bodyContetExceptFooter">
<header>
<h1 class="header"><a class="headerAnchor" href="index.html">TheSingularEffect.Com</a></h1>
</header>
<div id="navBar">
<nav>
Home
Music
Photos
Poetry
About
</nav>
</div>
<div id="divContent">
<h2 class="pageTitle">
Get the Full Effect!
</h2>
<img class="resizeHome" src="image/homepage.jpg" alt="home page image">
<h3 id="welcomeFont">
Welcome to the home of The Singular Effect!
</h3> <br>
<form>
<span id="signUp">Sign up for our newsletter!</span> <br>
<input type="text" name="emailaddress" value="Email Address">
<input type="submit" value="submit">
</form>
</div>
</div>
<footer>
© 2016, Chris Hughes - SNHU
</footer>
</div>
</body>
</html>
Use relative positioning on body, absolute positioning on footer and position it to left: 0; bottom 0;, also add width: 100%; to footer to fill full width of body.
One last thing is to add padding-bottom: 23px; to body to avoid footer hiding content when the height of browser is less than your content.
.header,
.navBar,
.pageTitle {
margin: 0px;
padding: 0px;
}
body {
font-size: 20px;
background-color: #006464;
position: relative; /* added */
padding-bottom: 23px; /* added, where 23px is the height of the footer */
}
html,
body,
#container {
min-height: 100vh;
}
footer {
background-color: #006400;
position: absolute; /* added */
bottom: 0; /* added */
left: 0; /* added */
width: 100%; /* added */
}
nav,
h1,
h2 {
font-family: arial;
}
nav a:hover {
background-color: white;
color: black;
}
nav a {
color: white;
}
h2 {
text-align: center;
background-color: white;
}
#container {
width: 1000px;
margin: auto;
min-height: 100%;
}
#navBar {
background-color: #228B22;
padding: 10px;
}
#signUp {
color: white;
font-size: 20px;
font-family: arial;
}
#welcomeFont {
color: white;
font-size: 25px;
font-family: arial;
}
.header {
background-color: #006400;
padding: 20px;
}
.headerAnchor {
text-decoration: none;
color: black;
}
.table {
background: #006400;
max-width: 100%;
border: 1px solid black;
border-spacing: 10px;
margin-left: auto;
margin-right: auto;
}
.tableData {
font-size: 19px;
background: white;
border: 1px solid black;
padding: 8px;
opacity: .75;
}
.resizeAbout {
max-height: 50%;
max-width: 50%;
margin-top: 50px;
margin-bottom: 50px;
}
.resizeHome {
max-height: 50%;
max-width: 50%;
margin-top: 50px;
}
.resizePhotos {
max-height: 40%;
max-width: 40%;
}
.pageTitle {
padding-bottom: 0px;
box-shadow: 0px 8px 25px 0px;
}
.poetryAuthor {
color: white;
font-size: 15px;
font-family: arial;
font-style: italic;
}
.poetryCaptions {
margin-top: 50px;
color: white;
font-size: 25px;
font-family: arial;
}
<body>
<div id="container">
<header>
<h1 class="header"><a class="headerAnchor" href="index.html">TheSingularEffect.Com</a></h1>
</header>
<nav id="navBar">
Home
Music
Photos
Poetry
About
</nav>
<h2 class="pageTitle">
Get the Full Effect!
</h2>
<img class="resizeHome" src="image/homepage.jpg" alt="home page image">
<h3 id="welcomeFont">
Welcome to the home of The Singular Effect!
</h3>
<br>
<form>
<span id="signUp">Sign up for our newsletter!</span>
<br>
<input type="text" name="emailaddress" value="Email Address">
<input type="submit" value="submit">
</form>
</div>
<footer>
© 2016, Chris Hughes - SNHU
</footer>
</body>
.header,
.navBar,
.pageTitle {
margin: 0px;
padding: 0px;
}
body {
margin: 0px;
padding: 0px;
font-size: 20px;
background-color: #006464;
}
html,
body,
#container {
min-height: 100vh;
}
footer {
background-color: #006400;
position: absolute;
bottom: 0px;
width: 100%;
}
nav,
h1,
h2 {
font-family: arial;
}
nav a:hover {
background-color: white;
color: black;
}
nav a {
color: white;
}
h2 {
text-align: center;
background-color: white;
}
#container {
width: 1000px;
margin: auto;
min-height: 100vh;
position: relative;
}
#navBar {
background-color: #228B22;
padding: 10px;
}
#signUp {
color: white;
font-size: 20px;
font-family: arial;
}
#welcomeFont {
color: white;
font-size: 25px;
font-family: arial;
}
.header {
background-color: #006400;
padding: 20px;
}
.headerAnchor {
text-decoration: none;
color: black;
}
.table {
background: #006400;
max-width: 100%;
border: 1px solid black;
border-spacing: 10px;
margin-left: auto;
margin-right: auto;
}
.tableData {
font-size: 19px;
background: white;
border: 1px solid black;
padding: 8px;
opacity: .75;
}
.resizeAbout {
max-height: 50%;
max-width: 50%;
margin-top: 50px;
margin-bottom: 50px;
}
.resizeHome {
max-height: 50%;
max-width: 50%;
margin-top: 50px;
}
.resizePhotos {
max-height: 40%;
max-width: 40%;
}
.pageTitle {
padding-bottom: 0px;
box-shadow: 0px 8px 25px 0px;
}
.poetryAuthor {
color: white;
font-size: 15px;
font-family: arial;
font-style: italic;
}
.poetryCaptions {
margin-top: 50px;
color: white;
font-size: 25px;
font-family: arial;
}
<!DOCTYPE html>
<head>
<title>Home - The Singular Effect</title>
</head>
<body>
<div id="container">
<header>
<h1 class="header"><a class="headerAnchor" hreF="index.html">TheSingularEffect.Com</a></h1>
</header>
<nav id="navBar">
Home
Music
Photos
Poetry
About
</nav>
<h2 class="pageTitle">
Get the Full Effect!
</h2>
<img class="resizeHome" src="image/homepage.jpg" alt="home page image">
<h3 id="welcomeFont">
Welcome to the home of The Singular Effect!
</h3>
<br>
<form>
<span id="signUp">Sign up for our newsletter!</span>
<br>
<input type="text" name="emailaddress" value="Email Address">
<input type="submit" value="submit">
</form>
<footer>
© 2016, Chris Hughes - SNHU
</footer>
</div>
</body>
Related
I'm working on an assignment dealing with forms in HTML and CSS. I'm trying to follow the instructions but my form is coming out really wonky. Any suggestions on how I can fix this? I'd like to learn what I'm doing wrong.
body {
background-color: #B8DBED;
font-family: Arial;
}
header {
background-color: #000033;
color: #FFFFFF;
margin-left: auto;
margin-right: auto;
height: 120px;
padding-top: 30px;
padding-left: 3em;
text-align: center;
}
nav {
font-weight: bold;
padding: 1.5em;
font-size: 120%;
float: left;
width: 160px;
}
nav a {
text-decoration: none;
}
h1 {
margin-bottom: 0;
font-family: Georgia;
margin-top: 0;
font-size: 3em;
letter-spacing: 0.25em;
}
h2 {
color: #3399CC;
font-family: Georgia;
text-shadow: 1px 1px 1px #CCCCCC;
}
h3 {
font-family: Georgia;
color: #000033;
}
dt {
color: #000033;
}
.resort {
color: #5C7FA3;
font-weight: bold;
}
nav ul {
margin: 0;
padding-left: 0;
font-size: 1.2em;
list-style-type: none;
}
main ul {
list-style-image: url(marker.gif);
}
footer {
font-size: 75%;
font-style: italic;
text-align: center;
font-family: Georgia;
padding: 20px;
margin-left: 190px;
background: #FFFFFF;
}
#contact {
font-size: 90%;
}
#wrapper {
width: 80%;
margin-left: auto;
margin-right: auto;
max-width: 960px;
min-width: 204px;
background: #90C7E3;
box-shadow: 3px 3px 3px #333333;
border: 1px solid #000033;
background-image: linear-gradient(to bottom, #FFFFFF, #90C7E3);
}
main {
padding-top: 1px;
padding-right: 20px;
padding-bottom: 20px;
padding-left: 20px;
display: block;
background: #FFFFFF;
margin-left: 190px;
padding-left: 30px;
}
#homehero {
height: 300px;
background-image: url(coast2.jpg);
background-repeat: no-repeat;
background-size: 100% 100%;
margin-left: 190px;
}
#trailhero {
height: 300px;
background-image: url(trail.jpg);
background-repeat: no-repeat;
background-size: 100% 100%;
margin-left: 190px;
}
#yurthero {
height: 300px;
background-image: url(yurt.jpg);
background-repeat: no-repeat;
background-size: 100% 100%;
margin-left: 190px;
}
* {
box-sizing: border-box;
}
a:link {
color: #5C7FA3;
}
a:visited {
color: #344873;
}
a:hover {
color: #A52A2A;
}
header, main, nav, footer, figure, figcaption, aside, section, article {
display: block;
}
#mobile {
display: none;
}
#desktop {
display: inline;
}
#media only screen and (max-width: 64em) {
body {
background: #FFFFFF;
}
#wrapper {min-width: 0;
width: auto;
box-shadow: none;
border: none;
}
header {
padding-top: 0.5em;
padding-bottom: 0.5em;
padding-left: 0;
height: auto;
}
h1 {
letter-spacing: 0.1em;
}
main {
margin-left: 0;
}
nav {
float: none;
width: auto;
text-align: center;
padding: 0.5em;
}
nav li {
display: inline;
padding-top: 0.25em;
padding-bottom: 0.25em;
padding-left: 0.75em;
padding-right: 0.75em;
}
#homehero {
margin-left: 0;
height: 200px;
}
#yurthero{
margin-left: 0;
height: 200px;
}
#trailhero {
margin-left: 0;
height: 200px;
}
footer {
margin-left: 0;
}
}
#media only screen and (max-width: 37.5em) {
main {
padding-top: 0.1em;
padding-bottom: 0.1em;
padding-right: 1em;
padding-left: 1em;
font-size: 90%;
}
h1 {
font-size: 2em;
}
nav {
padding: 0;
}
nav li {
display: block;
margin: 0;
border-bottom: 2px solid #330000;
}
nav a {
display: block;
}
nav ul {
border: 2px solid #000000;
}
#homehero {
background-image: none;
height: 0;
}
#yurthero {
background-image: none;
height: 0;
}
#trailhero {
background-image: none;
height: 0;
}
#mobile {
display: inline;
}
#desktop {
display: none;
}
label {
float: none;
text-align: left;
}
input[type="submit"] {
margin-left: 0;
}
}
form {
float: left;
display: block;
width: 120px;
padding-right: 200px;
text-align: right;
}
input, textarea {
display: block;
margin-bottom: 20px;
}
button {
margin-left: 130px;
}
```
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset= "utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<Title>Pacific Trails Resort :: Reservations</Title>
<link rel="stylesheet" href="pacific.css">
</head>
<body>
<div id="wrapper">
<header>
<h1> Pacific Trails Resort </h1>
<meta name="description" content="Pacific Trails Resort reservations page.">
</header>
<nav>
<ul>
<li>Home</li> <li>Yurts</li>
<li>Activities</li>
<li>Reservations</li>
</ul>
</nav>
<main>
<h2>Reservations at Pacific Trails</h2>
<h3>Contact Us Today!</h3>
<form name="reservations" method="post" action="http://webdevbasics.net/scripts/pacific.php">
<label for="myFName">First Name:</label>
<input type="text" name="myFName" id="myFName">
<label for="myLName">Last Name:</label>
<input type="text" name="myLName" id="myLName">
<label for="myEmail">Email:</label>
<input type="email" name="myEmail" id="myEmail" size="35">
<label for="myPhone">Phone Number:</label>
<input type="tel" name="myPhone" id="myPhone" maxlength="12">
<label for="myComments">Comments:</label>
<textarea name="myComments" id="myComments" rows="2" columns="30"></textarea>
<input type="submit" value="Submit">
</form>
<div id="contact">
<span class="resort">Pacific Trails Resort</span> <br>
12010 Pacific Trails Road <br>
Zephyr, CA 95555 <br>
<br>
<a id="mobile" href="tel:888-555-5555">888-555-5555</a> <br>
<span id="desktop">888-555-5555</span>
<br>
</div>
</main>
<footer>
Copyright © 2018 Pacific Trails Resort<br>
e.sween12#gmail.com
</footer>
</div>
</body>
</html>
I've attached some images of how it's supposed to look. Any suggestions would help. Thanks
As #JSKIM mentioned in the comments, you just need to remove float: left from your <form> elements styling. With float: left, the text or inline elements will wrap around it. After removing float, the content after the form will appear underneath (or next) like it appears in the normal flow.
When you use float on an element, it's removed from the normal flow of the page.
body {
background-color: #B8DBED;
font-family: Arial;
}
header {
background-color: #000033;
color: #FFFFFF;
margin-left: auto;
margin-right: auto;
height: 120px;
padding-top: 30px;
padding-left: 3em;
text-align: center;
}
nav {
font-weight: bold;
padding: 1.5em;
font-size: 120%;
float: left;
width: 160px;
}
nav a {
text-decoration: none;
}
h1 {
margin-bottom: 0;
font-family: Georgia;
margin-top: 0;
font-size: 3em;
letter-spacing: 0.25em;
}
h2 {
color: #3399CC;
font-family: Georgia;
text-shadow: 1px 1px 1px #CCCCCC;
}
h3 {
font-family: Georgia;
color: #000033;
}
dt {
color: #000033;
}
.resort {
color: #5C7FA3;
font-weight: bold;
}
nav ul {
margin: 0;
padding-left: 0;
font-size: 1.2em;
list-style-type: none;
}
main ul {
list-style-image: url(marker.gif);
}
footer {
font-size: 75%;
font-style: italic;
text-align: center;
font-family: Georgia;
padding: 20px;
margin-left: 190px;
background: #FFFFFF;
}
#contact {
font-size: 90%;
}
#wrapper {
width: 80%;
margin-left: auto;
margin-right: auto;
max-width: 960px;
min-width: 204px;
background: #90C7E3;
box-shadow: 3px 3px 3px #333333;
border: 1px solid #000033;
background-image: linear-gradient(to bottom, #FFFFFF, #90C7E3);
}
main {
padding-top: 1px;
padding-right: 20px;
padding-bottom: 20px;
padding-left: 20px;
display: block;
background: #FFFFFF;
margin-left: 190px;
padding-left: 30px;
}
#homehero {
height: 300px;
background-image: url(coast2.jpg);
background-repeat: no-repeat;
background-size: 100% 100%;
margin-left: 190px;
}
#trailhero {
height: 300px;
background-image: url(trail.jpg);
background-repeat: no-repeat;
background-size: 100% 100%;
margin-left: 190px;
}
#yurthero {
height: 300px;
background-image: url(yurt.jpg);
background-repeat: no-repeat;
background-size: 100% 100%;
margin-left: 190px;
}
* {
box-sizing: border-box;
}
a:link {
color: #5C7FA3;
}
a:visited {
color: #344873;
}
a:hover {
color: #A52A2A;
}
header, main, nav, footer, figure, figcaption, aside, section, article {
display: block;
}
#mobile {
display: none;
}
#desktop {
display: inline;
}
#media only screen and (max-width: 64em) {
body {
background: #FFFFFF;
}
#wrapper {min-width: 0;
width: auto;
box-shadow: none;
border: none;
}
header {
padding-top: 0.5em;
padding-bottom: 0.5em;
padding-left: 0;
height: auto;
}
h1 {
letter-spacing: 0.1em;
}
main {
margin-left: 0;
}
nav {
float: none;
width: auto;
text-align: center;
padding: 0.5em;
}
nav li {
display: inline;
padding-top: 0.25em;
padding-bottom: 0.25em;
padding-left: 0.75em;
padding-right: 0.75em;
}
#homehero {
margin-left: 0;
height: 200px;
}
#yurthero{
margin-left: 0;
height: 200px;
}
#trailhero {
margin-left: 0;
height: 200px;
}
footer {
margin-left: 0;
}
}
#media only screen and (max-width: 37.5em) {
main {
padding-top: 0.1em;
padding-bottom: 0.1em;
padding-right: 1em;
padding-left: 1em;
font-size: 90%;
}
h1 {
font-size: 2em;
}
nav {
padding: 0;
}
nav li {
display: block;
margin: 0;
border-bottom: 2px solid #330000;
}
nav a {
display: block;
}
nav ul {
border: 2px solid #000000;
}
#homehero {
background-image: none;
height: 0;
}
#yurthero {
background-image: none;
height: 0;
}
#trailhero {
background-image: none;
height: 0;
}
#mobile {
display: inline;
}
#desktop {
display: none;
}
label {
float: none;
text-align: left;
}
/*
input[type="submit"] {
margin-left: 0;
}*/
}
form {
margin: 1.5rem 0;
}
form label {
display: inline-block;
text-align: right;
width: 120px;
}
form div {
display: flex;
align-items: center;
justify-content: flex-start;
margin: 1rem 0;
}
form input:not(input[class="submit"]), form textarea {
margin-left: .75rem;
}
form textarea {
resize: vertical;
width: 30ch;
max-width: 40ch;
}
.submit {
margin-left: 130px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset= "utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<Title>Pacific Trails Resort :: Reservations</Title>
<link rel="stylesheet" href="pacific.css">
</head>
<body>
<div id="wrapper">
<header>
<h1> Pacific Trails Resort </h1>
<meta name="description" content="Pacific Trails Resort reservations page.">
</header>
<nav>
<ul>
<li>Home</li> <li>Yurts</li>
<li>Activities</li>
<li>Reservations</li>
</ul>
</nav>
<main>
<h2>Reservations at Pacific Trails</h2>
<h3>Contact Us Today!</h3>
<form name="reservations" method="post" action="http://webdevbasics.net/scripts/pacific.php">
<div>
<label for="myFName">First Name:</label>
<input type="text" name="myFName" id="myFName">
</div>
<div>
<label for="myLName">Last Name:</label>
<input type="text" name="myLName" id="myLName">
</div>
<div>
<label for="myEmail">Email:</label>
<input type="email" name="myEmail" id="myEmail" size="30">
</div>
<div>
<label for="myPhone">Phone:</label>
<input type="tel" name="myPhone" id="myPhone" maxlength="12">
</div>
<div>
<label for="myComments">Comments:</label>
<textarea name="myComments" id="myComments" rows="2" columns="30"></textarea>
</div>
<input class="submit" type="submit" value="Submit">
</form>
<div id="contact">
<span class="resort">Pacific Trails Resort</span> <br>
12010 Pacific Trails Road <br>
Zephyr, CA 95555 <br>
<br>
<a id="mobile" href="tel:888-555-5555">888-555-5555</a> <br>
<span id="desktop">888-555-5555</span>
<br>
</div>
</main>
<footer>
Copyright © 2018 Pacific Trails Resort<br>
e.sween12#gmail.com
</footer>
</div>
</body>
</html>
Despite having position fixed and no transform properties, my "hero" div always moves with the page. I want it to stay put
.hero{
position: fixed;
width: 1500px;
margin-left: 0px;
margin-top: 60px;
}
Full css:
*
{
margin: 0;
padding: 0;
}
header
{
background-image: linear-gradient(rgba(0, 0, 0, 0.5),rgba(0, 0, 0, 0.5)), url(img/snow.jpg);
height: 100vh;
background-size: cover;
background-position: center;
}
.main-nav
{
float: right;
list-style: none;
margin-top: 30px;
}
.main-nav li{
display: inline-block;
}
.main-nav li a{
color:white;
text-decoration: none;
padding: 5px 20px;
font-family: "Roboto", "sans-serif";
}
.main-nav li.active a{
border: 1px solid white;
}
.main-nav li a:hover{
border: 1px solid white;
}
.logo img
{
width: 150px;
height: auto;
float: left;
}
body
{
font-family: monospace;
}
.row
{
max-width: 1200px;
margin: auto;
}
.hero{
position: fixed;
width: 1500px;
margin-left: 0px;
margin-top: 60px;
}
h1{
color: white;
text-transform: uppercase;
font-size: 60px;
text-align: center;
/* margin-top: 275px; */
margin-top: 220;
}
.button
{
margin-top: 30px;
margin-left: 440px;
position: sticky;
}
.btn{
border: 1px solid white;
padding: 10px 30px;
color: white;
text-decoration: none;
margin-right: 5px;
font-size: 13px;
text-transform: uppercase;
position: sticky;
}
.btn-one{
background-color: darkorange;
font-family: "Roboto", sans-serif;
position: sticky;
}
.btn-two{
font-family: "Roboto", sans-serif;
position: sticky;
}
.btn-two:hover{
background-color: darkorange;
transition: all 0.5s ease-in;
}
html,body{
width: 100%;
height: 100%;
margin: 0px;
padding: 0px;
overflow-y: auto;
overflow-x: hidden;
}
#page_2{
height: 1000px;
background-color: red;
}
Full HTML:
<html>
<head>
<title>Summer Website</title>
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>
<header>
<div id="page_1">
<div id="particles-js">
<div class="row">
<!-- <div class ="logo">
<img src="https://i.imgur.com/0PyA8HR.png" alt="">
</div> -->
<ul class="main-nav">
<li class ="active"> HOME </li>
<li> ABOUT </li>
<li> PORTFOLIO </li>
</ul>
</div>
<div class="hero">
<h1>HI I'M KACIE AND I LOVE SOLVING PROBLEMS.</h1>
<div class="button">
LINKEDIN
RESUME
</div>
<div class ="bro">
</div>
</div>
</div>
</header>
<!--particles js file -->
<!-- <h1> TEST </h1> -->
<script type="text/javascript" src="js/particles.min.js"></script>
<script type="text/javascript" src="js/app.js"></script>
</div>
<div id=page_2>
</div>
</body>
</html>
There just seems to be problem with your closing tags incorrectly nested. There needs to another closing div before the closing header tag. The snippet shows the hero in a fixed position:
.hero {
position: fixed;
width: 1500px;
margin-left: 0px;
margin-top: 60px;
}
Full css: * {
margin: 0;
padding: 0;
}
header {
background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url(img/snow.jpg);
height: 100vh;
background-size: cover;
background-position: center;
}
.main-nav {
float: right;
list-style: none;
margin-top: 30px;
}
.main-nav li {
display: inline-block;
}
.main-nav li a {
color: white;
text-decoration: none;
padding: 5px 20px;
font-family: "Roboto", "sans-serif";
}
.main-nav li.active a {
border: 1px solid white;
}
.main-nav li a:hover {
border: 1px solid white;
}
.logo img {
width: 150px;
height: auto;
float: left;
}
body {
font-family: monospace;
}
.row {
max-width: 1200px;
margin: auto;
}
.hero {
position: fixed;
width: 1500px;
margin-left: 0px;
margin-top: 60px;
}
h1 {
color: white;
text-transform: uppercase;
font-size: 60px;
text-align: center;
/* margin-top: 275px; */
margin-top: 220;
}
.button {
margin-top: 30px;
margin-left: 440px;
position: sticky;
}
.btn {
border: 1px solid white;
padding: 10px 30px;
color: white;
text-decoration: none;
margin-right: 5px;
font-size: 13px;
text-transform: uppercase;
position: sticky;
}
.btn-one {
background-color: darkorange;
font-family: "Roboto", sans-serif;
position: sticky;
}
.btn-two {
font-family: "Roboto", sans-serif;
position: sticky;
}
.btn-two:hover {
background-color: darkorange;
transition: all 0.5s ease-in;
}
html,
body {
width: 100%;
height: 100%;
margin: 0px;
padding: 0px;
overflow-y: auto;
overflow-x: hidden;
}
#page_2 {
height: 1000px;
background-color: red;
}
<header>
<div id="page_1">
<div id="particles-js">
<div class="row">
<!-- <div class ="logo">
<img src="https://i.imgur.com/0PyA8HR.png" alt="">
</div> -->
<ul class="main-nav">
<li class="active"> HOME </li>
<li> ABOUT </li>
<li> PORTFOLIO </li>
</ul>
</div>
<div class="hero">
<h1>HI I'M KACIE AND I LOVE SOLVING PROBLEMS.</h1>
<div class="button">
LINKEDIN
RESUME
</div>
<div class="bro">
</div>
</div>
</div>
</div>
</header>
<div id=page_2>
</div>
Use position:inherit
You are using fixed and I think that is causing your issue.
Inherit won’t move, absolute stacks, fixed scrolls with page, static is default.
I am trying to get an image, some text, and a form that are in a container div to be centered instead of left justified, but when I try to float the image it just goes right or left and the text gets all screwed up.
.header, .navBar, .pageTitle {
margin: 0px;
padding: 0px;
}
body {
margin: 0px;
padding: 0px;
font-size: 20px;
background-color: #006464;
}
footer {
background-color: #bfd8d8;
position: absolute;
bottom: 0px;
width: 100%;
font-size: 15px;
border: 1px solid black;
}
nav, h1, h2 {
font-family: arial, sans-serif;
}
nav a:hover {
background-color: #006400;
}
nav a {
color: white;
text-decoration: none;
}
h2 {
text-align: center;
background-color: white;
}
#container {
width: 1000px;
margin: auto;
min-height: 100vh;
position: relative;
}
#signUp {
color: white;
font-size: 20px;
font-family: arial;
}
#welcomeFont {
color: white;
font-size: 25px;
font-family: arial;
}
.currentNav {
background-color: #006400;
}
.emailStyle {
font-weight: bolder;
}
.footerSpacer {
height: 50px;
}
.header {
color: white;
background-color: #006400;
padding: 20px;
}
.headerAnchor {
text-decoration: none;
color: white;
}
.navBar {
background-color: #228B22;
padding: 10px;
}
.pageTitle {
padding-bottom: 0px;
box-shadow: 0px 8px 25px 0px;
background-color: #bfd8d8;
}
.poetryAuthor {
color: white;
font-size: 15px;
font-family: arial;
font-style: italic;
}
.poetryCaptions {
margin-top: 50px;
color: white;
font-size: 25px;
font-family: georgia, serif;
}
.resizeAbout {
max-height: 50%;
max-width: 50%;
margin-top: 50px;
margin-bottom: 50px;
}
.resizeHome {
max-height: 50%;
max-width: 50%;
margin-top: 50px;
}
.resizePhotos {
max-height: 50%;
max-width: 50%;
}
.table {
background: #006464;
max-width: 100%;
border: 1px solid black;
border-spacing: 10px;
margin-left: auto;
margin-right: auto;
}
.tableData {
font-size: 19px;
background: #bfd8d8;
border: 1px solid black;
padding: 8px;
}
<!DOCTYPE html>
<! Must have tables, forms, multimedia, and links >
<head>
<title>Home - The Singular Effect</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div id="container">
<header>
<h1 class="header"><a class="headerAnchor" href="index.html">TheSingularEffect.Com</a></h1>
</header>
<nav class="navBar"> <a class="currentNav" href="index.html">Home</a> Music Photos Poetry About </nav>
<h2 class="pageTitle"> Get the Full Effect! </h2>
<img class="resizeHome" src="image/homepage.jpg" alt="Image of Daniel Adams">
<h3 id="welcomeFont"> Welcome to the home of The Singular Effect! </h3>
<br>
<form>
<span id="signUp">Sign up for our newsletter!</span> <br>
<input type="text" name="emailaddress" value="Email Address">
<input type="submit" value="submit">
</form>
<div class="footerSpacer"> </div>
<footer> © 2016, Chris Hughes - SNHU. Contact me at <span class="emailStyle">christopher.hughes1#snhu.edu</span> </footer>
</div>
</body>
Add this to your CSS:
#container {
text-align: center;
}
And if you don't want all your content centered in this way, just wrap the content you do and give the container a text-align: center.
add text-align:center in your body tag. Try it.
body {
text-align:center;
margin: 0px;
padding: 0px;
font-size: 20px;
background-color: #006464;
}
I want to sharpen my HTML & CSS skills by recreating the Bootstrap homepage in pure HTML & CSS. I am almost finished, but I seem to be having trouble with my footer. Everything else is positioned the way I would like it, but everything on the footer shoots up to the top and middle of my page. Can anyone tell me what I am missing here?
HTML
<header>
<div class="top-bar">
<p>Aww yeah, Bootstrap 4 is coming!</p>
</div>
<nav>
<div class="nav-bar">
<div class="logo">
Bootstrap
</div>
<div class="left-nav">
<ul>
<li>Getting Started</li>
<li>CSS</li>
<li>Components</li>
<li>JavaScript</li>
<li>Customize</li>
</ul>
</div>
<div class="right-nav">
<ul>
<li>Themes</li>
<li>Expo</li>
<li>Blog</li>
</ul>
</div>
</div>
<nav>
</header>
</div>
<center>
<main>
<section>
<div class="head-component">
<div class="b-logo">
<p>B</p>
</div>
<div class="short-description">
<p>Bootstrap is the most popular HTML, CSS, and JS framework for developing responsive, mobile first projects on the web.</p>
</div>
<div class="download-button">
<button class="dwn">Download Bootstrap</button>
</div>
<div class="current">
<p>Currently v3.3.5</p>
</div>
</div>
</section>
<section>
<div class="mid-section">
<div class="mid-info">
<h2>Designed for everyone, everywhere.</h2>
<p>Bootstrap makes front-end web development faster and easier. It's made for folks of all skill levels, devices of all shapes, and projects of all sizes.</p>
</div>
<hr class="hz-line" />
<div class="column-left">
<img src="http://getbootstrap.com/assets/img/sass-less.png" />
<h4>Preprocessors</h4>
<p>Bootstrap ships with vanilla CSS, but its source code utilizes the two most popular CSS preprocessors, Less and Sass. Quickly get started with precompiled CSS or build on the source.</p>
</div>
<div class="column-middle">
<img src="http://getbootstrap.com/assets/img/devices.png" />
<h4>One framework, every device.</h4>
<p>Bootstrap easily and efficiently scales your websites and applications with a single code base, from phones to tablets to desktops with CSS media queries.</p>
</div>
<div class="column-right">
<img src="http://getbootstrap.com/assets/img/components.png" />
<h4>Full of features</h4>
<p>With Bootstrap, you get extensive and beautiful documentation for common HTML elements, dozens of custom HTML and CSS components, and awesome jQuery plugins.</p>
</div>
<div class="clear"></div>
<hr class="hz-line" />
<div class="github">
<p>Bootstrap is open source. It's hosted, developed, and maintained on GitHub.</p>
</div>
<div class="github-button">
<button class="view-git">View the Github Project</button>
</div>
<div class="clear"></div>
<div class="spacer"></div>
<div class="clear"></div>
<div class="photo-section">
<hr class="hrln-full" />
<div class="second-mid-info">
<h2>Built with Bootstrap.</h2>
<p>Millions of amazing sites across the web are being built with Bootstrap. Get started on your own with our growing collection of examples or by exploring some of our favorites.</p>
</div>
<hr class="hz-line" />
<div class="photos">
<img src="http://expo.getbootstrap.com/thumbs/lyft-thumb.jpg" />
<img src="http://expo.getbootstrap.com/thumbs/vogue-thumb.jpg" />
<img src="http://expo.getbootstrap.com/thumbs/riot-thumb.jpg" />
<img src="http://expo.getbootstrap.com/thumbs/newsweek-thumb.jpg" />
</div>
<hr class="hz-line" />
<div class="expo-button">
<p>We showcase dozens of inspiring projects built with Bootstrap on the Bootstrap Expo.</p>
<button class="expo">Explore the Expo</button>
</div>
<hr class="hrln-full" />
</div>
</div>
<div class="clearfooter"></div>
</section>
</main>
<div class="clear"></div>
<footer>
<p>Designed and built with all the love in the world by #mdo and #fat.
<br /> Maintained by the core team with the help of our contributors.
<br /> Code licensed under MIT, documentation under CC BY 3.0.</p>
<ul>
<li>Github</li>
<li>Examples</li>
<li>v2.3.2 docs</li>
<li>About</li>
<li>Expo</li>
<li>Blog</li>
<li>Releases</li>
</ul>
</footer>
</center>
CSS
*, *:before, *:after {
box-sizing: border-box;
}
html, body, #wrap {
height: 100%;
}
body {
margin: 0;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
background-color: #fff;
}
h1 {
font-size: 50px;
}
h2 {
font-size: 40px;
}
h3 {
font-size: 30px;
}
h4 {
font-size: 22px;
font-weight: 100px;
}
h5 {
font-size: 15px;
}
h6 {
font-size: 14px;
}
#container {}
ul {
list-style: none;
}
li {
list-style: none;
display: inline;
padding: 10px;
}
a {
list-style: none;
color: inherit;
text-decoration: none;
padding-top: 15px;
padding-bottom: 15px;
margin: 0;
}
main {
padding-bottom: 150px;
display: block;
margin: 0 auto;
}
.top-bar {
margin: 0;
padding: 15px 0;
background-color: #0275D8;
text-align: center;
}
.top-bar p {
color: #fff;
font-size: 15px;
font-weight: 600;
text-align: center;
margin: 0;
}
.top-bar:hover {
margin: 0;
padding: 15px 0;
background-color: #0269C2;
text-align: center;
}
.nav-bar {
background-color: #fff;
position: relative;
color: #583F7E;
display: block;
width: 100%;
height: 50px;
}
.logo {
position: absolute;
font-size: 20px;
font-weight: 700;
color: #583F7E;
padding: 15px;
line-height: 0.8em;
margin-left: 100px;
}
.left-nav {
float: left;
font-size: 15px;
font-weight: 500;
text-align: center;
margin-left: 200px;
}
.right-nav {
float: right;
text-align: right;
font-size: 15px;
font-weight: 500;
margin-right: 120px;
}
.left-nav a:hover {
background-color: #f9f9f9;
}
.right-nav a:hover {
background-color: #f9f9f9;
}
.head-component {
background-color: #583F7E;
height: 700px;
display: block;
margin: 0 auto;
}
.b-logo {
margin: 0 auto;
padding-top: 5px;
width: 160px;
height: 300px;
display: block;
}
.b-logo p {
font-size: 130px;
font-weight: 700;
color: #fff;
border: 1px solid #fff;
border-radius: 25px;
text-align: center;
}
.short-description {}
.short-description p {
font-size: 30px;
color: #fff;
font-weight: 300;
width: 850px;
text-align: center;
display: block;
margin: 0 auto;
padding-top: 40px;
}
.download-button {
padding-top: 40px;
}
.dwn {
background: none;
font-size: 20px;
padding: 15px;
color: #fff;
font-weight: 400;
border: 1px solid #fff;
border-radius: 5px;
text-align: center;
display: block;
margin: 0 auto;
}
.dwn:hover {
background: #fff;
font-size: 20px;
padding: 15px;
color: #583F7E;
font-weight: 400;
border: 1px solid #fff;
border-radius: 5px;
text-align: center;
display: block;
margin: 0 auto;
}
.current p {
color: #9781A9;
font-size: 14px;
padding-bottom: 75px;
padding-top: 20px;
display: block;
margin: 0 auto;
text-align: center;
}
.mid-section {
height: 100%;
background-color: #fff;
display: block;
margin: 0 auto;
}
.mid-info {
padding-top: 75px;
font-weight: 300;
color: #333;
width: 900px;
text-align: center;
display: block;
margin: 0 auto;
}
.mid-info p {
font-weight: 400;
font-size: 22px;
color: #555;
padding-bottom: 20px;
display: block;
margin: 0 auto;
text-align: center;
}
.hz-line {
width: 10%;
color: #f3f3f3;
opacity: 0.5;
}
.column-left {
width: 32%;
float: left;
padding-top: 25px;
padding-left: 75px;
font-weight: 100;
color: #333;
}
.column-left img {
width: 100%;
}
.column-left p {
font-weight: 400;
font-size: 16px;
color: #555;
padding-bottom: 20px;
}
.column-middle {
width: 32%;
float: left;
padding-top: 25px;
padding-left: 75px;
font-weight: 100;
color: #333;
}
.column-middle img {
width: 100%;
}
.column-middle p {
font-weight: 400;
font-size: 16px;
color: #555;
padding-bottom: 20px;
}
.column-right {
width: 32%;
float: left;
padding-top: 25px;
padding-left: 75px;
font-weight: 100;
color: #333;
}
.column-right img {
width: 100%;
}
.column-right p {
font-weight: 400;
font-size: 16px;
color: #555;
padding-bottom: 20px;
}
.clear {
clear: both;
}
.github {
padding-top: 15px;
font-weight: 300;
color: #333;
width: 1024px;
display: block;
margin: 0 auto;
text-align: center;
}
.github p {
font-weight: 400;
font-size: 18px;
color: #555;
padding-bottom: 20px;
text-align: center;
}
.view-git {
background: none;
font-size: 20px;
padding: 10px;
color: #583F7E;
font-weight: 400;
border: 1px solid #583F7E;
border-radius: 5px;
text-align: center;
display: block;
margin: 0 auto;
}
.view-git:hover {
background: #583F7E;
font-size: 20px;
padding: 10px;
color: #fff;
font-weight: 400;
border: 1px solid #fff;
border-radius: 5px;
text-align: center;
display: block;
margin: 0 auto;
}
.hrln-full {
color: #f3f3f3;
opacity: 0.5;
}
.spacer {
height: 60px;
}
.second-mid-info {
padding-top: 75px;
font-weight: 300;
color: #333;
width: 900px;
display: block;
margin: 0 auto;
text-align: center;
}
.second-mid-info p {
font-weight: 400;
font-size: 22px;
color: #555;
text-align: center;
display: block;
margin: 0 auto;
padding-bottom: 30px;
}
.photo-section {
height: 100%;
display: block;
margin: 0 auto;
}
.photos {
padding: 30px;
padding-left: 115px;
}
.photos img {
width: 23%;
}
.expo-button {
padding-top: 15px;
padding-bottom: 120px;
font-weight: 300;
color: #333;
width: 1024px;
display: block;
margin: 0 auto;
}
.expo-button p {
font-weight: 300;
font-size: 22px;
color: #555;
padding-bottom: 30px;
text-align: center;
display: block;
margin: 0 auto;
}
.expo {
background: none;
font-size: 20px;
padding: 10px;
color: #583F7E;
font-weight: 400;
border: 1px solid #583F7E;
border-radius: 5px;
text-align: center;
display: block;
margin: 0 auto;
}
.expo:hover {
background: #583F7E;
font-size: 20px;
padding: 10px;
color: #fff;
font-weight: 400;
border: 1px solid #fff;
border-radius: 5px;
text-align: center;
display: block;
margin: 0 auto;
}
.clearfooter {
height: 130px;
clear: both;
}
footer {
text-align: center;
bottom: 0;
height: 100%;
left: 0;
width: 100%;
display: block;
margin: 0 auto;
}
footer p {
text-align: center;
}
footer ul {
position: relative;
}
footer li {
color: #489FD6;
}
footer li:hover {
color: #23517C;
text-decoration: underline;
}
footer a {}
From what I can tell I believe its because of two main reasons.
You have set fixed heights for elements with content that is height than the fixed height.
.mid-section {
height: 500px;
background-color: #fff;
margin: 0;
}
.photo-section {
height:500px;
}
The footer has position: absolute but isn't contained by a parent with position: relative. If you would like the footer to stick to the bottom use position: fixed instead.
footer {
text-align: center;
bottom: 0;
height: 100px;
left: 0;
position: absolute;
width: 100%;
}
First of all i dont know if its permited more than one question in one topic, however i didnt find anything talking about that.
I have been developing a website, but im a bit new to this and my site has some things that need to be worked out, i will be listing the issues bellow and hopefully someone will help me.
1- Slideshow
How i can put the circles (bullet navigation) of the slideshow inside the slideshow ?
Images are not fully the size as the screen, i can see the current slide and a bit of the next slide, what do i do ?
2- Last 2 pages, Mobile & Contacts
If i change
.mobile {
min-width: 1100px;
}
to:
.mobile {
min-width: 1300px;
}
The mobile div will not make text stay on top of the image but the contacts page will not be as responsive as before, just try by yourself.
Thats it, it may simple, but i cant figure it out, i hope theres no problem with this topic, if so tell me.
See it live: http://optential.co.nf/
html,
body { height: 100%; }
body {
margin: 0;
font-family: 'Open Sans', Helvetica, sans-serif;
min-width: 900px;
}
.header {
background-image: url("img/fundo1.jpg");
background-color: rgb(21, 21, 21);
background-size: cover;
color: white;
height: 100%;
min-height: 650px;
position: relative;
}
.header .logo {
width: 230px;
height: 60px;
margin: 20px 8px 8px 6%;
}
.header .menu {
position: absolute;
top: 55px; right: 25px;
}
.header .menu a {
margin: 0 4px;
font-size: 15px;
color: white;
text-decoration: none;
padding: 6px 20px;
}
.header .menu a:hover,
.header .menu a.current {
color: rgb(204, 66, 63);
}
.header .move {
color: white;
width: 40%;
margin: 0;
padding: 10px;
}
.header .move .center {
margin: 260px auto 0;
width: 360px;
}
.header .move h1 {
font-weight: 400;
font-size: 38px;
margin: 6px 0;
}
.header .move p {
font-weight: 300;
font-size: 20px;
border-top: 2px solid white;
margin: 6px 0;
padding-top: 6px;
}
.header .mail1 {
background-image: url("img/email.png");
background-size: contain;
background-position: 100% 100%;
background-repeat: no-repeat;
width: 560px; height: 560px;
position: absolute;
bottom: 0; right: 0;
}
.header .mail1 form {
position: absolute;
width: 240px;
bottom: 220px; right: 155px;
}
.header .mail1 h1 {
font-weight: 300;
text-align: center;
color: rgb(203, 41, 37);
}
.header .mail1 input {
box-sizing: border-box;
width: 100%;
font-family: 'Open Sans', Helvetica, sans-serif;
padding: 8px;
border: 1px solid rgb(219, 219, 218);
border-radius: 6px;
margin-bottom: 12px;
}
.header .mail1 input:hover {
border: 1px solid rgb(189, 189, 188);
}
.header .mail1 input:focus {
outline: 0;
}
.header .mail1 a {
display: block;
color: white;
text-decoration: none;
background-color: rgb(204, 66, 63);
border-radius: 6px;
text-align: center;
padding: 8px;
font-size: 14px;
}
.header .mail1 a:hover {
background-color: rgb(224, 86, 83);
}
.mail2 {
box-shadow: 10px 6px 15px grey;
background-color: white;
background-image: url("img/barra.png");
background-position: 12% 0%;
height: 100px;
background-repeat: no-repeat;
text-align: right;
}
#btn {
width: 10em;
}
.mail2.fixed {
box-shadow: 10px 6px 15px grey;
position: fixed;
display:block;
top: 0; left: 0;
width: 100%;
min-width: 800px;
height: 100px;
z-index: 1;
}
.mail2 form {
display: inline-block;
margin: 30px 0;
padding: 0 10px;
width: 600px;
}
.mail2 h1 {
font-weight: 300;
color: rgb(203, 41, 37);
display: inline;
vertical-align: middle;
font-size: 28px;
}
.mail2 input {
box-sizing: border-box;
width: 220px;
font-family: 'Open Sans', Helvetica, sans-serif;
padding: 8px;
border: 1px solid rgb(219, 219, 218);
border-radius: 6px;
margin: 0 6px;
}
.mail2 input:hover {
border: 1px solid rgb(189, 189, 188);
}
.mail2 input:focus {
outline: 0;
}
.mail2 a {
display: inline;
color: white;
text-decoration: none;
background-color: rgb(204, 66, 63);
border-radius: 6px;
text-align: center;
padding: 8px 4%;
font-size: 14px;
}
.mail2 a:hover {
background-color: rgb(224, 86, 83);
}
.mail2 .top {
padding: 8px 6px;
background-color: rgb(51, 51, 51);
}
.mail2 .top:hover {
background-color: rgb(71, 71, 71);
}
#slider {
width: 100%;
height: 100%;
overflow: hidden;
}
#slider .images {
width: 100%;
position: relative;
transition: left 1s;
left: 0;
}
#slider .images img {
z-index: -1;
width: 100%;
background-size: 100%;
position: absolute;
}
.controls {
width: 350px;
margin: 5px auto;
display: flex;
justify-content: center;
}
.controls div {
width: 16px;
height: 16px;
margin: 0 5px;
background: tomato;
border-radius: 50%;
}
.controls .current {
background: red;
}
.mobile {
min-width: 1300px;
}
.mobile .bar {
background-size: cover;
width: 100%;
background: #F4F4F4;
color: #595B61;
min-width: 700px;
display: flex;
justify-content: space-around;
text-align: center;
}
.mobile .bar img {
width: 100%;
background-size: cover;
display: block;
margin: 0 auto;
}
.mobile .content {
background: radial-gradient(ellipse at 55% 50%, #F9F9F9 40%,#B6B5BD 120%);
position: relative;
}
.mobile .content .mobimg {
padding: 3em;
margin-left:10%;
}
.mobile .content .mob {
position: absolute;
top: 0;
left: 60%;
}
.mobile .content h1 {
color: #D6D6D4;
font-size: 120px;
margin-bottom: 0;
}
.mobile .content p {
margin-left: 15px;
width: 410px;
color: #929584;
font-size: 12px;
margin-bottom: 18px
}
.mobile .content .sep {
height: 15px;
border-bottom: 1px solid #C24147;
text-align: center;
}
.mobile .content .sep img {
padding: 0 8px;
background: #F9F9F9;
}
.mobile .content h2 {
margin-left: 15px;
color: #929584;
font-size: 15px;
font-weight: 600;
text-align: center;
}
.mobile .content .buttons {
display: flex;
justify-content: space-around;
width: 400px;
margin-left: 20px;
}
.mobile .content .button {
display: block;
background: #010101;
color: #F8F8F8;
text-decoration: none;
width: 160px;
height: 50px;
border-radius: 6px;
position: relative;
}
.mobile .content .button:hover {
background: #222;
}
.mobile .content .button.apple img {
margin: 10px 0 0 10px;
}
.mobile .content .button.apple span {
font-size: 11px;
font-weight: 400;
position: absolute;
top: 4px; left: 42px;
}
.mobile .content .button.apple h3 {
font-size: 22px;
font-weight: 600;
position: absolute;
top: 14px; left: 42px;
margin: 0;
}
.mobile .content .button.google img {
margin: 18px 0 0 8px;
}
.mobile .content .button.google span {
font-size: 10px;
font-weight: 600;
position: absolute;
top: 4px; left: 40px;
text-transform: uppercase;
}
.mobile .content .button.google h3 {
font-size: 20px;
font-weight: 300;
position: absolute;
top: 16px; left: 38px;
margin: 0;
}
.mobile .content .button.google h3 b {
font-size: 22px;
font-weight: 400;
font-family: 'Cardo', serif;
margin: 0;
margin-right: 4px
}
.contact {
min-width: 1100px;
background-image: url("img/fundo2es.jpg");
background-size: cover;
background-color: rgb(21, 21, 21);
background-repeat: no-repeat;
height:100%;
color:white;
}
.contact .textocon {
text-align: right;
padding: 55px 75px 0 0;
}
.contact .textocon div {
display: inline-block;
width: 290px
}
.contact .textocon h1 {
font-weight: 400;
font-size: 42px;
margin: 6px 0;
}
.contact .textocon p {
font-weight: 300;
font-size: 19px;
border-top: 2px solid white;
margin: 6px 0;
padding-top: 6px;
}
.contact .col1 {
display: inline-block;
vertical-align: top;
width: 410px;
padding: 10px 6px 10px 60px;
}
.contact .col1 h1 {
font-weight: 300;
font-size: 25px;
margin: 4px 0;
}
.contact .col1 input {
width: 380px;
height: 20px;
}
.contact .col1 input,
.contact .col2 textarea {
font-family: 'Open Sans', Helvetica, sans-serif;
padding: 14px;
font-size: 13px;
color: white;
background-color: transparent;
border: 1px solid rgb(172, 161, 160);
margin: 6px 0;
}
.contact .col1 input:focus,
.contact .col2 textarea:focus {
outline: 0;
border: 1px solid white;
}
.contact .col2 {
display: inline-block;
width: calc(100% - 560px);
padding: 52px 10px 10px 0;
text-align: right;
}
.contact .col2 textarea {
text-align: left;
width: 100%;
box-sizing: border-box;
height: 112px;
}
.contact .col2 #btn {
display: inline-block;
color: white;
font-weight: bold;
text-align: center;
text-decoration: none;
background-color: rgb(204, 66, 63);
border-radius: 4px;
padding: 10px 0px;
font-size: 20px;
}
.contact .col2 a:hover {
background-color: rgb(224, 86, 83);
}
.contact .info {
padding: 10px 60px;
display: flex;
justify-content: space-between;
}
.contact .info h1 {
font-weight: 300;
font-size: 25px;
}
.contact .info p {
font-size: 12px;
line-height: 12px;
}
.contact .info a {
text-decoration: none;
color: white;
}
.contact .info a:hover {
color: #ddd;
}
.contact .info img {
width: 32px;
margin: 6px;
}
.contact .info img:hover {
opacity: 0.8;
}
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="js/fixedbar.js"></script>
<script src="js/slider.js"></script>
<meta charset="utf-8">
<link href="http://fonts.googleapis.com/css?family=Open+Sans:400,300" rel="stylesheet" type="text/css">
<link href="styles.css" rel="stylesheet" type="text/css">
<title> Layout </title>
</head>
<body>
<div class="header" id="top">
<img class="logo" src="img/logo.png">
<div class="menu">
Home
Product Tour
Pricing
Try
Vision
</div>
<div class="move">
<div class="center">
<h1>Move work forward!</h1>
<p>Optential keeps your team organized, connected, and focused on results.</p>
</div>
</div>
<div class="mail1">
<form action="form/form.php" method="post">
<h1>Try Now!</h1>
<input name="Email" class="Email" type="text" placeholder="Enter your Email address ...">
<input type="submit" value="Get started for free">
</form>
</div>
</div>
<div class="mail2">
<form action="form/form.php" method="post">
<h1>Try Now!</h1>
<input type="text" placeholder="Your Email here...">
<input type="submit" id ="btn" value="Get started for free">
<a class="top" href="#top">Top</a>
</form>
</div>
<div id="slider">
<div class="images">
<div class="controls">
<img src="img/3.png" alt="Image-1" />
<img src="img/2.png" alt="Image-2" />
<img src="img/1.png" alt="Image-3" />
<img src="img/4.png" alt="Image-4" />
</div>
</div>
</div>
<div class="mobile">
<div class="bar">
<img src="img/barra2.png">
</div>
<div class="content">
<img class="mobimg" src="https://jsbin-user-assets.s3.amazonaws.com/rafaelcastrocouto/mob.png">
<div class="mob">
<h1>Mobile</h1>
<p>Optential combines the best of responsive software with native IOS and Android apps to provide the best experience and optimal results!</p>
<p>On laptops, desktops, tablets and phones, always get the best experience on the most intuitive project management set of tools in the world!</p>
<p class="sep">
<img src="https://jsbin-user-assets.s3.amazonaws.com/rafaelcastrocouto/a1.png">
</p>
<h2>Get the app!</h2>
<div class="buttons">
<a class="button apple" href="">
<img src="https://jsbin-user-assets.s3.amazonaws.com/rafaelcastrocouto/apple.png">
<span>Download on the</span>
<h3>App Store</h3>
</a>
<a class="button google" href="">
<img src="https://jsbin-user-assets.s3.amazonaws.com/rafaelcastrocouto/google.png">
<span>Get it on</span>
<h3><b>Google</b>play</h3>
</a>
</div>
</div>
</div>
</div>
<div class="contact">
<div class="textocon">
<div>
<h1>Optential</h1>
<p>A new management system<br>for a new management paradigm!</p>
</div>
</div>
<form method="POST" id="contactos_form" action="form/contactengine.php" onsubmit="return submit_form(this);">
<div class="col1">
<h1>Contact us!</h1>
<input type="text" name="Name" size="50" placeholder="Name"/>
<input type="text" name="Email" size="50" placeholder="Email"/>
<input type="text" name="Subject" size="50" placeholder="Subject"/>
</div>
<div class="col2">
<textarea name="Message" rows="5" cols="70" placeholder="Message..."></textarea>
<input type="submit" id="btn"value="Send"/>
</div>
</form>
<div class="info">
<div>
<h1>Mail Us !</h1>
<p>Rua Andrade Corvo, 242</p>
<p>sala 206</p>
<p>4700-204 Braga</p>
<p>Portugal</p>
</div>
<div>
<h1>Call Us !</h1>
<p>+351 987654323</p>
<p>+351 987654323</p>
<p>+351 987654323</p>
</div>
<div>
<h1>Email Us! </h1>
<p>code#angel.com</p>
<p>code_hr#angel.com</p>
<p>code_support#angel.com</p>
</div>
<div>
<h1>Join Us! </h1>
<img src="img/facebook.png">
<img src="img/gplus.png">
<img src="img/twitter.png">
<img src="img/instag.png">
</div>
</div>
</div>
<script src="js/slider.js"></script>
<script>
function submit_form(form){
formulario=$("#contactos_form");
$.ajax({url: formulario.attr("action"), method:formulario.attr("method"), data:formulario.serialize(), success: function(result){
alert(result);
}});
return false;
}
</script>
</body>
</html>
The css of the slideshow is "slider" and "controls".
Hope someone can help.
To answer questions 1
I will be answering the others shortly. To move the button controls first we need to give them a div, however as the controls are being dynamically generated so we have to edit the code which creates them, to do this we go into slider.js and add class="button move" to the
$('#slider .images img').each(function(i) {
var img = $(this);
img.css('left', i * width);
var button = $('<div class="buttonmove">');
controls.append(button);
if (i == 0) {
button.addClass('current')
}
Now we have something that we can edit, the most easiest way to move them is to use position:relative and give them a -100 top value like so.
.buttonmove {
position: relative;
top: -250px;
}
Question 2
Unfortantly I don't see the issue with your question as changing it 1300px works better as the layer don't overlap, please let me know in more detail;
A- the problem
B- what the result should be like
I hope this helped!
EDIT
Here is the jQuery function;
$(document).ready(function() {
var sliderImgH = $(".sliderimages:first").height();
$(".buttonmove:nth-child(1)").css("margin-top", sliderImgH-75);
});
$(window).resize(function() {
var sliderImgH = $(".sliderimages").height();
$(".buttonmove:nth-child(1)").css("margin-top", sliderImgH-75);
});
I also added this CSS;
.buttonmove {
position: relative;
}
#slider {
position: absolute;
}
*NOTE**
Adjust your function order so it goes or it won't work on load,
<script src="js/slider.js"></script>
Then the function I just made
<script src="js/fixedbar.js"></script>
EDIT(sorry forgot to add...)
I forgot to tell you to to add a class called sliderimages to your first or all of the images in your slider.
<div id="slider">
<div class="images">
<div class="controls">
<img class="sliderimages" src="img/3.png" alt="Image-1" />
<img src="img/2.png" alt="Image-2" />
<img src="img/1.png" alt="Image-3" />
<img src="img/4.png" alt="Image-4" />
</div>
</div>
</div>