How do I insert a text box (to highlight specific text) inside a column of text in a 4-column html+css layout?

Using standard html only inserts the box at the head of the column.

please share a codepen with the code you have tried and perhaps a more detailed explanation of what you are attempting.

I have made a codepen - how do I share it with you?

Just post the link here. If you are not allowed to, place the link in a code block so it is not interpreted as a link using backticks around it.

As an example I wish to place the section of code for the “Sharers” items in a box with a coloured background and white text. Does this make sense?

I shoud have said that I wanted lines 41-45 in the html to be enclosed so that the “Sharers” section would appear on the screen in a box (with a darker background and white text, yet to be coded).

I would put the code inside another div
Then I would target that div in the css to add the required styling.
Do you want to try that and let us know how it goes?

I inserted this code at line 41 (column 1): <div style="width:350px; height:50px; background-color: black; color: white; box-sizing: border-box;"> with a </div> at line 45. It works perfectly except that the box is placed at the head of the column before line 1, and not where I want it. Any suggestions?

Can you see the code?

I’ve edited your code for readability. When you enter a code block into a forum post, please precede it with a separate line of three backticks and follow it with a separate line of three backticks to make it easier to read.

You can also use the “preformatted text” tool in the editor (</>) to add backticks around text.

See this post to find the backtick on your keyboard.
Note: Backticks (`) are not single quotes (').

the codepen doesn’t show your change.
Can you do the change there so I can try to see what you meant?

OK. I’m a 86yo beginner!

1 Like

oh I hope that is true! What fun!

I was 3 when WW2 started and my father always said it was my fault!

oh dear oh dear!
Well now, I can suggest that there are a few issues with your code at the moment.
Since this is a menu and you are trying to lay things out in a grid-like structure, it is best to follow Randell’s advice. That is:

1- strip all the styling out of your html and place it exclusively in the css file
2- learn how to use grid layout. It is very very handy and will help you structure the areas of the menu nicely
3- an extra suggestion is to actually comment out all the css styling and work on the structure of the html so that it is well arranged first before adding the styling.
Then using some paper, draw out the exact layout you want.
If you are struggling with how to achieve the layout with grid layout, we can help you here but you’ll have to share the design and the code will need to be created in sections so that they can be ‘moved about’ by the layout.

hope this helps somewhat

I take your points. I have tried grid but can’t make sense of it. Flexbox? I did put the styling in the css file originally, with the same result. I’ll leave for now but I may return at some time in the future (if I have one). Thank you all for your kindness. D

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.