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!
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
pgmd
6,895 PointsPlacing elements on a page!!!
I am still having a hard time figuring out how to place element on a page. I am working on a project and as I made changes, elements are starting to overlap and behave strangely!!!!! Any idea what I may have missed in the courses to make me an expert at this? That is my biggest CSS issue. Also, this project is using Bootstrap which seems to interfere with my coding and preventing changes I make form taking effect. I know that frameworks are suppose to save time but!!!!!
5 Answers
Jonathan Roosa
4,456 PointsThe issue may perhaps have something to do with floats, border-box, flexboxes, margin and padding values, or any assortment of those. Could you perhaps paste your code? It'll allow for myself and others to figure out the issue more easily.
I'd also recommend taking this course if you haven't already. It should help with figuring out CSS layouts.
Nicholas Mejia
23,800 PointsI would highly recommend taking a step back and doing Guil Hernandez's "CSS Layout Techniques" Deep Dive. If you don't have a solid understanding of how CSS layout technique's work, Bootstrap is only going to confuse you.
pgmd
6,895 PointsI shall do that! My issue is that I seem to understand the processes but when it comes to working on a project, that is a whole different issue. I am assuming that practice and lots of patience and frustration may be the answer!!!!
pgmd
6,895 PointsWhen working on a project, how do I know if they are using float, flexible or grid layout? Does it make much of a difference when working to make changes to the code?
Nicholas Mejia
23,800 PointsThose things tend to go hand in hand but if I had to differentiate, if they are using a grid, the units of measurement would be in pixels and if it was flexible (or fluid), the measurements would be in ems. As for using float, just look through your style sheets for any selector that has been assigned a float attribute. Hope this helps!
pgmd
6,895 PointsStill not sure about what I have but the information you gave me is appreciated. Here are tow pieces of code:
.main-header { position: fixed; top: 0; width: 100%; height: 120px; }
.feat-img {
width: 50%;
float: left;
margin-right: 25px;
}
}
pgmd
6,895 Pointspgmd
6,895 PointsHere is the code:
CSS: .navigation-container { width: 100%; margin-left: auto ; margin-right: auto ; height: 70px; background-color: transparent; }
.navigation-container ul { list-style-type: none; /to remove bullets/ text-align: center; margin: 0 auto; padding: 0px; display:table; overflow: hidden; } .navigation-container li { float: left; padding: 15px; width: 150px; margin-left: auto; margin-right: auto; display: inline-block; } /* philippe coding */ .navigation-container li a { color:#fff; background-color: #1DA2C4; padding: 10px; margin: 10px; border-radius: 10px; }
HTML: <div class="row" style="margin:10px auto;"> <div class="span8 navigation-container"> <ul> <li><a href="/">Home</a></li> <li><a href="/contactus.html">Contact Us</a></li> <li><a href="/sponsors.html">Sponsors</a></li> <li><a href="/stats.html">Statistics</a></li> <li><a href="/team.html">Team</a></li> </ul> </div> <div class="span4 social-icons"> <span class="icon-facebook icon-2x"></span> <span class="icon-twitter icon-2x"></span> <span class="icon-google-plus icon-2x"></span> </div> </div>
pgmd
6,895 Pointspgmd
6,895 PointsWhen working on a project, how do I know if they are using float, flexible or grid layout? Does it make much of a difference when working to make changes to the code?