I need to accomplish a layout like this:
Code:
<table>
<tr>
<td colspan=2 rowspan=2>? by ?</td>
<td width=7 height=7>7x7</td>
</tr>
<tr>
<td height=7>?x7</td>
</tr>
<tr>
<td height=7 width=7>7x7</td>
<td height=7>?x7</td>
<td height=7 width=7>7x7</td>
</tr>
</table>
<!--
expected:
_____________
| ? x ? |7x7|
| |7x?|
|7x7|?x7|7x7|
actual (ie):
__________________
| ? x ? |7x?/2 |
| |7x?/2 |
|?/2 x7|?/2 x7| 7x7 |
-->
Clarification
There was some confusion in another forum regarding my explanation, so here's my clarification:
"?" is the variable height of the large cell. In the cases of cells 0,3 and 1,3 "?/2" indicates that their height is half that of the large cell.
Instead I need: height of 0,3 = 7; height of 1,3 = ?-7.
You are contradicting yourself; in the first post all heights are set to 7px and the second post you have a problem with height.
At least 98% of internet users' DNA is identical to that of chimpanzees
Originally Posted by
Fang
You are contradicting yourself; in the first post all heights are set to 7px and the second post you have a problem with height.
It happens with both height and width. I'll simplify:
Code:
_________________________
| x height | 5 height |
| | x-5 height |
As it's for a layout you should be using css.
I've tried. Couldn't come up with a solution. If you can, please advise.
Why do you need to fix the height/width?
At least 98% of internet users' DNA is identical to that of chimpanzees
I'm making a dropshadow using pngs with alpha transparencies. I need 3 corner images and tiling edges.
http://www.alistapart.com/articles/cssdropshadows/
Originally Posted by
Ferret
I've read that very article already, actually.
What I'm trying to accomplish is a dynamically sizing drop shadow frame using png images. So I need a static sized corners and stretching edges so it'll fit whatever I put inside it.
Code:
<style>
.shadow .topright {
background-image: url(images/shadow.top-right.png);
background-position: top right;
background-repeat: no-repeat;
margin-top: 7px;
}
.shadow .right {
background-image: url(images/shadow.right.png);
background-position: right;
background-repeat: repeat-y;
}
.shadow .bottomleft {
background-image: url(images/shadow.bottom-left.png);
background-position: bottom left;
background-repeat: no-repeat;
}
.shadow .bottom {
background-image: url(images/shadow.bottom.png);
background-position: bottom;
background-repeat: repeat-x;
}
.shadow .bottomright {
background-image: url(images/shadow.bottom-right.png);
background-position: bottom right;
background-repeat: no-repeat;
}
.shadow .content {
padding: 5px;
}
</style>
<body>
<table class="shadow" cellpadding=0 cellspacing=0>
<tr>
<td colspan=2 rowspan=2 class="content">dynamic content goes here</td>
<td class="topright" width=7 height=7><img src="images/spacer.png"></td>
</tr>
<tr>
<td class="right"><img src="images/spacer.png"></td>
</tr>
<tr>
<td class="bottomleft" height=7 width=7><img src="images/spacer.png"></td>
<td class="bottom"><img src="images/spacer.png"></td>
<td class="bottomright" height=7 width=7><img src="images/spacer.png"></td>
</tr>
</table>
</body>
Originally Posted by
zaxnyd
I've read that very article already, actually.
But that is for dynamically sized shadows: you resize the background image based on the size of the image you're placing.source material (linked toward the top of the article I linked you to) it states that the shadow image is actually 800x800, resized as needed.
That's an alternative which I'll definitely consider. Thanks.
Still no luck on my end. Any more suggestions? =\
Solved.
I stumbled upon the answer .
Originally Posted by
zaxnyd
Thread Information
Users Browsing this Thread
There are currently 1 users browsing this thread. (0 members and 1 guests)
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts
Forum Rules
Colspan and rowspan ruining cell dimensions
Reply With Quote
Originally Posted by Fang
Bookmarks