I am making a site with a background image slider where images must cover the 100% width and height of a div element where they are. The problem is that in Safari and Chrome everything works just fine, but in Opera and Mozilla Firefox, the images doesn't scale.
I tried adding '-o-background-size:cover' and '-moz-background-size:cover' but that didn't make the trick.
Here is the code:`
---HEAD---
....
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="css/style.css" type="text/css" />
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function()
{
var imgArr = new Array() // relative paths of images
imgArr[0]="images/artema_big.jpg";
imgArr[1]="images/donskoi_big.jpg";
imgArr[2]="images/dzerzhinski_big.jpg";
var preloadArr = new Array();
var i;
/* preload images */
for(i=0; i < imgArr.length; i++){
preloadArr[i] = new Image();
preloadArr[i].src = imgArr[i];
}
var currImg = 1;
var intID = setInterval(changeImg, 1000);
/* image rotator */
function changeImg(){
$(".fakeBackground").animate({opacity: 0}, 1000, function(){
$(this).css('background','url(' + preloadArr[currImg++%preloadArr.length].src +')top left no-repeat');
}).animate({opacity: 1}, 1000);
};
});
</script>
</head>
<body>
<div class="parent">
<div class='fakeBackground'></div>
<div class="menuLeft">
<div class="logo"></div>
<ul id="menu">
<li class="about">О клубе</li>
<li class="offers">Услуги</li>
<li class="cards">Карты</li>
<li class="personal">Персонал</li>
<li class="news">Новости</li>
<li class="contacts">Контакты</li>
</ul>
</div>
</div>
<div class="rightBottom"><img src="images/virtualTour.png" alt="virtual_tour" /></div>
</div>
</div>
</body>
</html>
and CSS:
*{
margin: 0px;
}
body, html{
height: 100%;
margin: 0px;
}
.parent {
width: 100%;
height: 100%;
margin: 0px auto;
position: relative;
}
.parent .fakeBackground {
position: absolute;
z-index: -1;
width: 100%;
height: 100%;
margin: 0px auto;
background-size: cover;
-o-background-size: cover;
background: url(../images/artema_big.jpg) no-repeat;
background-position: center center;
}
.logo{
width: 188px;
height: 78px;
background-image: url(../images/logo.png);
margin-bottom: 20px;
margin-left: 60px;
}
.menuLeft{
width: 678px;
height: 100%;
background-image: url(../images/artemaDescr.png);
background-size: cover;
background-repeat: no-repeat;
}
#menu li{
list-style: none;
margin-bottom: 10px;
position: relative;
}
#menu li a{
font-family: Arial;
font-size: 14px;
border-bottom: 1px dotted;
text-decoration: none;
color: #373e96;
}
/*Menu Items*/
.about{
margin-left: 70px;
}
.offers{
margin-left: 60px;
}
.cards{
margin-left: 50px;
}
.personal{
margin-left: 11px;
}
.news{
margin-left: 5px;
}
.contacts{
margin-left: -10px;
}
.rightBottom{
position: absolute;
bottom: 0;
right: 0;
width: 301px;
height: 520px;
display: block;
}
Any help will be appreciated.
PS. The link for the site is: http://sportmax.codo.dn.ua
The problem is possibly that 'background' overwrites 'background-size'. Look also at
this answer.
So put background on top whereever necessary.
Related
I have a sprite image containing 4 different pictures. They are 520px in height. I would like animate them sliding from the first picture to the last picture. I am able to get them to flip through images, however I cannot get them to slide smoothly. Also, when the last image is reached, I need to slide back to the first image. I am unsure how to do this, this is my current code:
<!DOCTYPE html>
<html lang="en">
<head>
<title>FVRC Pics</title>
<meta charset="UTF-8">
<link type="text/css" href="styles/normalize.css" rel="stylesheet" />
<link type="text/css" href="styles/my_style.css" rel="stylesheet">
</head>
<body>
<h1> Fox Valley Runner Club</h1>
<div class="container">
<div id="slider">
<div id="leftArrow"</div>
<div id="rightArrow"></div>
</div>
</div>
<div id="startApp">
<ul>
<li>Start here!</li>
</ul>
</div>
<!--<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"> </script>-->
<script type="text/javascript" src="scripts/jquery-3.2.1.min.js"></script>
<script>
$(document).ready(function() {
$("#leftArrow").click(function() {
$("#slider").css("backgroundPostionX","+=792px");
});
$("#rightArrow").click(function() {
$("#slider").css("backgroundPostionX","-=792px");
});
});
</script>
</body>
</html>
CSS:
h1 {
color: #0000ff; /*blue*/
font-size: 44px;
padding-left: 10%;
}
.container {
max-height: 520px;
background-color: #808080; /*grey*/
}
#leftArrow, #rightArrow {
display: inline-block;
width: 38px;
height: 50px;
}
#leftArrow {
position: relative;
/*top: 0;*/`enter code here`
top: 235px;
left: 2%;
width: 5%;
height: 50px;
background: url('../images/left_arrow.png') 0 0 no-repeat;
z-index: 10;
}
#rightArrow {
position: relative;
/*top: 0;*/
top: 235px;
left: 87.5%;
width: 5%;
height: 50px;
background: url('../images/right_arrow.png') bottom right no-repeat;
z-index: 10;
}
#slider {
position: relative;
height: 520px;
max-width: 792px;
margin: 0 auto;
/*background: url("../images/Animate-Sprite_520a.png") -0 0 no-repeat;*/
background-image: url('../images/Animate-Sprite_520a.png');
background-repeat: no-repeat;
}
#startApp {
width: 235px;
margin: 0 auto;
}
#startApp ul {
list-style-type: none;
}
#startApp ul li a {
display: inline-block;
text-decoration: none;
width: 150px;
text-align: center;
background-color: steelblue;
border: 2px solid #808080;
color: white;
font-size: 32px;
All,
I want to have a JS script in which when you scroll down the header ("Banner") of the website gets another colour. (Change from transaparant to a colour). (In the future i want it to change from an image to another image.. ).
i added a JS script from this website but it does not work yet. I think i need to know which div i need to use for the scrollbar.
Can anybode help with this?
var scroll_pos = 0;
$(document).scroll(function() {
scroll_pos = $(this).scrollTop();
if(scroll_pos > 20) {
(".banner" , 'background-color', 'blue');
} else {
(".banner" , 'background-color', 'red');
}
});
});
#import url("webfonts/Garisman_Studio_FreudianTwo/stylesheet.css");
* {
margin: 0;
padding: 0;
width: 100%;
height: auto;
}
.banner {
display: table;
clear: both;
position: fixed;
font-size: 1vw;
color: #333955;
font-family: "Garisman Studio FreudianTwo";
width: 100%;
z-index: 99;
align-content: center;
overflow: auto;
}
.menutekst {
text-align: center;
font-size: 2vw;
color: #333955;
top: 20px;
position: fixed;
word-spacing: 1em;
}
.koopnubutton{
position: fixed;
background : #333955;
background : rgba(51, 57, 85, 1);
border-radius : 16px;
-moz-border-radius : 16px;
-webkit-border-radius : 16px;
;
color: #FFFFFF;
width: 200px;
}
.firstdiv {
position: relative;
}
.firstdiv > img {
object-fit: cover;
width: 100%;
}
.eettellus {
position: absolute;
bottom: 30%;
width: auto;
left: 20%;
font-family: "Garisman Studio FreudianTwo";
color: #FDFDFD;
font-size: 3.5vw;
}
<!doctype html>
<html>
<head>
<link rel="stylesheet" href="tellus.css">
<meta charset="utf-8">
<title>Tellus Chocolade</title>
</head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<body>
<div class="banner" onKeyDown="asdasdf"><div class="menutekst">ons verhaal impact chocolade contact</div></div>
<div class= "firstdiv">
<img src="Afbeelding Landingspagina.png" width="1601" height="1130" alt=""/>
<div class="eettellus">Breng de natuur terug,<br>
<span style="font-size: 3.8vw">eet tellus chocolade</span></div></div>
<div class= "firstdiv"><img src="Images/About Tellus.png" width="1601" height="1215" alt=""/></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="jQueryAssets/script.js"></script>
</body>
</html>
You should change the background-color in css and also name the class in jquery proper:
var scroll_pos = 0;
$(document).scroll(function() {
scroll_pos = $(this).scrollTop();
if(scroll_pos > 20) {
$(".banner").css("backgroundColor", "red");
} else {
$(".banner").css("backgroundColor", "rgba(100,100,100,0.5)");
}
});
#import url("webfonts/Garisman_Studio_FreudianTwo/stylesheet.css");
* {
margin: 0;
padding: 0;
width: 100%;
height: auto;
}
.banner {
display: table;
clear: both;
position: fixed;
font-size: 1vw;
background-color: rgba(100,100,100,0.5);
font-family: "Garisman Studio FreudianTwo";
width: 100%;
z-index: 99;
align-content: center;
overflow: auto;
}
.menutekst {
text-align: center;
font-size: 2vw;
top: 20px;
word-spacing: 1em;
}
.koopnubutton{
position: fixed;
background : #333955;
background : rgba(51, 57, 85, 1);
border-radius : 16px;
-moz-border-radius : 16px;
-webkit-border-radius : 16px;
;
color: #FFFFFF;
width: 200px;
}
.firstdiv {
position: relative;
}
.firstdiv > img {
object-fit: cover;
width: 100%;
}
.eettellus {
position: absolute;
bottom: 30%;
width: auto;
left: 20%;
font-family: "Garisman Studio FreudianTwo";
color: #FDFDFD;
font-size: 3.5vw;
}
<head>
<link rel="stylesheet" href="tellus.css">
<meta charset="utf-8">
<title>Tellus Chocolade</title>
</head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<body>
<div class="banner" onKeyDown="asdasdf"><div class="menutekst">ons verhaal impact chocolade contact</div></div>
<div class= "firstdiv">
<img src="Afbeelding Landingspagina.png" width="1601" height="1130" alt=""/>
<div class="eettellus">Breng de natuur terug,<br>
<span style="font-size: 3.8vw">eet tellus chocolade</span></div></div>
<div class= "firstdiv"><img src="Images/About Tellus.png" width="1601" height="1215" alt=""/></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="jQueryAssets/script.js"></script>
</body>
You just need to measure the height of your banner in order to know where you need to switch the color:
$(document).scroll(function() {
var scroll_pos = $(this).scrollTop();
if (scroll_pos > $(".banner").height()) {
$(".banner").css("background-color", "blue");
} else {
$(".banner").css("background-color", "red");
}
});
.banner {
display: table;
clear: both;
position: fixed;
font-size: 1vw;
color: #333955;
font-family: "Garisman Studio FreudianTwo";
width: 100%;
z-index: 99;
align-content: center;
overflow: auto;
background-color: red;
}
body {
height: 2000px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="banner" onKeyDown="asdasdf"><div class="menutekst">ons verhaal impact chocolade contact</div></div>
Use a native javascript in your html code :
<div class="banner" onscroll="myScript" ></div>
<!doctype html>
<html>
<head>
<link rel="stylesheet" href="tellus.css">
<meta charset="utf-8">
<title>Tellus Chocolade</title>
</head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<body>
<div class="banner" onscroll="myScript"><div class="menutekst">ons verhaal impact chocolade contact</div></div>
<div class= "firstdiv">
<img src="Afbeelding Landingspagina.png" width="1601" height="1130" alt=""/>
<div class="eettellus">Breng de natuur terug,<br>
<span style="font-size: 3.8vw">eet tellus chocolade</span></div></div>
<div class= "firstdiv"><img src="Images/About Tellus.png" width="1601" height="1215" alt=""/></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="jQueryAssets/script.js"></script>
</body>
</html>
and in your javascript
window.onscroll = function() {myScript()};
function myScript() {
if (document.body.scrollTop > 50 || document.documentElement.scrollTop > 50) {
document.getElementById("banner").css('background-color', 'blue');
} else {
document.getElementById("banner").css('background-color', 'red');
}
}
I hope this answer will help you.
Is there a way to use jQquery to change the text content of my "video_box_label" span element in response to which slide is active in my "flexslider" slide show? In other words, when the slide moves to the second slide, I want it to change from "Meet the Team" to "Adil Saleem". I know that the slide show gives the active list item the "flex-active-slide" class, if that helps. Note that this code below won't be easy to preview because it points to some internally accessible jquery files. Also, I got the slider from this site: http://flexslider.woothemes.com/index.html
<link rel="stylesheet" href="https://epwork.ep.corp/wg/ProdPayroll/SiteAssets/ProductionPayrollHomeFlexslider.css" type="text/css" media="screen" />
<link href='https://fonts.googleapis.com/css?family=Asap' rel='stylesheet'>
<link href='https://fonts.googleapis.com/css?family=Annie Use Your Telescope' rel='stylesheet'>
<script src="https://epwork.ep.corp/wg/ProdPayroll/jquery/jquery.min.js.js"></script>
<script defer src="https://epwork.ep.corp/wg/ProdPayroll/jquery/jquery.flexslider.js"></script>
<link rel="stylesheet" href="https://epwork.ep.corp/wg/ProdPayroll/SiteAssets/ProductionPayrollHomeSlideShow.css">
<script src="https://epwork.ep.corp/wg/PayrollSolutions/SolutionsSetup/SiteAssets/plyr.js"></script>
<script src="https://epwork.ep.corp/wg/PayrollSolutions/SolutionsSetup/SiteAssets/jquery1.9.0.min.js"></script>
<script type="text/javascript">
$(window).load(function(){
$('.flexslider').flexslider({
animation: "slide",
start: function(slider){
$('body').removeClass('loading');
}
});
jQuery( '.flexslider' ).flexslider( 'pause' );
});
$(document).ready(function() {
$("#Abijah_Ayele_image").click(function(){
$("#Abijah_Ayele_slide").html('<video poster="https://epwork.ep.corp/wg/ProdPayroll/Images_People/Abijah_Ayele.jpg" controls preload="none">'+
'<source id="video_player_source1" src="https://epwork.ep.corp/wg/ProdPayroll/Videos_People/Abijah_Ayele.mp4" type="video/mp4">'+
'</video>')+'<p class="flex-caption">Abijah Ayele</p>';
});
$("#slide_image_2").click(function(){
$("#slide2").html('<video poster="https://epwork.ep.corp/wg/ProdPayroll/Images_People/Adil_Saleem.jpg" controls preload="none">'+
'<source id="video_player_source2" src="https://epwork.ep.corp/wg/ProdPayroll/Videos_People/Adil_Saleem.mp4" type="video/mp4">'+
'</video>');
});
$("#slide_image_3").click(function(){
$("#slide3").html('<video poster="https://epwork.ep.corp/wg/ProdPayroll/Images_People/Adriel_Balatbat.jpg" controls preload="none">'+
'<source id="video_player_source2" src="https://epwork.ep.corp/wg/ProdPayroll/Videos_People/Adriel_Balatbat.mp4" type="video/mp4">'+
'</video>');
});
});
$(document).ready(function() {
$('.flexslider').click(function() {
$("video").each(function(){
$(this).get(0).pause();
jQuery( '.flexslider' ).flexslider( 'pause' );
});
});
});
</script>
<style>
#font-face{
font-family:"flexslider-icon";
src: url("https://epwork.ep.corp/wg/ProdPayroll/SiteAssets/flexslider-icon.eot") /* EOT file for IE */
}
#font-face{
font-family:"flexslider-icon";
src: url("https://epwork.ep.corp/wg/ProdPayroll/SiteAssets/flexslider-icon.ttf") /* TTF file for CSS3 browsers */
}
a:hover{
text-decoration: none !important;
}
#WoodenBackgroundContainer{
background-image: url('/wg/ProdPayroll/Images_Decorative/WoodBackgroundDark.jpg') !important;
width: 100%;
height: 1300px;
}
#container{
margin: 0 auto;
left: 0;
right: 0;
width: 1000px;
height: 1300px;
background: linear-gradient(#88D4E6, #307996) !important;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#88D4E6, endColorstr=#307996); /* For IE 11*/
text-align: center;
position: absolute;
}
#decorative_side_bar_left{
position:absolute;
height: 1300px;
left: 0;
width: 38px;
background-image: url("https://epwork.ep.corp/wg/ProdPayroll/Images_Decorative/decorative_diagonal_side_bar.jpg");
z-index: 1;
}
#decorative_side_bar_right{
position:absolute;
height: 1300px;
width: 38px;
right: 0;
background-image: url("https://epwork.ep.corp/wg/ProdPayroll/Images_Decorative/decorative_diagonal_side_bar.jpg");
z-index: 1;
}
#bulb1{
position:relative;
right: 20px;
top: 70px;
width: 100px;
display: inline;
}
#payroll_welcome_header{
font-family: 'Asap';
font-size: 350%;
text-align: center;
padding-top: 68px;
display: inline;
}
#bulb2{
position:relative;
left: 20px;
top: 70px;
width: 100px;
display: inline;
}
#payroll_welcome_statement{
font-family: 'Asap';
text-align: center;
font-size: 190%;
}
#bulletin_board_backdrop{
height: 225px;
width: 1000px;
right: 0;
background-image: url("https://epwork.ep.corp/wg/ProdPayroll/Images_Decorative/bulletin-background.jpg");
}
#postit_1_container{
position: relative;
display: inline-block;
margin-right: 0px;
transform: rotate(-12deg);
top:16px;
}
#postit_1{
width: 225px;
}
#post_it_text1{
position: absolute;
top: 50%; left: 50%;
transform: translate(-50%, -50%) rotate(-1deg) !important;
font-size: 29px;
font-family: 'Annie Use Your Telescope';
}
#postit_2_container{
position: relative;
display: inline-block;
margin-left: 115px;
transform: rotate(12deg);
top:16px;
}
#postit_2{
width: 225px;
}
#post_it_text2{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%) rotate(-1deg) !important;
font-size: 29px;
width: 190px;
font-family: 'Annie Use Your Telescope';
}
#video_box_label{
display: block;
font-size: 24px;
font-family: 'Asap';
color: #FFFFFF;
}
.flexslider{
height: 415px;
width: 746px;
background-color: #696969;
margin: auto;
margin-top: 4px;
}
.flexslider video{
width:100%;
}
.flexslider img{
height: 415px !important;
}
.flexslider video{
height: 415px !important;
}
.flex-caption{
font-size: 15px !important;
margin-top:65px !important;
}
/* this makes the image poster fit the video viewport
video{
object-fit: inherit;
}
*/
</style>
<div id="WoodenBackgroundContainer">
<div id="container">
<div id="decorative_side_bar_left"></div>
<div id="decorative_side_bar_right"></div>
<img id="bulb1" src="https://epwork.ep.corp/wg/ProdPayroll/Images_Decorative/lightbulb_icon.png" />
<h1 id="payroll_welcome_header">WELCOME TO THE PRODUCTION PAGES</h1>
<img id="bulb2" src="https://epwork.ep.corp/wg/ProdPayroll/Images_Decorative/lightbulb_icon.png" />
<h2 id="payroll_welcome_statement">Reinventing how the entertainment industry works<br/>and interacts to make production simple</h2>
<br/><br/><br/><br/><br/><br/>
<span id="video_box_label">Meet the Team:</span>
<div class="flexslider">
<ul class="slides">
<li id="Abijah_Ayele_slide">
<img id="Abijah_Ayele_image" src="https://epwork.ep.corp/wg/ProdPayroll/Images_People/Abijah_Ayele.jpg">
</li>
<li id="slide2">
<img id="slide_image_2" src="https://epwork.ep.corp/wg/ProdPayroll/Images_People/Adil_Saleem.jpg">
</li>
<li id="slide3">
<img id="slide_image_3" src="https://epwork.ep.corp/wg/ProdPayroll/Images_People/Adriel_Balatbat.jpg">
</li>
</ul>
</div>
</div>
</div>
You could use the after or before function of flexslider and target some data you want to put into the span. I use the after function in my example to change the title span to the data-text attribute of the the current image.
Hope that helps.
$('.flexslider').flexslider({
animation: "slide",
after: function(){
//console.log("do Something");
var target = $(".flex-active-slide img").attr("data-text");
$("#titleHere").html(target);
}
});
.flexslider {
width: 200px;
height: 200px;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/flexslider/2.6.4/flexslider.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/flexslider/2.6.4/jquery.flexslider-min.js"></script>
<!-- Place somewhere in the <body> of your page -->
<span id="titleHere">TITLE HERE</span>
<div class="flexslider">
<ul class="slides">
<li>
<img src="https://dummyimage.com/200" data-text="NEW TITLE 1"/>
</li>
<li>
<img src="https://dummyimage.com/210" data-text="NEW TITLE 2"/>
</li>
<li>
<img src="https://dummyimage.com/220" data-text="NEW TITLE 3"/>
</li>
<li>
<img src="https://dummyimage.com/230" data-text="NEW TITLE 4"/>
</li>
</ul>
</div>
This jQuery snippet would change the text content of your "video_box_label" span element to "Adil Saleem". See https://www.w3schools.com/jquery/html_text.asp
$('#video_box_label').text('Adil Saleem');
i'm trying to insert this tab box in my section tag.. from this website http://www.9bitstudios.com/2012/11/create-a-responsive-tab-box-using-jquery-and-css/
source code download link: http://www.9bitstudios.com/demos/blog/tab-box/tab-box.zip
here is my html code
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Librarian's corner</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="css/nav-menu.css">
<link rel="stylesheet" type="text/css" href="css/body.css">
</head>
<body >
<div class="big-wrapper">
<div class="form-nav-menu">
<nav>
<ul>
<li><a id="active" href="adduser.html">ADD USER</a></li>
<li><a class="in-active" href="#">EDIT USER</a></li>
<li><a class="in-active" href="#">DELETE USER</a></li>
<li><a class="in-active" href="#"> VIEW USER</a></li>
</ul>
</nav>
</div>
<header>
<h1>The Librarian's corner</h1>
</header>
<section>
> insert tab box here <
</section>
<footer>
<h1>this is footer</h1>
</footer>
</body>
</html>
and my css code filename: nav-menu.css
* {
margin: 0;
padding: 0;
}
html {
width: 100%;
display: -webkit-box;
-webkit-box-pack: center;
background: orange;
background-attachment: fixed;
background-size: cover;
background-position: center;
}
body {
display: block;
width: 100%;
}
header {
width: 100%;
background: rgba(0, 0, 12, 1); /* Fallback */
background-color: rgba(12, 12, 12, 0.5);
margin: 0;
}
header h1 {
text-align: center;
line-height: 400px;
z-index: 99;
color: #fff;
font-size: 50px;
font-family: Comic Sans, Comic Sans MS, cursive;
text-shadow: rgb(3, 3, 3) 4px 4px 4px;
height: auto;
}
section {
height: auto;
background: white;
width: 100%;
margin-top: 0px;
}
footer {
height: 150px;
background: black;
width: 100%;
margin-top: 0px;
}
.form-nav-menu {
z-index: 99;
position: fixed;
width: 100%;
display: -webkit-box;
-webkit-box-pack: center;
}
.form-nav-menu nav {
width: 100%;
height: 70px;
}
.form-nav-menu nav ul{
width: 100%;
height: 70px;
list-style-type: none;
}
.form-nav-menu nav ul li{
height: 70px;
width: 120px;
display: inline-block;
float: right;
}
the problem is when i trying to insert the css tab box code for the tab box located in section tag, the footer background dis align...
im wondering why, why the footer background dis aligned.. my body background is orange and the footer is black... as we can see, the black color is in the top..
I think you may need to add a min-height to your "section" tag since you've added that container:
section {
height: auto;
**min-height:300px;**
background: white;
width: 100%;
margin-top: 0px;
}
I was searching for a scrolling-system like this:
Scroll down to page, scroll up to top system like on a MEGA.co.nz download page
The scrolling works fine, but I've got a problem with an Iframe I want to use in the content div. If I open up the page the content part is 75% visible and above is the splash part. I just want that the splash part is fully visible if I open the page.
My CSS:
#font-face
{
font-family: 'hightide'; src: url(../resources/other/HighTide.woff) format('woff');
}
#font-face
{
font-family: 'ontwerp'; src: url(../resources/other/Ontwerp.woff) format('woff');
}
html, body {
height:100%;
width:100%;
overflow:hidden;
margin:0;
padding:0;
}
p::selection {background: #000000; color:#ffffff;}
p::-moz-selection {background: #000000; color:#ffffff;}
a:link
{
text-decoration:none; font-weight:bold; color: #000;
}
a:visited
{
text-decoration:none; font-weight:bold; color: #000;
}
#wrapper
{
height:100%;
}
#splash
{
position: relative;
width: auto;
background: url(../resources/img/background2.png);
background-size: 100% 100%;
background-repeat: no-repeat;
background-position: center center;
background-attachment: fixed;
height: 100%;
}
#splash-footer
{
position: absolute;
top: 96%;
height: 4%;
background-color: black;
width: 100%;
text-align: center;
color: white;
font-family: "hightide", arial, sans-serif;
}
#content
{
position: relative;
height: 100%;
overflow: auto;
}
#content-footer
{
position: absolute;
top: 96%;
height: 4%;
background-color: black;
width: 100%;
text-align: center;
color: white;
font-family: "hightide", arial, sans-serif;
}
#quote
{
text-align: center;
font-family: "ontwerp", arial, sans-serif;
position: fixed;
top: 30%;
left: 25%;
font-size: 3.5em;
color: white;
width: 50%;
height: auto;
}
#cloudlogin
{
background-attachment: fixed;
width: 100%;
height: 97%;
bottom: 3%;
position: relativ;
}
#headerbar
{
position: fixed;
z-index: 3;
background: url(../resources/img/gamer752-header.png);
background-size: 15% auto;
background-repeat: no-repeat;
background-position: center center;
width: 100%;
height: 7%;
top: 0%;
left: 0%;
background-color: black;
}
My HTML:
<html>
<head>
<link rel="stylesheet" type="text/css" href="resources/stylesheet.css" media="screen">
<title>amer752: Public</title>
<link rel="icon" href="resources/img/favicon.ico" type="image/x-icon" />
<script src="resources/js/jquery-1.10.1.js"></script>
<script src="resources/js/jquery.mousewheel.js"></script>
<script type="text/javascript">
//<![CDATA[
$(window).load(function(){
/* scroll events */
$("#splash").on("mousewheel", function (e) {
if (e.deltaY <= 0) {
$('#splash').animate({
height: 0
}, 500);
}
});
$("#content").on("mousewheel", function (e) {
if (e.deltaY > 0 && $(this).scrollTop() <= 0) {
$('#splash').animate({
height: '100%'
}, 500);
}
});
/* click events */
$("#splash-footer").on("click", function () {
$('#splash').animate({
height: 0
}, 500);
});
$("#content-footer").on("click", function () {
$('#splash').animate({
height: '100%'
}, 500);
});
});//]]>
</script>
<div id="headerbar"></div>
</head>
<div id="wrapper">
<div id="splash">
<div id="quote">
<p>The Art</p>
<p>Of</p>
<p>Doing Nothing.</p>
</div>
<div id="splash-footer">
<p>Click here or scroll</p>
</div>
</div>
<div id="content">
<div id="cloudlogin">
<iframe width=100% height=100% frameborder="0" src="cloud\index.html"></iframe>
</div>
<div id="content-footer">
<p>Click here or scroll</p>
</div>
</div>
</div>
</html>
I'm using Chrome and it will be enough when it just works for Chrome. Hope you guys know what's the matter.
PS. I'm new on stackoverflow. I do my best not to act like a total noob. If there's something I cloud do better just tell it me.
Thanks.