asked on How can I prevent this text from running on top of my graphic?
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:
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?
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?
CSS
Last Comment
Robert Granlund
The ID for #iemarquee is missing. In the CSS add more to the top.
ASKER
rganlund!
I smell what you're cooking, but where's "#iemarquee" referenced?
I smell what you're cooking, but where's "#iemarquee" referenced?
ASKER CERTIFIED SOLUTION
THIS SOLUTION ONLY AVAILABLE TO MEMBERS.
View this solution by signing up for a free trial.
Members can start a 7-Day free trial and enjoy unlimited access to the platform.