www.webdeveloper.com
Results 1 to 3 of 3

Thread: Row of centered images and text

  1. #1
    Join Date
    Sep 2011
    Posts
    31

    Row of centered images and text

    I'm trying to create a row of banner-like images, centered and gap between each auto-adjusted, each with an aligned text below it. I tried to use the CSS property columns, but I'm unable to change the amount of space between each element.

    Picture:
    http://i.imgur.com/jk382.jpg

    This is what I have so far:

    HTML:
    Code:
    <div class="container">
    
    	<div id="pic1">
    		<img src="pictures/characters/1.png">
    		<br>
    		<br>
    		<span id="pic1text">text1</span>
    	</div>
    				
    	<div id="pic2">
    		<img src="pictures/characters/2.png">
    		<br>
    		<br>
    		<span id="pic2text">text2</span>
    	</div>
    				
    	<div id="pic3">
    		<img src="pictures/characters/3.png">
    		<br>
    		<br>
    		<span id="pic3text">text3</span>
    	</div>
    				
    	<div id="pic4">
    		<img src="pictures/characters/4.png">
    		<br>
    		<br>
    		<span id="pic4text">text4</span>
    	</div>
    				
    	<div id="pic5">
    		<img src="pictures/characters/5.png">
    		<br>
    		<br>
    		<span id="pic5text">text5</span>
    	</div>
    				
    </div>
    CSS:
    Code:
    .container{
    	width:950px;
    	height:350px;
    	-moz-column-count:8; /* Firefox */
    	-webkit-column-count:8; /* Safari and Chrome */
    	column-count:8;
    }
    
    /*div of each image*/
    .container > div {
    	display:inline;
    	height:350px;
    	width:125px;
    }
    But the moment I add "column-gap:5px;" the pictures won't be in a single row anymore and the formatting is completely messed up. I also need an identifier for each text, as I'm gonna need to fade in/out these text when the mouse hovers over each image, which I'll do once the formatting is done.

  2. #2
    Join Date
    Oct 2012
    Posts
    55
    wasting your time.

    Just use a table, collapse borders, border:none and use 1 row for images the next for text.
    Don't specify height and the table cells will auto adjust to fit you images and the text below them.
    text-align:center then add padding and text format as needed.

    Divs are useful but if you got a lot and they are the same I find a table works quite well with other elements in the page.

    CSS has a row:hover and so does JavaScript, both pretty easy to use and you can throw both in there for IE and for FF.

    You can probably get away with using two row classes and this will let you hover some and ignore others.

    Dan

  3. #3
    Join Date
    Aug 2012
    Posts
    155
    Firstly, change your divs to classes then you only need one class (without having to use nested CSS which can cause problems later down the line) and float each one to the left. How I would do it (your total image widths (width plus margin) don't fit into your container size so I have adjusted bits accordingly):
    HTML Code:
    <div class="container">
    
    	<div class="pic">
    		<img src="pictures/characters/1.png">
    		<span id="pic1text">text1</span>
    	</div>
    				
    	<div class="pic">
    		<img src="pictures/characters/2.png">
    		<span id="pic2text">text2</span>
    	</div>
    <!-- And so on for each image -->
    Code:
    .container{
    	width:950px;
            padding: 0 19px;
    }
    
    /*div of each image*/
    .pic {
    	float: left;
    	height:350px;
    	width:126px;
            margin-right: 5px;
    }
    .pic:nth-child(7n+7) {
            margin-right: 0;
    }

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles