...

View Full Version : CSS table creation...



auriaks
06-03-2010, 11:57 PM
Hi,

I already have this: HERE (http://share2gether.xz.lt/new_project/)

I want to create a table for images like in this picture:
http://www.share2gether.xz.lt/table.bmp

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.

Scriptet
06-04-2010, 12:04 AM
Well if you want a table use a table?



<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:



<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>

auriaks
06-04-2010, 12:11 AM
Yes, I like DIV's more than tables :D But look at the output: here (http://share2gether.xz.lt/new_project/)

auriaks
06-04-2010, 12:23 AM
newermind... it works, thanks

Scriptet
06-04-2010, 12:42 AM
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:



#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:



<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....

auriaks
06-04-2010, 12:46 AM
What if I want to change pictures with text?? everything becomes ruined...

I want to add a text in some of those blocks

optimus203
06-04-2010, 01:22 AM
something like this?



<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>

auriaks
06-04-2010, 10:30 AM
Sorry but no...


<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.

auriaks
06-04-2010, 02:25 PM
please help me solve this out...

Scriptet
06-04-2010, 04:36 PM
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?

auriaks
06-04-2010, 04:41 PM
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.

Scriptet
06-04-2010, 04:52 PM
Like this?


<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?

auriaks
06-04-2010, 05:01 PM
would be great and vertically :D why u use media="screen"??



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum