from table to css. can I do this?

davikokar · Jan 5, 2006

hallo,
I have a table structure that I find difficult to translate into css positioning. The structure is as follow:

<EMPTY SPACE><IMAGE><EMPTY SPACE><IMAGE><EMPTY SPACE>

The two images have exactly the same size. This thing is inside a container that can expand or shrink. I would like the three empty space to resize but maintaining the same width.

With a table layout this is very easily done, but with CSS I cannot get it working...

any idea?

thanks

manarth · Jan 5, 2006

Firstly, could you post your code (the html segment and the relevant css)?

---
Marcus
better questions get better answers - faq581-3339
accessible web design - zioncore.com

davikokar · Jan 5, 2006

ehm... yes.

here is the table code:

Code:

<!DOCTYPE html PUBLIC
"-//W3C//DTD XHTML 1.0 Transitional//EN"
"[URL unfurl="true"]http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">[/URL]
<html>
<head>
<style>

table.index_top {
	border:1px #000000 solid;
	width:60%;
	margin-right:auto;
	margin-left:auto;}

table.index_top td {
	border:1px #000000 solid;
	}

td.cont_pic {width:100px;}
</style>
</head>
<body>
<table class="index_top">
	<tr>
		<td>&nbsp;</td>
		<td class="cont_pic"><img src="img/job_index_ground.gif" alt="the ground" /></td>
		<td>&nbsp;</td>
		<td class="cont_pic"><img src="img/resources_index_water.gif" alt="the water" /></td>
		<td>&nbsp;</td>
	</tr>
</table>
</body>
</html>

and, here my css attempt

Code:

<!DOCTYPE html PUBLIC
"-//W3C//DTD XHTML 1.0 Transitional//EN"
"[URL unfurl="true"]http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">[/URL]
<html>
<head>
<style>

div.container {
	margin-right:auto;
	margin-left:auto;
	border:1px #000000 solid;
	width:60%;
	}

div.i_left {
	float:left;
	}

div.i_right {
	float:right;
	}
</style>
</head>
<body>
<div class="container">
	<div class="i_left"><img src="job_index_ground.gif" alt="the ground" /></div>
	<div class="i_right"><img src="resources_index_water.gif" alt="the water" /></div>
</div>
</body>
</html>

NigeW · Jan 5, 2006

What about using hspace for the images ?

Cheers

Nigel Wilson
Christchurch Web Design

manarth · Jan 5, 2006

Here's something that comes close:

Code:

<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html PUBLIC
	"-//W3C//DTD XHTML 1.0 Strict//EN"
	"[URL unfurl="true"]http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">[/URL]

<html>
    <head>
        <title>test</title>
        
        <style type="text/css">
        	.left, .right {
        		width: 50%;
        		float: left;
        	}
        	.left img {
        		float: right;
        		margin-right: 16.6%;
        	}
        	.right img {
        		margin-left: 16.6%;
        	}
        	.left img, .right img {
        		border: 1px #000 solid;
        		display: block;
        	}

        	
        
        </style>
    </head>

    <body>
		<div class="container">
			<div class="left">
				<img src="bar.gif" width="100" alt="" />
			</div>
			
			<div class="right">
				<img src="foo.gif" width="100" alt="" />
			</div>
		</div>

    </body>
</html>

The catch is that when the container shrinks where it's not much larger than the images, the images maintain a minimum distance between them, and push outside the container.

---
Marcus
better questions get better answers - faq581-3339
accessible web design - zioncore.com

davikokar · Jan 5, 2006

thanks for the answers,

I tried the hspace attribute, but the problem is that the blank spaces would shrink and expand not in a proportioned way, so I can't use percentages to set distances.

The second solution would be a good compromise, but only if the container is 100% wide... try to set it at 70% and look what it happens on IE.

Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

from table to css. can I do this?

davikokar

Technical User

manarth

Programmer

davikokar

Technical User

NigeW

Programmer

manarth

Programmer

davikokar

Technical User

Similar threads

Part and Inventory Search

Sponsor