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

"

"

X vBulletin 4.2.2 Debug Information

  • Page Generation 0.18499 seconds
  • Memory Usage 2,900KB
  • Queries Executed 15 (?)
More Information
Template Usage (34):
  • (1)SHOWTHREAD
  • (1)ad_footer_end
  • (1)ad_footer_start
  • (1)ad_global_above_footer
  • (1)ad_global_below_navbar
  • (1)ad_global_header1
  • (1)ad_global_header2
  • (1)ad_navbar_below
  • (1)ad_showthread_firstpost_sig
  • (1)ad_showthread_firstpost_start
  • (1)ad_thread_first_post_content
  • (1)ad_thread_last_post_content
  • (1)bbcode_code
  • (1)bbcode_html
  • (1)footer
  • (1)forumjump
  • (1)forumrules
  • (1)gobutton
  • (1)header
  • (1)headinclude
  • (1)headinclude_bottom
  • (3)memberaction_dropdown
  • (1)navbar
  • (4)navbar_link
  • (1)navbar_moderation
  • (1)navbar_noticebit
  • (1)navbar_tabs
  • (2)option
  • (3)postbit
  • (3)postbit_onlinestatus
  • (3)postbit_wrapper
  • (1)spacer_close
  • (1)spacer_open
  • (1)tagbit_wrapper 

Phrase Groups Available (6):
  • global
  • inlinemod
  • postbit
  • posting
  • reputationlevel
  • showthread
Included Files (26):
  • ./showthread.php
  • ./global.php
  • ./includes/class_bootstrap.php
  • ./includes/init.php
  • ./includes/class_core.php
  • ./includes/config.php
  • ./includes/functions.php
  • ./includes/functions_navigation.php
  • ./includes/class_friendly_url.php
  • ./includes/class_hook.php
  • ./includes/class_bootstrap_framework.php
  • ./vb/vb.php
  • ./vb/phrase.php
  • ./includes/functions_facebook.php
  • ./includes/functions_calendar.php
  • ./includes/functions_bigthree.php
  • ./includes/class_postbit.php
  • ./includes/class_bbcode.php
  • ./includes/functions_reputation.php
  • ./includes/functions_notice.php
  • ./packages/vbattach/attach.php
  • ./vb/types.php
  • ./vb/cache.php
  • ./vb/cache/db.php
  • ./vb/cache/observer/db.php
  • ./vb/cache/observer.php 

Hooks Called (72):
  • init_startup
  • friendlyurl_resolve_class
  • init_startup_session_setup_start
  • database_pre_fetch_array
  • database_post_fetch_array
  • init_startup_session_setup_complete
  • global_bootstrap_init_start
  • global_bootstrap_init_complete
  • cache_permissions
  • fetch_postinfo_query
  • fetch_postinfo
  • fetch_threadinfo_query
  • fetch_threadinfo
  • fetch_foruminfo
  • load_show_variables
  • load_forum_show_variables
  • global_state_check
  • global_bootstrap_complete
  • global_start
  • style_fetch
  • global_setup_complete
  • showthread_start
  • showthread_getinfo
  • strip_bbcode
  • friendlyurl_clean_fragment
  • friendlyurl_geturl
  • forumjump
  • cache_templates
  • cache_templates_process
  • template_register_var
  • template_render_output
  • fetch_template_start
  • fetch_template_complete
  • parse_templates
  • fetch_musername
  • notices_check_start
  • notices_noticebit
  • process_templates_complete
  • friendlyurl_redirect_canonical
  • showthread_post_start
  • showthread_query_postids
  • showthread_query
  • bbcode_fetch_tags
  • bbcode_create
  • showthread_postbit_create
  • postbit_factory
  • postbit_display_start
  • postbit_imicons
  • bbcode_parse_start
  • bbcode_parse_complete_precache
  • bbcode_parse_complete
  • postbit_display_complete
  • memberaction_dropdown
  • tag_fetchbit_complete
  • forumrules
  • navbits
  • navbits_complete
  • build_navigation_data
  • build_navigation_array
  • check_navigation_permission
  • process_navigation_links_start
  • process_navigation_links_complete
  • set_navigation_menu_element
  • build_navigation_menudata
  • build_navigation_listdata
  • build_navigation_list
  • set_navigation_tab_main
  • set_navigation_tab_fallback
  • navigation_tab_complete
  • fb_like_button
  • showthread_complete
  • page_templates