Issue
I'm so done looking at this code. I simply cannot find where I am making a mistake, however only a portion of my CSS is processing for my page. Literally, from the image down, and yet I am unable to find any issue. Even the gradient is processing correctly. Ironically, the footer, for example, is in fact processing here. Any ideas?
@charset "UTF-8";
.navbar-nav>.li>.a {
font-family: 'Arial';
font-weight: bold;
color: #000000;
font-size: 2px;
}
.navbar-default {
border-color: #000000;
}
.nav.navbar-nav a:hover {
color: #206E38;
}
.dropdown-menu .dropdown .dropdown-toggle a {
font-family: 'Arial';
font-weight: bold;
font-size: 12px;
letter-spacing: ;
}
.banner {
/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#ffffff+0,206e38+100&1+0,0.52+43,1+100 */
background: linear-gradient(-45deg, rgba(255,255,255,1) 0%, rgba(159,193,169,0.52) 43%, rgba(32,110,56,1) 100%); /* FF3.6-15 */
background: linear-gradient(-45deg, rgba(255,255,255,1) 0%,rgba(159,193,169,0.52) 43%,rgba(32,110,56,1) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(135deg, rgba(255,255,255,1) 0%,rgba(159,193,169,0.52) 43%,rgba(32,110,56,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#206e38',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
}
.ptobigtitle {
font-family:'Anton', sans-serif;
padding: 10px;
}
.ptosubtitle {
font-family: 'Quicksand', sans-serif;
font-variant: small-caps;
padding-left: 50px;
}
.navbar-btn {
float: right;
}
.btn-default {
background-color: #206E38;
color:#FFF;
}
.jumbotronimg {
float: right;
width: 250px;
height: 321px;
}
.learnmorebtn {
margin-left: 500px;
}
.articleheadline{
font-family: 'Anton', sans-serif;
font-size: 20px;
background: #A1C2AB;
color: #000;
letter-spacing: 2px;
padding: 5px;
max-width: 400px;
margin: 0 auto;
margin-left: auto;
margin-right: auto;
margin-top: 10px;
border-style: solid;
border-width: 1px;
}
.info{
bottom: 30px;
text-align: center;
}
.rightinfo{
bottom: 67px;
text-align: center;
}
.footer{
position: fixed;
left: 0;
bottom: 0;
width: 100%;
background-color: #CDCDCD;
}
.bottomfooter {
color:#FFF;
font-family: 'Arial';
font-size: 10px;
}
.mailsignup{
background: #CDCDCD;
font-family: 'Arial';
font-size: 8px;
}
.footerheading{
font-family: 'Anton', sans-serif;
font-size: 12px;
font-weight: bold;
text-align: center;
letter-spacing: 1px;
text-decoration: underline;
}.form-inline{
background: #CDCDCD;
}
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Shongum Elemantary School - Parent Teacher Organization</title>
<link rel="stylesheet" type="text/css" href="bootstrap/3/css/bootstrap.min.css" />
<script type="text/javascript" src="ScriptLibrary/jquery-latest.pack.js"></script>
<script type="text/javascript" src="bootstrap/3/js/bootstrap.min.js"></script>
<script type="text/javascript" src="ScriptLibrary/dmxBootstrap3Navigation.js"></script>
<script type="text/javascript" src="dmxAppConnect/dmxAppConnect.js"></script>
<link rel="stylesheet" type="text/css" href="bootstrap/3/css/dmxBootstrap3Forms.css" />
<script type="text/javascript" src="bootstrap/3/js/dmxBootstrap3Forms.js"></script>
<link href="https://fonts.googleapis.com/css?family=Anton" rel="stylesheet">
<script type="text/javascript">
function dmxBootstrap3ComponentsAction(type, target, action) { // v1.0
var evt = jQuery.event.fix(window.event || arguments.callee.caller.arguments[0]),
args = Array.prototype.slice.call(arguments, 2);
jQuery(target)[type](action);
evt.preventDefault();
}
</script>
<link href="css/styles.css" rel="stylesheet" type="text/css">
</head>
<body id="index" data-spy="scroll" data-target=".nav-container" is="dmx-app">
<nav class="navbar navbar-default navbar-fixed-top navbar-left" role="navigation">
<div class="nav-container container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs3-navbar-collapse"><span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span></button>
<img src="images/ShongumSkyhawkBird_Green_Brand.png" alt="Shongum Elementary School" class="skyhawk_navimage" width="45" height="56"></div>
<div class="collapse navbar-collapse" id="bs3-navbar-collapse">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown">About Us <b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<li><a href="#">Separated link</a></li>
<li class="divider"></li>
<li><a href="#">One more separated link</a></li>
</ul>
</li>
<li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown">Membership <b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<li><a href="#">Separated link</a></li>
<li class="divider"></li>
<li><a href="#">One more separated link</a></li>
</ul>
</li>
<li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown">Programs <b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<li><a href="#">Separated link</a></li>
<li class="divider"></li>
<li><a href="#">One more separated link</a></li>
</ul>
</li>
<li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown">Classes <b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="#">Kindergarden</a></li>
<li><a href="#">1st Grade</a></li>
<li><a href="#">2nd Grade</a></li>
<li><a href="#">3rd Grade</a></li>
<li><a href="#">4th Grade</a></li>
<li><a href="#">5th Grade</a></li>
</ul>
</li>
<li><a href="#">Store</a></li>
<li><a href="#">News/Calendar</a></li>
<li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown">RSD<b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<li><a href="#">Separated link</a></li>
<li class="divider"></li>
<li><a href="#">One more separated link</a></li>
</ul>
</li>
</ul>
<button type="button" class="btn btn-default navbar-btn" onClick="dmxBootstrap3ComponentsAction('modal','#modal','show')">Membership Sign-Up</button>
</div>
</div>
</nav>
<div class="jumbotron banner">
<img src="images/ShongumSkyhawkBird_bg.png" alt="Shongum Elemtary School - Skyhawks" class="img-responsive jumbotronimg img-rounded" id="jumbotronimg"/>
<h1 class="ptobigtitle">Shongum Elementary School</h1>
<h2 class="ptosubtitle">Parent Teacher Organization </h2>
<a class="btn btn-primarybtn-lg btn-default learnmorebtn" href="contentPages/about.php">Learn more »</a>
</div>
<div id="modal" class="modal fade" tabindex="-1" role="dialog">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title">Membership Sign-Up</h4>
</div>
<div class="modal-body">
<p>To become a member of the PTO, please fill out the below form.<br>
Thanks so much for joining and making Shongum a success!
</p>
<form id="form" method="post" role="form">
<div class="form-group">
<label for="input" class="control-label">Input</label>
<input type="text" class="form-control" name="input" id="input" placeholder="Text">
</div>
<div class="form-group">
<label for="input2" class="control-label">Input 2</label>
<input type="text" class="form-control" name="input1" id="input2" placeholder="Text">
</div>
<div class="form-group">
<label for="input3" class="control-label">Input 3</label>
<input type="text" class="form-control" name="input3" id="input3" placeholder="Text">
</div>
<div class="form-group">
<label for="input4" class="control-label">Input 4</label>
<input type="text" class="form-control" name="input4" id="input4" placeholder="Text">
</div>
<div class="form-group">
<label for="input5" class="control-label">Input 5</label>
<input type="text" class="form-control" name="input5" id="input5" placeholder="Text">
</div>
<div class="form-group">
<label for="input6" class="control-label">Input 6</label>
<input type="text" class="form-control" name="input6" id="input6" placeholder="Text">
</div>
<div class="form-group">
<label for="input7" class="control-label">Input 7</label>
<input type="text" class="form-control" name="input7" id="input7" placeholder="Text">
</div>
<div class="form-group">
<label for="input8" class="control-label">Input 8</label>
<input type="text" class="form-control" name="input8" id="input8" placeholder="Text">
</div>
<div class="form-group">
<label for="input9" class="control-label">Input 9</label>
<input type="text" class="form-control" name="input9" id="input9" placeholder="Text">
</div>
<div class="form-group">
<label for="select" class="control-label">Select</label>
<select class="form-control" name="select" id="select">
<option>1</option>
<option>2</option>
<option>3</option>
</select>
</div>
<div class="form-group">
<label for="select2" class="control-label">Select 2</label>
<select class="form-control" name="select" id="select2">
<option>1</option>
<option>2</option>
<option>3</option>
</select>
</div>
<div class="form-group">
<label for="select3" class="control-label">Select 3</label>
<select class="form-control" name="select" id="select3">
<option>1</option>
<option>2</option>
<option>3</option>
</select>
</div>
<div class="form-group">
<label for="select4" class="control-label">Select 4</label>
<select class="form-control" name="select" id="select4">
<option>1</option>
<option>2</option>
<option>3</option>
</select>
</div>
</form>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Submit Form</button>
</div>
</div>
</div>
<div class="col-lg-4 info">
<h2 class="articleheadline">This Heading will be controlled by db</h2>
<p>This content will be controlled by dB.</p>
<p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
</div>
<div class="col-lg-4 info">
<h2 class="articleheadline">This Heading will be controlled by db</h2>
<p>This content will be controlled by dB. </p>
<p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
</div>
<div class="col-lg-4 rightinfo">
<h2 class="articleheadline">This Heading will be controlled by db</h2>
<p>This content will be controlled by dB. </p>
<p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
</div>
<footer class="footer">
<div class="container-fluid">
<div class="row">
<div class="col-lg-4">
<h2 class="footerheading">OFFICERS</h2>
<p> </p>
</div>
<div class="col-lg-4">
<h2 class="footerheading">Heading</h2>
<p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
</div>
<div class="col-lg-4">
<!-- Begin MailChimp Signup Form -->
<link href="//cdn-images.mailchimp.com/embedcode/slim-10_7.css" rel="stylesheet" type="text/css">
<style type="text/css">
#mc_embed_signup{background:#fff; clear:left; font:12px 'Anton',sans-serif; width:500px;}
/* Add your own MailChimp form style overrides in your site stylesheet or in this style block.
We recommend moving this block and the preceding CSS link to the HEAD of your HTML file. */
</style>
<div id="mc_embed_signup">
<form action="https://ShongumPTO.us14.list-manage.com/subscribe/post?u=94f392b8b8898807cb75b5931&id=07d0e3a6fb" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate form-inline" target="_blank" novalidate>
<div class="mailsignup" id="mc_embed_signup_scroll">
<label class="footerheading" for="mce-EMAIL">Subscribe to the PTO mailing list</label>
<input type="email" value="" name="EMAIL" class="email" id="mce-EMAIL" placeholder="email address" required>
<!-- real people should not fill this in and expect good things - do not remove this or risk form bot signups-->
<div style="position: absolute; left: -5000px;" aria-hidden="true">
<input type="text" name="b_94f392b8b8898807cb75b5931_07d0e3a6fb" tabindex="-1" value="">
</div>
<div class="clear">
<input type="submit" value="Subscribe" name="subscribe" class="button">
</div>
</div>
</form>
</div>
<!--End mc_embed_signup-->
</div>
<div class="col-lg-12">
<p class="bottomfooter">Shongum Elementary School - PTO™️</p>
</div>
</div>
</footer>
</body>
</html>
Solution
I believe the problem is simply too many errors in your CSS. It is not that part of your stylesheet is not being applied, it is that many of your rules are written incorrectly so that they do not style elements as you appear to intend. For example, this selector
.navbar-nav>.li>.a {
does not select anything, because it would only select elements of class "a" which are direct descendants of elements of class "li" which in turn are direct descendants of elements of class "navbar-nav", and there are no such elements in your HTML. You might mean
.navbar-nav > li > a
which selects <a>
elements which are direct descendants of <li>
elements which are direct descendants of elements with class "navbar-nav", though you might also mean something else (we don't know what you're trying to do with that style). You will just need to go through and fix all the errors in your CSS.
Answered By - kenS
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.