I'm making a small site and it contains categories.
I am trying to get these categorie containers all the same size but because the text in these container is not the same size, the container also varies in size. I tried giving each <li> a specific <div> but that didnt work out to well.
This is the HTML (only contains the list)
<div id="categoriemenu"> <div id="lifestyle"> <li><img src="categorielifestyle.jpg"><a href="#">LIFESTYLE</a></li></div> <div id="dieren"> <li><a href="#">DIEREN </a></li></div> <div id="electronica"> <li><a href="#">ELECTRONICA</a></li></div> <div id="informatica"> <li><a href="#">INFORMAICA</a></li></div> <div id="consument"> <li><a href="#">CONSUMENT</a></li></div> <div id="roddel"> <li><a href="#">RODDEL</a></li></div> <div id="motors"> <li><a href="#">MOTORS</a></li></div> <div id="autos"> <li><a href="#">AUTOS</a></li></div> </div>
#categoriemenu li a:hover {color: #CCCCCC;background-color: #FFFFFF;}#categoriemenu li a {color: #000000;background-color: #FFFFFF; padding: 10px 75px 20px 75px;width: 100%;text-decoration: none; }#categoriemenu li {background-color: yellow;display: block; border: 5px solid #FFFFFF;text-decoration: none;padding: 200px 10px 50px 10px;margin: 10px 10px 10px 10px; float: left;}#categoriemenu li:hover {background-color: green;display: block; border: 5px solid #FFFFFF;text-decoration: none;padding: 200px 10px 50px 10px;margin: 10px 10px 10px 10px; float: left;
I attached the full code for the site to the post also in case I forgot something.
The image below is what I have now.
As you can see it also says "IMG here in the middle" thats because of a smaller problem, where if I put the img in the <li> the image is not centered in the middle. But more like this:
The colors of everything are purely there to make everything visible. A good example of what I would like to achieve is
https://play.google.com/store
the "popular games" "updated games" are all in containers the same sizes.
I'm sorry for this long post, and I hope you can help me.
Thanks in advance.
PROcategorie.css
PROcategoriekiezen.html