Derek Joseph
Reputation: 59
Trying to create a css style for a website (Bootstrap)
So I'm trying to get a style to apply to a section in my web page but it doesn't seem to be working. If I add the style to the head section it will work so I don't think I'm referencing it correctly or I'm not dividing the page properly. Below is my code:
<!--gallery-->
<div id="gall">
<div class="container">
<section>
<div id="gallery">
<br>
<div class="page-header">
<br>
<h2> Gallery <small>Conservation Joinery's gallery</small><h2>
</div>
<ul class="row page2" id="page2">
<li class="col-lg-2 col-md-2 col-sm-3 col-xs-4">
<img class="img-responsive" src="IMG1.jpg">
</li>
<li class="col-lg-2 col-md-2 col-sm-3 col-xs-4">
<img class="img-responsive" src="IMG2.jpg">
</li>
<li class="col-lg-2 col-md-2 col-sm-3 col-xs-4">
<img class="img-responsive" src="images/photodune-460760-colors-xs.jpg">
</li>
<li class="col-lg-2 col-md-2 col-sm-3 col-xs-4">
<img class="img-responsive" src="images/photodune-461673-retro-party-xs.jpg">
</li>
<li class="col-lg-2 col-md-2 col-sm-3 col-xs-4">
<img class="img-responsive" src="images/photodune-514834-touchscreen-technology-xs.jpg">
</li>
<li class="col-lg-2 col-md-2 col-sm-3 col-xs-4">
<img class="img-responsive" src="images/photodune-916206-legal-xs.jpg">
</li>
<li class="col-lg-2 col-md-2 col-sm-3 col-xs-4">
<img class="img-responsive" src="images/photodune-1062948-nature-xs.jpg">
</li>
<li class="col-lg-2 col-md-2 col-sm-3 col-xs-4">
<img class="img-responsive" src="images/photodune-1471528-insant-camera-kid-xs.jpg">
</li>
<li class="col-lg-2 col-md-2 col-sm-3 col-xs-4">
<img class="img-responsive" src="images/photodune-2255072-relaxed-man-xs.jpg">
</li>
<li class="col-lg-2 col-md-2 col-sm-3 col-xs-4">
<img class="img-responsive" src="images/photodune-2360379-colors-xs.jpg">
</li>
<li class="col-lg-2 col-md-2 col-sm-3 col-xs-4">
<img class="img-responsive" src="images/photodune-2360571-jump-xs.jpg">
</li>
<li class="col-lg-2 col-md-2 col-sm-3 col-xs-4">
<img class="img-responsive" src="images/photodune-2361384-culture-for-business-xs.jpg">
</li>
<li class="col-lg-2 col-md-2 col-sm-3 col-xs-4">
<img class="img-responsive" src="images/photodune-2441670-spaghetti-with-tuna-fish-and-parsley-s.jpg">
</li>
<li class="col-lg-2 col-md-2 col-sm-3 col-xs-4">
<img class="img-responsive" src="images/photodune-2943363-budget-xs.jpg">
</li>
<li class="col-lg-2 col-md-2 col-sm-3 col-xs-4">
<img class="img-responsive" src="images/photodune-3444921-street-art-xs.jpg">
</li>
<li class="col-lg-2 col-md-2 col-sm-3 col-xs-4">
<img class="img-responsive" src="images/photodune-3552322-insurance-xs.jpg">
</li>
<li class="col-lg-2 col-md-2 col-sm-3 col-xs-4">
<img class="img-responsive" src="images/photodune-3807845-food-s.jpg">
</li>
<li class="col-lg-2 col-md-2 col-sm-3 col-xs-4">
<img class="img-responsive" src="images/photodune-3835655-down-office-worker-xs.jpg">
</li>
<li class="col-lg-2 col-md-2 col-sm-3 col-xs-4">
<img class="img-responsive" src="images/photodune-4619216-ui-control-knob-regulators-xs.jpg">
</li>
<li class="col-lg-2 col-md-2 col-sm-3 col-xs-4">
<img class="img-responsive" src="images/photodune-5771958-health-xs.jpg">
</li>
<li class="col-lg-2 col-md-2 col-sm-3 col-xs-4">
<img class="img-responsive" src="images/photodune-268693-businesswoman-using-laptop-outdoors-xs.jpg">
</li>
<li class="col-lg-2 col-md-2 col-sm-3 col-xs-4">
<img class="img-responsive" src="images/photodune-352207-search-of-code-s.jpg">
</li>
<li class="col-lg-2 col-md-2 col-sm-3 col-xs-4">
<img class="img-responsive" src="images/photodune-247190-secret-email-xs.jpg">
</li>
<li class="col-lg-2 col-md-2 col-sm-3 col-xs-4">
<img class="img-responsive" src="images/photodune-682990-online-search-xs.jpg">
</li>
</ul>
</div> <!--gallery-->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-body">
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
</section>
</div><!--end of container -->
</div>
This is my style sheet.
.gall{
ul {
padding:0 0 0 0;
margin:0 0 0 0;
}
ul li {
list-style:none;
margin-bottom:25px;
}
ul li img {
cursor: pointer;
}
.modal-body {
padding:5px !important;
}
.modal-content {
border-radius:0;
}
.modal-dialog img {
text-align:center;
margin:0 auto;
}
.controls{
width:50px;
display:block;
font-size:11px;
padding-top:8px;
font-weight:bold;
}
.next {
float:right;
text-align:right;
}
/*override modal for demo only*/
.modal-dialog {
max-width:500px;
padding-top: 90px;
}
@media screen and (min-width: 768px){
.modal-dialog {
width:500px;
padding-top: 90px;
}
}
@media screen and (max-width:1500px){
#ads {
display:none;
}
}
}
Upvotes: 0
Views: 69
Answers (5)
vanburen
Reputation: 21663
You have all of your CSS rules enclosed in .gall {} which is basically making them void. Refer to the adjusted rules in the example below.
#gall ul {
padding: 0 0 0 0;
margin: 0 0 0 0;
}
#gall ul li {
list-style: none;
margin-bottom: 25px;
}
#gall ul li img {
cursor: pointer;
}
.modal-body {
padding: 5px !important;
}
.modal-content {
border-radius: 0;
}
.modal-dialog img {
text-align: center;
margin: 0 auto;
}
.controls {
width: 50px;
display: block;
font-size: 11px;
padding-top: 8px;
font-weight: bold;
}
.next {
float: right;
text-align: right;
}
/*override modal for demo only*/
.modal-dialog {
max-width: 500px;
padding-top: 90px;
}
@media screen and (min-width: 768px) {
.modal-dialog {
width: 500px;
padding-top: 90px;
}
}
@media screen and (max-width: 1500px) {
#ads {
display: none;
}
}<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<!--gallery-->
<div id="gall">
<div class="container">
<section>
<div id="gallery">
<br>
<div class="page-header">
<br>
<h2> Gallery <small>Conservation Joinery's gallery</small><h2>
</div>
<ul class="row page2" id="page2">
<li class="col-lg-2 col-md-2 col-sm-3 col-xs-4">
<img class="img-responsive" src="http://placehold.it/150x150/f00/fff">
</li>
<li class="col-lg-2 col-md-2 col-sm-3 col-xs-4">
<img class="img-responsive" src="http://placehold.it/150x150/f00/fff">
</li>
<li class="col-lg-2 col-md-2 col-sm-3 col-xs-4">
<img class="img-responsive" src="http://placehold.it/150x150/f00/fff">
</li>
<li class="col-lg-2 col-md-2 col-sm-3 col-xs-4">
<img class="img-responsive" src="http://placehold.it/150x150/f00/fff">
</li>
<li class="col-lg-2 col-md-2 col-sm-3 col-xs-4">
<img class="img-responsive" src="http://placehold.it/150x150/f00/fff">
</li>
<li class="col-lg-2 col-md-2 col-sm-3 col-xs-4">
<img class="img-responsive" src="http://placehold.it/150x150/f00/fff">
</li>
<li class="col-lg-2 col-md-2 col-sm-3 col-xs-4">
<img class="img-responsive" src="http://placehold.it/150x150/f00/fff">
</li>
<li class="col-lg-2 col-md-2 col-sm-3 col-xs-4">
<img class="img-responsive" src="http://placehold.it/150x150/f00/fff">
</li>
<li class="col-lg-2 col-md-2 col-sm-3 col-xs-4">
<img class="img-responsive" src="http://placehold.it/150x150/f00/fff">
</li>
<li class="col-lg-2 col-md-2 col-sm-3 col-xs-4">
<img class="img-responsive" src="http://placehold.it/150x150/f00/fff">
</li>
<li class="col-lg-2 col-md-2 col-sm-3 col-xs-4">
<img class="img-responsive" src="http://placehold.it/150x150/f00/fff">
</li>
<li class="col-lg-2 col-md-2 col-sm-3 col-xs-4">
<img class="img-responsive" src="http://placehold.it/150x150/f00/fff">
</li>
<li class="col-lg-2 col-md-2 col-sm-3 col-xs-4">
<img class="img-responsive" src="http://placehold.it/150x150/f00/fff">
</li>
<li class="col-lg-2 col-md-2 col-sm-3 col-xs-4">
<img class="img-responsive" src="http://placehold.it/150x150/f00/fff">
</li>
<li class="col-lg-2 col-md-2 col-sm-3 col-xs-4">
<img class="img-responsive" src="http://placehold.it/150x150/f00/fff">
</li>
<li class="col-lg-2 col-md-2 col-sm-3 col-xs-4">
<img class="img-responsive" src="http://placehold.it/150x150/f00/fff">
</li>
<li class="col-lg-2 col-md-2 col-sm-3 col-xs-4">
<img class="img-responsive" src="http://placehold.it/150x150/f00/fff">
</li>
<li class="col-lg-2 col-md-2 col-sm-3 col-xs-4">
<img class="img-responsive" src="http://placehold.it/150x150/f00/fff">
</li>
<li class="col-lg-2 col-md-2 col-sm-3 col-xs-4">
<img class="img-responsive" src="http://placehold.it/150x150/f00/fff">
</li>
<li class="col-lg-2 col-md-2 col-sm-3 col-xs-4">
<img class="img-responsive" src="http://placehold.it/150x150/f00/fff">
</li>
<li class="col-lg-2 col-md-2 col-sm-3 col-xs-4">
<img class="img-responsive" src="http://placehold.it/150x150/f00/fff">
</li>
<li class="col-lg-2 col-md-2 col-sm-3 col-xs-4">
<img class="img-responsive" src="http://placehold.it/150x150/f00/fff">
</li>
<li class="col-lg-2 col-md-2 col-sm-3 col-xs-4">
<img class="img-responsive" src="http://placehold.it/150x150/f00/fff">
</li>
<li class="col-lg-2 col-md-2 col-sm-3 col-xs-4">
<img class="img-responsive" src="http://placehold.it/150x150/f00/fff">
</li>
</ul>
</div> <!--gallery-->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-body">
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
</section>
</div><!--end of container -->
</div>Upvotes: 1
PaulL
Reputation: 35
Your stylesheet uses nesting. You have the "ul", "ul li", "ul li img" definitions within ".gall" (which should be "#gall" as an id reference, as others have noted).
Nesting in CSS can only be achieved with a preprocessor such as Sass. Granted, maybe you're already using a preprocessor, because I couldn't get your styles to work even after separating the selectors as standard CSS. But if you're not using the preprocessor, you should use more complicated selectors to indicate parent-child relationships, rather than nesting.
Upvotes: 1
gbozee
Reputation: 4796
Looks like you are attempting to use sass/scss as the css instead of css
Your css should look like this.
#gall ul {
padding:0 0 0 0;
margin:0 0 0 0;
}
#gall ul li {
list-style:none;
margin-bottom:25px;
}
#gall ul li img {
cursor: pointer;
}
#gall .modal-body {
padding:5px !important;
}
#gall .modal-content {
border-radius:0;
}
#gall .modal-dialog img {
text-align:center;
margin:0 auto;
}
#gall .controls{
width:50px;
display:block;
font-size:11px;
padding-top:8px;
font-weight:bold;
}
#gall .next {
float:right;
text-align:right;
}
/*override modal for demo only*/
#gall .modal-dialog {
max-width:500px;
padding-top: 90px;
}
@media screen and (min-width: 768px){
#gall .modal-dialog {
width:500px;
padding-top: 90px;
}
}
@media screen and (max-width:1500px){
#ads {
display:none;
}
}
This is valid css whlie the above stylesheet you placed looks like either scss/less which needs to be compiled to css.
Upvotes: 1
Ahmed Eid
Reputation: 1183
I can see that for the first div you have ,, you gave it id=gall but you select it in with period (class selector) in the style sheet you should use this #gall instead of .gall in stylesheet
Upvotes: 1
Adam H.
Reputation: 15
First problem I notice:
<div id="gall"> should be <div class="gall"> since you defined it in your CSS as .gall and not #gall.
Likewise, if you are loading this style sheet in your head AFTER bootstrap, it will override elements of the same names instead of those in the bootstrap library.
Upvotes: 1