Im doing this kind of project for highschool and I need kind of help with adjusting site resolution. Im working on my laptop and when i tried to show it to my teacher site was all... Im working on resolution 1366x768. Is there any solution that sites looks better? I tried some solutions that i found here but nothing worked... Here's my code, thank you. I'm using custom fonts so you may have some troubles seeing it good
body {
background-color: white;
margin: 0 auto;
padding: 0;
width: 100%;
height: auto;
min-width: 1000px;
}
#font-face {
font-family: "Jocker";
src: url("JockeyOne-Regular.ttf") format("truetype");
}
#font-face {
font-family: "Pacifica";
src: url("PacificaCondensed-Regular.ttf") format("truetype");
}
#font-face {
font-family: "ReklameScript";
src: url("ReklameScript.ttf") format("truetype");
}
#font-face {font-family: "Stencil";
src: url("Stencil.eot");
src: url("Stencil.woff2") format("woff2");
src: url("Stencil.woff") format("woff");
src: url("Stencil.ttf") format("truetype");
}
h1 {
font-size: 120px;
text-align: left;
font-family: "Jocker";
margin-left: 45;
color: rgb(200, 101, 103);
}
#jedan {
background: black;
}
#dva {
background: white;
}
.naslov1 {
font-size: 70;
text-align: left;
font-family: "Jocker";
color: rgb(200, 101, 103);
}
.naslov2 {
font-size: 100;
text-align: left;
font-family: "Jocker";
color: rgb(200, 101, 103);
}
.main2-naslov2 {
font-family: "Stencil";
}
#header {
width: 100%;
height: 50px;
margin: auto;
}
#navigacija {
width: 100%;
margin-left: 0px;
padding: 0px;
height: 50px;
overflow: hidden;
text-align: right;
position: fixed;
background-color: #089DE3;
z-index: 9999;
}
.navitem {
background: #089DE3;
color: white;
text-decoration: none;
line-height: 50px;
font-size: 30px;
font-family: "Pacifica";
display: inline-block;
padding-left: 50px;
padding-right: 50px;
padding-top: 0px;
padding-bottom: 0px;
}
#navigacija a {}
a#logo {
float: left;
font-family: "Jocker";
font-size: 30px;
color: white;
text-decoration: none;
margin-left: 50px;
}
.home:hover {
background: #00C5CD;
widthL auto;
}
.shop:hover {
background: #00C5CD;
}
.getpoints:hover {
background: #00C5CD;
}
.info:hover {
background: #00C5CD;
}
.main1 {
margin-left: 100px;
font-family: "ReklameScript";
font-size: 50;
text-align: left;
color: white;
}
.video-container {
position: relative;
padding-bottom: 56.25%;
padding-top: 0px;
height: 0;
overflow: hidden;
top: -1500;
right: 0px;
}
.video-container iframe,
.video-container object,
.video-container embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.video-wrapper {
width: 640px;
float: right;
margin-left: auto;
margin-right: auto;
max-width: 100%;
}
<!DOCYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>MaxSkins-Home</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="Home.css" type="text/css" />
</head>
<body>
<div id="header">
<div id="navigacija">
<img src="logo.png">
<a href="Home.html">
<div class="navitem home"><b>HOME</b></div>
</a>
<a href="Shop.html">
<div class="navitem shop"><b>SHOP</b></div>
</a>
<a href="#">
<div class="navitem getpoints"><b>GET POINTS</b></div>
</a>
<a href="#">
<div class="navitem info"><b>INFO</b></div>
</a>
</div>
</div>
<h1><b>EARN POINTS,<br> GET SKINS!</b></h1>
<div id="jedan">
<div class="naslov1">How does it work?</div>
<div class="main1"><p><b>It's simple!<br> Watch videos, do tasks and have fun!<br>After collecting large amount of coins,<br> contact us to get your skins<b></p></div></div>
<div id="dva">
<div class="naslov2">How do I get my skin?</div>
<div class="main2-naslov2">1. EARN POINTS</div>
<div class="main2">Once you collect enough<br>points, go to shop page<br>and choose your skin.</div>
<div class="main3-naslov3">2. FRIENDS</div>
<div class="main3">When you select a<br>skin, add us on some<br>of our profiles.</div>
<div class="main4-naslov4">3. WAIT</div>
<div class="main4">Before you get your skin,<br>you need to wait 24 hours<br>after we accept you as a friend.<div>
<div class="main5-naslov5">4. SKIN</div>
<div class="main5">We are sending you the<br>skin as soon as we can.<br>If you already have the skin,<br>or if you don't have champion from which you want skin from,<br> you need to choose some other skin.</div>
</div>
<div id="tri">
<div class="main6">This site is not<br>associated with Riot<br>Games, inc.</div></div>
<div class="video-wrapper">
<div class="video-container">
<iframe width="640" height="360" src="https://www.youtube.com/embed/lwItL2NXwDw" frameborder="0" allowfullscreen></iframe>
</div>
<!-- /video -->
</div>
<!-- /video-wrapper -->
</body>
</html>
Related
I don't have that much experience in HTML/CSS. As it says in the title, I have a problem with the input (where it says "What do you think about ?"). I left click on input field so I can write something inside it but when I click the submit logo it is not clickable. And the other problem is with Create account. It is not recognized as a link. The other links work but this one doesn't. It is also not clickable. After I added more CSS code those problems appeared.
Can someone help me with this problem?
P.S : This is a project for a non-programmer friend.
* {
box-sizing: border-box;
}
body {
background: url(images/backgroundWallpaper.jpg) fixed no-repeat center center;
background-size: cover;
margin: 0;
}
#font-face {
font-family: "myFont";
src: url("fonts/coolvetica\ rg.ttf")
}
/* ************************************ HOME PAGE ************************************ */
.header {
background-color: rgb(19, 25, 33);
width: 100%;
height: 140px;
}
.searchbar {
position: relative;
margin-left: 265px;
bottom: 63px;
}
#input {
width: 750px;
height: 48px;
font-size: 17px;
}
#searchbarBtn {
position: relative;
height: 48px;
width: 48px;
font-size: 21px;
top: 2px;
}
#loginBtn {
position: relative;
padding-left: 1140px;
bottom: 95px;
color: white;
font-size: 17px;
}
.logoImg {
width: 240px;
padding-left: 15px;
padding-top: 15px;
}
.viewCart {
color: white;
font-size: 40px;
position: relative;
padding-left: 1370px;
bottom: 128px;
}
.cartBtn {
font-size: 17px;
position: relative;
left: 5px;
bottom: 5px;
}
a {
text-decoration: none;
color: white;
}
a:hover {
color: blue;
}
nav {
display: inline;
position: relative;
bottom: 37px;
padding-left: 18px;
word-spacing: 15px;
}
.navBtn {
font-size: 17px;
}
header {
background: url(images/headerWallpaper.jpg) center center;
width: 100%;
height: 750px;
margin-top: -20px;
position: relative;
z-index: 1;
}
.main {
padding: 0px 130px;
}
footer {
background-color: rgb(19, 25, 33);
clear: both;
color: white;
text-align: center;
font-size: 17px;
height: 50px;
padding-top: 15px;
font-family: "myFont";
}
<!DOCTYPE html>
<html>
<head>
<title>Danube</title>
<link rel="stylesheet" type="text/css" href="style.css">
<link rel="stylesheet" href="fonts/font-awesome-4.7.0/css/font-awesome.min.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<section class="header">
<img class="logoImg" src="images/logo.png">
<div class="searchbar">
<form>
<input id="input" type="text" placeholder="What do you think about ?" name="search">
<button id="searchbarBtn" type="submit"><i class="fa fa-search"></i></button>
</form>
</div>
<div id="loginBtn">Hello, Create account</div>
<div class="viewCart">
<i class="fa fa-shopping-cart"></i>
<a class="cartBtn" href="#">My Basket</a>
</div>
</section>
<nav>
<a class="navBtn" href="#">Home</a>
<a class="navBtn" href="#">Offers</a>
<a class="navBtn" href="#">Products</a>
<a class="navBtn" href="#">Showrooms</a>
<a class="navBtn" href="#">Contact</a>
</nav>
<div class="main">
<header>
</header>
</div>
<footer>
<div>S.C. DANUBE ROMANIA S.R.L. este inregistrata cu numarul 000 / 2022 in registrul de evidenta a prelucrarilor de date cu caracter personal</div>
</footer>
</body>
</html>
There's a lot of problems with the code. Try avoiding fixed values like px for things. Keep your website responsive - you can use flex or something for maintaining a responsive layout.
It is easier to see the problem when you inspect it using Firefox's(or any other browsers) inspecting tool.
You can fix the problems you stated by implementing suggestions told by us here but they may break something else since we don't know the whole code.
Firstly, you can see that the header element is above the search bar and hence the search bar is unfocusable. You can either change the z-index of the header element to -1 or something or you can set the search bar's z-index to a bigger value.
The Create Account link has the same problem as well. In this case,the element with the viewCart class is overlapping the link. What you need to do is in it's style change the padding-left property to margin-left and it will stop overlapping.
Again, try to keep things simple by using a more dynamic way so that elements are positioned and sized automatically instead of you having to specify the sizes yourself.
First of all, the button always have a default cursor, if you want to change the cursor to the pointer on hovering you must add this: button:hover {cursor: pointer}
Second of all, you're using positions wrongly and don't understand them. Read about positions here.
I deleted all of the position relatives and top & bottom.
* {
box-sizing: border-box;
}
body {
background: url(images/backgroundWallpaper.jpg) fixed no-repeat center center;
background-size: cover;
margin: 0;
}
#font-face {
font-family: "myFont";
src: url("fonts/coolvetica\ rg.ttf")
}
/* ************************************ HOME PAGE ************************************ */
.header {
background-color: rgb(19, 25, 33);
width: 100%;
height: 140px;
}
.searchbar {
margin-left: 265px;
}
#input {
width: 750px;
height: 48px;
font-size: 17px;
}
#searchbarBtn {
height: 48px;
width: 48px;
font-size: 21px;
}
/* EDITED HERE */
#searchbarBtn:hover {
cursor: pointer
}
#loginBtn {
padding-left: 1140px;
color: white;
font-size: 17px;
}
.logoImg {
width: 240px;
padding-left: 15px;
padding-top: 15px;
}
.viewCart {
color: white;
font-size: 40px;
position: relative;
padding-left: 1370px;
bottom: 128px;
}
.cartBtn {
font-size: 17px;
position: relative;
left: 5px;
bottom: 5px;
}
a {
text-decoration: none;
color: white;
}
a:hover {
color: blue;
}
nav {
display: inline;
position: relative;
bottom: 37px;
padding-left: 18px;
word-spacing: 15px;
}
.navBtn {
font-size: 17px;
}
header {
background: url(images/headerWallpaper.jpg) center center;
width: 100%;
height: 750px;
margin-top: -20px;
position: relative;
z-index: 1;
}
.main {
padding: 0px 130px;
}
footer {
background-color: rgb(19, 25, 33);
clear: both;
color: white;
text-align: center;
font-size: 17px;
height: 50px;
padding-top: 15px;
font-family: "myFont";
}
<!DOCTYPE html>
<html>
<head>
<title>Danube</title>
<link rel="stylesheet" type="text/css" href="style.css">
<link rel="stylesheet" href="fonts/font-awesome-4.7.0/css/font-awesome.min.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<section class="header">
<img class="logoImg" src="images/logo.png">
<div class="searchbar">
<form>
<input id="input" type="text" placeholder="What do you think about ?" name="search">
<button id="searchbarBtn" type="submit"><i class="fa fa-search"></i></button>
</form>
</div>
<div id="loginBtn">Hello, Create account</div>
<div class="viewCart">
<i class="fa fa-shopping-cart"></i>
<a class="cartBtn" href="#">My Basket</a>
</div>
</section>
<nav>
<a class="navBtn" href="#">Home</a>
<a class="navBtn" href="#">Offers</a>
<a class="navBtn" href="#">Products</a>
<a class="navBtn" href="#">Showrooms</a>
<a class="navBtn" href="#">Contact</a>
</nav>
<div class="main">
<header>
</header>
</div>
<footer>
<div>S.C. DANUBE ROMANIA S.R.L. este inregistrata cu numarul 000 / 2022 in registrul de evidenta a prelucrarilor de date cu caracter personal</div>
</footer>
</body>
</html>
both are incorrectly positioned, they are pushing to the top and some element is overlapping over them.
I recreated your code by positioning them slightly lower using position: relative; top : 100px and then input box was accepting clicks and create link was working.
box-sizing: border-box;
}
body {
background: url(images/backgroundWallpaper.jpg) fixed no-repeat center center;
background-size: cover;
margin: 0;
}
#font-face {
font-family: "myFont";
src: url("fonts/coolvetica\ rg.ttf")
}
/* ************************************ HOME PAGE ************************************ */
.header {
background-color: rgb(19, 25, 33);
width: 100%;
height: 140px;
}
.searchbar {
position: relative;
margin-left: 265px;
bottom: 63px;
}
#input {
width: 750px;
height: 48px;
font-size: 17px;
position: relative;
top: 100px;
}
#searchbarBtn {
position: relative;
height: 48px;
width: 48px;
font-size: 21px;
top: 2px;
}
#loginBtn {
position: relative;
padding-left: 1140px;
color: white;
font-size: 17px;
}
.logoImg {
width: 240px;
padding-left: 15px;
padding-top: 15px;
}
.viewCart {
color: white;
font-size: 40px;
position: relative;
padding-left: 1370px;
bottom: 128px;
}
.cartBtn {
font-size: 17px;
position: relative;
left: 5px;
bottom: 5px;
}
a {
text-decoration: none;
color: white;
}
a:hover {
color: blue;
}
nav {
display: inline;
position: relative;
bottom: 37px;
padding-left: 18px;
word-spacing: 15px;
}
.navBtn {
font-size: 17px;
}
header {
background: url(images/headerWallpaper.jpg) center center;
width: 100%;
height: 750px;
margin-top: -20px;
position: relative;
z-index: 1;
}
.main {
padding: 0px 130px;
}
footer {
background-color: rgb(19, 25, 33);
clear: both;
color: white;
text-align: center;
font-size: 17px;
height: 50px;
padding-top: 15px;
font-family: "myFont";
}```
Please check the changes in #loginBtn and #input
I have a project for a photography site. I am fairly new so still struggling with some of the basics. My project will have a header, a main div where the photos will be displayed and a footer. I want my main div to fill as much space as possible with the footer right at the bottom (as you'd expect). But this is what I am getting:
I have provisionally set the background-color of the header and footer to yellow, the color of the main div to red and the body is set to green. This is to better solve the issue. What I want is no green and the footer to be right at the bottom, with the rest being red, no matter the size of the window.
Here is my code:
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>Photography</title>
<link rel="stylesheet" type="text/css" href="styles.css">
<script type="text/javascript" src="JavaScript2b.js"></script>
<script type="text/javascript" src="JavaScript2.js"></script>
<script type="text/javascript" src="jquery-3.1.0.min.js"></script>
</head>
<body>
<div id="header">
</div>
<div id="wrap">
<div id="container">
<div id="controllers">
<div id="previous" class="buttons">
<p id="try" onclick="change(-1);">PREVIOUS</p>
</div>
<div id="next" class="buttons">
<p id="try2" onclick="change(1);">NEXT</p>
</div>
</div>
<div id="imagewrap">
<img src="Images/01PARANA/Image1.jpg" height="100%" id="front" />
</div>
<div>
<p id="tag">Text</p>
</div>
</div>
</div>
<div id="footer">
</div>
<script type="text/javascript" src="JavaScript2.js"></script>
</body>
</html>
css
#font-face {font-family: Eagle-Light;
src: url("Eagle-Light.otf") format("opentype");
}
#font-face {font-family: Raleway Light;
src: url("Raleway Light.otf") format("opentype");
}
body {
/* height: 100%;*/
background-color: green;
}
#header {
height: 100px;
width: 100%;
background-color: yellow;
}
#footer {
height: 100px;
width: 100%;
background-color: yellow;
}
p {
color: #818181;
font-family: Eagle-Light;
line-height: 1.7em;
padding: 0px;
margin: 0px;
font-size: 0.5em;
letter-spacing: 0.21em;
}
a:link {
text-decoration: none;
color: inherit;
}
a:visited {
text-decoration: none;
color: inherit;
}
div {
margin: 0px;
padding: 0px;
}
#wrap {
clear: both;
padding: 0px;
width: 100%;
background-color: red;
}
body {
margin: 0px;
padding: 0px;
}
#container {
min-width: auto;
position: relative;
/* height: 77%;*/
width: 550px;
margin: 0 auto;
/* margin-top:7%;*/
}
#controllers {
position: static;
height: 20px;
}
#previous {
position: absolute;
left: 0px;
}
#next {
position: absolute;
right: 0px;
}
#tag {
position: static;
height: 20px;
line-height: 1.7em;
padding-top: 5px;
}
.buttons {
cursor: pointer;
}
#imagewrap{
border: 1px solid #818181;
overflow: hidden;
z-index: 2;
background-color: red;
}
#front {
display: block;
}
Thank you,
David
The problem is that your main div takes up very little space and therefore the body extends to cover the screen. In this case you could fix the footer always in the lowest position
#font-face {font-family: Eagle-Light;
src: url("Eagle-Light.otf") format("opentype");
}
#font-face {font-family: Raleway Light;
src: url("Raleway Light.otf") format("opentype");
}
body {
/* height: 100%;*/
background-color: green;
}
#header {
height: 100px;
width: 100%;
background-color: yellow;
}
#footer {
position: absolute;
height: 100px;
width: 100%;
background-color: yellow;
display: block;
bottom: 0;
}
p {
color: #818181;
font-family: Eagle-Light;
line-height: 1.7em;
padding: 0px;
margin: 0px;
font-size: 0.5em;
letter-spacing: 0.21em;
}
a:link {
text-decoration: none;
color: inherit;
}
a:visited {
text-decoration: none;
color: inherit;
}
div {
margin: 0px;
padding: 0px;
}
#wrap {
clear: both;
padding: 0px;
width: 100%;
background-color: red;
}
body {
margin: 0px;
padding: 0px;
}
#container {
min-width: auto;
position: relative;
/* height: 77%;*/
width: 550px;
margin: 0 auto;
/* margin-top:7%;*/
}
#controllers {
position: static;
height: 20px;
}
#previous {
position: absolute;
left: 0px;
}
#next {
position: absolute;
right: 0px;
}
#tag {
position: static;
height: 20px;
line-height: 1.7em;
padding-top: 5px;
}
.buttons {
cursor: pointer;
}
#imagewrap{
border: 1px solid #818181;
overflow: hidden;
z-index: 2;
background-color: red;
}
#front {
display: block;
}
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>Photography</title>
<link rel="stylesheet" type="text/css" href="./styles.css">
</head>
<body>
<div id="header">
</div>
<div id="wrap">
<div id="container">
<div id="controllers">
<div id="previous" class="buttons">
<p id="try" onclick="change(-1);">PREVIOUS</p>
</div>
<div id="next" class="buttons">
<p id="try2" onclick="change(1);">NEXT</p>
</div>
</div>
<div id="imagewrap">
<img src="Images/01PARANA/Image1.jpg" height="100%" id="front" />
</div>
<div>
<p id="tag">Text</p>
</div>
</div>
</div>
<div id="footer">
</div>
<script type="text/javascript" src="JavaScript2.js"></script>
</body>
</html>
#wrap {
min-height: calc(100vh-200px);
}
This will set the wrap to be the screen height minus the height of the header and footer.
The 200px value can just be changed to be the combined height of the header and footer.
Here is my HTML
<!DOCTYPE html>
<html>
<head>
<title>
Oaki Softworks
</title>
<link href='style.css' rel='stylesheet' type='text/css'>
<link rel="icon" href="favicon.png">
</head>
<body>
<div id="navigation">
<div style="height:20px;width=15%;float:right;">
<img src="facebook_icon.png" class="social_media_icon">
<img src="instagram_icon.png" class="social_media_icon">
<img src="twitter_icon.png" class="social_media_icon">
<img src="youtube_icon.png" class="social_media_icon">
</div>
<div class="navigation_tile">Contact Us</div>
<div class="navigation_tile">Careers</div>
<div class="navigation_tile">Products</div>
<div class="navigation_tile">About Us</div>
</div>
<div id="content">
<div id="blurb">
<img src="Logo%20(inverted,%20transparent).png" style="width:90%;height:auto;align-self:center;">
<h2>Video games as art.</h2>
<p>Even before the conception of our company, we have always embraced video games as the newest, emerging art form. Video games engage an audience like no other medium: allowing them to digest the material at their own pace, to identify themselves within their avatar as they see fit, and to interact with the world around them. Oaki Software aims to underline these elements of art even further with our own game design.</p>
</div>
<div id="main_pic">
<img src="art.jpg">
</div>
</div>
<div id="footer">
<p>
Oaki Softworks™
<br>Fort Collins, CO 80521
<br>benkulka#oakisoftworks.com
</p>
</div>
</body>
</html>
Here is my CSS
body {
background-color: #021034;
padding: 0px;
margin: 0px;
}
#navigation {
position: fixed;
background-color: black;
height: 40px;
width: 100%;
color: white;
color: #adb7bd;
font-family: 'Lucida Sans', Arial, sans-serif;
font-size: 16px;
line-height: 26px;
}
div.navigation_tile {
height: 30px;
width: 15%;
align-content: center;
text-align: center;
float: right;
margin: 5px;
}
div.navigation_tile:hover {
background-color: #092466;
}
div.navigation_tile:active {
background-color: white;
color: black;
}
#content {
margin-top: 30px;
display: inline-block;
text-align: justify;
}
#blurb{
padding: 40px 0 0 25px;
width: 28%;
height: 250px;
}
#main_pic {
float: right;
width: 66%;
height: 250px;
border: 10px #092466 solid;
overflow: hidden;
}
h1{
color: #A5B7E3;
font-family: 'Lato', sans-serif;
font-size: 54px;
font-weight: 300;
line-height: 58px;
margin: 0 0 20px;
}
h2 {
color: #6681C4;
font-family: 'Lato', sans-serif;
font-size: 34px;
margin: 0 0 10px;
}
p{
text-indent: 20px;
color: white;
font-size: 12px;
font-weight: 100;
font-family: 'Lucida Sans', Arial, serif;
line-height: 20px;
}
img.social_media_icon{
height: 15px;
width: 15px;
padding: 5px;
}
#footer {
height: auto;
width: 100%;
background-color: black;
text-align: center;
padding: 5px;
}
I'm trying to get my #blurb div to line up with my #main_pic div within my parent #content div, but I'm having trouble doing so. Can someone point me in the right direction?
#blurb {
[...]
float: left;
}
#content {
[..]
overflow: hidden;
}
Also consider removing height: 250px; from #blurb ... hard to say is it required for some reason.
That's how it should look.
That's how it does look.
The same works fine on Android phones but breaks on iOS and only on the first load. If I refresh the page, it settles into the correct thing.
This is the code in handlebars:
<!DOCTYPE html>
<html>
<head>
<title>{{link_data.workplace.name}} - A Super Workplace!</title>
<link rel="shortcut icon" href="http://admin.getsuperapp.com/public/superfavicon.ico">
<meta name="mobile-web-app-capable" content="yes">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no" />
<style>
#import url(https://fonts.googleapis.com/css?family=Montserrat:400,700);
#import url(https://fonts.googleapis.com/css?family=Asap:400,400italic);
body {
margin: 0;
padding: 0;
}
.content {
padding-bottom: 62px;
}
.content .cover {
}
.cover img {
width: 100%;
}
.content .name-logo {
padding-left: 6.79%;
box-sizing: border-box;
position: relative;
top: -7px;
}
.content .name-logo .logo {
width: 58px;
height: 58px;
border-color: #d8d8d8;
border-radius: 4px;
border-width: 1px;
border-style: solid;
overflow: hidden;
display: inline-block;
box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.24);
position: relative;
background: #fff;
}
.content .name-logo .logo img {
width: 100%;
height: 100%;
}
.content .name-logo .join-us {
width: 70%;
display: inline-block;
vertical-align: top;
position: relative;
top: 10px;
left: 4px;
font-family: 'Asap', sans-serif;
font-style: italic;
color: rgba(55, 71, 79, 0.54);
}
.content .name-logo .join-us .text {
font-size: 8pt;
}
.content .name-logo .join-us .company-name {
font-family: 'Montserrat', sans-serif;
font-style: normal;
font-weight: 700;
color: #37474f;
font-size: 16pt;
}
.content .company-headline {
font-family: 'Asap', sans-serif;
font-size: 12pt;
line-height: 16pt;
color: rgba(0, 0, 0, 0.54);
padding-top: 0px;
padding-left: 6.79%;
padding-right: 6.79%;
padding-bottom: 16px;
}
.content .people-carousel {
width: 100%;
background-color: #87A0AD ;
overflow: hidden;
}
.content .people-carousel.collapsed {
height: 136px;
}
.content .people-carousel .person {
width: 33.53vw;
height: 33.33vw;
display: inline-block;
margin: 0 -2px -4px;
overflow: hidden;
}
.content .people-carousel .person img {
width: 100%;
}
.content .next-person {
padding-top: 40px;
padding-bottom: 40.3px;
background-color: #03A9F4;
}
.content .next-person .text {
text-align: center;
font-family: 'Asap', sans-serif;
font-style: italic;
font-size: 14pt;
line-height: 18pt;
color: #fff;
}
.content .next-person .you {
font-family: 'Montserrat', sans-serif;
font-size: 24pt;
line-height: 24pt;
color: #ffeb3b;
text-align: center;
font-weight: 700;
}
.content .get-app {
background-color: #37474f;
position: fixed;
bottom: -1px;
width: 100%;
}
.content .get-app .badge {
display: inline-block;
padding-top: 14px;
padding-bottom: 10px;
padding-left: 12px;
padding-right: 32px;
}
.content .get-app .badge img {
width: auto;
height: 36px;
}
.content .get-app .button-wrapper {
display: inline-block;
width: 46vw;
vertical-align: top;
padding-top: 12px;
padding-right: 12px;
padding-bottom: 12px;
box-sizing: border-box;
float: right;
right: 26px;
position: relative;
}
.content .get-app .button-wrapper a {
text-decoration: none;
}
.content .get-app .button {
width: 120px;
height: 40px;
background-color: #FFEB3B;
box-shadow: 0 2px 2px 0 rgba(0,0,0,0.12);
border-radius: 4.4px;
margin-left: auto;
margin-right: -25px;
}
.content .get-app .button .button-text {
font-family: 'Montserrat', sans-serif;
font-weight: bold;
color: rgba(0, 0, 0, 0.54);
text-transform: uppercase;
font-size: 14px;
letter-spacing: 0.3px;
text-align: center;
margin: auto;
position: relative;
top: 11px;
}
.page-not-found {
width: 300;
height: 300;
border-radius: 5px;
border: 1px solid #BCBCCA;
margin: auto;
margin-top: 100px;
}
.page-not-found .text {
font-family: sans-serif;
text-align: center;
padding: 100;
}
</style>
</head>
<body>
{{#if link_data.enabled}}
<div class="wrapper">
<div class="content">
<div class="cover">
<img src="http://res.cloudinary.com/superapp/image/upload/q_30,w_1242,e_blur:90/{{link_data.workplace.coverImage.cloudinaryId}}"
alt="Banner"/>
</div>
<div class="name-logo">
<div class="logo">
<img src="http://res.cloudinary.com/superapp/image/upload/w_230/{{link_data.workplace.logo.cloudinaryId}}"
alt="logo"/>
</div>
<div class="join-us">
<span class="text">Come join us at</span> <br/>
<span class="company-name">{{link_data.workplace.name}}</span>
</div>
</div>
<div class="company-headline">
{{link_data.workplace.headline}}...
</div>
<div class="people-carousel {{#unless link_data.workplace.peopleCarousel.4.image}}collapsed{{/unless}}">
<div class="person">
{{#if link_data.workplace.peopleCarousel.0.image}}
<img src="http://res.cloudinary.com/superapp/image/upload/q_70,w_380,e_blur:20/{{link_data.workplace.peopleCarousel.0.image.cloudinaryId}}"
alt="person"/>
{{/if}}
</div>
<div class="person">
{{#if link_data.workplace.peopleCarousel.1.image}}
<img src="http://res.cloudinary.com/superapp/image/upload/q_70,w_380,e_blur:20/{{link_data.workplace.peopleCarousel.1.image.cloudinaryId}}"
alt="person"/>
{{/if}}
</div>
<div class="person">
{{#if link_data.workplace.peopleCarousel.2.image}}
<img src="http://res.cloudinary.com/superapp/image/upload/q_70,w_380,e_blur:20/{{link_data.workplace.peopleCarousel.2.image.cloudinaryId}}"
alt="person"/>
{{/if}}
</div>
<div class="person">
{{#if link_data.workplace.peopleCarousel.3.image}}
<img src="http://res.cloudinary.com/superapp/image/upload/q_70,w_380,e_blur:20/{{link_data.workplace.peopleCarousel.3.image.cloudinaryId}}"
alt="person"/>
{{/if}}
</div>
<div class="person">
{{#if link_data.workplace.peopleCarousel.4.image}}
<img src="http://res.cloudinary.com/superapp/image/upload/q_70,w_380,e_blur:20/{{link_data.workplace.peopleCarousel.4.image.cloudinaryId}}"
alt="person"/>
{{/if}}
</div>
<div class="person">
{{#if link_data.workplace.peopleCarousel.5.image}}
<img src="http://res.cloudinary.com/superapp/image/upload/q_70,w_380,e_blur:20/{{link_data.workplace.peopleCarousel.5.image.cloudinaryId}}"
alt="person"/>
{{/if}}
</div>
</div>
<div class="next-person">
<div class="text">
Will the next person <br/>
to join {{link_data.workplace.name}} be
</div>
<div class="you">
you?
</div>
</div>
<div class="get-app">
<div class="badge">
<img src="http://res.cloudinary.com/superapp/image/upload/v1453184144/super-badge-ios_3x_x1zdix.png"
alt="badge"/>
</div>
<div class="button-wrapper">
<a href="{{action}}">
<div class="button">
<div class="button-text">
Get the App
</div>
</div>
</a>
</div>
</div>
</div>
</div>
{{else}}
<div class="page-not-found">
<div class="text">
Page Not Found!
</div>
</div>
{{/if}}
</body>
</html>
Usually, when things are fixed when you reload the page, the problem is that an img isn't loaded at the time the styles are applied, so the rendered doesn't know the width/height of an element and gets the layout wrong, you have to force the layout to your needs.
Try setting a fixed width and height for the img tags.
Try setting vertical-align:bottom to all the img and .person
Try setting overflow:hidden on .person
I'm not sure if all of these would work, but I hope at least one will.
My slideshow div is paced above my header nav in HTML to create a fullscreen slideshow but all the elements on my page are fading with my slideshow, how do I prevent that?
Thank you
I'm new at this, so I'm not sure if the layout is correct or not.
enter code here
<head>
<meta charset="UTF-8">
<title>Untitled Document</title>
<link href="main.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
"use strict";
var scroll_start = 0;
var startchange = $('#about');
var offset = startchange.offset();
$(document).scroll(function() {
scroll_start = $(this).scrollTop();
if(scroll_start > offset.top) {
$('#header').css('background-color', '#3A3939');
} else {
$('#header').css('background-color', 'transparent');
}
});
});
var currentBackground = 0;
var backgrounds = [];
backgrounds[0] = 'images/pic3.png';
backgrounds[1] = 'images/pic2.png';
backgrounds[2] = 'images/pic1.png';
backgrounds[3] = 'images/pic4.png';
function changeBackground() {
currentBackground++;
if(currentBackground > 3) currentBackground = 0;
$('.slideshow').fadeOut(900,function() {
$('.slideshow').css({
'background-image' : "url('" + backgrounds[currentBackground] + "')"
});
$('.slideshow').fadeIn(1000);
});
setTimeout(changeBackground, 3500);
}
$(document).ready(function() {
setTimeout(changeBackground, 3500);
});
</script>
</head>
<body>
<div id="home">
<div class="slideshow">
<div id="header">
<nav>
<ul>
<li>Home</li>
<li>About</li>
<li>Projects</li>
<li>Contact</li>
</ul>
<div id="styledimg"></div>
</nav>
</div>
<div id="head-soc">
<div id="linkedin-icon">Linkedin</div>
<div id="youtube-icon">Youtube</div>
<div id="facebook-icon">Facebook</div>
</div>
<div class="content">
<p>Create, Collaborate, Innovate</p>
</div>
</div>
</div>
<div id="about">
<div class="wrapper">
<h4>Titus Jackson</h4>
<p>Film Maker ~ Screen Writer ~ Editor</p>
</div>
<img src="images/Titus-Jackson1.jpg" alt="Titus Jackson" width="425" height="365" border="0" />
<div id="section2">
<p>For over 15 years <span>Cinemuze</span> has had the honor of working with some of the most talented creative collaborators tulsa has to offer. We love working on a variety of projects. As it is our goal to be a well rounded company with our fingers in a lot of pies.</p>
<p>Our paramount value is to approach the material with excellence, and an original point of view to tell a unique and compelling story. It is our belief that life is what you make of it, and the saddest lost is not to explore all your potential in the short time you've been given.</p>
<p>We've had the opportunity to work on multiple feature films and national television shows ranging from christian television to TLC television. We've created multiple award winning music vidoes, short films and even a feature film. Feel free to take a look around the site, and drop us an email, we look forward to hearing from you.</p>
<img src="images/email1.png" alt="email" width="26" height="26" />
</div>
</div>
<div id="projects">
<h5>View our current projects:</h5>
<div class="wrapper1">
<iframe width="265" height="200" src="https://www.youtube.com/embed/8CZJzUk7fFM" frameborder="0" allowfullscreen></iframe>
<p>Eugene Gregory Promo</p>
</div>
<div id="wrapper2">
<iframe width="265" height="200" src="https://www.youtube.com/embed/cLm3Vh4_Ruc" frameborder="0" allowfullscreen></iframe>
<p>Family Cup Promo</p>
</div>
<div class="wrapper3">
<iframe width="265" height="200" src="https://www.youtube.com/embed/2t9-vVNgF7c" frameborder="0" allowfullscreen></iframe>
<p>This Generation</p>
</div>
</div>
<div id="contact">
<section3>
<h3>To connect with Us:</h3>
<p><span>Cinemuze</span> is based in Tulsa, Oklahoma and travels widely for a variety of projects.</p>
<p>If your interested in our work, you can connect with us via email or phone.</p>
</section3>
<div class="section4">
<img src="images/email1.png" alt="email" width="26" height="26" />
<a href="mailto:titusjackson#mac.com">
<p>titusjackson#mac.com</p>
</a><img src="images/phone.png" alt="phone" width="24" height="24" />
<p>+1 (918) 671-3340</p>
</div>
</div>
<footer>
</footer>
</body>
</html>
#charset "UTF-8";
/* CSS Document */
body {
font: 100%/1.4 Verdana, Arial, Helvetica, sans-serif;
background-color: #42413C;
margin: 0;
padding: 0;
color: #000;
}
#header {
width: 100%;
margin-top: -15px;
position: fixed;
background-color: transparent;
transition-duration: 1s;
}
div#header nav {
width: 1425;
height: 110px;
}
div#header ul {
list-style: none;
margin-left: 100px;
float: left;
}
div#header li {
float: left;
margin-left: 64px;
margin-top: 10px;
}
div#header a {
color: white;
text-decoration: none;
line-height: 45px;
font-size: .9em;
text-transform: capitalize;
}
div#header a:hover {
color: rgba(249,0,3,1.00);
}
div#styledimg {
background-image: url(images/logo.png);
background-repeat: no-repeat; width: 224px;
height: 85px;
float: right;
margin-right: 150px;
margin-top: 10px;
z-index: 1003;
}
/*page-specific header styles*/
#header {
background-color: rgba(60,59,59,1.00);
width: 1425;
height: 110px;
}
/* layout styles*/
/*home page*/
.slideshow {
background-image:url(images/pic3.png);
background-size: cover;
background-repeat: no-repeat;
background-position: 500px 0px 0px;
background-attachment: fixed;
top: 0px;
left: 0px;
width: 100%;
height: 900px;
line-height: 0px;
margin-top: -330px;
padding-top: -15px;
}
#header {
background-color: transparent;
}
#head-soc {
width: 129;
height: 86;
margin: 10px;
padding: 0px;
float: right;
margin-right: 40px;
margin-top: 255px;
right: 25px;
position: fixed;
z-index: 2;
}
#head-soc a {
margin-top: 10px;
margin-right: 20px;
}
#linkedin-icon a {
text-indent: -9999px;
font-size: 0;
line-height: 0;
overflow: hidden;
height: 43px;
width: 43px;
border: 0;
background-image: url(images/socialsprites_white.png);
display: block;
float: right;
background-position: 0px 0px;
}
#linkedin-icon a:hover {
background-image: url(images/socialsprites_white.png);
background-position: 0px -43px;
}
#youtube-icon a {
text-indent: -9999px;
font-size: 0;
line-height: 0;
overflow: hidden;
height: 43px;
width: 43px;
border: 0;
background-image: url(images/socialsprites_white.png);
display: block;
float: right;
margin-left: 20px;
background-position: -43px 0px;
}
#youtube-icon a:hover {
background-image: url(images/socialsprites_white.png);
background-position: -43px -43px;
}
#facebook-icon a {
text-indent: -9999px;
font-size: 0;
line-height: 0;
overflow: hidden;
height: 43px;
width: 43px;
border: 0;
background-image: url(images/socialsprites_white.png);
display: block;
float: right;
background-position: -86px -85px;
}
#facebook-icon a:hover {
background-image: url(images/socialsprites_white.png);
background-position: -86px -128px;
}
.content p {
font-family: BlairMdITC TT-Medium;
font-size: 44px;
line-height: 120%;
width: 550px;
text-align: center;
padding-top: 360px;
margin-top: 330px;
margin-left: 575px;
color: rgba(248,241,241,1.00);
}
/* about page*/
div#about {
background-color:rgba(188,184,184,1.00);
height: 550px;
margin-top: -35px;
padding-top: 100px;
}
.wrapper h4 {
font-famiy: Geneva;
font-size: 25px;
padding-left: 224px;
color: rgba(249,0,3,1.00);
margin-bottom: -20px;
}
.wrapper p {
font-family: Geneva;
font-size: 12px;
margin-left: 226px;
margin-top: 20px;
margin-bottom: 15px;
color: rgba(134,133,133,1.00);
}
h6 {
padding-left: 225px;
margin-top: -20px;
margin-bottom: 10px;
color: rgba(60,59,59,1.00);
}
img {
float: left;
margin-left: 225px;
margin-right: 15px;
}
#section2 {
font-family: Helvetica;
font-size: 16px;
color: rgba(60,59,59,1.00);
width: 1280px;
padding-top: -80px;
height: 300px;
}
#section2 p {
color: rgba(60,59,59,1.00);
}
#section2 img {
margin-left: 2px;
}
span {
color: rgba(249,0,3,1.00);
}
/* projects page */
div#projects {
background-color: #3A3939;
background-position: 25px;
height: 450px;
margin: 0px;
line-height: 0;
padding-top: 25px;
}
.wrapper1 {
float: left;
width: 265;
height: 200px;
margin-left: 200px;
padding-top: 50px;
}
#wrapper2 {
float: right;
width: 265;
height: 200px;
margin-right: 200px;
padding-top: 50px;
}
.wrapper3 {
float: left;
margin-left: 175px;
padding-top: 50px;
width: 265;
height: 200px;
}
.wrapper1 p {
margin-left: 42px;
font-family: BlairMdITC TT-Medium;
font-size: 20px;
color: rgba(249,0,3,1.00);
margin-top: 20px;
}
#wrapper2 p {
margin-left: 65px;
font-family: BlairMdITC TT-Medium;
font-size: 20px;
color: rgba(249,0,3,1.00);
margin-top: 20px;
}
.wrapper3 p {
margin-left: 70px;
font-family: BlairMdITC TT-Medium;
font-size: 20px;
color: rgba(249,0,3,1.00);
margin-top: 20px;
}
div#projects h5 {
margin-left: 650px;
font-size: 20px;
font-family: Helvetica, Arial, sans-serif;
color:rgba(179,178,178,1.00);
padding-bottom: 45px;
margin-bottom: -15px;
}
p {
font-size: 16px;
margin-left: 195px;
color: rgba(249,247,247,1.00);
}
/* contact page */
div#contact {
background-image:url(images/studio4.png);
background-size: cover;
background-attachment: fixed;
padding-top: 35px;
padding-bottom: 100px;
}
section3 h3 {
font-family: Arial, Helvetica, sans-serif;
font-size: 22px;
color: rgba(249,0,3,1.00);
margin-left: 660px;
margin-top: 75px;
}
section3 p {
font-family: Arial, Helvetica, sans-serif;
font-size: 18px;
color: rgba(255,255,255,1.00);
width: 650px;
padding-left: 85px;
margin-left: 385px;
}
.section4 {
font-family: Helvetica, sans-serif;
font-size: 16px;
color: rgba(255,255,255,1.00);
margin-left: 440px;
margin-top: 50px;
}
.section4 a {
text-decoration: none;
}
.section4 a p:hover {
color: rgba(249,0,3,1.00);
}
/* ~~ The footer ~~ */
/*HTML 5 support - Sets new HTML 5 tags to display:block so browsers know how to render the tags properly. */
header, section, footer, aside, article, figure {
display: block;
}
You've placed all of your HTML inside of the div with the slideshow class:
<div class="slideshow"> //this is left open
//other divs are closed later on like this one:
<div id="styledimg"></div>
//but all the divs below slideshow are inside of the slideshow div
So whatever animations you're doing to the slideshow div, will affect all of its children.