Hello, I have exercise where I should make the same text page using CSS.
Unfortunately, after a lot of attempts and googling it’s still not working.
Someone told me to use display: flex, but in this exercise I should be using only block,inline or inline-block.
Providing pictures of code is not the best way to get help. Do you have this project in a public place where we can access it, such as codepen? If so, please provide us with a link. If you don’t then I would highly recommend you create a codepen with the relevant code so we can see it and play with it.
If you don’t want to do that then you could paste your code in here but that isn’t always as easy for us to troubleshoot and so you might not get an answer as fast.
Is the bottom picture how it looks now?
If all the text has to be on one line then you have to set the div and p elements to inline or inline-block, the span and a elements are already inline.
<div>div element</div>
<p>p element</p>
<a href="">a</a>
<span>span</span>
div {
display: inline-block;
}
p {
display: inline-block;
}
If it is the opposite (all elements on a separate line), then you have to set the span and a elements to be display: block
Hi, thank you for advice.
I have created it in codepen, so you can check it out.
A Pen by MeJIbHuK (codepen.io)
Hi, yes the bottom picture how it looks now and the first how it should be.
I need the second line , with span and a to be put one after another however it’s still not working, even after I set span and a elements to be display: block.
I have created codepen, so could you check it out?
A Pen by MeJIbHuK (codepen.io)
Thanks for the codepen. But I’m still not sure what you are trying to do? Are you trying to turn all of this into one big paragraph of text?
So as you can see on a second picture, < a > element is on a third line, but it should be on a second one right after < span > element , like the first picture shows.
Why do you have display: block set on the <span> before the <a>? Forcing an element to have block display makes it behave like a big block and the element following it will be on a new line.
Well, are you referring to my codepen? If so, I just tried what the guy from above told me to. If you are about my code-picture then I have no idea, that’s actually why I need help.
Yes, I am referring to your codpen. @lasjorg did not tell you to set the display to block for <span> elements.
In other words, you don’t need to do anything to them to have them on the same line.
Then what about this?
I don’t need all the text be in one line. Check picture one with red color elements, that’s the result I must have. On the second picture is what I have till now.
From @lasjorg (bold emphasis mine):
“If it is the opposite (all elements on a separate line), then you have to set the span and a elements to be display: block”
I thought you wanted the <span> and <a> to be on the same line?
I fear I am confused and don’t know what you are trying to do. It would be better if you didn’t rely on those pictures and just explained in clear language what you are trying to do.
But if my understanding is correct and you do want the <span> and <a> to be on the same line then you don’t want to use display block for either of them.
@chaspick
If my understanding is correct, you’re trying to implement the design of the second picture you posted, using the HTML of the first picture, and you can only implement it using CSS (you can’t change the HTML). Is that right?
Yes I want ‘span’ and ‘a’ to be on the same line, but not on the same line with ‘div’ and ‘p’.
When I’m not using display block on ‘span’ or ‘a’, they stay on the same line with ‘div’ and ‘p’.
Really? They do not for me. I think you should update and save your codepen so we can see exactly what you are doing.
I’m trying to implement the design of the first picture, using the HTML of the first picture.
I can only work with CSS, and the HTML cannot be changed.
I have saved, you can see they all are on the same line.
OK, I think I just figured out that I was looking at the wrong part of the page. You are referring to the elements with classes of text4, text5, text6 and text7, right? You want text 4 and text 5 to be on one line and then text6 and text7 to be on another line. This information doesn’t always translate well through graphics, that’s why it’s important to explain your issue in detail and to be able to see your code. Now that we have that all cleared up.
I’m not sure there is a “good” way to do this with the current HTML. What you’re looking for is some way to tell the <p> element to behave like it is an inline element but to also add a hard return at the end of it so that the element after (the <span> in this case) gets placed below it. I don’t know of a good way to do that without adding wrapper elements.
Now there are some hacks you could do, such as making the <div> and <p> set to display: inline-block and then using the width element to force them to take up the entire width of the browser. But this creates a column for each of those to wrap in, so if you narrow the browser too much it might not look very good. But if columns are OK then there you go.
Thank you for your time.
Yes, that’s exactly what I tried to explain.
Sorry, I’m new into this, next time I will be more specific with explanation.
So how can I use width element on both of them?
