Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS

Posted by Raul Rodriguez
Raul Rodriguez
Courses Plus Student 221 Points

problem with css and html

Please i would like to know why the banner on the top and the banner below to the big banner are out place, its suppose to line with the post section http://raulphotodesign.com/sample/index.html

here how suppose to look http://raulphotodesign.com/sample/Home.jpg

Please somebody that can clear my mine to know where my mistake.

1 Answer

Sergio Alen
Sergio Alen
26,726 Points
Sergio Alen
Sergio Alen
26,726 Points

you have the class Photography nested inside each other which makes no sense. Use bootstrap grid system instead. According to your mock up you'd want to do the following:

<!-- main container -->
<div class="container-fluid">
   <div class="row">
      <div class="col-xs-6 photography">
         <!-- Photography content goes here -->
      </div>
      <div class="col-xs-6 film">
         <!-- Film content goes here -->
      </div>
   </div>
   <div class="row">
      <div class="col-xs-6 graphic">
         <!-- Graphic design content goes here -->
      </div>
      <div class="col-xs-6 webdev">
         <!-- web Development content goes here -->
      </div>
   </div>
</div>
<!-- end main container -->
Raul Rodriguez
Raul Rodriguez
Courses Plus Student 221 Points

So inside photography i have to work with this code

<div class="Photography">
<figure> <img src="imagen/photography.jpg" alt="Photography" class="img-responsive">
</figure>
<figcaption>
<h1>Photography</h1>
 <p>Life is short, we capture the special moments 
<br>
 so you can relax and kick it, we got this!
 </p>
 <a href="#" class="button btn btn-default">View our work</a>
</figcaption
</div>
Raul Rodriguez
Raul Rodriguez
Courses Plus Student 221 Points

Ok this is what i did just only one problem one of the banner are down and dont know what happend. http://raulphotodesign.com/sample/index.html

<div class="container"> <div class="row"> <div class="col-xs-12"> <section id="main-banners"> <div class="photography"> <figure> <img src="imagen/photography.jpg" alt="Photography" class="img-responsive"> </figure> <figcaption class=""> <h1>Photography</h1> <p>Life is short, we capture the special moments so you<br> can relax and kick it, we got this!</p> <a href="#" class="button btn btn-default">View our work</a> </figcaption> </div> <div class="film"> <figure> <img src="imagen/film.jpg" alt="Film" class="img-responsive"> </figure> <figcaption> <h1>Film</h1> <p>Life is short, we capture the special moments so you<br> can relax and kick it, we got this!</p> <a href="#" class="button btn btn-default">View our work</a> </figcaption> </div> <div class="design"> <figure> <img src="imagen/graphic-design.jpg" alt="Graphic Design" class="img-responsive"> </figure> <figcaption> <h1>Graphic Design</h1> <p>A logo should first be memorable, and have a symbolic essence...</p> <a href="#" class="button btn btn-default">View our work</a> </figcaption> </div> <div class="web"> <figure> <img src="imagen/web-development.jpg" alt="Photography" class="img-responsive"> </figure> <figcaption> <h1>Web Development</h1> <p>In the age of the Internet where everything is being copied and commoditized...</p> <a href="#" class="button btn btn-default">View our work</a> </figcaption> </div> </section> </div> </div> </div>