troubleshooting Question

How can I prevent this text from running on top of my graphic?

Avatar of Bruce Gust
Bruce GustFlag for United States of America asked on
CSS
3 Comments1 Solution99 ViewsLast Modified:
Head out to http://countryshowdown.com/app/index.php#

There's a scrolling marquee going on that's running over the top of the graphics. Here's the HTML for the index page:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<?php
include ("carter.inc");
$cxn = mysqli_connect($host,$user,$password,$database)
or die ("couldn't connect to server");
?>
<html xmlns="http://www.w3.org/1999/xhtml">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
<head>
  <title></title>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
  <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.2/jquery-ui.min.js"></script>
  <script type="text/javascript" src="js/jquery.pushmenu.js"></script>
  <script type="text/javascript" src="js/jquery.ibutton.js"></script>
  <script type="text/javascript" src="js/bootstrap.js"></script>
  <script type="text/javascript" src="js/allinone_contentSlider.js"></script>
  <script type="text/javascript" src="js/jquery.ui.touch-punch.min.js"></script>
  <!--<script type="text/javascript" src="js/jquery.hoverIntent.minified.js"></script>-->
  <!--<script type="text/javascript" src="js/jquery.pushmenu.hoverintent.js"></script>-->

  <link type="text/css" rel="stylesheet" href="css/style.css" />
  <script type="text/javascript">
  $(document).ready(function(){
    $('.main-nav-wrap').pushmenu({
             open_easing  : 'easeOutCirc',
			 open_height  : 250,
			 open_speed   : 300,
			 close_speed  : 800,
			 close_easing : 'easeOutCirc',
			 slide_speed  : 500,
			 slide_easing : 'swing',
             intent_delay : 200,   //use with HoverIntent scripts
             intent_sensitivity : 7   //use with HoverIntent scripts
    });
	
  });
   $(window).load(function(){
	   $('.altMenu').hide();
	   $('#contestant_sub').hide();
	   $('#showdown_sub').hide();
	   $('#about_sub').hide();
	   $('#songwriting_sub').hide();

	   
   });
  </script>
  <script>
  $(function() {	
	//===== 2 responsive buttons (320px - 480px) =====//
	
	$('.iButton').click(function () {
		$('.altMenu').slideToggle(100);
		$('.altMenu').css('display:inline-block');
	});
		$('a').click(function() {
		$(this).closest('li').children("ul").toggle(200); //fade
		$('ul#about_sub_level2').css('display','block');
	});
	//$("a").click();
});
</script>
<script>
		jQuery(function() {

			jQuery('#allinone_contentSlider_imposing').allinone_contentSlider({
				skin: 'imposing',
				width: 1920,
				height: 600,
				width100Proc:true,
				responsive:true,
				autoHideBottomNav:false,
				showPreviewThumbs:false,
				showNavArrows:false
			});		
			
			
		});
		function about()
		{
			$('#contestant_sub').hide();
			$('#showdown_sub').hide();
			$('#songwriting_sub').hide();
		}
		function contestant()
		{
			$('#about_sub').hide();
			$('#showdown_sub').hide();
			$('#songwriting_sub').hide();
		}
		function showdown()
		{
			$('#about_sub').hide();
			$('#contestant_sub').hide();
			$('#songwriting_sub').hide();
		}
		function songwriting()
		{
			$('#contestant_sub').hide();
			$('#showdown_sub').hide();
			$('#about_sub').hide();
		}
	</script>
</head>

<body class="yahoo-analyze-include">
<div class="grid_12 col12">
	<div class="logo">
    	<a href="index.php"><img src="images/logo.png"></a>
    </div>
    <header>
    	<div class="socailIcons">
        	<a href="http://www.facebook.com/pages/Texaco-Country-Showdown/196491610361621" target="_blank"><img src="images/socialIcons/facebook.png"></a>
            <a href="http://twitter.com/#!/countryshowdown" target="_blank"><img src="images/socialIcons/twitter.png"></a>
            <a href="http://www.youtube.com/user/countryshowdown" target="_blank"><img src="images/socialIcons/youtube.png"></a>
        </div>
    </header>
</div>
<div class="topNav"><!--TOPNAV STARTS-->
        	<ul class="userNav">
             </ul>
            <a title="" class="iButton"></a>
            <ul class="altMenu">
           		 <li><a href="index.php" title="">Home</a></li>
           		 <li><a href="#" title="" onclick="return about();">About</a>
                     <ul id="about_sub" class="submenu">
                       <li><a href="whatIsTheShowdown.php">What is the Showdown</a></li>
                       <li><a href="ContestLocations.php">Contest Locations</a></li>
                       <li><a href="contestants.php" title="" onclick="return false;">View Contestants</a>
							<ul id="about_sub_level2" style="display:none">
								<li><a href="contestants.php">Current Contestants </a></li>
								<li><a href="ContestantList_alumni.php">Alumni </a></li>
								<li><a href="HallofFame.php">Hall of Fame </a></li>
								<li><a href="contests_winner_circle.php">Winners' Circle</a></li>
							</ul>
					   </li>
                     </ul>
                 </li>
                 <li><a href="#" title="" onclick="return contestant();">Contestants</a>
                    <ul id="contestant_sub" class="submenu">
           		        <li><a href="how_to_enter.php">How To Enter</a></li>
                        <li><a href="ContestLocations.php">Contest Locations</a></li>
                        <li><a href="whoCanEnter.php">Who May Enter</a></li>
                        <li><a href="registration.php">Registration</a></li>
                        <li><a href="Rules.php">Rules</a></li>
                        <li><a href="faq.php">FAQs</a></li>
                        <li><a href="roadToFinal.php">The Road to Finals</a></li>
					</ul>
                  </li>
                  <li><a href="#" onclick="return showdown();">Showdown Fans</a>
                     <ul id="showdown_sub" class="submenu" >
                       <li><a href="tv_schedule.php">TV Stations</a></li>
                       <li><a href="News.php">News Room</a></li>
                       <li><a href="videoGallery.php">Video Gallery</a></li>
                       <li><a href="album_gallery.php">Photo Gallery</a></li>
                       <li><a href="winnersCircle.php">Winners' Circle</a></li>
                       <li><a href="http://countryshowdown.com/Store/">Showdown Store</a></li>
			         </ul>  
                  </li> 
					<li><a href="#" onclick="return songwriting();">Songwriting Contest</a>
						<ul id="songwriting_sub" class="submenu">
							<li><a href="songwriting_intro.php">About</a></li>
							<li><a href="songwriting_contestant_list.php">Contestants</a></li>
						</ul>
					</li>
				  <li><a href='faq.php' class="exp subClosed">FAQs</a></li>
				  <li><a href="contact.php" title="" class="exp subClosed">Contact</a></li>
        	</ul>
</div>

<!-- start main-nav-wrap -->
  <div class="main-nav-wrap">
  <!-- start main-nav : top level menu links -->
  <div class="container_sub main-nav">
    <ul>

      <a  href="#"><li id="home" class="nav-links"><p>Login</p></li></a>
      <a  href="#"><li id="products" class="nav-links"><p>Newsletter</p></li></a>
      <a  href="#"><li id="media" class="nav-links"><p>Search</p></li></a>
    </ul>
  </div>
  <!-- start sub-menu container -->
  <div class="main-subnav">
    <div class="container_sub">

   <!-- start sub-menu 1 -->
      <div class="sub-menu">
        <div class="sub-container">
          <ul class="grid_3 alpha">
			<form action="contestants_validate.php" method="Post" style='display:inline;' id="login" onsubmit="return verifyRequriedLogin()">
            <li><input type="email" name="email" placeholder="Email" class="loginEmail">
                <input type="password" name="password" placeholder="Password" class="loginPassword"></li>
            <li><input type="submit" name="submit" value="Login" class="buttonM bBlue"></li>
			</form>
			<script type="text/javascript">
			var login = document.getElementById('login');
			function verifyRequriedLogin() {
			  if (login["email"].value == "") {
				login["email"].focus();
				alert("The Email field is required.");
				return false;
			  }
			  if (login["password"].value == "") {
				login["password"].focus();
				alert("The Password field is required.");
				return false;
			  }
			return true;
			}
		</script>
		  </ul>
        </div>
      </div>
   <!-- end sub-menu 1 -->

   <!-- start sub-menu 2 -->
     <div  class="sub-menu">
        <div class="sub-container">
          <ul>
		  	<form method=post action="https://app.icontact.com/icp/signup.php" name="icpsignup" id="icpsignup4932" accept-charset="UTF-8" onsubmit="return verifyRequired4932();" >
			
          	<li><input type="email" name="fields_email" placeholder="Enter your Email" class="loginEmail"></li>
			<li><input type="text" name="fields_fname" placeholder="Enter your First Name" class="loginEmail"></li>
			<input type=hidden name=redirect value="http://www.hihatwebdesign.com/Showdown/mobilesite3/email_thankyou.php" />
			<input type=hidden name=errorredirect value="http://www.icontact.com/www/signup/error.html" />
								  <input type=hidden name="listid" value="72719">
					<input type=hidden name="specialid:72719" value="3AIP">

					<input type=hidden name=clientid value="613341">
					<input type=hidden name=formid value="4932">
					<input type=hidden name=reallistid value="1">
					<input type=hidden name=doubleopt value="0">
            <li><input type="submit" name="submit" value="Register" class="buttonM bBlue"></li>
			</form>
           </ul>
        </div>
		<script type="text/javascript">
					var icpForm4932 = document.getElementById('icpsignup4932');
					if (document.location.protocol === "https:")
						icpForm4932.action = "https://app.icontact.com/icp/signup.php";
					function verifyRequired4932() {
					  if (icpForm4932["fields_email"].value == "") {
						icpForm4932["fields_email"].focus();
						alert("The Email field is required.");
						return false;
					  }
					  if (icpForm4932["fields_fname"].value == "") {
						icpForm4932["fields_fname"].focus();
						alert("The First name field is required.");
						return false;
					  }
					return true;
					}
		</script>
      </div>
       <!-- end sub-menu 2 -->

       <!-- start sub-menu 3 -->
    <div  class="sub-menu">
       <div class="sub-container">
           <ul>
		    <form action="search.php" method="Post" style='display:inline;'>
           	<li><input type="textarea" name="login" placeholder="Search" class="loginEmail"></li>
            <li><input type="submit" name="submit" value="Search" class="buttonM bBlue"></li>
			</form>
        </div>
      </div>
      <!-- end sub-menu 3 -->
    </div>
  </div>
  <!-- end main-nav -->
</div>
<div class="col12 slider">
    	<div id="allinone_contentSlider_imposing">
                <!-- CONTENT -->
                <ul class="allinone_contentSlider_list">              
                    <li data-text-id="#allinone_contentSlider_photoText1">
                    	<A HREF="showdown.php"><img src="images/slider/welcome.png" width="1920" height="600" alt=""  border="0"/></a>
                    </li>
					 <li data-text-id="#allinone_contentSlider_photoText3">
                    	<A HREF="NewsDisplay.php?id=561"><img src="images/slider/national_final_2015.png" width="1920" height="600" alt="" border="0"/></a>
                    </li>
                    <li data-text-id="#allinone_contentSlider_photoText2">
                    	<A HREF="how_to_enter.php"><img src="images/slider/how_to_enter.png" width="1920" height="600" alt="" />
                    </li>
                	 <li  data-text-id="#allinone_contentSlider_photoText5">
                    	<A HREF="News"><img src="images/slider/headlines.png" width="1920" height="600" alt="" border="0" /></a>
                    </li>
				 </ul>    
           </div>
</div>
<div class="col12 mar">
		<p><?php require_once('marquee.php'); ?></p>
    	<!--<p>Contest starts in just 2 weeks</p>-->
</div>
<div class="col12 cHolder">
    	<iframe width="274" height="184" src="http://www.youtube.com/embed/-urefMXa8CY?autostart=0&rel=0&showinfo=0" frameborder="0" allowfullscreen></iframe>
        <span>Video</span>
    </div>
    <div class="col12 cHoldernews">
    <span>Whats new</span>
    	<ul class="news">
			<?php include('news_display.php'); ?>
		</ul>
     </div>
      <div class="col12 cHolderprofile">
     	<span>top 10 profiles 2013</span>
        	<ul class="profile">
			 <ul class="profile">
			<?php require_once('top_10.php'); ?>
             </ul>
             </ul>
       </div>
       <div class="col12 facebook">
       	<span class="fb-title">Facebook</span>
        <ul class="face">
			<li>
				<div class="fb-like"  data-href="http://www.facebook.com/TexacoCountryShowdown" data-send="true" data-width="320" data-show-faces="false"></div>
			</li>
		</ul>
			<div id="fb-root"></div>
			<script>(function(d, s, id) {
			var js, fjs = d.getElementsByTagName(s)[0];
			if (d.getElementById(id)) return;
			js = d.createElement(s); js.id = id;
			js.src = "//connect.facebook.net/en_US/all.js#xfbml=1";
			fjs.parentNode.insertBefore(js, fjs);
			}(document, 'script', 'facebook-jssdk'));</script>
			
			
      </div>
	  
      <div class="col12 twitter">
      	<span class="twitter-title">Twitter</span>
        <ul class="twi">
			<?php require_once('twitter.php'); ?>
        </ul>
      </div>
      <div class="col12 favorites">
      	<span>Favorites</span>
         <a href="News.php"><img src="images/fav1.png"></a>
        <a href="roadToFinal.php"><img src="images/fav2.png"></a>
        <a href="HallofFame.php"><img src="images/fav3.png"></a>
        <a href="contests_winner_circle.php"><img src="images/fav4.png"></a>
        <a href="songwriting_contestant_list.php"><img src="images/fav5.png"></a>
      </div>
      <div class="col12 footer">
      	<ul class="foter">
        	<li><a href="index.php">Home</a></li>
			<li class="breaker">|</li>
            <li><a href="HowToEnter.php">How To Enter</a></li>
			<li class="breaker">|</li>
            <li><a href="whatIsTheShowdown.php">Showdown</a></li>
			<li class="breaker">|</li>
            <li><a href="winnersCircle.php">Winner's Circle</a></li>
			<li class="breaker">|</li>
            <li><a href="SiteMap.php">Site Map</a></li>
			<li class="breaker">|</li>
            <li><a href="contact.php">Contact</a></li>
			<li class="breaker">|</li>
            <li><a href="conditions.php">Terms of Use</a></li>
			<li class="breaker">|</li>
            <li><a href="privacy.php">Legal/Privacy</a></li>
			<li class="breaker">|</li>
            <li><a href="http://www.specialpromotionsinc.com/">Special Promotions Inc. | 63 Music Square East 
Nashville, TN 37203 
(p) 615.321.5130 | (f) 615. 320.1708</a></li>
        </ul>
        </div>
</body>

</html>

The problem appears to be on line 292: "<div class="col12 mar"> I want that div to be positioned beneath the graphic. Right now it's running along the bottom portion. How can I position it beneath the carousel?

I've tried "margin-top" and some other things and I decided I must be missing something.

Thoughts?
ASKER CERTIFIED SOLUTION
Robert Granlund

Our community of experts have been thoroughly vetted for their expertise and industry experience.

Join our community to see this answer!
Unlock 1 Answer and 3 Comments.
Start Free Trial
Learn from the best

Network and collaborate with thousands of CTOs, CISOs, and IT Pros rooting for you and your success.

Andrew Hancock - VMware vExpert
See if this solution works for you by signing up for a 7 day free trial.
Unlock 1 Answer and 3 Comments.
Try for 7 days

”The time we save is the biggest benefit of E-E to our team. What could take multiple guys 2 hours or more each to find is accessed in around 15 minutes on Experts Exchange.

-Mike Kapnisakis, Warner Bros