Novice questions, menu browsing effect problem_html/css_WEB-ITnose

(1) I want to make an electronic recipe. There are categories of dishes on the left side of the recipe page. Clicking on the category will display the dishes of that category on the right. I used two

and used floating attributes to implement the left and right interfaces. However, the content between the two interfaces would overlap. Baidu didn’t know how to solve it. In the right interface, I used a type of dishes The tables are put together, but the effect is not very good (I originally wanted to add pictures, but it was too messy, so I gave up), and it cannot be displayed in categories. Several tables are displayed at the same time. This situation How to solve it? Make the categories on the left correspond to the dishes on the right.
(2) There is also the matter of image links. The link background image is set, but the background image cannot be displayed. I put all the images in a package and put them in the same directory as index.html, and then linked them directly using the background-image attribute (the CSS code is like this: body{background-image: url(img/catring/WebContent/s1 .jpeg) repeat}), but the background image cannot be displayed, it is still white, but it can be displayed by setting the background color. How to solve it?
How to write the code? HTML or JSP, I use eclipse software. Try not to use the database, I don't know how.

Reply to discussion (solution)

Block elements cannot be placed in some tags in .Html

What is the solution?

There are many ways to do this left and right layout.
1. Table left and right layout, super simple
2. div floating layout
3. Absolute positioning
4. Use span, etc. to control the height
Based on your question, you should not be a big front-end Professional households. It’s better to leave these issues to your company’s artists. . . . .