vb.org Archive

vb.org Archive (https://vborg.vbsupport.ru/index.php)
-   vB3 Design and Graphics Discussions (https://vborg.vbsupport.ru/forumdisplay.php?f=168)
-   -   alt1 and alt2 help - using images (https://vborg.vbsupport.ru/showthread.php?t=166737)

AzzidReign 01-02-2008 03:04 PM
alt1 and alt2 help - using images
 
I'm trying to have each cell have rounded expandable images but this is what I keep getting:

http://i15.photobucket.com/albums/a3...-examples1.png

I have the rounded images shown in red to see what the problem is exactly. When the middle column of the row expands in height, the other 2 columns in the row do not.

This is my code:
HTML Code:
<tr align="center">
        <td class="alt2">
<div class="bl3"><div class="br"><div class="tl"><div class="tr2">
<img src="$stylevar[imgdir_statusicon]/forum_$forum[statusicon].png" alt="" border="0" id="forum_statusicon_$forum[forumid]" />
</div></div></div></div>
</td>
        <td class="cell_bg" align="$stylevar[left]" width="584" id="f$forum[forumid]">

<div class="bl3"><div class="br"><div class="tl"><div class="tr2">

                <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></div></div>

        </td>

        <td class="cell_bg" nowrap="nowrap">
<div class="bl3"><div class="br"><div class="tl"><div class="tr2">
$forum[lastpostinfo]
</div></div></div></div>
        </td>

</tr>
$childforumbits
This is the css to go with it:
Code:
.cell_bg { background: #2c2c2c; }
.bl3 {background:url(http://www.sitepoint.com/examples/roundcorners/bl.gif) 0 100% no-repeat #393939; }
.bl2 {background:url(http://www.sitepoint.com/examples/roundcorners/bl.gif) 0 100% no-repeat #393939;  padding:10px}
.bl {background:url(http://www.sitepoint.com/examples/roundcorners/bl.gif) 0 100% no-repeat; }
.br {background:url(http://www.sitepoint.com/examples/roundcorners/br.gif) 100% 100% no-repeat;  }
.tl {background:url(http://www.sitepoint.com/examples/roundcorners/tl.gif) 0 0 no-repeat}
.tr {background:url(http://www.sitepoint.com/examples/roundcorners/tr.gif) 100% 0 no-repeat}
.tr2 {background:url(http://www.sitepoint.com/examples/roundcorners/tr.gif) 100% 0 no-repeat; padding:10px}
.clear {font-size: 1px; height: 1px}
Does anyone know a solution to this problem? I would greatly appreciate it since I've been trying various things for the past week now to get it to work.

Thank you

5th-Level 01-02-2008 06:31 PM
Looks like all you need is a color to fill in or an image to make it a glossy feel such as

Code:
url(images/blah/blha.gif) repeat-x top
url(images/blah/blah.gif) repeat-x bottom

AzzidReign 01-02-2008 07:12 PM
No, I don't need a glossy feel. I dont think you understand what I'm asking. I want all of my cells to have the rounded images. I've only been able to do it with a fixed image but when I start to add sub-forums, the subforums break the plane of the image and it looks really bad.

I need each of the cells to expand according to the largest (biggest in height) cell in the row. As you can see, each cell is doing it's own thing. I have 4 images per cell, which is why there are those orange rounded images in each corner, just to show you exactly where the images are being placed.

5th-Level 01-03-2008 10:07 PM
add the positions such as

Code:
.bl3 {background:url(http://www.sitepoint.com/examples/roundcorners/bl.gif) 0 100% no-repeat #393939 top left; }
that will make the corners fixed in the cell

Aken 01-05-2008 05:06 AM
Quote:
Originally Posted by 5th-Level (Post 1414947)
add the positions such as

Code:
.bl3 {background:url(http://www.sitepoint.com/examples/roundcorners/bl.gif) 0 100% no-repeat #393939 top left; }
that will make the corners fixed in the cell
This will not help for two reasons:

1) The position of the background is already defined with "0 100%".
2) The background position is not what is causing the problem.

AzzidReign: Your problem is that the content for each section is now residing in a <div> element. Unfortunately for you, a <div> element does not automatically assume the dimensions (specifically height) of its parent element (in this case, the table cell) unless given the appropriate CSS attributes.

You will have to define a height for the table cells on your homepage, and then add a height: 100%; attribute to each of your CSS classes. The reason you have to define a height for the table cells is because the CSS height: 100%; doesn't work if it doesn't know what the total height is. It will take away some of the effectiveness of dynamic content since everything will have to be the same height, but it will add some uniformity and it will make your style work properly.

AzzidReign 01-06-2008 04:53 PM
Yeah, I was able to get it to fit to "one" size but I needed it to be able to expand to the subforums I have :( Oh well, I guess I'll be like Wendy's and go square. :P

Thanks for the help guys.


All times are GMT. The time now is 10:24 PM.

Powered by vBulletin® Version 3.8.12 by vBS
Copyright ©2000 - 2025, vBulletin Solutions Inc.

X vBulletin 3.8.12 by vBS Debug Information
  • Page Generation 0.01036 seconds
  • Memory Usage 1,745KB
  • Queries Executed 10 (?)
More Information
Template Usage:
  • (1)ad_footer_end
  • (1)ad_footer_start
  • (1)ad_header_end
  • (1)ad_header_logo
  • (1)ad_navbar_below
  • (4)bbcode_code_printable
  • (1)bbcode_html_printable
  • (1)bbcode_quote_printable
  • (1)footer
  • (1)gobutton
  • (1)header
  • (1)headinclude
  • (6)option
  • (1)post_thanks_navbar_search
  • (1)printthread
  • (6)printthreadbit
  • (1)spacer_close
  • (1)spacer_open 
Phrase Groups Available:
  • global
  • postbit
  • showthread
Included Files:
  • ./printthread.php
  • ./global.php
  • ./includes/init.php
  • ./includes/class_core.php
  • ./includes/config.php
  • ./includes/functions.php
  • ./includes/class_hook.php
  • ./includes/modsystem_functions.php
  • ./includes/class_bbcode_alt.php
  • ./includes/class_bbcode.php
  • ./includes/functions_bigthree.php 
Hooks Called:
  • init_startup
  • init_startup_session_setup_start
  • init_startup_session_setup_complete
  • cache_permissions
  • fetch_threadinfo_query
  • fetch_threadinfo
  • fetch_foruminfo
  • style_fetch
  • cache_templates
  • global_start
  • parse_templates
  • global_setup_complete
  • printthread_start
  • bbcode_fetch_tags
  • bbcode_create
  • bbcode_parse_start
  • bbcode_parse_complete_precache
  • bbcode_parse_complete
  • printthread_post
  • printthread_complete