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
Bonnie B
3,494 PointsLayout problem in "Convert Blog Listing and Single Post Templates"
In How to Build a WordPress Theme, Converting Static HTML into WordPress Templates, Convert Blog Listing and Single Post Templates, if I don't add a new CSS rule of ".excerpt { clear: both; }" then the excerpt content (and the content underneath it, before the Testimonial section) is all pushed off to the right (on both the Blog page, as well as on the single post pages for each individual entry.
Did anyone else run into this same problem? Did I miss something somewhere along the way? Is this the way to fix it (is this what was missing) or is there something else to be done instead?
5 Answers
Bonnie B
3,494 PointsOkay -- figured it out. For my sample blog posts, I had VERY little text (I just said something like "This is the first blog post's text.") With that small amount of text, the layout blows up without the CSS I mentioned in my first post. (Zac -- same thing in the template files you uploaded -- shorten up your posts, and the layout does what I described.)
So I'll keep my fix, I think, and move on to the next lesson!
NOTE: I did NOT fix the navbar issue in FF -- that's something to tackle another time (if then).
Ben Anggoro
36,161 PointsHi Bonnie B,
I don't have the same problem as you do, as in I dont have to add any new css rule on my own. But I have experienced a situation that you described while i was working on the thing, and I found out usually it's because I missed out closing divs somewhere. I think you need to check on the div's that's all.
Good Luck
Bonnie B
3,494 PointsThanks Ben -- no missing divs, though. (Most of the code is copied straight from the lesson -- and as I'll mention in my next response, even Zac's code does the same thing, so I'm completely confused how I'm seeing this and others aren't....)
Zac Gordon
Treehouse Guest TeacherHi Bonnie, is this an across browser issue? I just posted up the markup for the template files. There may be some misplaced markup somewhere?
Bonnie B
3,494 PointsHi Zac -- Yes, I'm seeing this in both Chrome and Firefox. And I pulled down your template files and swapped your theme folder for the one I built -- I'm seeing the same exact thing. (With Firefox, I see other problems, too -- like the navbar is stacked vertical instead of a horizontal bar -- that happens both in the theme I built and in your template files.)
Bonnie B
3,494 PointsJust updating this to tag Zac Gordon (the tagging didn't work when I tried before).
Zac Gordon
Treehouse Guest TeacherThanks! Glad you sorted it out!
Next time we use a different template!
Bonnie B
3,494 PointsFor anyone that wants to fix the navigation bar stacking problem (as I'd mentioned above that was seen in Firefox) -- it looks like if you change the "display: block;" to "display: inline-block;" in the "nav a" section in style.css, and add "width: 240px;" there, too, it fixes it.
(I checked it in FF 22, Chrome 28, and IE 10 -- it'll need some other tweaking to get the spacing right in IE 10.)
Zac Gordon
Treehouse Guest TeacherThanks so much Bonnie! There were a few bugs with that template we used, and I appreciate you posting this.
Bonnie B
3,494 PointsYou're welcome!
Giorgia Makris
3,377 PointsBonnie B you are a lifesaver!
Bonnie B
3,494 PointsGlad it was helpful to you Giorgia Makris!
Jeesun Kim
4,866 PointsBonnie B you are amazing. Thank you
Bonnie B
3,494 PointsThanks Jeesun Kim -- you're not so bad yourself. :)
(Glad it was a help to you.)