Table scheme Options

[jansen]

Hi I want to create a scheme just like de picture this:

Inside the squares I want to place pictures (logo's) with hyperlinks and in the middle I want to place some text.

This is not the actual amount of squares, I didn't difined it yet, so it is easy if I can change the amount of squares easily.

thanks

[Christian J]

This layout can't adapt to various browser window sizes, and will break completely if there's not enough space for the text in the middle (e.g. if the user increases text size more than expected).

If you still want to try it, make sure it's not too large (in order to avoid annoying horizontal scrolling), and add CSS overflow: auto to the text content to prevent it from exploding the table. Note that CSS "overflow" is not supported on TD elements directly by today's browsers, so you must add e.g. a DIV element inside the TD for this.

To create the HTML table you can use the ROWSPAN and COLSPAN attributes in the middle cell. If you add more squares you must change the span values. See also http://www.htmlhelp.com/reference/html40/tables/td.html

[Christian J]

Just for fun, here's a CSS idea, but it might be even more fragile in buggy browsers. The images will resize depending on window size.

CSS:

CODE

html, body {
margin: 0;
padding: 0;
height: 100%;
}

div, p, a, img {
border: 0;
margin: 0;
padding: 0;
}

.top, .bottom {
height: 25%;
clear: both;
}

.top img, .bottom img {
height: 100%;
width: 24.9%; /* 100% divided with the number of horizontal images */
}

p  {
width: 24.9%; /* 100% divided with the number of horizontal images */
height: 50%; /* 100% divided with the number of contained vertical images */
float: left;
}

p img {
height: 50%; /* 100% divided with the number of vertical images in middle section */
width: 100%;
}

p.text {
width: 49.8%;
overflow: scroll;
}

HTML:

CODE

<div class="top">
<a href=""><img src="dog.jpg" alt=""></a><a href=""><img src="dog.jpg" alt=""></a><a href=""><img src="dog.jpg" alt=""></a><a href=""><img src="dog.jpg" alt=""></a>
</div>
<p><a href=""><img src="dog.jpg" alt=""></a><a href=""><img src="dog.jpg" alt=""></a></p>
<p class="text">Lorem ipsum</p>
<p><a href=""><img src="dog.jpg" alt=""></a><a href=""><img src="dog.jpg" alt=""></a></p>
<div class="bottom">
<a href=""><img src="dog.jpg" alt=""></a><a href=""><img src="dog.jpg" alt=""></a><a href=""><img src="dog.jpg" alt=""></a><a href=""><img src="dog.jpg" alt=""></a>
</div>