Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 13 of 13
  1. #1
    Regular Coder
    Join Date
    Feb 2010
    Posts
    209
    Thanks
    15
    Thanked 2 Times in 2 Posts

    CSS table creation...

    Hi,

    I already have this: HERE

    I want to create a table for images like in this picture:


    This table must be in the middle... ONE block type but NOT the picture[width: 200px; height: 140px;]

    Appreciate your help

    If you need more info - ask.
    Last edited by auriaks; 06-04-2010 at 10:41 AM.

  • #2
    Regular Coder
    Join Date
    Apr 2008
    Posts
    685
    Thanks
    15
    Thanked 105 Times in 104 Posts
    Well if you want a table use a table?

    Code:
    <table>
    	<tr>
        	<td><img src="img1.jpg" width="200" height="200" alt="" /></td>
            <td><img src="img2.jpg" width="200" height="200" alt="" /></td>
            <td><img src="img3.jpg" width="200" height="200" alt="" /></td>
        </tr>
        <tr>
        	<td><img src="img1.jpg" width="200" height="200" alt="" /></td>
            <td><img src="img2.jpg" width="200" height="200" alt="" /></td>
            <td><img src="img3.jpg" width="200" height="200" alt="" /></td>
        </tr>
        <tr>
        	<td><img src="img1.jpg" width="200" height="200" alt="" /></td>
            <td><img src="img2.jpg" width="200" height="200" alt="" /></td>
            <td><img src="img3.jpg" width="200" height="200" alt="" /></td>
        </tr>
    </table>
    Or use DIV's using margin:0 auto; to center:

    Code:
    <style>#container{ width:600px; margin:0 auto; }</style>
    <div id="container">
    	<div id="img">
    		<img src="img1.jpg" width="200" height="200" alt="" />
        	<img src="img2.jpg" width="200" height="200" alt="" />
        	<img src="img3.jpg" width="200" height="200" alt="" />
    	</div>
    	<div id="img">
    		<img src="img1.jpg" width="200" height="200" alt="" />
        	<img src="img2.jpg" width="200" height="200" alt="" />
        	<img src="img3.jpg" width="200" height="200" alt="" />
    	</div>
    	<div id="img">
    		<img src="img1.jpg" width="200" height="200" alt="" />
        	<img src="img2.jpg" width="200" height="200" alt="" />
        	<img src="img3.jpg" width="200" height="200" alt="" />
    	</div>
    </div>

  • Users who have thanked Scriptet for this post:

    auriaks (06-04-2010)

  • #3
    Regular Coder
    Join Date
    Feb 2010
    Posts
    209
    Thanks
    15
    Thanked 2 Times in 2 Posts
    Yes, I like DIV's more than tables But look at the output: here

  • #4
    Regular Coder
    Join Date
    Feb 2010
    Posts
    209
    Thanks
    15
    Thanked 2 Times in 2 Posts
    newermind... it works, thanks

  • #5
    Regular Coder
    Join Date
    Apr 2008
    Posts
    685
    Thanks
    15
    Thanked 105 Times in 104 Posts
    Yeah it's cause there is default gaps between the images which was causing the extra width, the solution to this is to set them to display:block; so by adding this css:

    Code:
    #container{width:600px; margin:0 auto; }
    #container img{ display:block; float:left; }
    #container #img{ overflow:auto; }
    Or you can change the HTML to a funky way so the whitespace isn't rendered like:

    Code:
    <div id="img"
    ><img src="img1.jpg" width="200" height="200" alt=""
    /><img src="img2.jpg" width="200" height="200" alt=""
    /><img src="img3.jpg" width="200" height="200" alt=""
    /></div>
    I think that's how you do it anyway....

  • #6
    Regular Coder
    Join Date
    Feb 2010
    Posts
    209
    Thanks
    15
    Thanked 2 Times in 2 Posts
    What if I want to change pictures with text?? everything becomes ruined...

    I want to add a text in some of those blocks

  • #7
    Regular Coder optimus203's Avatar
    Join Date
    Sep 2008
    Location
    CT
    Posts
    317
    Thanks
    22
    Thanked 16 Times in 15 Posts
    something like this?

    Code:
    <style type="text/css">
    #container{ width:600px; margin:0 auto; }
    .img { width:200px; height:200px; float:left; display:inline; text-align:center; }
    </style>
    
    <div id="container">
    
    <div class="img">
    <img src="img1.jpg" width="200" height="200" alt="" /><br>
    Text for Image 1
    </div>
    <div class="img">
    <img src="img2.jpg" width="200" height="200" alt="" /><br>
    Text for Image 2
    </div>
    <div class="img">
    <img src="img3.jpg" width="200" height="200" alt="" /><br>
    Text for Image 3
    </div>
    
    <div class="img">
    <img src="img1.jpg" width="200" height="200" alt="" /><br>
    Text for Image 4
    </div>
    <div class="img">
    <img src="img2.jpg" width="200" height="200" alt="" /><br>
    Text for Image 5
    </div>
    <div class="img">
    <img src="img3.jpg" width="200" height="200" alt="" /><br>
    Text for Image 6
    </div>
    
    </div>
    Always thank those CF Users who help you solve issues...
    Connecticut Web Design

  • #8
    Regular Coder
    Join Date
    Feb 2010
    Posts
    209
    Thanks
    15
    Thanked 2 Times in 2 Posts
    Sorry but no...

    PHP Code:
    <div class="img">
    text text text <br/>
    Text for Image 4
    </div
    The main problem is, that when I add pictures - they become width and height 200 and 100px. And sometimes I have smaller or other dimension pictures, so the look of the site becomes a mess.

    I modified the picture... LOOK at the beggining.
    Last edited by auriaks; 06-04-2010 at 10:39 AM.

  • #9
    Regular Coder
    Join Date
    Feb 2010
    Posts
    209
    Thanks
    15
    Thanked 2 Times in 2 Posts
    please help me solve this out...

  • #10
    Regular Coder
    Join Date
    Apr 2008
    Posts
    685
    Thanks
    15
    Thanked 105 Times in 104 Posts
    I'm a bit confused at what you want here, you want a 3x3 table made out of DIV's right?

    Are the width/height of each box in the table going to be the same?

    Are the widths of each row going to be the same or could they be different?

  • #11
    Regular Coder
    Join Date
    Feb 2010
    Posts
    209
    Thanks
    15
    Thanked 2 Times in 2 Posts
    1. Yes, only divs.
    2. Yes, same width/height Boxes. [in boxes I will store information which can be: image or text centered]
    3. Same.

  • #12
    Regular Coder
    Join Date
    Apr 2008
    Posts
    685
    Thanks
    15
    Thanked 105 Times in 104 Posts
    Like this?

    Code:
    <style type="text/css" media="screen">
    *{ margin:0; padding:0; }
    #table{ width:600px; margin:0 auto; overflow:auto;  }
    .box { width:200px; height:200px; float:left;  text-align:center;  }
    </style>
    <div id="table">
        <div class="box"><p>Some Text</p></div>
        <div class="box"><img src="img.jpg" width="100" height="80" /></div>
        <div class="box"><p>Some longer text maybe over a few lines</p></div>
        <div class="box"><p>Some Text</p></div>
        <div class="box"><img src="img.jpg" width="100" height="80" /></div>
        <div class="box"><p>Some longer text maybe over a few lines</p></div>
    <!-- #table --></div>
    You change #box height/width to whatever you like, then you change #table width to 3xthat width you have set...

    Any content will be horizontally centered, did you want vertically centered as well?

  • Users who have thanked Scriptet for this post:

    auriaks (06-04-2010)

  • #13
    Regular Coder
    Join Date
    Feb 2010
    Posts
    209
    Thanks
    15
    Thanked 2 Times in 2 Posts
    would be great and vertically why u use media="screen"??


  •  

    Posting Permissions

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