0

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

2
Contributors
14
Replies
15
Views
6 Years
Discussion Span
Last Post by Arkinder
0

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

0

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

Edited by Arkinder: n/a

0

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?

0

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

Regards
Arkinder

0

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?

Edited by sirlink99: n/a

0

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

0

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

0

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

Edited by Arkinder: n/a

0

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>

Edited by sirlink99: n/a

0

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

Edited by sirlink99: n/a

0

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

0

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.

Edited by sirlink99: n/a

0

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

This question has already been answered. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.