...

View Full Version : Rounded, even expansion of cells - can get 1 to expand but not the others



AzzidReign
01-02-2008, 08:36 PM
I'm trying to have each cell have rounded images and expand the height but this is what I keep getting:

http://i15.photobucket.com/albums/a397/AzzidReign/alt-examples1.png

Each rounded images is marked in orange. I've read many things before coming here for help and none have worked. As you can see, I can get the middle cell to expand to my subforums but I can't get the other 2 cells to expand with it.

Any help would be kindly appreciated.

Excavator
01-02-2008, 08:39 PM
Hello AzzidReign,
a picture doesn't help us much.
We'll need to see the code. A link would be easiest.

jcdevelopment
01-02-2008, 08:40 PM
hook it up with a link or some code brotha!

AzzidReign
01-02-2008, 10:07 PM
Sorry guys, here it is. It's changed a little bit from that image now but it's essentially the same. Here's the new image:

http://i15.photobucket.com/albums/a397/AzzidReign/altimages.png

Here's the html code:

<tr align="center">
<td>
<div class="status_custom">
<img style="float: left; vertical-align:top" src="images/se7ensins/misc/upper-left.png" alt="" border="0" />
<img style="float: right; vertical-align:top" src="images/se7ensins/misc/upper-right.png" alt="" border="0" />
</div>
<img src="$stylevar[imgdir_statusicon]/forum_$forum[statusicon].png" alt="" border="0" id="forum_statusicon_$forum[forumid]" />

<img style="float: left;" src="images/se7ensins/misc/lower-left.png" alt="" border="0" />
<img style="float: right;" src="images/se7ensins/misc/lower-right.png" alt="" border="0" />

</td>

<td class="cornerscontent" align="$stylevar[left]" width="584" id="f$forum[forumid]">

<div class="middlecontent">
<div class="topcorners">
<img style="float: left;" src="images/se7ensins/misc/upper-left.png" alt="" border="0" />
<img style="float: right;" src="images/se7ensins/misc/upper-right.png" alt="" border="0" />
</div>

<div class="middlecontent">




<div style="padding-left:10px">
<a href="forumdisplay.php?$session[sessionurl]f=$forum[forumid]" style="font-size:16px; font-family:Arial, Helvetica, sans-serif"><strong>$forum[title]</strong></a>
<if condition="$show['browsers']"><span class="smallfont">(<phrase 1="$forum[browsers]">$vbphrase[x_viewing]</phrase>)</span></if>
</div>
<if condition="$show['forumdescription']"><div class="smallfont" style="padding-left:10px">$forum[description]</div></if>
<if condition="$show['forumsubscription']"><div fround="smallfont" style="padding-left:10px"><strong><a href="subscription.php?$session[sessionurl]do=removesubscription&amp;f=$forum[forumid]" rel="nofollow">$vbphrase[unsubscribe_from_this_forum]</a></strong></div></if>
<if condition="$show['subforums']"><div class="smallfont" style="margin-top:3px; padding-left:10px"><strong>$vbphrase[subforums]</strong>: $forum[subforums]</div></if>

</div>
<div class="topcorners">
<img style="float: left;" src="images/se7ensins/misc/lower-left.png" alt="" border="0" />
<img style="float: right;" src="images/se7ensins/misc/lower-right.png" alt="" border="0" />
</div>

</div>

</td>

<td class="cornerscontent" nowrap="nowrap">

<img style="float: left;" src="images/se7ensins/misc/upper-left.png" alt="" border="0" />
<img style="float: right;" src="images/se7ensins/misc/upper-right.png" alt="" border="0" />


$forum[lastpostinfo]


<img style="float: left;" src="images/se7ensins/misc/lower-left.png" alt="" border="0" />
<img style="float: right;" src="images/se7ensins/misc/lower-right.png" alt="" border="0" />

</td>
</tr>
$childforumbits

Here's the css used:

.topcorners {
background-color: #393939;
}
.middlecontent {
background: #393939;
}
.cornerscontent {
background: #393939;
border-top: #2c2c2c 3px solid;
border-right: #2c2c2c 3px solid;
}
.status_custom {
background-color: #393939;
border: 1px solid #2c2c2c;
vertical-align: top;
}

hemebond
01-03-2008, 06:24 AM
The following code is revolting and has only been tested in Mozilla Firefox.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<title>130579</title>
<style type="text/css">
tr, td {
height:100%;
}

td > div {
position: relative;
height: 100%;
z-index: 0;
min-width: 32px;
}

td > div > div {
padding: 16px;
}

div.cnr > img {
position: absolute;
z-index: -1;
}

img.tl {
top: 0;
left: 0;
}

img.tr {
top: 0;
right: 0;
}

img.bl {
bottom: 0;
left: 0;
}

img.br {
bottom: 0;
right: 0;
}
</style>
</head>

<body>
<table>
<tbody>
<tr>
<td>
<div class="cnr">
<img class="tl" src="130579/tl.png">
<img class="tr" src="130579/tr.png">
<img class="bl" src="130579/bl.png">
<img class="br" src="130579/br.png">
</div>
</td>

<td>
<div class="cnr">
<img class="tl" src="130579/tl.png">
<img class="tr" src="130579/tr.png">
<img class="bl" src="130579/bl.png">
<img class="br" src="130579/br.png">

<div>
<div>Text in here</div>
<div>Text in here</div>
<div>Text in here</div>
</div>
</div>
</td>
</tr>
</tbody>
</table>
</body>
</html>

AzzidReign
01-03-2008, 07:41 AM
Thanks a bunch man! I'll test it out and let you know how it goes. :) I greatly appreciate this.

I just tried it and since it's on a forum, all my columns expanded really large and it would be a nightmare to go through all the templates and fix that. I guess I'll have to wait until they go table-less here in the next year (hopefully).

Thanks for you help though!



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum