I am helping a student with a project and we are going through a tutorial. The tutorial is here:
https://ihatetomatoes.net/demos/parallax-scroll-effect/
Here is our index.html:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>joeys school project</title>
<link rel="stylesheet" href="css/main.css">
<link rel="stylesheet" href="css/normalize.css">
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="js/vendor/jquery-1.9.1.min.js"><\/script>')</script>
<script src="js/jquery.waypoints.min.js"></script>
</head>
<body>
<main>
<section id="slide-1" class="homeSlide">
<div class="bcg" data-center="background-position: 50% 0px;" data-top-bottom="background-position: 50% -100px;" data-anchor-target="#slide-1">
<div class="hsContainer">
<div class="hsContent" data-center="opacity: 1" data-106-top="opacity: 0" data-anchor-target="#slide-1 h2">
<h2>Mac Vs. Windows</h2>
<p>Which is better? Which should you choose?</p>
</div>
</div>
</div>
</section>
</main>
</body>
</html>
Here is our main.css:
body {
margin: 0;
}
.mac_header {
z-index: 100;
position: absolute;
color: white;
font-size: 24px;
font-weight: bold;
left: 150px;
top: 350px;
}
/* CSS */
.hsContainer {
display: table;
table-layout: fixed;
width: 100%;
height: 100%;
overflow: hidden;
position: relative;
opacity: 0;
}
.hsContent {
max-width: 450px;
margin: -150px auto 0 auto;
display: table-cell;
vertical-align: middle;
color: #ebebeb;
padding: 0 8%;
text-align: center;
}
.hsContent h2,
.copy h2 {
color: #ffffff;
font-size: 45px;
line-height: 48px;
margin-bottom: 12px;
}
.hsContent p {
width: 400px;
margin: 0 auto;
color: #b2b2b2;
}
.hsContent a {
color: #b2b2b2;
text-decoration: underline;
}
.bcg {
background-position: center center;
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
height: 100%;
width: 100%;
}
/* Slide 1 */
#slide-1 .bcg {
background-image:url('../img/computers-1227142.jpg');
height: 733px;}
The issue is we can see the block for the text when we inspect the page in Chrome, but it is not displaying the text over the image. All we see is the outline of the div where it is located. We have researched how to get this working and also followed the tutorial correctly. Also we have compared our code to the tutorial and can't see where the disconnect is. Any ideas? At this point a solution that works instead of what is in the tutorial will be fine as well.
After looking on stackoverflow for really long i could not find an answer to my question, so that's why i am asking it instead!
There's a strange white part between my navigation bar and main container, which i tested by just typing a under the bar
This is my code:
body, html {
width: 100%;
height: 100%;
overflow: hidden;
}
body {
background-color: gray;
}
#wrapper {
margin: 32px 160px 0 160px;
background-color: white;
height: 90%;
}
#nav {
background-color: #48D1CC;
margin: 0;
padding: 0;
}
#nav ul li {
margin: -7px 4px 1px 0;
background-color: #48D1CC;
width: 19.5%;
height: 42px;
display: inline-block;
text-decoration: none;
text-align: center;
color: black;
}
#nav a {
line-height: 42px;
font-family: arial, serif;
font-size: 20px;
}
#nav ul li:hover {
background-color: #40E0D0;
}
#right {
margin: 0;
width: 15%;
height: 10px;
color: black;
}
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="UTF-8"/>
<meta name="description" content="A test homepage"/>
<meta name="keyword" content="This is a few test key words"/>
<meta name="robots" content="index,follow"/>
<link rel="stylesheet" href="style.css"/>
<link rel="icon" href="favicon.ico"/>
</head>
<body>
<div id="wrapper">
<div id="nav">
<ul>
<li>Home</li>
<li>Help</li>
<li>Contact</li>
<li>Forum</li>
<li>Info</li>
</ul>
</div>
a
<noscript>Please enable JavaScript, you have it disabled</noscript>
</div>
</body>
</html>
I am not sure why this happens, so some help would be great to have.
Your ul has a 16px bottom margin
#nav ul {
margin-bottom: 16px;
}
NOTE the next time you face a similar problem try using Chrome Dev Tools (prssing f12) or FireBug to analyze the elements with an unexpected behaviour
Your <ul> tag is adding padding by default. Override it by adding:
ul{
margin-bottom: -1px;
}
I am working with a school project and try to do remake a webbsite. Is there someone who knows how I can put my EA logo in the top left corner without moving the navigation menu?
Here is the html:
<html>
<head>
<link rel = "stylesheet" type = "text/css" href = "css/style.css">
<title>FIFA 16</title>
<meta charset="utf-8">
</head>
<body>
<div class="nav">
<div class="ealogo"><img src="img/ealogo.png" alt="ealogo"</div>
FIFA
ULTIMATE TEAM™
NYHETER
MER
KÖP
</div>
</body>
</html>
Css:
body {
margin: 0;
padding: 0;
background-color: #fff;
}
.nav {
padding: 15px;
text-align: center;
font-family: lato;
font-size: 20px;
color: white;
background-color: black;
width: 100%;
}
a {
text-decoration: none;
color: white;
margin: 25px;
}
.fifafont {
font-family: fifawelcome;
font-size: 30px;
}
All I did was give the logo an id and float left with a margin to correct the padding so it is in the top left corner.
#ealogo{
margin-left: -25px;
margin-top: -15px;
float: left;
}
JSFiddle
i put online my website but if i watch it from smartphone or small device every elements cant view in a responsive way! this fact never happened to me. Why?
In staging mode i cant view this website in a responsive mode, than i suppose this is not a js problem but a css error
body {
width: 100%;
margin: 0;
background: #fff;
}
a {
color: blue;
text-decoration: line-through;
}
p {
color: blue;
font-size: 14px;
font-family: 'Montserrat', sans-serif;
}
.white-contact {
background-color: #fff;
padding: 20px;
margin-top: 30px;
}
a:hover {
color: black;
text-decoration: underline;
}
h1 {
position: absolute;
z-index: 998 !important;
/* margin: 0 auto; */
width: 100%;
text-align: center;
height: 100vh;
line-height: 75vh;
font-size: 13em;
color: #fff;
font-family: 'Condiment', cursive;
}
h2 {
font-family: 'Montserrat', sans-serif;
font-size: 20px;
letter-spacing: 2px;
color: blue;
text-transform: uppercase;
text-decoration: line-through;
}
h2.last {
color: blue !important;
}
li {
list-style: none;
color: blue;
font-family: 'Montserrat', sans-serif;
margin-bottom: 2px;
}
ul.do {
padding-left: 0px;
}
h3 {
font-family: 'Montserrat', sans-serif;
font-size: 15px;
letter-spacing: 2px;
color: blue;
}
h3.top-left {
position: fixed;
left: 0px;
padding-left: 30px;
width: 49%;
z-index: 999;
}
h3.top-right {
position: fixed;
right: 0px;
padding-left: 30px;
width: 49%;
z-index: 999;
text-align: right;
padding-right: 30px;
}
h3.bottom-left {
position: fixed;
z-index: 999;
padding-left: 30px;
bottom: 0px;
}
h3.bottom-right {
bottom: 0px;
position: fixed;
text-align: right;
padding-right: 30px;
z-index: 999;
width: 49%;
right: 0px;
}
.top {
}
.bottom {
}
a.social {
text-decoration: line-through;
}
a.social:hover {
text-decoration: underline;
color: yellow;
}
canvas#canv {
z-index: 1;
position: absolute;
}
.mekis-img {
width: 100%;
position: absolute;
z-index: 1;
text-align: center;
height: 100vh;
margin-top: 10%;
}
section{
margin-top: 50px;
}
section.top {
height: 100vh;
margin-top: 0px;
border-bottom: 1px solid blue;
}
section.second {
height: 100vh;
/* background-image: url('http://i.giphy.com/3oEdvcNIvJXteYUEXm.gif');*/
background-position: center;
background-repeat: no-repeat;
background-size: 50%;
}
section.third {
height: 100vh;
background-image: url('http://i.giphy.com/Dc5JEeUuPosN2.gif');
background-position: center;
background-repeat: no-repeat;
background-size: 100%;
}
section.last {
height: 100vh;
background-image: url('http://static2.blog.corriereobjects.it/seigradi/wp-content/blogs.dir/70/files/2013/02/div1.gif');
background-position: center;
background-repeat: no-repeat;
background-size: 100%;
}
.twitter {
text-align: center;
height: 100vh;
/* line-height: 50vh; */
font-size: 1em;
text-transform: uppercase;
font-weight: 900;
padding-top: 10%;
}
}
img.gif-second {
position: absolute;
right: 60px;
opacity: 0.8;
margin-top: -40%;
z-index: -1;
}
.container {
width: 90%;
margin:0 auto;
padding-left: 20px;
padding-right: 20px;
padding-top: 50px;
}
<!doctype html>
<!-- CSS -->
<title>Mekis | Official Website</title>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta name="description" content="Mekis Official Website | Producer , Dj Brescia, Italy | Electro, Reggae, Dub, Drum and Bass, Big Beat | Electro vs Rock with Joao at Lio Bar, Road to Zion Electro Dub, Jungle Massive," />
<meta name="keywords" content="brescia dj, mekisdj, mekis, unnu can wid mi, drop 39, djset, electro, rock, dub, reggae, alternative, producer, electro vs rock, road to zion, sound design" />
<!--[if lte IE 8]><script src="css/ie/html5shiv.js"></script><![endif]-->
<link rel='stylesheet' id='default-style-css' href='style.css' type='text/css' media='all' />
<script type='text/javascript' src='https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.js'></script>
<script type='text/javascript' src='viewport.js'></script>
<!-- FONTS -->
<link href='http://fonts.googleapis.com/css?family=Montserrat:400,700' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Lato:300,400,700' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Condiment' rel='stylesheet' type='text/css'>
<!-- FONTS -->
</head>
<body>
<section class="top">
<canvas id='canv'>
</canvas>
<div class="top">
<h3 class="top-left">Mekis / msdvc</h3>
<h3 class="top-right">Official Web</h3>
</div>
<audio loop autoplay>
<source src="http://static1.grsites.com/archive/sounds/vehicle/vehicle005.mp3" type="audio/mpeg">
</audio>
<div class="mekis-img">
<img src="img/mekis.png" alt="mekis">
</div>
<div="bottom">
<h3 class="bottom-left"><a class="social" href="https://www.facebook.com/mekisdj/" target="blank">Facebook</a></h3>
<h3 class="bottom-right"><a class="social" href="https://instagram.com/mekisdj/" target="blank">Instagram</a></h3>
</div>
</section>
<section class="second">
<div class="container">
<h2>Ciao! My name is Mekis.<br/>Everyday i do some works</h2>
<h3>What i do?</h3>
<ul class="do">
<li>President at Cockroach Int. Production</li>
<li>Music Production</li>
<li>Dj and Producer</li>
<li>Sound Designer</li>
<li>Professor for Laba for Sound Design and Computer Graphic</li>
<li>Web at Adoratorio Creative Collective</li>
</ul>
<p>-</p>
<h3>What i love</h3>
<ul class="do">
<li>Music and Sound FX</li>
<li>Reggae</li>
<li>Pizza with Salami</li>
<li>Friday Night</li>
</ul>
<p>-</p>
<h3>What i hate</h3>
<ul class="do">
<li>Conventional Design and Music Production</li>
<li>Mostarda</li>
</ul>
<!-- <img class="gif-second" src="img/mekis.png"> -->
</div>
</section>
<section class="third">
<!-- <div class="container">
<h2>I love Twitter</h2>
<div class="twitter">
<p class="twitter">tweet with me. hashtag #mekisdj (for music) or #msdvc (for web)</p>
</div>
</div> -->
</section>
<section class="last">
<div class="container">
<h2 class="last">Ok. Say hello!</h2>
<div class="white-contact">
<h3>Send me email for booking</h3>
<p>Yes. I love Gmail<br/>
massimo.devicienti[at]gmail.com<p>
</div>
<div class="white-contact">
<h3>Press Kit</h3>
<p>Do you want more info about my projects?<br/>
click and download my press kit<p><br/>
<small>in coming</small>
</div>
</div>
</section>
<!--
Variation of Screwed:
http://codepen.io/tmrDevelops/pen/xwBYvN
!-->
</body>
<script type='text/javascript' src='script.js'></script>
<!--<script type='text/javascript' src='preloader.js'></script>-->
</html>
link for website
enter link description here
you forgot for responsive view as
<meta name="viewport" content="width=device-width, initial-scale=1">
the issue is mentioning values in px. These fixed values wouldn't change on resolution change. whereas values like em and % would change on resolution change. Also, we have responsive frameworks to do the task for us. We need to make use of media queries.
Also we need to add the meta tag
<meta name="viewport" content="width=device-width, initial-scale=1">
I have issue with background for element article. I use :nth-child(n), but they do not work correctly at my localhost. When I same code place to jsfiddle all is ok.
Code at my local is following:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>:: Nove pokusy s Yablkem ::</title>
<link rel="stylesheet" href="/ath/css/normalize.css">
<link rel="stylesheet" href="/css/yablko.css">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<article>Jsem ve středě?</article>
<article>Všichni co se moc ptají se nic nedozví...</article>
<article>Marmelada</article>
<article>Sýrové kuličky || Menu</article>
</body>
</html>
CSS (yablko.css)
html, body {
height: 100%;
}
body {
padding: 1em;
margin: 0;
background: orange;
font-size: 20px;
display: flex;
align-items: center;
justify-content: baseline;
justify-content: center;
flex-direction: row;
}
article {
padding: 1.2em;
background: #336dd1;
border-radius: .8em;
margin: 5px;
}
article:nth-child(1) { background: #888; }
article:nth-child(2) { background: #ccd; }
article:nth-child(3) { background: #333; font-size: 10px; }
article:nth-child(4) { background: #aaa; font-size: 30px; }
Image from local (bad result):
Image from jsfiddle (ok result):
Can I ask for help? Thanks