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.
Related
I'm trying to replicate a snack bar box in css to practice some things I've learned in a tutorial. I have two div items inside another div ("10" and "bars") that I'm trying to get to stack. But they just sit next to each other.
Here is my code:
/*Color Palette
lara green: 769A30;
Lara red: E63A3E;
Lara tan: F0CD92;
Lara brown: 612D22;
*/
/*GLOBAL STYLE
------------------------------*/
body {
background: #769A30;
}
#font-face {
font-family: 'Akzidenz';
src: url('Akzidenz Grotesk Black.ttf') format('truetype');
}
h1, h2 {
color: #F0CD92;
font-family: 'Akzidenz';
}
/*HEADER
------------------------------*/
.headerSection {
text-align: center;
background: #612D22;
margin: 0px;
padding: 0px;
height: 100px;
}
.headerDiv {
display: inline-block;
text-align: center;
background: red;
height: 100px;
width: 100px;
line-height: 100px;
}
#middleDiv {
display: inline-block;
}
.middleSubDiv {
text-align: center;
display: inline-block;
background: #E63A3E;
height: 50px;
width: 100px;
line-height: 50px;
}
.topH1 {
margin: 0px;
padding: 0px;
}
.topH2 {
margin: 0px;
padding: 0px;
}
<!DOCTYPE html>
<html lang = "en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title> Larabar | Apple Pie</title>
<link rel="stylesheet" href="css/styles.css">
</head>
<body>
<div class="headerSection"><!--
--><div class="headerDiv"><!--
---><h1 class="topH1">value<h1><!--
--></div><!--
--><div id="middleDiv"><!--
---><div class ="middleSubDiv"><!--
----><h2 class="topH2">10<h2><!--
---></div><!--
---><div class ="middleSubDiv"><!--
----><h2 class="topH2">bars<h2><!--
---></div><!--
--></div><!--
--><div class="headerDiv"><!--
--><h1 class="topH1">pack<h1><!--
--></div><!--
--></div>
<footer>
</footer>
</body>
</html>
If I remove "display: inline-block;" from the middleSubDiv class (the two divs that are supposed to stack) they DO stack correctly, but then the divs right next to them are pushed down. Can someone help me understand why this is? Here is a picture of what I'm talking about
Thank you, any help is greatly appreciated!
Remove the display: inline-block; from the .middleSubDiv and add vertical-align: bottom; to the .headerDiv.
/*Color Palette
lara green: 769A30;
Lara red: E63A3E;
Lara tan: F0CD92;
Lara brown: 612D22;
*/
/*GLOBAL STYLE
------------------------------*/
body {
background: #769A30;
}
#font-face {
font-family: 'Akzidenz';
src: url('Akzidenz Grotesk Black.ttf') format('truetype');
}
h1, h2 {
color: #F0CD92;
font-family: 'Akzidenz';
}
/*HEADER
------------------------------*/
.headerSection {
text-align: center;
background: #612D22;
margin: 0px;
padding: 0px;
height: 100px;
}
.headerDiv {
display: inline-block;
text-align: center;
background: red;
height: 100px;
width: 100px;
line-height: 100px;
vertical-align: bottom;
}
#middleDiv {
display: inline-block;
}
.middleSubDiv {
text-align: center;
/* display: inline-block;*/
background: #E63A3E;
height: 50px;
width: 100px;
line-height: 50px;
}
.topH1 {
margin: 0px;
padding: 0px;
}
.topH2 {
margin: 0px;
padding: 0px;
}
<!DOCTYPE html>
<html lang = "en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title> Larabar | Apple Pie</title>
<link rel="stylesheet" href="css/styles.css">
</head>
<body>
<div class="headerSection"><!--
--><div class="headerDiv"><!--
---><h1 class="topH1">value<h1><!--
--></div><!--
--><div id="middleDiv"><!--
---><div class ="middleSubDiv"><!--
----><h2 class="topH2">10<h2><!--
---></div><!--
---><div class ="middleSubDiv"><!--
----><h2 class="topH2">bars<h2><!--
---></div><!--
--></div><!--
--><div class="headerDiv"><!--
--><h1 class="topH1">pack<h1><!--
--></div><!--
--></div>
<footer>
</footer>
</body>
</html>
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">
This question already has answers here:
How to position text over an image with CSS
(8 answers)
Closed 7 years ago.
I'm creating a webpage for my photography and basically I'm trying to create div boxes that contain the images, with a div for text displayed over the image. For some reason I cannot work out how to make the text div position from the image div. For example, currently "top: 8%;" positions the text 8% from the top of the page not the top of the image div, despite the fact that the text div is withing the image div in the code and positioned relatively.
HTML:
<!doctype html>
<html class="no-js" lang="en">
<head>
<meta charset="utf-8">
<title>Josh Graham, amateur photographer</title>
<meta name="description" content="Photography by Josh Graham">
<meta name="author" content="Josh Graham">
<!-- CSS Code -->
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="css/reset.css">
<link rel="icon"
type="image/png"
href="images/favicon.png">
<!-- JS Code -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="BROKENjs/script.js"></script>
</head>
<body>
<div id="wrapper">
<table id=menu >
<tr>
<td id=josh-graham>josh-graham.com</td>
<td>Home</td>
<td>About</td>
<td>Contact</td>
</tr>
</table>
<div id="home" data-speed="10" data-type="background">
<div></div>
</div>
<div id="ukrainetext">
<img id="ukraine" src="images/ukraine.jpg"/>
<p id="ukrainetextp">Chernobyl,<br>Ukraine</p>
</div>
<div id="cornwalltext">
<img id="cornwall" src="images/cornwall.jpg"/>
<p id="cornwalltextp">Cornwall,<br>England</p>
</div>
<div id="moscowtext">
<img id="moscow" src="images/moscow.jpg"/>
<p id="moscowtextp">Moscow,<br>Russia</p>
</div>
</div>
</body>
</html>
CSS:
html, body{
margin:0;
padding:0;
height:100%;
width:100%;
background: #3e3e3e;
}
#wrapper {
min-width: 640px;
margin-bottom: 0;
}
#menu {
background: #5d5d5d;
font-family: "Kozuka Gothic Pro";
font-size: 20px;
font-weight: lighter;
color: white;
height: 50px;
margin: 0 auto;
margin-bottom: 0.3%;
width: 100%;
max-width: 1920px;
min-width:640px;
position: relative;
z-index:99;
}
table td {
padding-top: 13px;
}
#josh-graham {
font-size:25px;
padding-top: 6px;
padding-left: 5px;
}
#ukrainetext {
position: relative;
}
#ukrainetextp {
font-family: "Kozuka Gothic Pro";
font-size: 25px;
font-weight: lighter;
color: white;
position: absolute;
left: 80%;
margin-top: 6%;
}
#ukraine {
height: auto;
margin: 0.3% auto;
width: 100%;
max-width: 1920px;
position: relative;
float: left;
}
#cornwalltext {
position: relative;
}
#cornwalltextp {
font-family: "Kozuka Gothic Pro";
font-size: 25px;
font-weight: lighter;
color: white;
position: absolute;
left: 80%;
margin-top: 25%;
}
#cornwall {
height: auto;
margin: 0.3% auto;
width: 100%;
max-width: 1920px;
position: relative;
float:left;
}
#moscowtext {
position: relative;
}
#moscowtextp {
font-family: "Kozuka Gothic Pro";
font-size: 25px;
font-weight: lighter;
color: white;
position: absolute;
left: 80%;
margin-top: 43.5%;
}
#moscow {
height: auto;
margin: 0.3% auto;
margin-bottom: 0.3%;
width: 100%;
max-width: 1920px;
position: relative;
float:left;
}
This is a frequently asked question. Your answer: How to position text over an image in css . Jsfiddle: http://jsfiddle.net/EgLKV/3/
HTML:
<div id="container">
<img id="image" src="http://www.noao.edu/image_gallery/images/d4/androa.jpg"/>
<p id="text">
Hello World!
</p>
</div>
CSS:
#container
{
height:400px;
width:400px;
position:relative;
}
#image
{
position:absolute;
left:0;
top:0;
}
#text
{
z-index:100;
position:absolute;
color:white;
font-size:24px;
font-weight:bold;
left:150px;
top:350px;
}
Just set the z-index in your CSS. Higher numbered elements appear above lower numbered elements. While you can just give elements contiguous whole numbers; generally, you'll want to provide large gaps between lower and higher elements in case you need to add additional elements or change the layering of elements.
I had a problem with border-radius in webkit browsers and found the solution at the following URL:
How to make CSS3 rounded corners hide overflow in Chrome/Opera
but iam using a another element with position: absolute; inside this
now I need to make the caption with rounded border too, but do not know how
note: i can't use another border-radius in caption, because this will have an animation
see the code with:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Problem</title>
<style type="text/css">
img {
border: 0;
}
a {
text-decoration: none;
}
.wrap-events {
float: left;
position: relative;
width: 500px;
height: 250px;
}
.events {
overflow: hidden;
-webkit-border-radius: 50px;
-moz-border-radius: 50px;
border-radius: 50px;
}
.caption {
position: absolute;
width: 100%;
bottom: 0;
color: #FFFFFF;
background-color: #151515;
font: 12px "Arial", Helvetica, sans-serif;
opacity: 0.6;
border-radius: 0 0 50px 50px; /* add border-radius to caption */
}
.caption p {
padding: 10px;
}
</style>
</head>
<body>
<div class="wrap-events">
<div class="events">
<a href="#">
<img src="http://www.cg-auto.com.br/forum/imagens/imagens_news/26c4dc4359edcfd4c6871ee1fa958539.jpg" alt="image">
</a>
<div class="caption">
<p>This is a caption</p>
</div>
</div>
</div>
<button id="slide">Slide It!</button>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript">
$('#slide').click(function(){
$('.caption').hide().slideDown(2000);
});
</script>
</body>
</html>
cheers
That is a problem for now I think. May I suggest you use fadeIn() Instead. See a demo
I have a web page with large div(for example white) and another div that is follows the previous one. The problem is that if white block is big enough and it height is almost or even bigger than the browser window(and scroll bars appear), the red block is in the bottom of the page there is still gap between red div and end of the window in Firefox/Safari/Opera:
But in Explorer/Chrome everything is ok:
My code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<title></title>
<style type="text/css">
root { display: block; }
html, body{
padding: 0;
margin: 0;
width: 100%;
height: 100%;
font-family: Tahoma;
background-color: blue ;
}
#container{
position: absolute;
left: 50%;
width: 961px;
height: 100%;
margin-left: -480px;
}
.infContainer{
position: relative;
padding-left: 19px;
background-color: white;
color: #434343;
}
div#footerCopyright{
position: relative;
bottom: 15px;
font-size: 0.75em;
background-color: red;
}
div#bottomFooterDivider{
height: 50px;
}
div#pageBottomDivider{
height: 35px;
}
</style>
</head>
<body>
<div id="container">
<div id="mainBlock" class="infContainer">
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/><br/>
</div>
<div id="footerCopyright">
<div id="bottomFooterDivider"></div>
</div>
</div>
</body>
</html>
How to solve this problem and have the same page without blue gap in Firefox/Opera/Safari.
Actual page:
http://109.74.203.141/stack/1/tmp.html
Your footerCopyright div is set to position: relative; bottom: 15px;
When I set the bottom to 0 it lines up on the bottom in FF.