Closed. This question is not reproducible or was caused by typos. It is not currently accepting answers.
This question was caused by a typo or a problem that can no longer be reproduced. While similar questions may be on-topic here, this one was resolved in a way less likely to help future readers.
Closed 7 years ago.
Improve this question
I have check the answers on the related subject and attempted to adapt some of the items in the suggestions but none seems to help. The intro and question items don't become hidden when placed outside the #myQuiz dimensions and neither do any of the other items.
index.html:
#import url(http://fonts.googleapis.com/css?family=Titillium+Web:900|Roboto:400,100);
body {
background-color: #fff;
padding: 20px;
}
#myQuiz {
font-family: 'Roboto', sans-serif;
font-size: 16px;
font-weight: 400;
width: 650;
height: 650px;
position: relative;
overflow: hidden;
color: #fff;
background: #bbb url(../images/background.jpg) no-repeat 0px 0px;
}
#myQuiz h1 {
font-weight: 100;
font-size: 2em;
text-transform: uppercase;
margin: 0px;
position: absolute;
top: 25px;
left: 36px;
}
#myQuiz h1 span {
display: block;
font-weight: 900;
font-family: 'Titillium Web', sans-serif;
font-size: 3.2em;
line-height: 65px;
}
#myQuiz h2 {
font-size: 3em;
margin: 0px;
font-weight: 100;
}
#myQuiz h3 {
font-size: 2.4em;
margin: 0px;
font-weight: 100;
}
#myQuiz p {
margin: 0px 0px 14px 0px;
}
#myQuiz .btn {
display: inline-block;
cursor: pointer;
background-color: #c04b01;
color: #fff;
text-decoration: none;
padding: 5px 15px;
border-radius: 6px;
}
/* Intro */
#myQuiz .intro {
position: absolute;
top: 225px;
left: 660px;
width: 550px;
}
#myQuiz .intro p {
margin: 0px 0px 40x 0px;
}
/* Questions */
#myQuiz .question {
width: 550px;
position: absolute;
top: 225px;
left: 650px;
}
#myQuiz .question .txt {
font-size 1.6em;
margin: 0px 0px 20px 0px;
}
#myQuiz .question .ans {
display: inline-block;
font-size: 1.1em;
width: 225px;
border: 2px solid rgba(238, 189, 102, .4);
border-radius: 6px;
padding: 10px;
margin: 0px 15px 15px 0px;
position: relative;
}
#myQuiz .ans.selected {
border-color: #be4b16;
}
#myQuiz .ans.correct {
border-color: #459a2e;
}
#myQuiz .question .ans::after {
content: '';
diplay: block;
width: 20px;
height: 20px;
background: no-repeat 0px 0px;
background-size: 20px 20px;
position: absolute;
top 5px;
right: 5px;
}
#myQuiz .question .ans.selected::after {
background-image: url(../images/icon_incorrect.svg);
}
#myQuiz .question .ans.correct::after {
background-image: url(../images/icon_correct.svg);
}
#myQuiz .question.unanswered .ans {
cursor: pointer;
}
#myQuiz .question.unanswered .ans:hover {
background-color: rgba(238, 189, 102, .2);
}
#myQuiz .question.answered .ans {
cursor: default;
}
/* Feedback */
#myQuiz .feedback {
color: #efbe5e;
margin-top: 50px;
transition: opacity 1.5s, margin-top 1.5s;
visibility: hidden;
opacity: 0;
}
#myQuiz .feedback .btn {
margin-top: 5px;
}
#myQuiz .feedback strong {
color: #fff;
}
#myQuiz .answered .feedback {
visibility: visible;
opacity: 1;
margin-top: 10px;
}
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-
8">
<meta name="viewport" content="width=device-width, initial-
scale=1">
<title>Test Your Knowledge: Saturn</title>
<link rel="stylesheet" type="text/css" href="css/quiz.css">
</head>
<body>
<div id="myQuiz">
<h1>Test Your Knowledge:<span>Saturn</span></h1>
<div class="progress"></div>
<div class="intro">
<h2>Welcome</h2>
<p>Click begin to test your knowledge of Saturn</p>
<p class="btn">Begin</p>
</div>
<!--intro-->
<div class="question answered">
<p class="txt">This is a question</p>
<p class="ans">Answer 1</p>
<p class="ans selected">Answer 2</p>
<p class="ans correct">Answer 3</p>
<p class="ans">Answer 4</p>
<div class="feedback">
<p>Your are <strong>correct</strong>.</p>
<p>Oops! That is not correct.</p>
<p>Addition feedback.</p>
<div class="btn">Continue</div>
<!--btn-->
</div>
<!--feedback -->
</div>
<!--question -->
<div class="results"></div>
</div>
<!-- MyQuiz -->
</body>
</html>
On #myQuiz you miss the unit for the width, making it invalid and ignored by the browser.
You have
width: 650;
and it must be
width: 650px;
#import url(http://fonts.googleapis.com/css?family=Titillium+Web:900|Roboto:400, 100);
body {
background-color: #fff;
padding: 20px;
}
#myQuiz {
font-family: 'Roboto', sans-serif;
font-size: 16px;
font-weight: 400;
width: 650px;
height: 650px;
position: relative;
overflow: hidden;
color: #fff;
background: #bbb url(../images/background.jpg) no-repeat 0px 0px;
}
#myQuiz h1 {
font-weight: 100;
font-size: 2em;
text-transform: uppercase;
margin: 0px;
position: absolute;
top: 25px;
left: 36px;
}
#myQuiz h1 span {
display: block;
font-weight: 900;
font-family: 'Titillium Web', sans-serif;
font-size: 3.2em;
line-height: 65px;
}
#myQuiz h2 {
font-size: 3em;
margin: 0px;
font-weight: 100;
}
#myQuiz h3 {
font-size: 2.4em;
margin: 0px;
font-weight: 100;
}
#myQuiz p {
margin: 0px 0px 14px 0px;
}
#myQuiz .btn {
display: inline-block;
cursor: pointer;
background-color: #c04b01;
color: #fff;
text-decoration: none;
padding: 5px 15px;
border-radius: 6px;
}
/* Intro */
#myQuiz .intro {
position: absolute;
top: 225px;
left: 660px;
width: 550px;
}
#myQuiz .intro p {
margin: 0px 0px 40x 0px;
}
/* Questions */
#myQuiz .question {
width: 550px;
position: absolute;
top: 225px;
left: 650px;
}
#myQuiz .question .txt {
font-size 1.6em;
margin: 0px 0px 20px 0px;
}
#myQuiz .question .ans {
display: inline-block;
font-size: 1.1em;
width: 225px;
border: 2px solid rgba(238, 189, 102, .4);
border-radius: 6px;
padding: 10px;
margin: 0px 15px 15px 0px;
position: relative;
}
#myQuiz .ans.selected {
border-color: #be4b16;
}
#myQuiz .ans.correct {
border-color: #459a2e;
}
#myQuiz .question .ans::after {
content: '';
diplay: block;
width: 20px;
height: 20px;
background: no-repeat 0px 0px;
background-size: 20px 20px;
position: absolute;
top 5px;
right: 5px;
}
#myQuiz .question .ans.selected::after {
background-image: url(../images/icon_incorrect.svg);
}
#myQuiz .question .ans.correct::after {
background-image: url(../images/icon_correct.svg);
}
#myQuiz .question.unanswered .ans {
cursor: pointer;
}
#myQuiz .question.unanswered .ans:hover {
background-color: rgba(238, 189, 102, .2);
}
#myQuiz .question.answered .ans {
cursor: default;
}
/* Feedback */
#myQuiz .feedback {
color: #efbe5e;
margin-top: 50px;
transition: opacity 1.5s, margin-top 1.5s;
visibility: hidden;
opacity: 0;
}
#myQuiz .feedback .btn {
margin-top: 5px;
}
#myQuiz .feedback strong {
color: #fff;
}
#myQuiz .answered .feedback {
visibility: visible;
opacity: 1;
margin-top: 10px;
}
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-
8">
<meta name="viewport" content="width=device-width, initial-
scale=1">
<title>Test Your Knowledge: Saturn</title>
<link rel="stylesheet" type="text/css" href="css/quiz.css">
</head>
<body>
<div id="myQuiz">
<h1>Test Your Knowledge:<span>Saturn</span></h1>
<div class="progress"></div>
<div class="intro">
<h2>Welcome</h2>
<p>Click begin to test your knowledge of Saturn</p>
<p class="btn">Begin</p>
</div>
<!--intro-->
<div class="question answered">
<p class="txt">This is a question</p>
<p class="ans">Answer 1</p>
<p class="ans selected">Answer 2</p>
<p class="ans correct">Answer 3</p>
<p class="ans">Answer 4</p>
<div class="feedback">
<p>Your are <strong>correct</strong>.</p>
<p>Oops! That is not correct.</p>
<p>Addition feedback.</p>
<div class="btn">Continue</div>
<!--btn-->
</div>
<!--feedback -->
</div>
<!--question -->
<div class="results"></div>
</div>
<!-- MyQuiz -->
</body>
</html>
Related
I'm new with css and not formulating my solution search correctly to figure out my problem.
Here's what I'm trying to do:
web page on load
The top row has a static box1 and another box when on mouse_over of the ?, it expands, which pushes the second row down. (props to https://codepen.io/MrJonesOBA/pen/jEzwbJ for this cool code bit)
page after mouse over (current behavior)
I'd like second row (box3) not to be pushed down, so I figure I'm trying to let box 2 ('?') overflow.
I've included the code below. Thanks.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<!-- this is an example from the MDN Layout Cookbook -->
<title>CSS Cookbook: columns with grid</title>
<style>
body {
background-color: #fff;
color: #333;
font: 1.2em / 1.5 Helvetica Neue, Helvetica, Arial, sans-serif;
padding: 0;
margin: 0;
}
.container {
border: 2px solid rgb(75, 70, 74);
border-radius: .5em;
padding: 20px;
width: 500px;
display: grid;
grid-template-columns: 1fr 1fr;
grid-gap: 20px;
}
.my-container {
width: 500px;
padding: 10px;
border: 2px solid rgb(95, 97, 110);
border-radius: .5em;
margin: 0;
}
.container>* {
padding: 10px;
border: 2px solid rgb(95, 97, 110);
border-radius: .5em;
margin: 0;
}
.help {
width: 40px;
margin: 0 auto;
}
.help .question {
height: 40px;
width: 40px;
background: #ccc;
font-size: 32px;
line-height: 40px;
text-align: center;
border-radius: 50%;
cursor: pointer;
}
.help .popup, .help .popup2 {
width: 560px;
height: 0px;
text-align: left;
overflow: hidden;
position: relative;
background: #eee;
opacity: 0;
transition: 1s;
}
.help .popup {
left: -40px;
top: 10px;
}
.help .popup2 {
height: 220px;
}
.help .popup2 h4 {
font-size: 18px;
padding: 10px;
margin: 0;
}
.help:hover .popup {
opacity: 1;
height: 270px;
}
.help .tell-me p:first-child {
color: #317eac;
cursor: pointer;
}
.tell-me {
width: 150px;
}
.help .tell-me:hover .popup2 {
top: -220px;
opacity: 1;
}
.help .popup h3 {
margin: 0;
padding: 10px 0 0 10px;
height: 30px;
background: #555;
color: #fff;
font-weight: 400;
font-size: 18px;
}
.help .popup p {
font-size: 14px;
padding: 10px;
margin: 0;
}
.help .popup .popup2 .sub-levels {
padding: 0 0 10px 140px;
}
.help .popup .popup2 .sub-levels strong {
font-size: 20px;
}
.help .popup .popup2 p:nth-child(5) {
padding: 20px 0 0 10px;
}
.help .popup a {
text-decoration: none;
color: #317eac;
}
.help .popup a:visited {
color: #317eac;
}
.help .popup p em {
font-size: 12px;
}
</style>
</head>
<body>
<div class="container">
<!--div class="flexrow"></div-->
<div >
<h5 class="mt-3 mb-3 p-2">
Box 1
</h5>
</div>
<div class="offset-2">
<div class="help">
<div class="my-flex-container-2">
<div class="question">?</div>
<div class="popup">
<h5>my help header</h5>
<p>
Veggies es bonus vobis, proinde vos postulo essum magis kohlrabi welsh onion
daikon amaranth tatsoi tomatillo melon azuki bean garlic.
</p>
</div>
</div>
</div>
</div>
</div>
<div class="my-container">
Box 3
</div>
</body>
</html>
I have a navbar at the top of my page with an image logo and some hyperlinks. I want to make it so the image is always the max height it can be while staying within the foot print of the navbar. Here's what I mean:
As you can see, the image in the top left has 10px padding, but the image is slightly too small and has a larger gap at the bottom.
This is my code:
HTML:
<!DOCTYPE html>
<html lang="en-GB">
<head>
<meta charset="UTF-8">
<title>Home | Aeron</title>
<link rel="icon" type="image/x-icon" href="./images/favicon.png">
<link rel="stylesheet" media="screen and (min-width: 1294px)" href="main.css">
<link rel="stylesheet" media="screen and (max-width: 1294px)" href="mobile.css">
<link href="https://fonts.googleapis.com/css?family=Poppins" rel="stylesheet">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<div class="header">
<img src="./images/logo.png" title="Aeron" alt="logo" class="header-logo">
<div class="desktop-nav">
<ul class="desktop-nav-links">
<li>Home</li>
<li>Portfolio</li>
<li>Contact me</li>
<li>About me</li>
<li>Recipes</li>
<li>Progress</li>
<li>PC Setup Designer</li>
<li>Gallery</li>
</ul>
</div>
</body>
</html>
CSS:
html {
box-sizing: border-box;
scroll-behavior: smooth;
font-family: 'Poppins', sans-serif;
height: 100%;
}
body {
margin: 0;
background: linear-gradient(45deg, #280036 0%, #000836 100%);
background-size: cover;
background-repeat: no-repeat;
background-attachment: fixed;
height: 100%;
}
.header-logo {
margin: 10px;
float: left;
height: 72px;
}
.header {
background-color: #000000;
overflow: hidden;
width: 100%;
}
.desktop-nav-links {
float: right;
margin-right: 1.5vw;
}
.desktop-nav-links a {
margin: 1.5vw;
display: block;
color: white;
font-size: 1vw;
}
.desktop-nav-links li {
float: left;
list-style: none;
}
How can I make it so no matter what screen size is, the image is always as big as it can be without influening the navbar height?
Basically by making it position:absolute inside the position:relative header, you can control where it begins top:0 and where it'll end bottom:0.
Update:
We will wrap the image inside a container. That container will take 100% of the height by using absolute position with top and bottom equals 0. It will have a padding of the desired 10px, where as inside of it the image will reside having a height of 100%.
:root {
color-scheme: dark;
}
html {
box-sizing: border-box;
scroll-behavior: smooth;
font-family: 'Poppins', sans-serif;
height: 100%;
}
body {
margin: 0;
background: linear-gradient(45deg, #280036 0%, #000836 100%);
background-size: cover;
background-repeat: no-repeat;
background-attachment: fixed;
height: 100%;
}
.heading {
margin: 20px;
font-size: 2.5vw;
text-align: center;
color: #ffffff;
}
p {
color: #ffffff;
font-size: 20px;
}
a {
text-decoration: none;
}
.slideshow-container {
display: block;
width: 80%;
position: relative;
margin: 10px;
margin-left: auto;
margin-right: auto;
}
.mySlides {
display: none;
}
.prev,
.next {
cursor: pointer;
position: absolute;
top: 50%;
width: auto;
margin-top: -22px;
padding: 16px;
color: white;
font-weight: bold;
font-size: 18px;
transition: 0.6s ease;
border-radius: 0 3px 3px 0;
user-select: none;
}
.next {
right: 0;
border-radius: 3px 0 0 3px;
}
.prev:hover,
.next:hover {
background-color: #a6a6a650;
}
.slide-name {
color: #f2f2f2;
font-size: 15px;
padding: 8px 12px;
position: absolute;
bottom: 8px;
width: 100%;
text-align: center;
}
.slide-number {
color: #f2f2f2;
font-size: 12px;
padding: 8px 12px;
position: absolute;
top: 0;
}
.progress-bar {
width: 100%;
border: none;
border-radius: 100px;
background-color: #FFFFFF;
padding: 3px;
}
.progress-tag {
color: #DDDDDD;
margin-left: 10px;
}
.fill-html {
width: 75%;
background-color: #FA3200;
border-radius: 100px;
}
.fill-css {
width: 60%;
background-color: #0000C8;
border-radius: 100px;
}
.fill-js {
width: 10%;
background-color: #C80000;
border-radius: 100px;
}
.fill-php {
width: 0%;
background-color: #00C832;
border-radius: 100px;
}
.fill-rwpd {
width: 100%;
background-color: #450099;
border-radius: 100px;
}
#return {
display: none;
position: fixed;
bottom: 50px;
right: 50px;
z-index: 99;
border: none;
background-color: #3a3a3a;
cursor: pointer;
border-radius: 100px;
width: 60px;
height: 60px;
}
#return:hover {
background-color: #2a2a2a;
}
.progress-container {
padding: 10px;
}
.headar-logo-container {
position: absolute;
left: 0;
top: 0;
bottom: 0;
padding: 10px;
}
.header-logo {
height: 100%;
}
.header {
background-color: #000000;
overflow: hidden;
width: 100%;
position: relative;
}
.desktop-nav-links {
float: right;
margin-right: 1.5vw;
}
.desktop-nav-links a {
margin: 1.5vw;
display: block;
color: white;
font-size: 1vw;
}
.desktop-nav-links a:hover {
color: #b4b4b4;
transition: 0.2s all ease;
}
.desktop-nav-links li {
float: left;
list-style: none;
}
.menu-button {
display: none;
}
.copyright {
color: #b4b4b4;
font-size: 15px;
}
footer {
background: #000000;
padding: 25px 0;
text-align: center;
bottom: 0;
width: 100%;
height: auto;
display: block;
}
.hyperlink {
display: inline-block;
position: relative;
color: #b4b4b4;
}
.hyperlink:after {
content: '';
position: absolute;
width: 100%;
transform: scaleX(0);
height: 2px;
bottom: 0px;
left: 0;
background-color: #b4b4b4;
transform-origin: bottom right;
transition: transform 0.25s ease-out;
}
.hyperlink:hover:after {
transform: scaleX(1);
transform-origin: bottom left;
}
.sidenav {
height: 100%;
width: 0;
position: fixed;
z-index: 1;
top: 0;
right: 0;
background-color: #111111;
overflow-x: hidden;
transition: 0.5s;
padding-top: 60px;
}
.sidenav .closebtn {
position: absolute;
top: 0;
right: 25px;
font-size: 35px;
margin-left: 50px;
}
.recipe-container {
margin: 0px;
display: grid;
grid-template-columns: auto auto auto;
justify-content: center;
}
.recipe-window {
margin: 10px;
padding: 10px;
border: 1px solid #ffffff;
background-color: #ffffff;
word-break: break-word;
width: min-content;
border-radius: 10px;
}
.recipe-title {
color: black;
margin-top: 5px;
padding: 0px;
font-size: 25px;
}
.footer-links {
display: flex;
justify-content: center;
align-items: center;
}
.footer-links p {
margin: 0;
}
.footer-links a {
color: #ffffff;
margin: auto 10px auto 10px;
}
.footer-links a:hover {
color: #b4b4b4;
}
.about {
text-align: center;
padding: 0 300px;
}
.mobile-nav {
display: none;
}
.footer-logo {
width: 160px;
}
.table-container {
display: grid;
grid-template-columns: auto;
justify-content: center;
}
table {
font-family: arial, sans-serif;
border-collapse: collapse;
width: 100%;
background-color: white;
color: black;
border: 2px solid black;
}
td,
th {
border: 1px solid black;
padding: 10px 20px;
}
th {
font-size: 20px;
}
td {
font-size: 15px;
}
tr:nth-child(even) {
background-color: #dddddd;
}
.output {
display: grid;
grid-template-columns: auto;
justify-content: center;
border-radius: 10px;
}
.total1 {
border: none;
}
.pc-border-title {
text-align: center;
}
.intro-heading {
font-size: 25px;
text-align: center;
color: #ffffff;
}
.pcbuilder-link {
color: #cecece;
}
.pcbuilder-link:hover {
color: #adadad;
}
.table-heading {
font-size: 50px;
text-align: center;
color: #000000;
margin-bottom: 10px;
margin-top: 0px;
border: 2px solid #000000;
}
#photo {
padding: 10px;
background-color: #ffffff;
border-radius: 10px;
}
.scrn_button {
font-size: 30px;
background-color: #bfbfbf;
border: 2px solid black;
border-radius: 10px;
color: black;
}
.scrn_button:hover {
cursor: pointer;
background-color: #9b9b9b;
}
.scrn_button:active {
background-color: #797979;
}
.contact-form {
border-radius: 10px;
background-color: #ffffff;
color: #000000;
padding: 10px;
width: auto;
}
.input {
width: 100%;
background-color: #bfbfbf;
border: none;
color: black;
border-radius: 10px 0px 10px 0px;
padding: 5px;
font-size: 18px;
}
.contact-form-container {
margin: 10px 300px;
}
.submit-button-container {
text-align: center;
}
.submit-button {
font-size: 25px;
border-radius: 10px;
border: none;
background-color: #818181;
user-select: none;
}
.submit-button:active {
background-color: #414141;
transition: ease 0.1s;
}
#keyframes fadeInAnimation {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
.price::before {
content: "\00a3";
}
#msg {
background-color: #bfbfbf;
border: none;
color: black;
border-radius: 10px 0px 10px 0px;
padding: 5px;
resize: none;
width: 100%;
font-size: 15px;
}
.submit-button:hover::after {
content: ' >';
}
.upload-label {
background-color: #0030b0;
color: white;
padding: 10px;
font-size: 18px;
border-radius: 5px;
cursor: pointer;
border: none;
user-select: none;
}
.upload {
margin: 10px;
text-align: center;
}
#output {
width: 100%;
text-align: center;
padding: 10px;
}
.portfolio-intro {
font-size: 30px;
}
.content {
margin: 10px;
}
.professional:hover:before {
content: 'un-';
font-weight: bolder;
}
.learn-more {
color: #ffd000;
font-size: 20px;
}
.learn-more:hover {
color: #dab200;
transition: all ease 0.3s;
}
.learn-more:active {
color: #bb9900;
transition: all 0s;
}
<!DOCTYPE html>
<html lang="en-GB">
<head>
<meta charset="UTF-8">
<title>Home | Aeron</title>
<link rel="icon" type="image/x-icon" href="./images/favicon.png">
<link rel="stylesheet" media="screen and (min-width: 1294px)" href="main.css">
<link rel="stylesheet" media="screen and (max-width: 1294px)" href="mobile.css">
<link href="https://fonts.googleapis.com/css?family=Poppins" rel="stylesheet">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<div class="header">
<div class="headar-logo-container">
<img src="https://picsum.photos/30/20" title="Aeron" alt="logo" class="header-logo">
</div>
<div class="desktop-nav">
<ul class="desktop-nav-links">
<li>Home</li>
<li>Portfolio</li>
<li>Contact me</li>
<li>About me</li>
<li>Recipes</li>
<li>Progress</li>
<li>PC Setup Designer</li>
<li>Gallery</li>
</ul>
</div>
<div class="mobile-nav">
<span class="menu-button" onclick="openNav()">☰</span>
<div id="mobile-nav-panel" class="mobile-nav-panel">
+
<ul class="mobile-nav-link-list">
<li class="mobile-nav-link">Home</li>
<hr>
<li class="mobile-nav-link">Portfolio</li>
<hr>
<li class="mobile-nav-link">Contact me</li>
<hr>
<li class="mobile-nav-link">About me</li>
<hr>
<li class="mobile-nav-link">Recipes</li>
<hr>
<li class="mobile-nav-link">Progress</li>
<hr>
<li class="mobile-nav-link">PC Setup Designer</li>
<hr>
<li class="mobile-nav-link">Gallery</li>
<hr>
<li class="mobile-nav-link"></li>
</ul>
</div>
</div>
</div>
<h1 class="heading">Welcome to Aeron</h1>
<div class="content">
</div>
<div style="height:100%"></div>
<footer>
<img src="./images/logo.png" title="Aeron" alt="logo" class="footer-logo">
<p class="copyright">Copyright © 2022 Aeron</p>
<div class="footer-links">
About me
<p>|</p>
Policy
<p>|</p>
<a href=contact.html>Contact me</a>
</div>
</footer>
<button onclick="topFunction()" id="return" title="Return To Top"><img src="./images/arrow_upward.svg" width="30px" alt="Return"></button>
<script>
let mybutton = document.getElementById("return");
window.onscroll = function() {
scrollFunction()
};
function scrollFunction() {
if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
mybutton.style.display = "block";
} else {
mybutton.style.display = "none";
}
}
function topFunction() {
document.body.scrollTop = 0;
}
function openNav() {
document.getElementById("mobile-nav-panel").style.width = "100%";
}
function closeNav() {
document.getElementById("mobile-nav-panel").style.width = "0";
}
</script>
</body>
</html>
I've tried having it be an unordered list item without it being a paragraph element, I've tried putting it in a div as well. For some reason I'm just unable to get those to be stacked with the smaller "test" under the bigger TestTest. Seems to work in the rest of the page if I have it as a separate div, just not sure of the reason why it's not working in the footer.
Here is my HTML and CSS:
body {
background-color: #414141;
/* background: url(/images/background.jpg) no-repeat center center fixed;
background-size: cover;
resize: both;
overflow: scroll;
overflow-x: hidden; */
margin: 0;
padding: 0;
}
::-webkit-scrollbar {
width: 0px;
font-family: Arial;
}
#font-face {
font-family: ubuntu-medium;
src: url(/fonts/ubuntu-medium.ttf);
}
#media (max-width: 7680px) {
body {
background: url(/images/background.jpg) no-repeat center center fixed;
background-size: cover;
resize: both;
overflow: scroll;
overflow-x: hidden;
}
}
#media (max-width: 800px) {
body {
background: url(/images/mobilebackground.jpg) no-repeat center center fixed;
}
}
#NavSection {
margin-top: 3%;
}
#MainNav {
position: left;
margin-left: 11%;
}
#Menu li {
font-family: ubuntu-medium;
font-weight: normal;
color: #414141;
padding: 0px 10px;
display: inline;
font-size: 15px;
list-style-type: none;
}
#Menu a:hover {
text-decoration-color: #414141;
text-underline-offset: 0.12em;
text-decoration-line: underline;
text-decoration-style: solid;
text-decoration-thickness: 4px;
box-shadow: 0px 13px 4px -3px rgba(65, 65, 65, 0.616);
}
hr {
margin: 0px;
border: 2px solid red;
width: auto;
}
a {
color: #414141;
text-decoration: none;
}
a:active {
color: #ff0000;
}
#SiteTitle {
margin-left: 0.5%;
}
#TestTest {
font-family: Impact;
font-weight: normal;
font-size: 30px;
color: #ffffff;
text-decoration: underline;
text-decoration-color: #414141;
text-decoration-thickness: 2px;
text-underline-offset: 0.08em;
}
#Japan {
color: red;
}
ul {
list-style-type: none;
margin-top: 0px;
margin-bottom: 0px;
padding: 0px;
}
#SecondNav {
float: right;
font-family: ubuntu-medium;
font-weight: normal;
color: #414141;
padding: 0px 10px;
font-size: 15px;
margin-right: 11%;
}
#SecondMenu a:hover {
text-decoration: overline 4px solid #414141;
box-shadow: 0px -13px 4px -3px rgba(65, 65, 65, 0.616);
}
#SecondMenu li {
margin-bottom: 5px;
font-family: ubuntu-medium;
font-weight: normal;
color: #414141;
padding: 0px 10px;
display: inline;
font-size: 15px;
list-style-type: none;
}
#ContentDiv {
width: 70%;
height: 40%;
position: absolute;
top: 30%;
left: 15%;
transform: translateX(0%);
background-color: rgba(255, 0, 0, 0.4);
}
#ContentSection {
width: 90%;
height: 70%;
position: absolute;
top: 15%;
left: 5%;
background-color: rgba(255, 255, 255, 0.9);
}
#Content {
margin: 3%;
}
footer {
position: absolute;
bottom: 0;
width: 100%;
height: 7%;
background-color: #414141;
font-family: Impact;
font-weight: normal;
font-size: 20px;
color: #ffffff;
}
#FooterTitle {
float: right;
margin: 0.5%;
}
#FooterJapan {
color: #ff0000;
}
#FooterCaption {
font-size: x-small;
float: right;
margin: 0.5%;
font-family: ubuntu-medium;
font-weight: normal;
}
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
<link rel="stylesheet" href="stylesheet.css" type="text/css" />
</head>
<body>
<div id="NavSection">
<div id="TopNav">
<nav id="MainNav">
<ul id="Menu">
<li>Home</li>
<li>About</li>
<li>Contact</li>
</ul>
</nav>
</div>
<hr />
<div id="SecondNavSection">
<nav id="SecondNav">
<ul id="SecondMenu">
<li>Archives</li>
<li>Categories</li>
</ul>
</nav>
</div>
<div id="SiteTitle">
<h1 id="TestTest">Test<span id="Japan">Test</span></h1>
</div>
</div>
<div id="ContentDiv">
<main id="ContentSection">
<div id="Content">
<p>Content goes here.</p>
</div>
</main>
</div>
<footer>
<p id="FooterTitle">Test <span id="FooterJapan">Test</span></p>
<p id="FooterCaption">Test</p>
</footer>
</body>
</html>
You should not be using float for FooterTitle and FooterCaption -- So remove the float:right;
Then you can add text-align:right; to the <footer> CSS
footer {
position: absolute;
bottom: 0;
width: 100%;
height: 7%;
background-color: #414141;
font-family: Impact;
font-weight: normal;
font-size: 20px;
color: #ffffff;
text-align:right;
}
#FooterTitle {
margin: 0.5%;
}
#FooterJapan {
color: #ff0000;
}
#FooterCaption {
font-size: x-small;
margin: 0.5%;
font-family: ubuntu-medium;
font-weight: normal;
}
The rest .. Like height and getting everything to show in the footer I trust you can do :) -- Personally, I think height:7%; is a bad idea .. Better to give it a static height height, or a height that statically will change inside media queries. --
OR You could scrap the text align right to get it to align left but still float right like:
footer {
position: absolute;
bottom: 0;
width: 100%;
height: 60px;
background-color: #414141;
font-family: Impact;
font-weight: normal;
font-size: 20px;
color: #ffffff;
}
#FooterTitle {
margin: 0.5%;
}
#FooterJapan {
color: #ff0000;
}
#FooterCaption {
font-size: x-small;
margin: 0.5%;
font-family: ubuntu-medium;
font-weight: normal;
}
#footer-right-content{
float:right;
text-align:left;
width:100px;
}
HTML
<footer>
<div id="footer-right-content">
<p id="FooterTitle">Test <span id="FooterJapan">Test</span></p>
<p id="FooterCaption">Test</p>
</div>
</footer>
So I set up my header to fade with scroll, but appear with hover. It works over all the images, but the cat pictures in the Portfolio section. I adjusted the z-indexes and have tried everything. The header will not appear over the h4 or anything under the The problem file is the portfolio.html. The header appears over the other pictures. It's been driving me crazy.
https://github.com/alil0rphan/Basic-Portfolio
/* Eastablish body parameters */
body {
background-image: url("../images/circlesbg.png");
background-color: #D7CFC3;
color: #777777;
margin: 0px auto;
font-family: 'Arial', 'Helvetica Neue', Helvetica, sans-serif;
}
/* Create Heading block */
h1 {
background-color: #4AAAA5;
display: inline-block;
padding: 25px 20px 0px 20px;
height: 55px;
margin: 0px auto;
font-family: "Georgia", Times, "Times New Roman", serif;
color: #FFFFFF;
font-size: 36px;
}
h1,
h2,
h3 {
font-weight: bold;
}
section {
background-color: #ffffff;
}
/*Establishes header on top */
header {
background-color: #FFFFFF;
border-bottom: solid 2px #cccccc;
margin: 0px auto;
width: 100%;
height: 80px;
top: 0px;
position: fixed;
z-index: 99;
}
/* establishes tranparency on scroll */
body.scrolled #main-menu {
opacity: 0.2;
transition: opacity .2s;
z-index: 98;
}
body.scrolled #main-menu:hover {
opacity: 1.0;
transition: opacity .2s;
z-index: 97;
}
/* Makes sure heading and contents line up */
.banner {
width: 960px;
margin: 0px auto;
height: 60px;
position: relative;
}
/* Navigational link parameters established */
.link-box {
padding: 30px 0px 0px 20px;
height: 55px;
right: 0px;
display: inline;
position: absolute;
}
/* Establishes main content parameters (container and connect blocks) */
.content {
width: 960px;
margin: 0px auto;
}
/* Establish main unique block on each page */
.container {
width: 590px;
border: solid 2px #dddddd;
float: left;
margin: 115px 0px 200px 0px;
padding: 30px;
}
/* Link attributes including hover */
a {
color: #777777;
text-decoration: none;
font-family: 'Arial', 'Helvetica Neue', Helvetica, sans-serif;
word-spacing: 10px;
}
a:hover {
color: #4AAAA5;
}
/* Establishing heading fonts for container and connect box*/
h2 {
color: #4AAAA5;
font-family: "Georgia", Times, "Times New Roman", serif;
border-bottom: solid 3px #dddddd;
padding-bottom: 20px;
margin-bottom: 10px;
font-size: 32px;
}
h3 {
color: #4AAAA5;
font-family: "Georgia", Times, "Times New Roman", serif;
border-bottom: solid 1px #dddddd;
padding-bottom: 20px;
margin-bottom: 10px;
font-size: 24px;
}
/* adjusts line height and paragraphs for the about me section */
p {
line-height: 2.5;
font-family: 'Arial', 'Helvetica Neue', Helvetica, sans-serif;
margin-top: 0px;
color: #777777;
}
/* My picture on the index file */
#face {
float: left;
display: inline;
margin-top: 10px;
margin-right: 15px;
width: 250px;
}
/* Connections box parameters with icons */
.connect {
width: 210px;
border: solid 2px #dddddd;
float: right;
margin-top: 115px;
padding: 30px;
}
/* Establish icon aesthetics and behaviors with hover features */
.icons {
display: inline-block;
margin: 0px 5px 30px 0px;
width: 60px;
height: 60px;
}
.icons:hover {
box-shadow: 4px 4px 2px #4AAAA5;
}
/* cat pictures and parameters established with hover features*/
.cats {
display: inline-block;
margin: 10px 40px 40px 0px;
width: 230px;
}
.cats:hover {
box-shadow: 4px 4px 2px #4AAAA5;
}
.image {
position: relative;
display: inline-block;
}
/* establishes parameters for banners over the cat images */
h4 {
position: absolute;
width: 230px;
background-color: #4AAAA5;
color: #FFFFFF;
font-family: "Georgia", Times, "Times New Roman", serif;
text-align: center;
padding: 10px 0px 10px 0px;
margin: auto;
left: 0px;
bottom: 50px;
}
/* Establishes sticky footer */
footer {
background-color: #666666;
opacity: 0.85;
text-align: center;
border-top: solid 6px #4AAAA5;
position: fixed;
width: 100%;
bottom: 0px;
padding-top: 30px;
padding-bottom: 30px;
color: #BFBEBC;
font-size: 10px;
font-family: 'Arial', 'Helvetica Neue', Helvetica, sans-serif;
}
.clearfix::after {
content: "";
display: block;
clear: both;
}
/* Establishes input attributes for the contact/ message form. */
input[type=text], select, textarea {
width: 100%;
padding: 12px;
border: 2px solid #DDDDDD;
border-radius: 4px;
box-sizing: border-box;
margin-bottom: 16px;
resize: vertical
}
input[type=submit] {
background-color: #4AAAA5;
color: #FFFFFF;
padding: 12px 20px;
border: none;
cursor: pointer;
}
/* Makes the Submit button change color when mouse hovers over */
input[type=submit]:hover {
background-color: #666666;
}
::-webkit-input-placeholder { /* WebKit browsers */
color: #666666;
opacity: 0.5 !important;
}
label {
color: #8F7E7F;
}
<!DOCTYPE html>
<html lang="en-us">
<head>
<meta charset="UTF-8">
<title>Portfolio</title>
<link rel="stylesheet" type="text/css" href="assets/css/reset.css">
<link rel="stylesheet" type="text/css" href="assets/css/style.css">
</head>
<div id="main-menu">
<header>
<div class="banner">
<h1>John Bendfeldt</h1>
<!-- Navigational links. -->
<div class="link-box">
About |
Porfolio |
Contact
</div>
</div>
</header>
</div>
<body>
<div class="content">
<!-- Big content box in middle -->
<section class="container">
<h2>Portfolio</h2>
<br>
<!-- Images for the main content block -->
<div class="image">
<img src="assets/images/cat1.jpg" class="cats" alt="kitten">
<h4>Building Websites</h4>
</div>
<div class="image">
<img src="assets/images/cat2.jpg" class="cats" alt="kitten">
<h4>RPG</h4>
</div>
<div class="image">
<img src="assets/images/cat3.jpg" class="cats" alt="kitten">
<h4>Trivia Game</h4>
</div>
<div class="image">
<img src="assets/images/cat4.jpg" class="cats" alt="kitten">
<h4>Rock Paper Scissors</h4>
</div>
<div class="image">
<img src="assets/images/cat5.jpg" class="cats" alt="kitten">
<h4>American Freedom</h4>
</div>
</section>
<!-- connect with me box -->
<section class="connect">
<h3>Connect with Me</h3>
<br>
<img src="assets/images/Github-icon.png" class="icons" alt="Github-icon" title="GitHub">
<img src="assets/images/linkedin-icon.png" class="icons" alt="linkedin-icon" title="LinkedIn">
<img src="assets/images/stackoverflow-icon.png" class="icons" alt="stackoverflow-icon" title="Stackoverflow">
</section>
</div>
</body>
<footer>
© Copywrite 2017 John Bendfeldt
</footer>
<!-- makes the header transparent on scroll -->
<script type="text/javascript">
window.addEventListener('scroll', function () {
document.body.classList[
window.scrollY > 20 ? 'add': 'remove'
]('scrolled');
});
</script>
</html>
`
try to add a position: absolute; in body.scrolled #main-menu selector. It will look like this:
body.scrolled #main-menu {
opacity: 0.2;
transition: opacity .2s;
z-index: 98;
position: absolute;
}
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>