I created navbar ( had some help to do it ) that when the user scroll down the navbar will move with the page ( fixed position ) , but when i add a photo to the second section and when the i scrolled down the image goes over the navbar , i still dont know why !! i read that you need to add something like this ( z-index -100 ) , but i did not know whereto put it or if that will work , hope you guys help me .
src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"
var topNav = document.getElementById("topNav"),
stop = topNav.offsetTop,
docBody = document.documentElement || document.body.parentNode || document.body,
hasOffset = window.pageYOffset !== undefined,
scrollTop;
window.onscroll = function(e) {
scrollTop = hasOffset ? window.pageYOffset : docBody.scrollTop;
if (scrollTop >= stop) {
topNav.className = 'sticky';
} else {
topNav.className = '';
}
}
$("#slideshow > div:gt(0)").hide();
setInterval(function() {
$('#slideshow > div:first')
.fadeOut(1000)
.next()
.fadeIn(1000)
.end()
.appendTo('#slideshow');
},
.sticky {
position: fixed;
top: 0;
left: 0;
width: 100%;
}
/* fisrt section */
header {
font-family: "Comic Sans MS", cursive, sans-serif;
}
header {
background-image: url("pic19.jpg");
color: white;
text-align: left;
width:auto;
height:450px;
padding-top: 50px;
}
.L{
width:700px;
height:auto;
}
p.head{
font-family: Impact, Charcoal, sans-serif;
color: white;
font-size:50px;
padding-top: 10px;
padding-right: 0px;
padding-bottom: 20px;
padding-left: 45px;
}
p.L1{
font-family: Impact, Charcoal, sans-serif;
color: white;
font-size:20px;
top: 0px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 60px;
width:450px;
}
img{
position: absolute;
right: 90px;
top: 90px;
width: 42%;
height: auto;
box-shadow: 0 0 20px rgba(0,0,0,0.4);
}
/* seconed section */
.S2{
position:static;
background-image: url("pic16.jpg");
width: auto;
height:450px;
float: center;
padding: 10px;
color:white;
}
h1{
padding-bottom:0px;
padding-top:50px;
padding-left:70px;
font-size:30px;
}
p.par{
padding-bottom:0px;
padding-top:3px;
padding-left:100px;
width:550px;
font-size:20px;
}
img.p2{
top:660px;
left:700px;
right:25px;
width: 42%;
height: auto;
}
#H2{
background-image: url("pic16.jpg");
color: white;
text-align: left;
height:450px;
padding-top: 50px;
width:auto;
}
#footer {
background-image: url("pic17.jpg");
color: white;
clear: both;
text-align: center;
padding: 100px;
}
/* navabar */
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}
li {
float: left;
border-right: 1px solid #bbb;
}
li.logo {
border-right: none;
font-family: Impact, Charcoal, sans-serif;
color: white;
font-size: 50px;
margin-top: 5px;
padding-left: 30px;
}
li:last-child {
border-right: none;
}
li a {
display: block;
color: white;
text-align: center;
padding: 25px 30px;
text-decoration: none;
font-size: 15px;
}
li a:hover:not(.active) {
background-color: #111;
}
.active {
background-color: #4CAF50;
}
<title>New Technology Planet</title>
<head>
<link rel="stylesheet" href="home.css">
</head>
<body>
<!-- Header of the page -->
<header>
<section class="L">
<p class="head">
New Technology Planet
</p>
<p class="L1">
We Hosts TeamSpeak 3 servers & websites <br><br>
"Our Goal Is Presenting To You The Best Services That We Can Do And The Best Prices That You Will Find"<br><br>
Teamspeak 3 is your new way to communicate with your friends and your employee
</p>
</section>
<div id="slideshow">
<div>
<img src="ts.png">
</div>
<div>
<img src="ts3.png">
</div>
<div>
<img src="ts4.png">
</div>
</div>
</header>
<!-- Header of the page >
<!-- navagattor start code -->
<nav role='navigation' id="topNav">
<ul>
<li class="logo">NewTecPlanet</li>
<ul style="float:right;list-style-type:none;">
<li><a class="active" href="#home">Home</a></li>
<li>News|Updates</li>
<li>Products</li>
<li>SignUp | Login</li>
<li>About US</li>
<li>Contact Us</li>
</ul>
</ul>
</nav>
<!-- navagattor end code -->
<!-- second section or part1 start -->
<div class="S2">
<section class="L">
<h1>What is TeamSpeak 3 ?</h1>
<p class="par">TeamSpeak is proprietary voice-over-Internet Protocol (VoIP) software that allows computer users to speak on a chat channel with fellow computer users, much like a telephone conference call. A TeamSpeak user will often wear a headset with a microphone. Users use the TeamSpeak client software to connect to a TeamSpeak server of their choice, from there they can join chat channels.</p>
<p class="par">The target audience for TeamSpeak is gamers, who can use the software to communicate with other players on the same team of a multiplayer game. Communicating by voice gives a competitive advantage by allowing players to keep their hands on the controls.</p>
</section>
<img class="p2" src="pic20.png">
</div>
<!-- second section or part1 end -->
<!-- theird section -->
<!-- the end of the third section >
< !-- final part -->
<div id="footer">
New Technology Planet
</div>
<!-- final part end -->
You can put the z-index for nav as follow:
nav {
z-index: 999;
}
Edit:
Use the following to fix the movement of content:
img.p2{
padding-top: 50px;
left: 700px;
right: 25px;
width: 42%;
height: auto;
position: static;
}
section.L{
float: left;
}
Related
So far, I have managed to get my footer to always stick to the bottom, however, I have been struggling to get the content or images on my webpage to push the footer down. I have been trying absolute, fixed, relative positions for the footer but to no avail as the content in the class "container2" continues to go under the footer. It also shouldn't be sticky footer similar to the nav bar but like a natural footer where it is pushed down by content.
HTML/CSS: https://jsfiddle.net/jof0hzhc/2/
HTML
<!DOCTYPE html>
<html lang="en" class="app">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>ResponsiveNav</title>
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script type="text/javascript" src="js/script.js"> </script>
</head>
<body class="bg2">
<div class="wrapper">
<header>
<nav>
<div class="menu-icon">
<i class="fa fa-bars fa-2x"></i>
</div>
<div class="logo">
ResponsiveNav
</div>
<div class="menu">
<ul>
<li>Home</li> <!--Classifying the button as "activepage" will allow the button to be red when the user is on the page.-->
<li>Current page</li>
<li>About Us</li>
<li>Contact</li>
</ul>
</div>
</nav>
</header>
<section class="content">
<p class="apphead">Heading</p>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<div class="container2">
<p class="apptext">Sub-heading</p>
<div class="games">
<img src="images/1.png">
<img src="images/2.jpg">
<img src="images/3.jpg">
<img src="images/4.jpg">
<img src="images/5.jpg">
<img src="images/6.jpg">
</div>
<br><br><br><br><br><br><br><br>
</div>
</section>
</div>
<footer>
<p class="foot">
Footer text. <br>
__________________________________________________________________________________________________ <br> <br>
About us
|
Contact us <br>
__________________________________________________________________________________________________
<section>
<p class="foot">Social Media</p>
<span class="social">
<img src="images/mail.png" alt="Mail" width="50px" height="50px"/>
<img src="images/facebook.png" alt="Facebook" width="50px" height="50px"/>
<img src="images/twitter.png" alt="Twitter" width="50px" height="50px"/>
</span>
</section>
<section>
<h3>All rights reserved<br></h3>
</section>
</p>
</footer>
</body>
</html>
CSS
html, body {
margin: 0;
padding: 0;
width: 98%;
background-color: black;
min-height: 100%;
}
body {
font-family: "Helvetica Neue",sans-serif; /*Keep this font or hamburger disappears*/
font-weight: lighter;
}
header {
width: 98%;
height: 13vh;
}
li>a{display:;}
li>a:hover, /*li hover makes the area around the list of text have a block of color around it when you hover over the text*/
li>a:focus{color:red;text-decoration:underline;} /*li focus is when you select the element, the element gets into a focus*/
footer { /*How do I even make the footer always stick at the very bottom no wonder the dimensions of the browser?*/
width:100%;
position:absolute;
height:300px;
font-size: 15px;
margin-left:auto;
margin-right:auto;
text-align:center;
background-color:black;
border-width: 10px;
color: white;
}
p {
color: black;
position: relative;
margin: 5px;
padding: 10px;
}
a { /*General styling for links to other pages or websites*/
text-decoration:none;
position:relative;
font-family: Trebuchet MS, sans-serif;
}
h2 { /*Styling for site title*/
font-size: 50px;
text-align:left;
color:white;
margin: 20px;
font-family: courier;
}
h3 {
font-size:20px;
padding-left:20px;
color: white;
}
.content { /*the main container that consists of most of the existing content*/
margin-top:5px;
width:100%;
height: 1400px;
margin-left: auto;
margin-right: auto;
}
.logo {
line-height: 60px;
position: fixed;
float: left;
margin: 16px 46px;
color: #fff;
font-weight: bold;
font-size: 20px;
letter-spacing: 2px;
}
nav {
position: fixed;
width: 100%;
line-height: 60px;
z-index: 1; /*Allows for the navigation bar to stack on top of content and not appear as it overlaps*/
}
nav ul {
line-height: 60px;
list-style: none;
background: black;
overflow: hidden;
color: #fff;
padding: 0;
text-align: right;
margin: 0;
padding-right: 40px;
transition: 1s;
}
nav.black ul {
background: orange;
opacity: 10;
}
nav ul li {
display: inline-block;
padding: 16px 40px;;
}
nav ul li a {
text-decoration: none;
color: white;
font-size: 16px;
}
.menu-icon {
line-height: 60px;
width: 100%;
background: #000;
text-align: right;
box-sizing: border-box;
padding: 15px 24px;
cursor: pointer;
color: orange;
display: none;
}
.activepage {
font-size: 25px;
color: red;
text-decoration: underline;
}
.welcome {
font-family: courier;
}
.inquiry {
font-size: 17px;
color: white;
}
.container2 {
background-color: darkgrey;
padding: 10px;
margin: 0;
width: 97.8%;
height: 1000px;
z-index: 0;
position:absolute;
overflow:hidden;
}
p.heading {
font-size: 25px;
font-weight: bold;
font-family: courier;
}
.foot {
color: white;
}
.bg2 {
background-image:url("hex.jpg");
height: 550px;
width: 102%;
}
.apphead {
color: white;
font-size: 100px;
font-family: courier;
}
.apptext {
color:white;
font-size: 45px;
font-weight: bold;
font-family: courier;
}
.games {
margin:0;
position:relative;
border:solid white;
}
.games img {
width: 640px;
height:250px;
padding: 5px;
transition: 1s;
}
.games img:hover {
transform: scale(1.1);
}
.item img{
display:block;
}
#media(max-width: 786px) {
.logo {
position: fixed;
top: 0;
margin-top: 16px;
}
nav ul {
max-height: 0px;
background: #000;
}
nav.black ul {
background: #000;
}
.showing {
max-height: 34em;
}
nav ul li {
box-sizing: border-box;
width: 100%;
padding: 24px;
text-align: center;
}
.menu-icon {
display: block;
}
}
First off, I am a bit confused why you are using the <br> tag so much, but it almost looks like you are trying to space the elements with them. You may want to use padding or margin to do that.
Lastly, I think what you are looking for is position: fixed. Try this:
footer {
width:100%;
position: fixed; /* use fixed instead of absolute */
bottom: 0; /* set bottom to 0 */
height:300px;
font-size: 15px;
margin-left:auto;
margin-right:auto;
text-align:center;
background-color:black;
border-width: 10px;
color: white;
}
You have several problems in your css. The main problem for your content not to appear is that you're using overflow: hidden; in container2 and height: 1000px; this causes everything that exceeds 1000px won't be show. Try removing overflow: hidden or overflow: x-scroll.
This is the documentation for the overflow property, I suggest you read it for a better understanding of your problem. https://developer.mozilla.org/en-US/docs/Web/CSS/overflow
There are some things that you should change 1. you are using absolute position outside relative 2. using absolute values for hight is not good practice 3. is always better use padding and margin to make space ect. Keep fixed position only for header nav and comment out all fixed hight values(px)and absolute and relative positioning to start with. Absolute position should be inside relative if there is not special reason not to do that. To get out from main problem start with footer and container2. But there is lot more to fix.
You need set a min-height for html, body {min-height: 100vh;}
Set footer as position: fixed; bottom: 0; left: 0;
Hopefully this will help you.
So below is the code for my css file.
#-webkit-keyframes change {
83.3%,95.96% {transform:translate3d(0,-10%,0);}
}
body {
background-color: #3A457C;
}
.nav ul {
list-style: none;
background-color: #444;
text-align: center;
padding: 0;
margin: 0;
}
.nav li {
font-family: 'Oswald', sans-serif;
font-size: 1.2em;
line-height: 40px;
height: 40px;
border-bottom: 1px solid #888;
}
.nav a {
text-decoration: none;
color: #fff;
display: block;
transition: .3s background-color;
}
.nav a:hover {
background-color: #fff;
color: #444;
}
.nav a.active {
background-color: #fff;
color: #444;
cursor: default;
}
#media screen and (min-width: 600px) {
.nav li {
width: 120px;
border-bottom: none;
height: 50px;
line-height: 50px;
font-size: 1.4em;
}
/* Option 1 - Display Inline */
.nav li {
display: inline-block;
margin-right: -4px;
}
/* Options 2 - Float
.nav li {
float: left;
}
.nav ul {
overflow: auto;
width: 600px;
margin: 0 auto;
}
.nav {
background-color: #444;
}
*/
}
h1, h2, p {
font-family: 'Ubuntu', sans-serif;
color: white;
}
h1 {
font-size: 150px;
text-align: center;
-webkit-animation-name: change;
animation-duration: .5s;
line-height: 300px;
}
h2 {
font-size: 50px;
text-align: center;
}
p {
margin-left: 500px;
margin-right: 500px;
font-size: 22px;
}
.header {
cursor: pointer;
background-image: url("http://www.lib.usf.edu/tutoring/files/2015/08/Tutoring-main-banner-02.png");
background-position: center center;
height: 325px;
line-height:0px;
}
/*
#left {
position: fixed;
top: 392px;
left: 0px;
width: 25%;
height: 100%;
background-color: white;
z-index: 1;
}
#top {
position: fixed;
width: 100%;
top: 0px;
left: 0px;
right: 0px;
height:8%;
background-color: white;
}
#hardLeft {
position: fixed;
width: .35%;
top:0px;
left: 0px;
right: 0px;
height: 100%;
background-color: white;
}
#hardRight {
position: right-side;
background-color: white;
}*/
And below right now is the code for the html file
<!DOCTYPE html>
<html>
<div class="nav">
<ul>
<li class = "home"> <a class = "active" href = "J:\Website1\html\home\index.html">Home</a></li>
<li class = "about"> About</li>
</ul>
</div>
<head>
<title>Home - Tutor</title>
<link href = "J:\Website1\css\indexStyle.css" type = "text/css" rel = "stylesheet"/>
<link href="https://fonts.googleapis.com/css?family=Ubuntu" rel="stylesheet">
</head>
<body>
<div id = "background" onclick = 'window.location.href="J:\\Website1\\html\\home\\index.html"'>
<div class = "header">
<h1>Trouble? Tutor.</h1>
</div>
</div>
<h2>About</h2>
<p>My name is John Antonio Anselmo, and I currently go to Battlefield High School in Haymarket, Virginia. I'm currently enlisted in Battlefield's IT Program with a plan to study Cyber Security, Computer Science,
and Business at the Massachusetts Institute of Technology (MIT), or Virginia Tech (VT). I have exceeded in the maths and sciences since a very young age, and continue to.</p>
</body>
</html>
The problem is, as I keep increasing the h1 font size, the header keeps getting farther and farther from the top of the page, I want to keep the h1 font size at 150px, but have the header right at the top of the page. It looks like this but I want it to look like this, except I want the h1 (Trouble? Tutor.) to be 150px.
Add margin: 0; and change line-height to 1. The margin is creating the gap with the background, and the line-height is moving the text down.
#-webkit-keyframes change {
83.3%,95.96% {transform:translate3d(0,-10%,0);}
}
body {
background-color: #3A457C;
}
.nav ul {
list-style: none;
background-color: #444;
text-align: center;
padding: 0;
margin: 0;
}
.nav li {
font-family: 'Oswald', sans-serif;
font-size: 1.2em;
line-height: 40px;
height: 40px;
border-bottom: 1px solid #888;
}
.nav a {
text-decoration: none;
color: #fff;
display: block;
transition: .3s background-color;
}
.nav a:hover {
background-color: #fff;
color: #444;
}
.nav a.active {
background-color: #fff;
color: #444;
cursor: default;
}
#media screen and (min-width: 600px) {
.nav li {
width: 120px;
border-bottom: none;
height: 50px;
line-height: 50px;
font-size: 1.4em;
}
/* Option 1 - Display Inline */
.nav li {
display: inline-block;
margin-right: -4px;
}
/* Options 2 - Float
.nav li {
float: left;
}
.nav ul {
overflow: auto;
width: 600px;
margin: 0 auto;
}
.nav {
background-color: #444;
}
*/
}
h1, h2, p {
font-family: 'Ubuntu', sans-serif;
color: white;
}
h1 {
font-size:150px;
text-align: center;
-webkit-animation-name: change;
animation-duration: .5s;
line-height: 1;
margin: 0;
}
h2 {
font-size: 50px;
text-align: center;
}
p {
margin-left: 500px;
margin-right: 500px;
font-size: 22px;
}
.header {
cursor: pointer;
background-image: url("http://www.lib.usf.edu/tutoring/files/2015/08/Tutoring-main-banner-02.png");
background-position: center center;
height: 325px;
line-height:0px;
}
<html>
<div class="nav">
<ul>
<li class = "home"> <a class = "active" href = "J:\Website1\html\home\index.html">Home</a></li>
<li class = "about"> About</li>
</ul>
</div>
<head>
<title>Home - Tutor</title>
<link href = "J:\Website1\css\indexStyle.css" type = "text/css" rel = "stylesheet"/>
<link href="https://fonts.googleapis.com/css?family=Ubuntu" rel="stylesheet">
</head>
<body>
<div id = "background" onclick = 'window.location.href="J:\\Website1\\html\\home\\index.html"'>
<div class = "header">
<h1>Trouble? Tutor.</h1>
</div>
</div>
<h2>About</h2>
<p>My name is John Antonio Anselmo, and I currently go to Battlefield High School in Haymarket, Virginia. I'm currently enlisted in Battlefield's IT Program with a plan to study Cyber Security, Computer Science,
and Business at the Massachusetts Institute of Technology (MIT), or Virginia Tech (VT). I have exceeded in the maths and sciences since a very young age, and continue to.</p>
</body>
</html>
That empty space is caused by H1 Tag's default margin.
So add margin:0; to H1's style.
By the way your html code is odd.
HTML Doc should be like this.
<html>
<head></head> <!-- Header for html contains meta, title, link, etc.. -->
<body></body> <!-- Actual contents which would be printed on screen -->
</html>
So your HTML would be better like this.
<!DOCTYPE html>
<head>
<title>Home - Tutor</title>
<link href = "test.css" type = "text/css" rel = "stylesheet"/>
<link href="https://fonts.googleapis.com/css?family=Ubuntu" rel="stylesheet">
</head>
<body>
<div class="nav">
<ul>
<li class = "home"> <a class = "active" href = "J:\Website1\html\home\index.html">Home</a></li>
<li class = "about"> About</li>
</ul>
</div>
<div id = "background" onclick = 'window.location.href="J:\\Website1\\html\\home\\index.html"'>
<div class = "header">
<h1>Trouble? Tutor.</h1>
</div>
</div>
<h2>About</h2>
<p>My name is John Antonio Anselmo, and I currently go to Battlefield High School in Haymarket, Virginia. I'm currently enlisted in Battlefield's IT Program with a plan to study Cyber Security, Computer Science,
and Business at the Massachusetts Institute of Technology (MIT), or Virginia Tech (VT). I have exceeded in the maths and sciences since a very young age, and continue to.</p>
</body>
I'm making a portfolio for some projects I've worked on whilst learning to code. I've added a banner to the top of each project's webpage, but I'm having issues with a site which is unresponsive (Jubilee Austen page).
Using the Chrome Inspector tool, it says the banner is 55px tall, but it appears smaller than it does on another project page (Rogue Pickings page), where the height of the banner is also 55px. How could this be?
Jubilee Austen page
Rogue Pickings page
Does anyone know how I can fix this so that both banners appear the same height?
Thanks so much in advance!
/* ===== JUBILLEE AUSTEN ===== */
font-family: atelas;
src :url('../fonts/atelas/atelas.ttf') format('opentype');
}
/* -------- PORTFOLIO BANNER & MANAGEMENT -------- */
.back {
width: 100%;
background-color: #1D2120;
padding: 10px 0;
position: fixed;
top: 0px;
}
.div-link {
position:absolute;
width:100%;
height:100%;
top:0;
left: 0;
z-index: 1;
background-image: url('empty.gif');
}
.back-wrap {
width: 90%;
margin: auto;
}
.chevron {
margin: 0;
}
.chevron img {
width: 35px;
float: left;
margin-right: 1.5%;
}
.back-text {
margin: 0 0 0 3%;
font-family: atelas;
font-size: 6em;
color: #e2e2e2;
text-decoration: none;
line-height: 0.8;
display: none;
}
#example {
clear: both;
padding-top: 50px;
}
/* ======== ORIGINAL CSS ======== */
/* -------- START OF ORIGINAL CSS -------- */
body {
font-family: 'Source Sans Pro', sans-serif;
}
#about, #work, #contact {
height: 600px;
}
/***** GRID *****/
.full-width {
width: 1200px;
margin: 0 auto;
}
.half-width {
width: 600px;
float: left;
}
.third-width {
width: 400px;
float: left;
}
/***** HEADER *****/
header {
height: 800px;
background: url('../img/hero.png');
background-size: cover;
}
header h1 {
padding: 50px 0;
font-family: 'Lora', serif;
font-size: 30px;
color: #BBC085;
padding-left: 80px;
}
#nav {
float: right;
padding: 75px 0;
}
nav ul li {
display: inline-block;
}
nav ul li a {
text-transform: uppercase;
text-decoration: none;
font-size: 18px;
color: #828282;
padding-left: 80px;
}
header h2 {
width: 1000px;
clear: both;
font-family: 'Lora', serif;
font-size: 72px;
line-height: 80px;
color: #9a9a9a;
padding: 20px 0 0 80px;
}
header h2 span {
color: #262a2b
}
/***** ABOUT *****/
#about .full-width {
padding: 80px 0;
}
#about h2 {
font-family:'Lora', serif;
font-size: 36px;
}
#about p {
font-size: 21px;
color: #7F7F7F;
line-height: 42px;
padding-right: 50px;
}
/***** WORK *****/
#work {
background: #F9CEB7;
text-align: center;
}
#work .full-width {
padding: 115px 0;
}
#work img {
padding-bottom: 30px;
}
#work h3 {
font-size: 24px;
width: 180px;
margin: 0 auto;
}
#work p {
font-family: 'Lora', serif;
font-size: 18px;
line-height: 30px;
color: #262a2b;
padding: 0 35px;
}
/**** CONTACT *****/
#contact {
background: #EBEBEB;
}
#contact .full-width {
padding: 110px 0;
}
#contact img#contact-img {
border: 16px solid #ffffff;
}
#contact h2, #contact #email-header, #contact #socialmedia-header, #contact ul {
padding-left: 115px;
}
#contact #envelope {
padding: 0 10px 0 115px;
}
#contact h2 {
font-family: 'Lora', serif;
font-size: 36px;
}
#contact #email-header{
font-size: 32px;
font-weight: 400;
margin: -30px 0 5px 0;
}
#contact #socialmedia-header {
font-weight: bold;
font-size: 29px;
margin: 40px 0 0px 0;
}
#contact a {
text-decoration: none;
color: #C49075;
font-weight: bold;
font-size: 28px;
}
#contact ul {
list-style: none;
}
#contact ul li {
display: inline-block;
}
#contact ul img {
font-size: 32px;
padding-right: 48px;
}
/* ======== END ORIGINAL CSS ======== */
/* TABLET */
#media all and (min-width: 768px) {
}
#media screen and (min-width: 940px) {
/* -------- PORTFOLIO BANNER CSS -------- */
.chevron img {
width: 30px;
}
.back-text {
font-size: 3em;
}
}
<!doctype html>
<!-- JUBILEE AUSTEN -->
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Jubilee Austen | Developer</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/main.css">
<!-- FONTS -->
<link href='https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,700' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Lora:400,700' rel='stylesheet' type='text/css'>
</head>
<body>
<!-- PORTFOLIO BANNER -->
<section class="back">
<a class="div-link" href="../index.html"><span></span></a>
<div class="back-wrap">
<figure class="chevron">
<img src="../img/chevron-b.png" />
<img src="../img/chevron-g.png" />
<img src="../img/chevron-o.png" />
<img src="../img/chevron-r.png" />
</figure>
<p class="back-text">back</p>
</div>
</section>
<!-- START OF ORIGINAL BODY -->
<div id="example">
<!-- NAV/TITLE PANEL -->
<header>
<div class="full width">
<div class="half-width">
<h1>Jubilee Austen</h1>
</div>
<!-- NAV BAR -->
<div class="half-width" id="nav">
<nav>
<ul>
<li>About</li>
<li>Work</li>
<li>Contact</li>
</ul>
</nav>
</div>
<!-- <span>Hi,</span> used to change colour of just "Hi," text -->
<h2><span>Hi,</span> I'm a developer that loves clean & elegant code.</h2>
</div>
</header>
<main>
<!-- ABOUT PANEL -->
<section id="about">
<div class="full-width">
<h2>A little bit about me.</h2>
<div class="half-width">
<p>I've made my home base in Providence, Rhode Island with my small growing family. My journey into tech started with a degree in journalism. As I started sharing my writing online, I was fascinated with how easily I could get my voice out there. I was hooked and wanted to learn how to build my own site to fit my own specific needs.</p>
</div>
<div class="half-width">
<p>That curiosity then opened a door that could never be shut. When I learned how to build my first website, I realized I found something that gave me the freedom & versatility I was looking for in my work. Now I've made a full switch to front-end development, where I can use my organization skills and eye for detail to write clean, elegant code.</p>
</div>
</div>
</section>
<!-- PROCESS PANEL -->
<section id="work">
<div class="full-width">
<div class="third-width">
<img src="img/icon-html.png" alt="HTML icon"/>
<h3>Hand-Coded HTML</h3>
<p>My focus is writing clean, well-formatted, semantic HTML5 by hand to make sure that the content is easy to read, easy to collaborate, trouble-shoot and accessible.</p>
</div>
<div class="third-width">
<img src="img/icon-css.png" alt="CSS icon"/>
<h3>Well-Organized CSS</h3>
<p>I pride myself on writing CSS that is easy to read and build on. I focus on keeping my CSS lean and fast to load, and I make it a habit to stay up to date on current best practices.</p>
</div>
<div class="third-width">
<img src="img/icon-pencil.png" alt="Pencil icon"/>
<h3>Easy Converting PSD to HTML</h3>
<p>You can trust me to take a designer's PSD and quickly & accurately convert it into a webpage that is pixel-perfect match.</p>
</div>
</div>
</section>
<!-- CONTACT PANEL -->
<footer id="contact">
<div class="full-width">
<div class="half-width">
<img id="contact-img" src="img/contact.png" alt="Person typing at laptop"/>
</div>
<div class="half-width" id="contact-info">
<h2>Like what you see?</h2>
<h3 id="email-header">Let's meet for a cup of coffee.</h3>
<img id="envelope" src="img/icon-envelope.png" alt="mail icon"/>hi#jubileeausten.com
<h4 id="socialmedia-header">Or, find me on the interwebs</h4>
<!-- ICON LINKS -->
<ul>
<li><img src="img/icon-twitter.png" alt="Twitter icon"/></li>
<li><img src="img/icon-tumblr.png" alt="Tumblr icon"/></li>
<li><img src="img/icon-instagram.png" alt="Instagram icon"/></li>
<li><img src="img/icon-linkedin.png" alt="Linkedin icon"/></li>
<li><img src="img/icon-github.png" alt="GitHub icon"/></li>
</ul>
</div>
</div>
</footer>
</main>
<!-- END OF ORIGINAL HTML -->
</div>
</body>
</html>
/* ===== ROGUE PICKINGS ===== */
/* =========================================================================
Author's custom styles
========================================================================== */
#font-face {
font-family: atelas;
src :url('../fonts/atelas/atelas.ttf') format('opentype');
}
/* -------- PORTFOLIO BANNER & MANAGEMENT -------- */
.back {
width: 100%;
background-color: #1D2120;
padding: 10px 0;
position: fixed;
top: 0px;
}
.div-link {
position:absolute;
width:100%;
height:100%;
top:0;
left: 0;
z-index: 1;
background-image: url('empty.gif');
}
.back-wrap {
width: 90%;
margin: auto;
}
.chevron {
margin: 0;
}
.chevron img {
width: 35px;
float: left;
margin-right: 1.5%;
}
.back-text {
margin: 0 0 0 3%;
font-family: atelas;
font-size: 6em;
color: #e2e2e2;
text-decoration: none;
line-height: 0.8;
display: none;
}
#example {
max-width: 1200px;
margin: auto;
clear: both;
padding-top: 55px;
}
/* ======== ORIGINAL ROGUE PICKINGS CSS ======== */
html {
font-size:16px;
}
body {
/*max-width: 1200px; --- REMOVED FOR PORTFOLIO BANNER --- */
margin: 0 auto;
font-size: 1em;
font-family: Montserrat, Helvetica, Arial, sans-serif;
}
header {
font-size: 1em;
}
.top-section {
font-size: 1em;
}
.bottom-section {
font-size: 1em;
}
footer {
font-size: 1em;
}
header, .top-section, .bottom-section, footer {
max-width: 90%;
}
h1, h3, h4 {
text-transform: uppercase;
}
h1 {
color: black;
font-size: 1.875em;
text-align: center;
width: auto;
padding: 2.45% 0;
}
h3 {
color: black;
font-size: 1.125em;
text-align: center;
padding: 15px;
}
h4 {
color: black;
font-size: 0.75em;
}
.main-title h3 {
text-align: left;
padding: 5px 0px;
text-transform: uppercase;
color:#77a466;
}
/*The widths are in a percentage!*/
header {
width: 100%;
height: 10%;
margin: 0 auto;
}
header .heading {
border-bottom:3px solid #77a466;
height: auto;
}
header span {
color: #77a466;
}
header nav {
padding: 8% 0px;
margin:auto;
}
header nav a {
text-decoration: none;
text-transform: uppercase;
font-weight: bold;
font-size: 0.875em;
padding: 0 10px 20px 10px;
color:#77a466;
display: block;
text-align: center;
}
#last-nav {
padding: 0 10px;
}
/*The widths are in a percentage!*/
.top-section, .bottom-section {
width: 100%;
margin: 0 auto;
clear: both;
}
.main-image {
width: 100%;
height: auto;
float: left;
clear: both;
}
.main-image img {
width: 100%;
border-bottom:3px solid #77a466;
border-top: 3px solid #77a466;
}
.main-title {
width: 100%;
height: auto;
float: left;
}
.main-title p {
padding: 0px;
line-height: 156.25%;
font-size: 1em;
}
.section-one, .section-two, .section-three {
width: 100%;
height: auto;
clear: both;
border-top: 1px solid #eee;
}
.section-one h4, .section-two h4, .section-three h4 {
padding: 10px 30px 10px 0px;
}
.menu {
list-style: none;
padding: 0px 30px 0px 0px;
}
.menu li {
padding: 10px 0;
color:#77a466;
}
.reviews {
color: #333;
line-height: 135%;
font-size: 1em;
}
.address {
font-size: 1em;
line-height: 150%;
}
.reviews, .address {
padding: 0px 30px 0px 0px;
}
/*The widths are in a percentage!*/
footer {
width: 100%;
height: 50px;
border-top:3px solid #eee;
margin: 0 auto;
clear: both;
text-align: center;
}
footer span {
font-family: "Wisdom Script", script;
text-transform: lowercase;
color: #77a466;
font-size: 0.875;
}
#media all and (min-width: 600px) and (max-width: 939px) {
header nav {
padding: 3.75% 0px;
}
}
#media screen and (min-width: 940px) {
/* -------- PORTFOLIO BANNER CSS -------- */
.chevron img {
width: 30px;
}
.back-text {
font-size: 3em;
}
#example {
width: 96%;
padding: 40px 2% 0 2%;
}
/* -------- ORIGINAL CSS -------- */
body {
/*width: 96%; --- REMOVED FOR PORTFOLIO BANNER --- */
/*padding: 0 2%; --- REMOVED FOR PORTFOLIO BANNER --- */
}
header, .top-section, .bottom-section, footer {
max-width: 100%;
}
header h1 {
text-align: left;
float: left;
}
header {
height: 100px;
}
header .heading {
border-bottom: none;
}
header nav {
float: right;
width: auto;
padding: 45px 0px;
}
header nav a {
display: inline;
}
.section-one, .section-two {
border-right: 1px solid #eee
}
.section-one h4 {
padding: 10px 0px;
}
.section-two h4, .section-three h4 {
padding: 10px 30px;
}
.menu {
padding: 0px;
}
.reviews, .address {
padding: 0px 30px;
}
.section-one, .section-two, .section-three {
width: 33%;
height: auto;
clear: none;
float: left;
border-top: 1px solid #eee;
}
}
/* -------- END ORIGINAL CSS -------- */
<!doctype html>
<!-- ROGUE PICKINGS -->
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Rogue Pickings</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/main.css">
</head>
<body>
<!-- PORTFOLIO BANNER -->
<section class="back">
<a class="div-link" href="../index.html"><span></span></a>
<div class="back-wrap">
<figure class="chevron">
<img src="../img/chevron-b.png" />
<img src="../img/chevron-g.png" />
<img src="../img/chevron-o.png" />
<img src="../img/chevron-r.png" />
</figure>
<p class="back-text">back</p>
</div>
</section>
<!-- START OF ORIGINAL BODY -->
<div id="example">
<!-- MODULE: Logo & Nav -->
<header>
<div class="heading">
<h1><span>rogue</span> pickings</h1>
</div>
<nav>
About
Menu
Locations
Gallery
Reviews
<a id="last-nav" href="#contact">Contact</a>
</nav>
</header>
<!-- MODULE: Top Section -->
<div class="top-section">
<div class="main-image"><img src="img/download.jpg" />
</div>
<div class="main-title" id="about">
<h3>Welcome to our little corner of the internet!</h3>
<p>Welcome to Rogue Pickings, the roaming truck bringing you the freshest ingredients and ideas in food. Our team works hard so you can be sure our ingredients are always fresh and picked carefully. Our menu changes every day and is made with you in mind. We can't wait to come to you! Check out our locations to see where you can find us. </p>
</div>
</div>
<!-- MODULE: Bottom Section -->
<div class="bottom-section">
<div class="section-one" id="menu"><h4>Today's Specials</h4>
<ul class="menu">
<li>Flaming Hummus & Falafel Salad</li>
<li>Sizzling Bean Burrito</li>
<li>Green Gloves Tamales</li>
</ul>
</div>
<div class="section-two" id="reviews"><h4>Our Awesome Reviews</h4>
<p class="reviews">"I got so excited about the yumminess of the falafel salad that I am typing this review as I inhale my lunch. Yes it is that good.... Service was super friendly and quick. Can't wait see you Rogue Pickings again tomorrow!"</p>
</div>
<div class="section-three" id=contact><h4>Contact</h4>
<p class="address">1001 Potrero Avenue<br>
San Francisco, CA 94110<br>
(415) 206-8000 </p>
</div>
</div>
<!-- MODULE: Footer -->
<footer>
<h4>Powered by lots of <span>fresh</span> ingredients.</h4>
</footer>
<!-- END OF ORIGINAL ROGUE PICKINGS HTML -->
</div>
</body>
</html>
i cant remember if zoom level is persistant on an iphone but it is on desktop browsers, could you have zoomed in/out of one of them? is there a way of making sure you are at 100% zoom?
Edit
is the smaller one contained in a set of tags that is smaller than 55px? as that would cause it to be restricted to the smaller size
Your banner is not responsive, its height is fixed (55px). If the site is being displayed differently - different viewport zoom, your banner will seems to be smaller/larger.
Check the viewport meta tag in those sites:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
If the initial-scale is different or if one of the pages is missing the viewport tag it can explain the differences.
As mentioned before, the zoom affects the presented width and this affects the visual size of your banner. If you want it to be responsive, you should change the height units into percentage instead of pixels.
EDIT
The first page is much wider than the second, when you zoom out to see all the page it changes the visual height of your banner.
I coded in main.css and I checked in the browser it was perfectly fine. I created another file named responsive.css the logo hasn't moved at all and the rest like images, wrapper too the same when I resized the browser. I have moved responsive above main link. But it still the same.
#charset "utf-8";
/* CSS Document */
#import url(http://fonts.googleapis.com/css?family=Vidaloka|Philosopher);
* {
box-sizing : border-box;
}
#wrapper {
max-width: 940px;
margin: 0 auto;
padding: 0;
}
.sectionPage {
width: 100%;
height: 100vh;
}
/* ==========================================================================
BACKGROUND
========================================================================== */
#home,
#skills,
#contact {
background-color: #000000;
background-image: url(http://www.transparenttextures.com/patterns/subtle-dots.png);
}
#about,
#work,
#services {
background-color: #fcfcfc;
background-image: url(http://www.transparenttextures.com/patterns/skulls.png);
}
/* ==========================================================================
FOR TITLE OF ALL SECTION PAGE
========================================================================== */
h1 {
text-align: center;
font-size: 30px;
font-family: 'Vidaloka', serif;
}
/* ==========================================================================
HOME
========================================================================== */
p {
font-family: 'Philosopher', sans-serif;
}
#home > img {
text-align: center;
margin-top: 5em;
margin-left: 44.5%;
}
#home > h1 {
color: #ffffff;
margin-top: 2em;
margin-bottom: 2em;
font-size: 2em;
}
#home > a {
font-size: 16px;
font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
text-decoration: none;
color: #ffffff;
border-radius: 25px;
background-color: #1199C3;
padding: 10px;
text-align: center;
margin-left: 45%;
}
#home > a:hover {
color: #000000;
background-color: #0B637E;
}
/* ==========================================================================
ABOUT
========================================================================== */
#about > h1 {
color: #1199C3;
top: 8%;
position: relative;
}
.wrapper > img {
background-size: cover;
background-repeat: no-repeat;
border: 5px;
border-radius: 50%;
border-color: #ffffff;
border-style: solid;
width: 120px;
height: 140px;
margin-top: 1%;
margin-bottom: 0;
}
.wrapper {
margin: 10px auto;
text-align: center;
background-color: #1199C3;
padding-bottom: 0.1%;
padding-top: 2%;
width: 25%;
border-radius: 3%;
position: relative;
top: 6%;
}
.wrapper > p {
font-size: 20px;
color: #ffffff;
}
#about > p {
text-align: center;
font-size:18px;
margin-left: 2em;
margin-right: 2em;
position: relative;
top: 5%;
}
#about > a {
font-size: 16px;
background-color: #1199C3;
border-radius: 5px;
color: #ffffff;
text-decoration: none;
padding: 1%;
margin-left: 41%;
font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
}
#about > a:hover {
color: #1199C3;
background-color: #0B637E;
}
#about > a {
position: absolute;
top: 198%;
left: 0em;
}
/* ==========================================================================
SKILLS
========================================================================== */
#skills > h1 {
color: #1199C3;
font-size:2.5em;
padding-top: 5%;
}
#skills > p {
text-align: center;
color: #ffffff;
font-size: 28px;
line-height: 0%;
padding: 5%;
}
.gallery > img, {
text-align: center;
margin-top: 3em;
margin-right: 0;
}
.gallery > li {
display: inline;
list-style: none;
}
.gallery {
left: 28%;
position: relative;
}
.software > img {
text-align: center;
margin-top: 3em;
margin-right: 0;
}
.software > li {
display: inline;
list-style: none;
}
.software {
left: 33%;
position: relative;
}
/* ==========================================================================
WORK
========================================================================== */
#work > h1 {
color: #1199C3;
font-size:2.5em;
padding-top: 5%;
}
#work > p{
text-align: center;
font-size:18px;
padding-top: 5%;
margin-left: 2em;
margin-right: 2em;
}
#work > a {
background-color: #1199C3;
border-radius: 5px;
color: #ffffff;
text-decoration: none;
padding: 1%;
margin-left: 40%;
margin-top: 6em;
font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
}
#work > a:hover {
color: #1199C3;
background-color: #0B637E;
}
.tweet, .msg {
text-decoration: none;
color: #1199C3;
}
/* ==========================================================================
SERVICES
========================================================================== */
#services > h1 {
color: #1199C3;
font-size:2.5em;
padding-top: 5%;
}
#services > img {
text-align: center;
padding-top: 3%;
padding-left: 2%;
padding-right: 2%;
margin-left: 15%;
width: 70%;
height: auto;
}
#services > p{
text-align: center;
font-size:18px;
padding-top: 2%;
margin-left: 2em;
margin-right: 2em;
}
/* ==========================================================================
CONTACT
========================================================================== */
#contact > h1{
color: #1199C3;
font-size:2.5em;
padding-top: 3%;
position: relative;;
top: 3%;
}
#contact > p {
text-align: center;
font-size:18px;
padding: 1%;
color: #ffffff;
line-height: 2px;
}
.container{
width: 50%;
height: 50%;
padding: 2%;
margin-top: 1em;
margin-left: 25%;
background-color: #0B637E;
border-radius: 5px;
}
#name, #email, #bio{
border-radius: 5px;
border-style: solid;
border-color: #1199C3;
width: 100%;
padding: 2%;
margin-top: 1em;
font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
}
#bio {
height: 140px;
}
#name, #email, #bio {
font-size: 14px;
color: #000000;
}
#button {
position: relative;
top:5px;
border-radius: 3px;
border-color: #1199C3;
border-style: solid;
background-color: #FFFFFF;
color: #000000;
padding: 5px;
float: right;
}
#contact > ul {
margin-left: 25%;
}
#contact > ul > li {
list-style: none;
display: inline-block;
margin-left: 5%;
}
#contact > ul > li > a {
color: #ffffff;
text-decoration: none;
}
#contact > ul > li > a:hover {
color: #1199C3;
}
/* ==========================================================================
FOOTER
========================================================================== */
footer {
background-color: #1199C3;
position: relative;
bottom: 0%;
}
footer > ul {
padding-left: 8%;
padding-top: 1%;
margin-left: 27%;
}
footer > ul > li {
list-style: none;
display: inline-block;
padding-left: 1%;
padding-top: 1%;
font-size: 12px;
text-align: center;
}
footer > ul > li > a {
text-decoration: none;
color: #ffffff;
margin-left: 0;
}
footer > ul > li > a:hover {
color: #000000;
}
footer > p {
color: #ffffff;
text-align:center;
padding-bottom: 2%;
position: relative;
bottom: 8%;
}
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Alzira Barretto</title>
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" type="text/css" href="css/responsivemobilemenu.css">
<link rel="stylesheet" type="text/css" href="css/responsive.css">
<link rel="stylesheet" type="text/css" href="css/main.css">
<link href="http://fonts.googleapis.com/css?family=Vidaloka|Philosopher" rel="stylesheet" type="text/css">
</head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript" src="js/responsivemobilemenu.js"></script>
<script type="text/javascript">
WebFontConfig = {
google: { families: [ 'Vidaloka::latin', 'Philosopher' ] }
};
(function() {
var wf = document.createElement('script');
wf.src = ('https:' == document.location.protocol ? 'https' : 'http') +
'://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js';
wf.type = 'text/javascript';
wf.async = 'true';
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(wf, s);
})();
</script>
<!-- MAIN MENU-->
<body>
<div class="rmm">
<ul>
<li>HOME</li>
<li>ABOUT ME</li>
<li>MY SKILLS</li>
<li>MY WORK</li>
<li>SERVICES</li>
<li>CONTACT ME</li>
<li>BLOG</li>
</ul>
</div>
<div id="wrapper">
<div class="sectionPage" id="home">
<img src="img/ab-logo.svg" alt="ab logo">
<h1>DESIGN & CODE</h1>
<a class="welcome" href="#about">WELCOME</a>
</div>
<!-- ABOUT ME -->
<div class="sectionPage" id="about">
<h1>A LITTLE NOTE ABOUT ME</h1>
<div class="wrapper">
<img src="img/alzira.jpg" alt="">
<p><strong>ALZIRA BARRETTO<br>MUMBAI, INDIA<br>FRONT-END DEVELOPER<br></strong></p>
</div>
<p>I was raised in Mumbai, India. Ever since I was a child I learnt
from my dad how to draw. What attract me the most is an amazing colors and
shapes. From the basic foundations, I've studied a lot about Graphic
Designing and joined in 3 years of fine arts. When comes to
web designing, I've learnt some of the courses in Treehouse since
2014. I'm keen to learn more about new languages. I have build
one website of my own and still in processing. I work hard to complete my project. I couldnt resist my finger from coding.</p>
<p>Apart from web designing, I love to draw, stitching, craft (DIY),
and obvious love to travel and explore new places.</p>
<p>Thanks for stopping by!!!</p>
DOWNLOAD MY CV
</div>
<!-- MY SKILLS -->
<div class="sectionPage" id="skills">
<h1>MY SKILLS</h1>
<p>CODE I USE</p>
<ul class="gallery">
<li><img src="img/HTML.svg" alt="html" width="100" height="100"></li>
<li><img src="img/CSS.svg" alt="css" width="100" height="100"></li>
<li><img src="img/JSCRIPT.svg" alt="js" width="100" height="100"></li>
</ul>
<p>SOFTWARE I USE</p>
<ul class="software">
<li><img src="img/photoshop.svg" alt="ps" width="100" height="100"></li>
<li><img src="img/Illustrator.svg" alt="ai" width="100" height="100"></li>
</ul>
</div>
<!-- MY WORK -->
<div class="sectionPage" id="work">
<h1>MY WORK</h1>
<p> It's just the beginning to build my portfolio and not just a professional one but to enhance my skills and gain more knowledges. I really do love my job and do what I love. I'm still learning new languages like Ruby, Drupal, Php, Javascript and of course Android apps. I would be appreciate if you really love my work and hire me to working with you. Please don't hesitate to <a class="msg" href="#contact">contact me</a> or tweet me <a class="tweet" href="http://www.twitter.com/#Albardesign">#Albardesign</a></p>
<p>I have a creative mind and I'd love to post it to show off my work. I am working on complete study cases.</p>
<a class="portfolio" href="https://www.behance.net/Alzira25">CHECK MY PORTFOLIO</a>
</div>
<!-- SERVICES -->
<div class="sectionPage" id="services">
<h1>SERVICES</h1>
<img src="img/devices.svg" alt="devices" width="500px" height="500px">
<p>As new technology increase, we build the website in Responsive style. Range from the biggest size of the Computer to the Tablet and goes to the smallest size of mobile devices. Mobile devices is the most popular used by people. We transform the website into the rich look.</p>
<p><strong><font size="+2" color="#1199C3">BUILD. REDESIGN. LAUNCH</font></strong></p>
<p><font size="+4" color="#1199C3"><em>VOILA!</em></font></p>
</div>
<!-- CONTACT -->
<div class="sectionPage" id="contact">
<h1>CONTACT ME</h1>
<p>Love to hear from you</p>
<p>Please feel free to drop the messages</p>
<div class="container">
<form id="form" action="send_form.php" method="post">
<input type="text" id="name" name="user_name" placeholder="Your Name"/>
<input type="email" id="email" name="user_email" placeholder="Your Email"/>
<textarea id="bio" name="user_message" placeholder="Write the message"></textarea>
<button id="button" type="submit">SEND</button>
</form>
</div>
<ul>
<li><img src="img/twitter.svg" alt="tweet" width="40" height="40">FOLLOW ME</li>
<li><img src="img/mail.svg" alt="mail" width="40" height="40">MAIL ME</li>
</ul>
<!-- FOOTER -->
<footer>
<ul>
<li>HOME</li>
<li>ABOUT</li>
<li>WORK</li>
<li>CONTACT</li>
<li>BLOGS</li>
</ul>
<p>ALZIRA BARRETTO|2015</p>
</footer>
</div>
</body>
</html>
I am running my app on google Chrome and Safari, both webkit-compliant. I'm building a scrolling div using -webkit-transition.
It worked just fine when I had the doctype specified as HTML 4 transitional (!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"), but our requirement is HTML 5. When I set the doctype (!DOCTYPE HTML) the transition stops working completely.
I ran my code through an HTML5 validator and cleaned up all errors (except tags).
Am I misunderstanding something?
Here is the relevant code:
<!DOCTYPE HTML>
<html>
<head>
<title>Shopping List</title>
<style>
ul{margin:0;padding:0;}
li{display: inline; float: left;}
body{
background-color: #475c76;
font-family: Arial;
font-size: 18pt;
font-weight: bold;
}
#wrapper{
height: 600px;
width: 800px;
}
/* Main menu */
#mainMenu{
height: 83px;
background-image: url(img/mainMenu_bg.png);
}
#mainMenu li{
height: 57px;
margin: 13px 0;
display: inline;
float: left;
color: #475c76;
}
#mainMenu li a{
color: #475c76;
padding: 0;
text-decoration: none;
background-image: url(img/btn_main.png);
background-position:0 0;
height: 57px;
width: 197px;
text-align: center;
line-height: 40pt;
display: inline-block;
}
#mainMenu li a:link{
}
#mainMenu li a:active{
background-position: 0 -57px;
color: white;
}
/* Page body */
#pagebody{
overflow: hidden;
height: 417px;
background-color: #DDDDDD;
}
/* Submenu */
.subMenuWrapper{
height: 80px;
width: 800px;
overflow: hidden;
position: absolute;
top: 421px;
left: 0;
}
#subMenus{
position: absolute;
background-image: url(img/subMenu_bg.png);
height: 80px;
width: 1600px;
-webkit-transition: all .4s;
}
#subMenus ul{
width: 780px;
padding: 0 10px;
display: inline;
float: left;
}
#subMenus ul .floatright{
float: right;
}
/* Buttons */
a.button{
color: white;
text-decoration: none;
background-position:center 0;
text-align: center;
display: inline-block;
}
a.button>*{
display: inline-block;
margin-top: 10px;
height: 60px;
background-image: url(img/button1.png);
line-height: 40pt;
}
a.button .l{
width: 14px;
background-position:top left;
}
a.button .t{
background-position:top center;
color: #AABBCC;
padding: 0 10px;
}
a.button .r{
width: 14px;
background-position: top right;
}
a.button .larrow{
width: 24px;
background-image: url(img/buttonpointies.png);
background-position:top left;
}
a.button .rarrow{
width: 24px;
background-image: url(img/buttonpointies.png);
background-position: top right;
}
a:active.button .t{
background-position: center -60px;
color: white;
}
a:active.button .l,
a:active.button .larrow{
background-position: left -60px;
}
a:active.button .r,
a:active.button .rarrow{
background-position: right -60px;
}
/* List */
#scrollingWrapper{
overflow: hidden;
}
#scrollingWrapper>div{
display:inline;
float:left;
}
#scrollingList{
position: relative;
width: 660px;
-webkit-transition: all .5s;
}
.lineItem{
height: 60px;
width: 100%;
border-top: 3px solid white;
border-bottom: 3px solid gray;
font-size: 24pt;
padding: 3px 8px;
background-color: #E8E8E8;
}
.lineItem *{
height: 57px;
display: inline;
float: left;
}
.lineItem .text{
margin: 7px 14px;
}
.lineItem .checkbox{
background-image: url(img/btn_check.png);
width: 44px;
margin:0;
}
/* Scroll buttons */
.scrollArea .scrollBar{
display: inline;
float: left;
background-color: #D0D0D0;
height: 334px;
width: 5px;
margin: 2px 0 2px 28px;
padding: 0;
border-radius: 3px;
}
.scrollArea .scrollBar #elevator{
position: relative;
background-color: gray;
height: 100px;
width: 5px;
-webkit-transition: all .5s;
border-radius: 3px;
}
.scrollArea .scrollButtons{
display:inline;
float:left;
margin-left: 12px;
margin-top: 100px;
}
.scrollArea .scrollButtons li{
display: block;
float: none;
padding: 4px 0;
}
.scrollArea .scrollButtons li div{
margin:0;
display: inline;
float: left;
}
.scrollArea .scrollButtons li div img{
padding-top: 10px;
}
/* Footer */
#footer{
position: absolute;
top: 500px;
height: 100px;
width: 800px;
border-top: 3px solid black;
}
#footer img{
margin: 5px;
float:left;
}
#footer #datetime{
margin-top: 20px;
}
#footer #datetime *{
float: right;
color: #AABBCC;
text-align: center;
color: #AABBCC;
display: block;
width: 160px;
}
</style>
<script>
var arrList = ["Milk 1%", "Bread", "Granny Smith Apples", "Oatmeal","Potatoes", "Yogurt", "Muffins", "Spaghetti", "Crackers", "Pancake Mix", "Melons", "Ice Cream", "Perogies", "Cottage Cheese", "Canned Peaches","Red Delicious Apples", "Ground Beef", "Salmon Steaks", "Popcorn", "Salt", "Tea", "Coffee", "Light Bulbs", "Eggs", "Bacon"];
var lineHeight = 72;
var windowHeight = 338;
var scrollBarHeight = 335;
var scrollAmt = lineHeight*4;
var listHeight; //tbd
var elevHeight; //tbd
function init(){
popList();
// upon finished loading
listHeight = (arrList.length)*lineHeight;
document.getElementById('scrollingList').style.top = 0;//needs to be explictly set so that it can be read later, otherwise it is undefined
elevHeight = windowHeight/listHeight*scrollBarHeight;
document.getElementById('elevator').style.height = elevHeight;
document.getElementById('elevator').style.top = 0;
}
function popList(){
// populate list from arrList
// THIS CODE IS RUN INLINE
var listHTML = "";
for (item=0;item<arrList.length;item++){
listHTML += '<div id="lineitem'+ item +'" class="lineItem" checked="false">';
listHTML += ' ';
listHTML += ' <div class="text">' + arrList[item] + '</div>';
listHTML += '</div>';
}
document.getElementById('scrollingList').innerHTML = listHTML;
}
function scrollme(dir){
var yMax = windowHeight-listHeight;
var yMin = 0;
if (dir>0){ // scroll down (list physically moves up, listPos goes more negative)
_setlistPos(Math.max(_getlistPos() - scrollAmt, yMax));
}
else{ // scroll up (list physically moves down, listPos goes more positive)
_setlistPos(Math.min(_getlistPos() + scrollAmt, yMin));
}
_setscrollPos();
function _getlistPos(){ return parseInt(document.getElementById('scrollingList').style.top); }
function _setlistPos(y){ document.getElementById('scrollingList').style.top = y; }
function _setscrollPos(){ document.getElementById('elevator').style.top = -(_getlistPos())*scrollBarHeight/listHeight; }
}
function editList(editState){
if (editState){ // show 2ndary menu
document.getElementById('subMenus').style.left = -800;
}
else{ // return to primary menu
document.getElementById('subMenus').style.left = 0;
}
}
function check(button,clickState){
var lineitem = button.parentNode;
if(clickState){ // button pressed
button.style.backgroundPosition = "0 -57px";
}
else{ // button released
if (lineitem.getAttribute("checked")=="false"){ // box was unchecked, so check it
lineitem.setAttribute("checked","true");
button.style.backgroundPosition = "0 -114px";
}
else{ // box was checked, so uncheck it
lineitem.setAttribute("checked","false");
button.style.backgroundPosition = "0 0";
}
}
}
function deleteChecked(){
var tempArrList = [];
for (item=0;item<arrList.length;item++){
var lineitem = document.getElementById("lineitem" + item);
if (lineitem.getAttribute("checked")!="true"){
tempArrList.push(lineitem.childNodes[3].innerText);
}
}
arrList = tempArrList;
init();
}
</script>
</head>
<body leftmargin="0" topmargin="0" marginheight="0" marginwidth="0" onload="init()">
<div id="wrapper">
<!-- Main Menu -->
<ul id="mainMenu">
<li>Home</li>
<li>Shopping List</li>
<li>Recipes</li>
<li>Specials</li>
</ul>
<!-- Page body -->
<div id="pagebody">
<div id="scrollingWrapper">
<!-- Scroll list -->
<div id="scrollingList">
</div>
<!-- Scroll Controls -->
<div class="scrollArea">
<div class="scrollBar"><div id="elevator"></div></div>
<ul class="scrollButtons">
<li>
<a class="button" href="javascript:void(false);" onmouseup="scrollme(-1);">
<div class="l"> </div><div class="t"><img src="img/glyph_up.png" width="35" height="35" alt=""></div><div class="r"> </div>
</a>
</li>
<li>
<a class="button" href="javascript:void(false);" onmouseup="scrollme(1);">
<div class="l"> </div><div class="t"><img src="img/glyph_dn.png" width="35" height="35" alt=""></div><div class="r"> </div>
</a>
</li>
</ul>
</div>
</div>
<!-- SubMenus -->
<div class="subMenuWrapper">
<div id="subMenus">
<ul id="subMenu1">
<li>
<a class="button" href="javascript:void(false);">
<div class="l"> </div><div class="t">Button 1</div><div class="r"> </div>
</a>
</li>
<li class="floatright">
<a class="button" href="javascript:void(false);" onmouseup="editList(true);">
<div class="l"> </div><div class="t">Edit List</div><div class="rarrow"> </div>
</a>
</li>
</ul>
<ul id="subMenu2" class="subMenu">
<li>
<a class="button" href="javascript:void(false);" onmouseup="editList(false);">
<div class="larrow"> </div><div class="t">Done</div><div class="r"> </div>
</a>
</li>
<li class="floatright">
<a class="button" href="javascript:void(false);" onmouseup="deleteChecked()">
<div class="l"> </div><div class="t">Clear Checked</div><div class="r"> </div>
</a>
</li>
</ul>
</div>
</div>
</div>
<!-- Footer -->
<div id="footer">
<img src="img/main_ad_wave.png" alt="">
<div id="datetime">
<span id="date">Fri. Jan. 01</span>
<span id="time">12:01am</span>
</div>
</div>
</div>
</body>
</html>
It looks like the problem isn't the transition, but the setting of properties.
elevHeight = windowHeight/listHeight*scrollBarHeight;
document.getElementById('elevator').style.height = elevHeight;
The CSS height property takes a length not an integer, and lengths (other than 0) require units.
(There may be other issues, probably similar ones, but that's the first one I spotted in your code)
The Doctype you are using (HTML 4.01 Transitional with no URL) is considered by browser to be an indication of legacy code written before the proper (or almost proper) use of web standards became common (i.e. around the late 90s). This triggers Quirks mode.
The HTML 5 Doctype is designed to trigger Standards mode, in which browsers follow the standards much better (and are much more consistent which each other — this is highly desirable).
One of the bugs that is emulated in Quirks mode is treating integer values as pixel lengths.
You need to specify a unit. e.g. ... + 'px'.
(You also have some errors in the HTML that would be detected by a validator)
I suspect the problem is down to the fact that it looks like you're trying to trigger the transition by changing CSS properties programatically with Javascript. I'm not entirely sure how well that kind of functionality is supported now, or how well it will be supported in the future.
Really, CSS transitions are intended for enhancing the UI experience, not for this kind of advanced animation. Seems that you're trying to bend CSS to make it do stuff it's not designed for. You might want to reconsider your approach.
It might be possible to achieve what you want using CSS animation keyframes, else why not just use a Javascript library like jQuery to do the heavy-lifting? That approach would be much better suited to what you're trying to achieve.