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?
@Damis When using Codepen, it is best to just use one and make changes to it as we guide you to a solution. You currently have posted two Codepen links. I would stick with the first one you posted and just keep making adjustments to it for this thread.
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!
First, I suggest not using float for this project. I suggest learning about CSS flexbox and/or CSS grid. You will be able to create this project much easier using these standard CSS features. I also recommend strictly using the CSS file for all of styling instead of using inline styling in the HTML. I also recommend not using the <strong>. This has specific semantic usage but should not be used for styling purposes only. Use CSS font-weight property to achieve the effect you are getting from its use instead.
Lastly, since it seems what ever you are using to learn CSS is not up-to-date with more modern features, I suggest working through the curriculum here to learn everything you will need to know to finish out your project.
1 Like
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