Jump to content

Different lenghts of text, same size


Go48websites
 Share

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.

 

160359z.jpg

 

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:

2n87n1v.png

 

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

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
 Share

×
×
  • Create New...