Jump to content

Different lenghts of text, same size


Recommended Posts

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



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.



Edited by Go48websites
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Create New...