Css help displaying images in row

Question

sirlink99 56 Practically a Master Poster

12 Years Ago

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

web-design

2 Contributors
14 Replies
205 Views
1 Day Discussion Span
Latest Post 12 Years Ago Latest Post by Arkinder

Reply to this topic

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.

sirlink99 56 Practically a Master Poster · Answer 1 · 2011-08-06T08:05:08+00:00

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

Arkinder 93 Posting Pro in Training · Answer 2 · 2011-08-06T08:10:21+00:00

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

sirlink99 56 Practically a Master Poster · Answer 3 · 2011-08-06T21:21:16+00:00

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?

Arkinder 93 Posting Pro in Training · Answer 4 · 2011-08-06T22:34:56+00:00

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

Regards
Arkinder

sirlink99 56 Practically a Master Poster · Answer 5 · 2011-08-07T04:31:52+00:00

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?

Arkinder 93 Posting Pro in Training · Answer 6 · 2011-08-07T05:10:13+00:00

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

sirlink99 56 Practically a Master Poster · Answer 7 · 2011-08-07T06:00:59+00:00

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

Arkinder 93 Posting Pro in Training · Answer 8 · 2011-08-07T06:14:55+00:00

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

sirlink99 56 Practically a Master Poster · Answer 9 · 2011-08-07T06:16:15+00:00

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>

Arkinder 93 Posting Pro in Training · Answer 10 · 2011-08-07T06:24:06+00:00

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

Regards
Arkinder

sirlink99 56 Practically a Master Poster · Answer 11 · 2011-08-07T06:30:39+00:00

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

Arkinder 93 Posting Pro in Training · Answer 12 · 2011-08-07T06:41:23+00:00

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

sirlink99 56 Practically a Master Poster · Answer 13 · 2011-08-07T06:43:52+00:00

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.

Arkinder 93 Posting Pro in Training · Answer 14 · 2011-08-07T06:59:06+00:00

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