The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

 
Reply to this topicStart new topic
> Table scheme
jansen
post May 14 2007, 03:26 AM
Post #1





Group: Members
Posts: 1
Joined: 14-May 07
Member No.: 2,807



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

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
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post May 14 2007, 05:40 AM
Post #2


.
********

Group: WDG Moderators
Posts: 8,074
Joined: 10-August 06
Member No.: 7



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

User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post May 14 2007, 06:36 AM
Post #3


.
********

Group: WDG Moderators
Posts: 8,074
Joined: 10-August 06
Member No.: 7



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>


User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post

Reply to this topicStart new topic
1 User(s) are reading this topic (1 Guests and 0 Anonymous Users)
0 Members:

 



- Lo-Fi Version Time is now: 24th March 2019 - 08:11 PM