[RESOLVED] Displaying 3 rows x 3 columns of images? [Archive]

Click to See Complete Forum and Search --> : [RESOLVED] Displaying 3 rows x 3 columns of images?

Barton68

05-07-2007, 11:28 AM

I'm new to HTML, but have been programming as a career for over 18 years, and HTML/CSS is driving me mad.
I've moved away from the use of tables to DIV tags, but just can't get them working across the majority of browsers.
A HREF-IMG spacer A HREF-IMG spacer A HREF-IMG
A HREF-IMG spacer A HREF-IMG spacer A HREF-IMG
A HREF-IMG spacer A HREF-IMG spacer A HREF-IMG
The DIV cells have a border. With Tables this is easy, but the 2nd spacer doesn't work, i.e. no space being displayed.
C++ is a doddle to this!

Thanks,

Barton

CSS:
/************ Table format replacements **************/
.table-div {
display: table;
width:660px;
border-spacing:5px;/*cellspacing:poor IE support for this*/
border-collapse:separate;
}
.row-div {
display: table-row;
width:auto;
}
.cell-div {
display: table-cell;
float:left; /* fix for buggy browsers*/
width:200px;
background-color:#a6bf79;
border:2px solid #ffffff;
color:#000000;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 1px;
padding: 0px;
text-align: center;
}
.spacer-cell-div {
float:left;/*fix for buggy browsers*/
display: table-cell;
width:25px;
}

HTML:
<div class="table-div">
<div class="row-div">
<div class="cell-div">
<a href...><img src="images/DC.jpg" alt="Council Online" />
</div>
<div class="spacer-cell-div">
 
</div>
<div class="cell-div">
<a href...><img src="images/town.jpg" alt="Local Info" /></a>
</div>
<div class="spacer-cell-div">
 
</div>
<div class="cell-div">
<a href...><img src="images/travel.jpg" alt="Travel Local Info" /></a>
</div>
</div>
</div>

WebJoel

05-07-2007, 12:11 PM

Not quite sure what you're after here, but here is a rendtion similar that works for IE and Fx.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html><head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<title></title>
<style type="text/css">
* {border:0; padding:0; margin:0;}/* Set everything to "zero" */

body {min-height:100%; height:101%;
font:x-small Arial, Verdana, sans-serif;
voice-family: "\"}\"";voice-family:inherit;
font-size:small;/*for IE 5.5 */
} html>body {font-size:small; height:auto;}/* Assist IE6 & <, 100% height */
font-size: small; voice-family: "\"}\"";
voice-family: inherit; font-size: medium;} /* Assist IE rendering height, keyword-font sizes, etc. */

p {font-size: 90%; line-height:1.3em; margin:12px 0 2px 0;}
h1, h2, h3, h4, h5, h6 {font-family: 'times new roman', arial, verdana, serif; background-color:none;
font-style:normal; font-variant:normal; font-weight:normal; margin:14px 0 4px 10px;}
h1{font-size: 1.93em;}
h2{font-size: 1.72em;}
h3{font-size: 1.52em;}
h4{font-size: 1.42em;}
h5{font-size: 1.32em;}
h6{font-size: 1.21em;}
</style>

<script type="text/javascript">
</script>
<link rel="shortcut icon" href="favicon.ico">
</head>
<body>

<div style="width:626px; margin:25px auto;">
<div style="width:200px; height:90px; border:3px double silver; float:left;">
<img alt="image" src="#" style="width:130px; height:88px; background-color:yellow; border:1px solid red; position:relative; left:35px;" /></div>
<div style="width:200px; height:90px; border:3px double silver; float:left;">
<img alt="image" src="#" style="width:130px; height:88px; background-color:yellow; border:1px solid red; position:relative; left:35px;" /></div>
<div style="width:200px; height:90px; border:3px double silver; float:left;">
<img alt="image" src="#" style="width:130px; height:88px; background-color:yellow; border:1px solid red; position:relative; left:35px;" /></div>

<div style="width:200px; height:90px; border:3px double silver; float:left;">
<img alt="image" src="#" style="width:130px; height:88px; background-color:yellow; border:1px solid red; position:relative; left:35px;" /></div>
<div style="width:200px; height:90px; border:3px double silver; float:left;">
<img alt="image" src="#" style="width:130px; height:88px; background-color:yellow; border:1px solid red; position:relative; left:35px;" /></div>
<div style="width:200px; height:90px; border:3px double silver; float:left;">
<img alt="image" src="#" style="width:130px; height:88px; background-color:yellow; border:1px solid red; position:relative; left:35px;" /></div>

<div style="width:200px; height:90px; border:3px double silver; float:left;">
<img alt="image" src="#" style="width:130px; height:88px; background-color:yellow; border:1px solid red; position:relative; left:35px;" /></div>
<div style="width:200px; height:90px; border:3px double silver; float:left;">
<img alt="image" src="#" style="width:130px; height:88px; background-color:yellow; border:1px solid red; position:relative; left:35px;" /></div>
<div style="width:200px; height:90px; border:3px double silver; float:left;">
<img alt="image" src="#" style="width:130px; height:88px; background-color:yellow; border:1px solid red; position:relative; left:35px;" /></div>
</div>

</body>
</html> (copy entire code) :)

Charles

05-07-2007, 01:21 PM

However, that example confuses HTML with XHTML. For HTML remove the trailing "/" characters from the IMG and META element tags.

Barton68

05-10-2007, 12:36 PM

Thanks, worked first time.

Barton

WebJoel

05-10-2007, 01:23 PM

However, that example confuses HTML with XHTML. For HTML remove the trailing "/" characters from the IMG and META element tags. I really should address this in my automatically-generated template. I am so used to writing my code this way and yes, it is not matched for the auto-gen'd !doctype that the template uses. :) Note also that I write everything in 'lower case', -also another XHTML characteristic (although you can write all lower-case in HTML without complaint..).