HTML/CSS/JS - Varifrån kommer den vita bakgrunden?
Hej!
Håller på med ett litet skolprojekt, där jag ska ha olika div boxar som man kan scrolla horisontellt. För att göra det lite enklare för mig så har jag använt ett plugin till detta: http://www.queness.com/post/356/create-a-vertical-horizontal-...
Hursom så har jag stött på ett problem.
I body har jag en background-img, men denna täcks över av någon annan div med vit färg, men jag kan inte för mitt liv lyckas hitta den och få ordning på det. Vill alltså ha bort den vita bakgrundsfärgen, så min bakgrundsbild syns.
Här är min kod:
HTML:
<!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>Electry - Electronic music news and releases!</title>
<link href="css/stylesheet.css" rel="stylesheet" type="text/css" />
<script src="js/jquery-1.7.2.min.js" type="text/javascript"></script>
<script type="text/javascript" src="js/jquery.scrollTo.js"></script>
<!-- Activates slider plugin --->
<script>
$(document).ready(function() {
$('a.panel').click(function () {
$('a.panel').removeClass('selected');
$(this).addClass('selected');
current = $(this);
$('#wrapper').scrollTo($(this).attr('href'), 800);
return false;
});
$(window).resize(function () {
resizePanel();
});
});
function resizePanel() {
width = $(window).width();
height = $(window).height();
mask_width = width * $('.item').length;
$('#debug').html(width + ' ' + height + ' ' + mask_width);
$('#wrapper, .item').css({width: width, height: height});
$('#mask').css({width: mask_width, height: height});
$('#wrapper').scrollTo($('a.selected').attr('href'), 0);
}
</script>
</head>
<body>
<!--------------- Menu ------------------------------------------------->
<div class="topmenu">
<div class="menu_buttons">
<div class="music_button">Music</div>
<div class="mixes_button">Mixes</div>
<div class="news_button">News</div>
</div>
</div>
<div class="underline"></div>
<!------------- End Menu ----------------------------------------------->
<!------------- Slider ------------------------------------------------->
<div id="wrapper">
<div id="mask">
<div id="item1" class="item">
<a name="item1"></a>
<div class="content">item1
<a href="#item1" class="panel">1</a> |
<a href="#item2" class="panel">2</a> |
<a href="#item3" class="panel">3</a> |
<a href="#item4" class="panel">4</a> |
<a href="#item5" class="panel">5</a> |
<a href="#item6" class="panel">6</a> |
<a href="#item7" class="panel">7</a>
</div>
</div>
<div id="item2" class="item">
<a name="item2"></a>
<div class="content">item2 <a href="#item1" class="panel">back</a></div>
</div>
<div id="item3" class="item">
<a name="item3"></a>
<div class="content">item3 <a href="#item1" class="panel">back</a></div>
</div>
<div id="item4" class="item">
<a name="item4"></a>
<div class="content">item4 <a href="#item1" class="panel">back</a></div>
</div>
<div id="item5" class="item">
<a name="item5"></a>
<div class="content">item5 <a href="#item1" class="panel">back</a></div>
</div>
<div id="item6" class="item">
<a name="item6"></a>
<div class="content">item6 <a href="#item1" class="panel">back</a></div>
</div>
<div id="item7" class="item">
<a name="item7"></a>
<div class="content">item7 <a href="#item1" class="panel">back</a></div>
</div>
</div>
</div>
<!----------- End Slider ----------------------------------------------->
<!------------- Footer ------------------------------------------------->
<div class="footer">
<div class="footer_menu">
<div class="footer_home_button">Home</div>
<div class="footer_services_button">Services</div>
<div class="footer_sound_button">Sound</div>
<div class="footer_light_button">Light</div>
<div class="footer_djs_button">DJs</div>
<div class="footer_about_button">About</div>
<div class="footer_contact_button">Contact</div>
</div>
</div>
<div class="madeby">NAME, 2013</div>
</body>
</html>
CSS:
@charset "utf-8";
/* CSS Document */
body {
background-color:#2f373b;
/* Background img, auto resize img for screen, while keeping aspect ratio */
background: url(img/SHM-COACHELLA.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
/* Stop background img */
margin:0px;
font-family:Verdana, Geneva, sans-serif;
color:#FFF;
height:100%;
width:100%;
margin:0;padding:0;
}
/* -------------------Menu------------------------ */
.topmenu {
background-color:#404040;
width:100%;
height:33px;
}
.underline {
background-color:#D14501;
width:100%;
height:2px;
}
.menu_buttons {
width:50%;
margin-left:auto;
margin-right:auto;
height:33px;
}
.music_button {
float:left;
margin-right:20px;
margin-top:7px;
}
.mixes_button {
float:left;
margin-right:20px;
margin-top:7px;
}
.news_button {
float:left;
margin-right:20px;
margin-top:7px;
}
/* -----------------End Menu---------------------- */
/* -----------------SLIDER------------------------ */
#wrapper {
width:100%;
height:100%;
position:absolute;
top:33;left:0;
overflow:hidden;
}
#mask {
width:700%;
height:100%;
background-color:rgba(0,0,0,0);
}
.item {
width:14%;
height:100%;
float:left;
}
.content {
width:900px;
height:600px;
top:20%;
margin:0 auto;
background-color:#aaa;
position:relative;
}
.selected {
background:#fff;
font-weight:700;
}
.clear {
clear:both;
}
/* ---------------END SLIDER---------------------- */
/* -----------------Footer------------------------ */
.footer {
background-color:rgba(255,255,255,0.3);
height:50px;
width:100%;
position:absolute;
bottom:35px;
}
.footer_menu {
padding-top:13px;
font-size:15px;
width:530px;
margin-left:auto;
margin-right:auto;
}
.footer_left_buttons {
float:left;
margin-right:30px;
}
.footer_right_buttons {
float:left;
margin-right:30px;
}
.footer_home_button {
margin-right:30px;
float:left;
}
.footer_services_button {
margin-right:30px;
float:left;
}
.footer_sound_button {
margin-right:30px;
float:left;
}
.footer_light_button {
margin-right:30px;
float:left;
}
.footer_djs_button {
margin-right:30px;
float:left;
}
.footer_about_button {
margin-right:30px;
float:left;
}
.footer_contact_button {
margin-right:30px;
float:left;
}
.madeby {
margin-right:10px;
color:rgba(255,255,255,0.2);
position:absolute;
bottom:7px;
right:5px;
}
/* ----------------End Footer--------------------- */
JS:
/**
* jQuery.ScrollTo
* Copyright (c) 2007-2009 Ariel Flesler - aflesler(at)gmail(dot)com | http://flesler.blogspot.com
* Dual licensed under MIT and GPL.
* Date: 5/25/2009
*
* @projectDescription Easy element scrolling using jQuery.
* http://flesler.blogspot.com/2007/10/jqueryscrollto.html
* Works with jQuery +1.2.6. Tested on FF 2/3, IE 6/7/8, Opera 9.5/6, Safari 3, Chrome 1 on WinXP.
*
* @author Ariel Flesler
* @version 1.4.2
*
* @id jQuery.scrollTo
* @id jQuery.fn.scrollTo
* @param {String, Number, DOMElement, jQuery, Object} target Where to scroll the matched elements.
* The different options for target are:
* - A number position (will be applied to all axes).
* - A string position ('44', '100px', '+=90', etc ) will be applied to all axes
* - A jQuery/DOM element ( logically, child of the element to scroll )
* - A string selector, that will be relative to the element to scroll ( 'li:eq(2)', etc )
* - A hash { top:x, left:y }, x and y can be any kind of number/string like above.
* - A percentage of the container's dimension/s, for example: 50% to go to the middle.
* - The string 'max' for go-to-end.
* @param {Number} duration The OVERALL length of the animation, this argument can be the settings object instead.
* @param {Object,Function} settings Optional set of settings or the onAfter callback.
* @option {String} axis Which axis must be scrolled, use 'x', 'y', 'xy' or 'yx'.
* @option {Number} duration The OVERALL length of the animation.
* @option {String} easing The easing method for the animation.
* @option {Boolean} margin If true, the margin of the target element will be deducted from the final position.
* @option {Object, Number} offset Add/deduct from the end position. One number for both axes or { top:x, left:y }.
* @option {Object, Number} over Add/deduct the height/width multiplied by 'over', can be { top:x, left:y } when using both axes.
* @option {Boolean} queue If true, and both axis are given, the 2nd axis will only be animated after the first one ends.
* @option {Function} onAfter Function to be called after the scrolling ends.
* @option {Function} onAfterFirst If queuing is activated, this function will be called after the first scrolling ends.
* @return {jQuery} Returns the same jQuery object, for chaining.
*
* @desc Scroll to a fixed position
* @example $('div').scrollTo( 340 );
*
* @desc Scroll relatively to the actual position
* @example $('div').scrollTo( '+=340px', { axis:'y' } );
*
* @dec Scroll using a selector (relative to the scrolled element)
* @example $('div').scrollTo( 'p.paragraph:eq(2)', 500, { easing:'swing', queue:true, axis:'xy' } );
*
* @ Scroll to a DOM element (same for jQuery object)
* @example var second_child = document.getElementById('container').firstChild.nextSibling;
* $('#container').scrollTo( second_child, { duration:500, axis:'x', onAfter:function(){
* alert('scrolled!!');
* }});
*
* @desc Scroll on both axes, to different values
* @example $('div').scrollTo( { top: 300, left:'+=200' }, { axis:'xy', offset:-20 } );
*/
;(function( $ ){
var $scrollTo = $.scrollTo = function( target, duration, settings ){
$(window).scrollTo( target, duration, settings );
};
$scrollTo.defaults = {
axis:'xy',
duration: parseFloat($.fn.jquery) >= 1.3 ? 0 : 1
};
// Returns the element that needs to be animated to scroll the window.
// Kept for backwards compatibility (specially for localScroll & serialScroll)
$scrollTo.window = function( scope ){
return $(window)._scrollable();
};
// Hack, hack, hack :)
// Returns the real elements to scroll (supports window/iframes, documents and regular nodes)
$.fn._scrollable = function(){
return this.map(function(){
var elem = this,
isWin = !elem.nodeName || $.inArray( elem.nodeName.toLowerCase(), ['iframe','#document','html','body'] ) != -1;
if( !isWin )
return elem;
var doc = (elem.contentWindow || elem).document || elem.ownerDocument || elem;
return $.browser.safari || doc.compatMode == 'BackCompat' ?
doc.body :
doc.documentElement;
});
};
$.fn.scrollTo = function( target, duration, settings ){
if( typeof duration == 'object' ){
settings = duration;
duration = 0;
}
if( typeof settings == 'function' )
settings = { onAfter:settings };
if( target == 'max' )
target = 9e9;
settings = $.extend( {}, $scrollTo.defaults, settings );
// Speed is still recognized for backwards compatibility
duration = duration || settings.speed || settings.duration;
// Make sure the settings are given right
settings.queue = settings.queue && settings.axis.length > 1;
if( settings.queue )
// Let's keep the overall duration
duration /= 2;
settings.offset = both( settings.offset );
settings.over = both( settings.over );
return this._scrollable().each(function(){
var elem = this,
$elem = $(elem),
targ = target, toff, attr = {},
win = $elem.is('html,body');
switch( typeof targ ){
// A number will pass the regex
case 'number':
case 'string':
if( /^([+-]=)?\d+(\.\d+)?(px|%)?$/.test(targ) ){
targ = both( targ );
// We are done
break;
}
// Relative selector, no break!
targ = $(targ,this);
case 'object':
// DOMElement / jQuery
if( targ.is || targ.style )
// Get the real position of the target
toff = (targ = $(targ)).offset();
}
$.each( settings.axis.split(''), function( i, axis ){
var Pos = axis == 'x' ? 'Left' : 'Top',
pos = Pos.toLowerCase(),
key = 'scroll' + Pos,
old = elem[key],
max = $scrollTo.max(elem, axis);
if( toff ){// jQuery / DOMElement
attr[key] = toff[pos] + ( win ? 0 : old - $elem.offset()[pos] );
// If it's a dom element, reduce the margin
if( settings.margin ){
attr[key] -= parseInt(targ.css('margin'+Pos)) || 0;
attr[key] -= parseInt(targ.css('border'+Pos+'Width')) || 0;
}
attr[key] += settings.offset[pos] || 0;
if( settings.over[pos] )
// Scroll to a fraction of its width/height
attr[key] += targ[axis="='x'?'width':'height'"]() * settings.over[pos];
}else{
var val = targ[pos];
// Handle percentage values
attr[key] = val.slice && val.slice(-1) == '%' ?
parseFloat(val) / 100 * max
: val;
}
// Number or 'number'
if( /^\d+$/.test(attr[key]) )
// Check the limits
attr[key] = attr[key] <= 0 ? 0 : Math.min( attr[key], max );
// Queueing axes
if( !i && settings.queue ){
// Don't waste time animating, if there's no need.
if( old != attr[key] )
// Intermediate animation
animate( settings.onAfterFirst );
// Don't animate this axis again in the next iteration.
delete attr[key];
}
});
animate( settings.onAfter );
function animate( callback ){
$elem.animate( attr, duration, settings.easing, callback && function(){
callback.call(this, target, settings);
});
};
}).end();
};
// Max scrolling position, works on quirks mode
// It only fails (not too badly) on IE, quirks mode.
$scrollTo.max = function( elem, axis ){
var Dim = axis == 'x' ? 'Width' : 'Height',
scroll = 'scroll'+Dim;
if( !$(elem).is('html,body') )
return elem[scroll] - $(elem)[Dim.toLowerCase()]();
var size = 'client' + Dim,
html = elem.ownerDocument.documentElement,
body = elem.ownerDocument.body;
return Math.max( html[scroll], body[scroll] )
- Math.min( html[size] , body[size] );
};
function both( val ){
return typeof val == 'object' ? val : { top:val, left:val };
};
})( jQuery );
MVH
Intel Core i7 7700K | Asus Strix 1080TI | MSI Z270 Gaming Pro Carbon | Corsair Vengeance 16GB 3000Mhz | EVGA G2 650W | WD 640GB Caviar Black | Samsung M.2 1TB SSD + Samsung SATA 500GB SSD
