0

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;
          }
      }

  }
pnuts
  • 58,317
  • 11
  • 87
  • 139
Derek Joseph
  • 59
  • 1
  • 5

5 Answers5

1

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.

Adam H.
  • 15
  • 5
1

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

Ahmed Eid
  • 1,145
  • 8
  • 9
1

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.

gbozee
  • 4,366
  • 1
  • 23
  • 23
  • You're a legend, htank you so much. I can't mark it as correct because I only have 13 rep points. When I have 15 I'll make it as correct. thanks again. :) – Derek Joseph Jul 15 '15 at 21:35
1

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.

PaulL
  • 35
  • 8
1

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>
vanburen
  • 21,502
  • 7
  • 28
  • 41