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
John Levy
1,451 PointsTrouble lining up text in a box
I have one speech bubble with text in it. Beside the arrow I want to put a line of text. I tried to place it inside the CSS on line 28 on my code between the 'content'. The problem is once I do this the text moves up and overlaps the other text I have in my HTML code. How do I make the line of text I want to place on line 28 of my CSS code be placed underneath the box without moving any of the other elements? I have attached my code below- Thanks in advance
4 Answers
Harry James
14,780 PointsHey John,
The best way to do this is to use a <p> tag. I believe what you're probably trying to do is use a span class, which displays inline. A paragraph tag will display as a block instead, and give a "paragraph form" to your writing where each paragraph starts on a new line.
If for some reason you didn't want to use paragraph tags, the other option would be to change the display attribute of your span from inline to block.
Hopefully this fixes your problem but if not, give me a shout :)
John Levy
1,451 PointsThanks for the advice . I think I have figured it out. One other question slightly of topic. What is it that makes more than one element move at once? For example if I want to move paragraph 1 down a few inches what makes the others move down too? I am only trying to move one paragraph at a time but it seems sometimes when I move one the other two move as well. I thought as I labeled them different names only one would move at a time. What is the reason behind this and how do I stop this? This is the code for the 3 paragraphs- http://codepen.io/Johned22/pen/vKzAyd
Harry James
14,780 PointsHey again John,
To fix this, preferably you'd want to move paragraphs you want on the top to the top of the HTML file. However, there's no easy way to explain this because what you need to do varies a lot depending on where you want things positioned and in what order.
But in your codepen, try moving p.testimonal2 above p.testimonal, and you will notice that is no longer affected. Due to the block nature, elements will appear one under each-other, in the order of the HTML file. So as an example, if p1 is underneath p2 and you gave p1 a margin, p2 is still going to be underneath p1 the same amount it was before, even if p1 moves (That may sound rather confusing but there's no easy way to put it!)
If there's a specific thing you want to achieve with the paragraphs, let me know and I'll guide you through the best process to reach your goal.
John Levy
1,451 PointsThanks again for your reply. Right now I am trying to lay them out all on the same line side by side. I figured this out and just done this. I was just curious for future references what makes them move together if each paragraph is named something different. So if I move p.testimonal2 above p.testimonal1 they will not affect each other? Is the only way to stop this from occurring is to put the paragraphs in a different order in my HTML? Thanks
Harry James
14,780 PointsHey John,
This is not the only way of achieving this, but it is the best way if possible in your code.
There may be times however, where this is not a satisfactory answer for your problem. In which case, there are a few other things you can try depending on the scenario. To name one, absolute positioning could work in some cases. However, stick with the HTML ordering if you can because other methods could lead you into further problems with your layouts, especially if you are trying to make a relative layout.
John Levy
1,451 PointsOk, thanks again for your advice