I would like to display 3 images in a row, and then 3 more underneath, and so on (until there are no more images). I currently have this css code

#productsMenuFirst{
	display:inline;
	width: 100px;
	height: 60px;
	padding-right: 50px; 
	padding-left: 50px;
}


#productsMenu {
	display:inline;
	width: 100px;
	height: 60px;
	padding-right: 50px; 
}
#productsMenuLast {
	display:inline;
	width: 100px;
	height: 60px;
	padding-left: 50px;
}

which should get the spacing and place the pictures in a row. I am using this html code

<div id="productsMenuFirst">
   		<div><a href="#"><img src="Images/prodictsImg.gif"></a></div>
   		<div><a href="#">Faáruk</a></div>
    </div>   
   	
 	<div id="productsMenu">
   		<div><a href="#"><img src="Images/prodictsImg.gif"></a></div>
   		<div><a href="#">Csavarok</a></div>
   	</div>

  	<div id="productsMenuLast">
   		<div><a href="#"><img src="Images/prodictsImg.gif"></a></div>
   		<div><a href="#">TestText</a></div>
   	</div>

which gets the picture and should display it in line, but it doesn't please help me.

Thanks

Nvm I solved my problem. I needed to use an inline-block instead of an inline

Each division's child elements needs to be inline too.

div>div { display: inline;}

EDIT: Should you choose to use inline-block. It isn't supported by IE7 because of a few properties that only exist in the IE7 browser. To fix it, add zoom: 1; and *display: inline; along with display: inline-block; .

Regards
Arkinder

Each division's child elements needs to be inline too.

div>div { display: inline;}

EDIT: Should you choose to use inline-block. It isn't supported by IE7 because of a few properties that only exist in the IE7 browser. To fix it, add zoom: 1; and *display: inline; along with display: inline-block; .

Regards
Arkinder

If I put it in after the display: inline-block it will sess up the menu. should I put it infront of that line of code so that if the browser recognizes inline-block it will use that, and if it doesn't then it will use inline?

Remove the inline-block and ignore my edit. Just use the CSS rule I provided.

Regards
Arkinder

Adding this line

zoom: 1;
*display: inline;

to the end of each of the css tags involving the pictures did fix the issue in IE7

since I have changes the menu to be in a percent value now I have a little error. the menu displays fine in Opera and Firefox, but in IE the last option jumps down a line. This is a new problem. I also have the other problem I posted about Here. The code can also be found there. What is the issue, and how can I fix it?

My previous response was on my iPod, so I'm sorry for not being clear. Don't use display: inline-block; at all. Take what you originally posted, and add this to your CSS.

div>div { display: inline;}

Regards
Arkinder

If I use that line of code, then the inline doesn't work. I have commented out the inline-block and the fix for IE. When I put in the code it put everything underneath each other

Okay, then you and I doing something differently.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>

	<head>
		<title></title>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
		<style type="text/css">
		
		#productsMenuFirst {
			display: inline;
			width: 100px;
			height: 60px;
			padding-right: 50px; 
			padding-left: 50px;
		}

		#productsMenu {
			display: inline;
			width: 100px;
			height: 60px;
			padding-right: 50px; 
		}
		
		#productsMenuLast {
			display: inline;
			width: 100px;
			height: 60px;
			padding-left: 50px;
		}
		
		div>div { display: inline;}
		
		</style>
	</head>
	
	<body>
	
	<div id="productsMenuFirst">
   		<div><a href="#"><img src="Images/prodictsImg.gif"></a></div>
   		<div><a href="#">Faáruk</a></div>
    </div>   
   	
 	<div id="productsMenu">
   		<div><a href="#"><img src="Images/prodictsImg.gif"></a></div>
   		<div><a href="#">Csavarok</a></div>
   	</div>

  	<div id="productsMenuLast">
   		<div><a href="#"><img src="Images/prodictsImg.gif"></a></div>
   		<div><a href="#">TestText</a></div>
   	</div>
	
	</body>
	
</html>

Regards
Arkinder

I have mine in a separate CSS file

style:css

div>div { 
        display: inline;
}

#productsMenuFirst{
	
	padding-top: 20px;
	padding-left: 4%;
	padding-right: 2%;
	width: 15%;
	height: 80px;
	
	
}


#productsMenu {
	
	padding-top: 20px;
	padding-left: 2%;
	padding-right: 2%;
	width: 15%;
	height: 80px;
	
	
}

#productsMenuLast {
	
	padding-top: 20px;
	padding-left: 2%;
	padding-right: 4%;
	width: 15%;
	height: 80px;

	
	
}

and then the HTML

<!DOCTYPE html> 


<html> 
   <head> 
      <title>Website Name</title> 

      <meta http-equiv="Content-Type" content="text/html; charSet=UTF-8"> 
      <link rel="stylesheet" href="style.css" media="screen" />
      <!--CSS--> 

      <!--JS--> 

   </head> 
   <body bgcolor="Black" > 

	<div align="center">
   		<div id="productsMenuFirst">
   			<div><a href="#"><img src="Images/prodictsImg.gif"></a></div>
   			<div><a href="#">Faáruk</a></div>
    	</div>   
 		<div id="productsMenu">
   			<div><a href="#"><img src="Images/prodictsImg.gif"></a></div>
   			<div><a href="#">Csavarok</a></div>
   		</div>
  		<div id="productsMenuLast">
   			<div><a href="#"><img src="Images/prodictsImg.gif"></a></div>
   			<div><a href="#">Ragasztók</a></div>
   		</div>
	</div>
	<!-- end row 1, row 2 -->
	<div align="center">
   		<div id="productsMenuFirst">
   			<div><a href="#"><img src="Images/prodictsImg.gif"></a></div>
   			<div><a href="#">Szerszámok</a></div>
    	</div>   
 		<div id="productsMenu">
   			<div><a href="#"><img src="Images/prodictsImg.gif"></a></div>
   			<div><a href="#">Electromos Alkatrész</a></div>
   		</div>
  		<div id="productsMenuLast">
   			<div><a href="#"><img src="Images/prodictsImg.gif"></a></div>
   			<div><a href="#">Egyéb</a></div>
   		</div>
   	</div>
   </body>
</html>

Place it at the bottom of the CSS like I did and it should work.

Regards
Arkinder

At the bottom it placed everything inline. I would like the text to be under the image. Would I have to add another >div to the code?

Also do you have any idea about the menu? I could upload an image.

Thanks

Sorry, I completely misunderstood you. I've been working on editing several hundred photos the past few days and I'm finally finished but exhausted.

You want the images to be inline with the text underneath each image? Yes, I'm looking at it now.

Regards
Arkinder

That is correct. The text should be under the image, and then the image-text pair should be in line with another pair and so on.

Use the <br> tag to move the text to the next line. And replace display: inline; with float: left; on the parent divisions.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>

	<head>
		<title></title>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
		<style type="text/css">
		
		#productsMenuFirst {
			float: left;
			width: 100px;
			height: 60px;
			padding-right: 50px; 
			padding-left: 50px;
		}

		#productsMenu {
			float: left;
			width: 100px;
			height: 60px;
			padding-right: 50px; 
		}
		
		#productsMenuLast {
			float: left;
			width: 100px;
			height: 60px;
			padding-left: 50px;
		}
		
		div>div { display: inline;}
		
		</style>
	</head>
	
	<body>
	
	<div id="productsMenuFirst">
   		<div><a href="#"><img src="Images/prodictsImg.gif"></a></div><br>
   		<div><a href="#">Faáruk</a></div>
    </div>   
   	
 	<div id="productsMenu">
   		<div><a href="#"><img src="Images/prodictsImg.gif"></a></div><br>
   		<div><a href="#">Csavarok</a></div>
   	</div>

  	<div id="productsMenuLast">
   		<div><a href="#"><img src="Images/prodictsImg.gif"></a></div><br>
   		<div><a href="#">TestText</a></div>
   	</div>
	
	</body>
	
</html>

Regards
Arkinder

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.