www.webdeveloper.com
Results 1 to 3 of 3

Thread: div background not showing

  1. #1
    Join Date
    Apr 2011
    Posts
    46

    div background not showing

    background not showing nor when I set a bg color to black does the background show in this contained div...I'm at my limit. The slider-wrapper is what I want to have an image in the background, right now the color is not set (since I dont want it that way and was just testing) but the color will not show even when I set it. The foreground is the nivoslider, which has given me hell all day to the early morning. I finally got the thing to work but now the background issue.

    page is up here

    I already did a css validation, it hated the gradient thing, border radius and box shadows but too bad. No other errors.


    HTML
    HTML Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head>
    <title>Warped Entertainments</title>
    <meta name="description" content="The best and most affordable entertainment service in the Bloomington, IN area. We are a full service DJ with over 150,000 songs spanning across different genres, professional sound equipment, lighting and FX. Catering and other services such as security are available optionally. " />
    <meta name="keywords" content="local DJ, music for weddings, local music, DJ, warped entertainments, warped entertainment" />
    <meta name="author" content="Silverangel" />
    <link rel="stylesheet" type="text/css" media="screen" href="http://www.warpedentertainments.adklicks.info/css/style.css" />
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
    <script src="http://www.warpedentertainments.adklicks.info/js/jquery.nivo.slider.js" type="text/javascript"></script>
    <script type="text/javascript">
    $(window).load(function() {
        $('#slider').nivoSlider({
            effect: 'fade', // Specify sets like: 'fold,fade,sliceDown'
            slices: 15, // For slice animations
            boxCols: 8, // For box animations
            boxRows: 4, // For box animations
            animSpeed: 500, // Slide transition speed
            pauseTime: 3000, // How long each slide will show
            startSlide: 0, // Set starting Slide (0 index)
            directionNav: true, // Next & Prev navigation
            directionNavHide: true, // Only show on hover
            controlNav: true, // 1,2,3... navigation
            controlNavThumbs: false, // Use thumbnails for Control Nav
            pauseOnHover: true, // Stop animation while hovering
            manualAdvance: false, // Force manual transitions
            prevText: 'Prev', // Prev directionNav text
            nextText: 'Next', // Next directionNav text
            randomStart: false, // Start on a random slide
            beforeChange: function(){}, // Triggers before a slide transition
            afterChange: function(){}, // Triggers after a slide transition
            slideshowEnd: function(){}, // Triggers after all slides have been shown
            lastSlide: function(){}, // Triggers when last slide is shown
            afterLoad: function(){} // Triggers when slider has loaded
        });
    });
    </script>
    </head>
    
    <body>
    <div id="container">
    	<div id="header">
    		<div id="navigation">
    		<ul>
    			<li><a href="http://www.warpedentertainments.adklicks.info">
    	<img src='http://www.warpedentertainments.adklicks.info/images/servicesbtninact.png' alt="button" onmouseover="this.src='http://www.warpedentertainments.adklicks.info/images/servicesbtnact.png'" onmouseout="this.src='http://www.warpedentertainments.adklicks.info/images/servicesbtninact.png'"/></a></li>
    			<li><a href="http://www.warpedentertainments.adklicks.info/media.html"><img src='http://www.warpedentertainments.adklicks.info/images/mediabtninact.png' alt="button" onmouseover="this.src='http://www.warpedentertainments.adklicks.info/images/mediabtnact.png'" onmouseout="this.src='http://www.warpedentertainments.adklicks.info/images/mediabtninact.png'"/></a></li>
    			<li><a href="http://www.warpedentertainments.adklicks.info/contact.html"><img src='http://www.warpedentertainments.adklicks.info/images/contactbtninact.png' alt="button" onmouseover="this.src='http://www.warpedentertainments.adklicks.info/images/contactbtnact.png'" onmouseout="this.src='http://www.warpedentertainments.adklicks.info/images/contactbtninact.png'"/></a></li>
    		</ul>		
    		</div>
    		
    	</div>
    	<div id="content">
    		<div id="youtube">
    			<iframe width="196" height="110" src="http://www.youtube.com/embed/W1M0AOtfa-Y?rel=0" frameborder="0" allowfullscreen></iframe>
    			<iframe width="196" height="110" src="http://www.youtube.com/embed/ECaigBD15GI?rel=0" frameborder="0" allowfullscreen></iframe>
    			<iframe width="196" height="110" src="http://www.youtube.com/embed/B44_XgoAaRQ?rel=0" frameborder="0" allowfullscreen></iframe>
    			
    			</div>
    		
    			
    		
    			<div id="slider_wrapper">
    				<div id="slider" class="nivoSlider">
    				<img src="http://www.warpedentertainments.adklicks.info/images/walle.jpg" alt="img1" title="walle image" />
    				<img src="http://www.warpedentertainments.adklicks.info/images/nemo.jpg" alt="img2" title="nemo image" />
    				<img src="http://www.warpedentertainments.adklicks.info/images/up.jpg" alt="img3" title="up image" />
    				</div>
    			</div>
    			
    				
    	</div>
    
    
    	
    </div>
    </body>
    </html>
    css on next post

  2. #2
    Join Date
    Apr 2011
    Posts
    46
    CSS

    Code:
    /*=================================*/
    /* Nivo Slider Demo
    /* November 2010
    /* By: Gilbert Pellegrom
    /* http://dev7studios.com
    /*=================================*/
    
    /*====================*/
    /*=== Reset Styles ===*/
    /*====================*/
    
    body{
    background: #000000; /* Old browsers */
    /* IE9 SVG, needs conditional override of 'filter' to 'none' */
    background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIxMDAlIiB5Mj0iMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzAwMDAwMCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjUwJSIgc3RvcC1jb2xvcj0iIzkyMWNmNiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjUwJSIgc3RvcC1jb2xvcj0iIzE0NzhmZCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMwMDAwMDAiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
    background: -moz-linear-gradient(left,  #000000 0%, #921cf6 50%, #1478fd 50%, #000000 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, right top, color-stop(0%,#000000), color-stop(50%,#921cf6), color-stop(50%,#1478fd), color-stop(100%,#000000)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(left,  #000000 0%,#921cf6 50%,#1478fd 50%,#000000 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(left,  #000000 0%,#921cf6 50%,#1478fd 50%,#000000 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(left,  #000000 0%,#921cf6 50%,#1478fd 50%,#000000 100%); /* IE10+ */
    background: linear-gradient(to right,  #000000 0%,#921cf6 50%,#1478fd 50%,#000000 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000000', endColorstr='#000000',GradientType=1 ); /* IE6-8 */
    
    }
    
    caption, th, td {
    	text-align:left;
    	font-weight:normal;
    }
    
    
    /* HTML5 tags */
    /*header, section, footer,
    aside, nav, article, figure {
    	display: block;
    }
    
    /*===================*/
    /*=== Main Styles ===*/
    /*===================*/
    #container
    {
    	margin: 0 auto;
    	width: 1023px;
    	min-height:768px;
    	height: 100%;
    	background-image:url(http://www.warpedentertainments.adklicks.info/images/background.jpg);
    	background-position: top center;
    	background-repeat: no-repeat;
    	float: none;
    	outline:none;
    	-moz-border-radius:55px;
    	border-radius:55px;
       -webkit-box-shadow: -2px 4px 3px rgba(0, 0, 0, 0.87);
       -moz-box-shadow:    -2px 4px 3px rgba(0, 0, 0, 0.87);
       box-shadow:         -2px 4px 3px rgba(0, 0, 0, 0.87);
    	
    	
    	
    }
    
    
    #header
    {
    	
    
    	width: 100%;
    	height:78px;
    }
    
    #header h1 {
    	margin: 0; 
    	
    	}
    
    /*all btn are images in place of text for nav menu*/
    .btn1-hover {
    display:block;
    background-image:url(http://www.warpedentertainments.adklicks.info/images/servicesbtninact.png);
    width:297px;
    height:75px;
    outline:none;
    }
    .btn1-hover:hover {
    background-image:url(http://www.warpedentertainments.adklicks.info/images/servicesbtnact.png);
    width:297px;
    height:75px;
    outline:none;
    }
    
    	.btn2-hover {
    display:block;
    background-image:url(http://www.warpedentertainments.adklicks.info/images/mediabtninact.png);
    width:297px;
    height:75px;
    outline:none;
    }
    .btn2-hover:hover {
    background-image:url(http://www.warpedentertainments.adklicks.info/images/mediabtnact.png);
    width:297px;
    height:75px;
    outline:none;
    }
    	.btn3-hover {
    display:block;
    background-image:url(http://www.warpedentertainments.adklicks.info/images/contactbtninact.png);
    width:297px;
    height:75px;
    outline:none;
    }
    .btn3-hover:hover {
    background-image:url(http://www.warpedentertainments.adklicks.info/images/contactbtnact.png);
    width:297px;
    height:75px;
    outline:none;
    }
    	.btn4-hover {
    display:block;
    background-image:url(http://www.warpedentertainments.adklicks.info/images/buynowinact.png);
    outline:none;
    }
    .btn4-hover:hover {
    background-image:url(http://www.warpedentertainments.adklicks.info/images/buynowact.png);
    outline:none;
    }
    
    /*nav menu*/
    #navigation
    {
    	float:inherit;
    	width:895px;
    	height:78px;
    	outline:none;
    	padding-left:55px;
    	padding-top:20px;
    }
    
    #navigation ul
    {
    	margin: 0;
    	padding: 0;
    outline:none;
    }
    
    #navigation ul li
    {
    	list-style-type: none;
    	display: inline;
    outline:none;
    }
    
    #navigation li a
    {
    	display: block;
    	float: left;
    	padding:0px;
    	text-decoration: none;
    	outline:none;
    
    }
    #dev7link {
        position:absolute;
        top:0;
        left:50px;
        background:url(http://www.warpedentertainments.adklicks.info/images/dev7logo.png) no-repeat;
        width:60px;
        height:67px;
        border:0;
        display:block;
        text-indent:-9999px;
    }
    #content{
    	min-height:670px;
    	width:1023px;
    
    	
    	}
    	/*youtube*/
    #youtube{
    	height:110px;
    	width:618px;
    	position: static;
    	padding-bottom:100px;
    	
    }	
    /*============================*/
    /*=== Custom Slider Styles ===*/
    /*============================*/
    #slider-wrapper {
    	background-image: url(http://www.warpedentertainments.adklicks.info/images/slider.png);
    	background-repeat:no-repeat;
        width:998px;
        height:392px;
     	 float:right;
     	
    }
    
    #slider {
    	position:relative;
        width:618px;
        height:246px;
        margin-left:20%;
    	background:url(http://www.warpedentertainments.adklicks.info/images/loading.gif) no-repeat 50%;
    }
    #slider img {
    	position:absolute;
    	top:0px;
    	left:0px;
    	display:none;
    }
    #slider a {
    	border:0;
    	display:block;
    }
    /*the nivo slider styles*/
    
    
    .nivoSlider{
    	position:relative;	
    	}
    	
    	.nivoSlider img{
    	position:absolute;
    	top:0;
    	left:0;		
    		}
    	/*if an image is wrapped in a link*/	
    .nivoSlider a.nivo-imageLink{
    		position:absolute;;
    		top:0;
    		left:0;
    		width:100%;
    		height:100%;
    		border:0;
    		padding:0;
    		margin:0;
    		z-index:6;
    		display:none;	
    	}
    	/* The slices and boxes in the Slider */
    .nivo-slice {
    	display:block;
    	position:absolute;
    	z-index:5;
    	height:100%;
    	top:0;
    }
    .nivo-box {
    	display:block;
    	position:absolute;
    	z-index:5;
    	overflow:hidden;
    }
    .nivo-box img { display:block; }
    
    /*caption styles*/
    .nivo-caption {
        text-shadow:none;
        font-family: Helvetica, Arial, sans-serif;
        text-transform:uppercase;
        position:absolute;
        left:0;
        bottom:0;
        background:#000;
        color:#fff;
        opacity:0.8;
        width:100%;
        z-index:8;
        
        
    }
    
    .nivo-caption p{
    	padding:5px;
    	margin:0;	
    	}
    .nivo-caption a { 
        color:#efe9d1;
        text-decoration:none;
    }
    .nivo-caption a:hoover{
    	color:#0066cc;
    	text-decoration:underline;	
    	}
    
    .nivo-html-caption{
    	display:none;	
    	}
    	/*Direction nav styles (prev & Nex)*/
    	
    	.nivo-directionNav a {
    	display:block;
    	width:30px;
    	height:30px;
    	background:url(http://www.warpedentertainments.adklicks.info/images/arrows.png) no-repeat;
    	text-indent:-9999px;
    	border:0;
    	position: absolute;
    	top:45%;
    	z-index:9;
    	cursor:pointer;
    }
    a.nivo-nextNav {
    	background-position:-30px;
    	right:15px;
    }
    a.nivo-prevNav {
    	left:15px;
    }
    
    /*Control nav styles (e.g. 1,2,3...)*/
    	
    .nivo-controlNav a {
    	display:block;
    	width:22px;
    	height:22px;
    	background:url(http://www.warpedentertainments.adklicks.info/images/bullets.png) no-repeat;
    	text-indent:-9999px;
    	float:left;
    	border:0;
    	margin-left:5px;
    	margin-top:46px;
    	
    }
    .nivo-controlNav {
    	margin-left:446px;
    	
    }
    
    .nivo-controlNav a.active {
    	background-position:0 -22px;
    }
    
    
    
    
    /*====================*/
    /*=== Other Styles ===*/
    /*====================*/
    .clear {
    	clear:both;
    }

  3. #3
    Join Date
    Apr 2011
    Posts
    46
    I need to mention also that the code was written on a Linux mint 13 (with a linux moz browser for visual comparison) and bieng new to linux I was a bit blindsided about the compatability issues with windows browsers, especially IE. I am working on resolving this issue, thank you.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles