vb.org Archive

vb.org Archive (https://vborg.vbsupport.ru/index.php)
-   vB4 Programming Discussions (https://vborg.vbsupport.ru/forumdisplay.php?f=252)
-   -   DIV instead of TABLE is still a bit new to me... (https://vborg.vbsupport.ru/showthread.php?t=239262)

Jaxel 03-28-2010 09:54 AM
DIV instead of TABLE is still a bit new to me...
 
1 Attachment(s)
So I'm trying to figure out a few of the quirks in CSS code... Lets say I have the following code:
Code:
<div class="block" id="recentvideo">
  <h2 class="blockhead">Recently Uploaded Media</h2>
  <div class="blockbody floatcontainer" style="background: #F2F6F8 none;">
    <ul id="latestmediacontainer" style="padding: 20px 0px 0px 0px;">
      <li style="-webkit-box-shadow: #C8C8C8 -2px 2px 2px;
        background: white none; border: 1px solid #E9E9E9;
        display: block; float: left; padding: 10px;
        text-align: center; margin: 0px 0px 20px 20px;
        height: 200px; width: 300px;">testing....</li>
      <li style="-webkit-box-shadow: #C8C8C8 -2px 2px 2px;
        background: white none; border: 1px solid #E9E9E9;
        display: block; float: left; padding: 10px;
        text-align: center; margin: 0px 0px 20px 20px;
        height: 200px; width: 300px;">testing....</li>
    </ul>
  </div>
</div>
Gives the following output:
https://vborg.vbsupport.ru/attachmen...1&d=1269773342

However, I would like these two <LI> fields to stretch to 50% each, so it fills out the entire division. So I changed the width of the two <LI> fields to 50%, instead of 300px. Unfortunately this didn't work and instead gave me thus:
https://vborg.vbsupport.ru/attachmen...1&d=1269773342

It looks like it is doing this because 50% isn't 50% of the remaining space, but 50% of the entire space of the division, BEFORE space is removed for padding, margins, dropshadows and borders. This is evident because if I change the width of the <LI> fields to 100%, I get the following:
https://vborg.vbsupport.ru/attachmen...1&d=1269773342

So my question of course is... How do I put a percentage width in place that calculates based on the remaining space available?

bananalive 03-28-2010 02:21 PM
An easy way around it would be have the width of the one of the right as 50% and then have the one on the left not floating but aligned to left.

Wayne Luke 03-28-2010 03:00 PM
Set your width to 48% and center them within the DIV. Or remove the margins and box shadows.

http://www.w3schools.com/CSS/css_boxmodel.asp

Jaxel 03-28-2010 05:13 PM
Quote:
Originally Posted by Wayne Luke (Post 2011656)
Set your width to 48% and center them within the DIV. Or remove the margins and box shadows.

http://www.w3schools.com/CSS/css_boxmodel.asp
Yeah, but I want the page to look like the rest of the VB Skin. I'm going for consistancy and uniformity here. So removing the margins and box shadows is not an option. Also, setting the width to 48% is also not an option, as its different between everyone's different resolutions. On some computers, 48% is not enough, while 45% would be too much on other computers.

As well, I want to program it into my mod so people can select between 100% (1 per row), 50% (2 per row), 33.3% (3 per row) and 25% (4 per row) width of each cell. While a solution like this would be simple with a table and the "cellspacing" parameter, it seems that CSS makes this a bit complicated.

Jaxel 03-28-2010 07:20 PM
1 Attachment(s)
Okay... I'm just going to accept that you can't do percentages properly with the box model... an inherint flaw of design... and move on from it... however, now I have a new issue...

Using the following code: (I added padding and borders so its easier to see...)
Code:
        <li style="-webkit-box-shadow: #C8C8C8 -2px 2px 2px; background: white none; border: 1px solid #E9E9E9; display: block; float: left; padding: 10px; margin: 20px 0px 0px 20px; width: 500px; text-align: center;">
                <div>
                        <div style="padding: 10px; border: 1px solid #000000; float: left;">
                                <a href="media.php?{vb:raw session.sessionurl}mediaid={vb:raw mediaID}"><img src="{vb:raw thumbnail}" border="0" alt="{vb:raw title}" width="150" /></a>
                        </div>
                        <div style="padding: 10px; border: 1px solid #000000;">
                                <a href="media.php?{vb:raw session.sessionurl}mediaid={vb:raw mediaID}">{vb:raw title}</a><br />
                                {vb:raw date} at <span class="time">{vb:raw time}</span> by {vb:raw username}<br /><br />
                                <img src="{vb:stylevar imgdir_rating}/rating-trans-15_{vb:raw rating}.png" alt="Rating: {vb:raw rating}" />
                        </div>
                </div>
                <div style="padding: 10px; border: 1px solid #000000;">
                        {vb:var preview}
                </div>
                <div style="padding: 10px; border: 1px solid #000000;">
                        Tags:
                </div>
        </li>
I get the following:
https://vborg.vbsupport.ru/attachmen...1&d=1269807440

How would I change the code so I get the following instead?
https://vborg.vbsupport.ru/attachmen...1&d=1269807440

Jaxel 03-28-2010 08:46 PM
Figured it out...

Code:
<li style="-webkit-box-shadow: #C8C8C8 -2px 2px 2px; background: white none; border: 1px solid #E9E9E9; display: block; float: left; padding: 10px; margin: 20px 0px 0px 20px; text-align: center; width: 500px;">
        <div style="display: table;">
                <div style="display: table-row;">
                        <div style="display: table-cell; padding-right: 10px;">
                                <a href="media.php?{vb:raw session.sessionurl}mediaid={vb:raw mediaID}"><img src="{vb:raw thumbnail}" border="0" alt="{vb:raw title}" width="150" /></a>
                        </div>
                        <div style="display: table-cell; vertical-align: top; width: 340px;">
                                <a href="media.php?{vb:raw session.sessionurl}mediaid={vb:raw mediaID}">{vb:raw title}</a><br />
                                {vb:raw date} at <span class="time">{vb:raw time}</span> by {vb:raw username}<br /><br />
                                <img src="{vb:stylevar imgdir_rating}/rating-trans-15_{vb:raw rating}.png" alt="Rating: {vb:raw rating}" />
                        </div>
                </div>
        </div>
        <div style="padding-top: 10px;">{vb:var preview}</div>
        <div style="padding-top: 10px;">Tags:</div>
</li>
http://test.8wayrun.com/media.php


All times are GMT. The time now is 05:32 AM.

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.02226 seconds
  • Memory Usage 1,740KB
  • 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
  • (3)bbcode_code_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