Jump to content

Go48websites

Members
 View Profile  See their activity

  • Posts

    1

  • Joined

  • Last visited

 Content Type 

Posts posted by Go48websites

    Different lenghts of text, same size

    in CSS

    Posted · Edited by Go48websites

    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

×
×
  • Create New...