The Arcive of Official vBulletin Modifications Site.It is not a VB3 engine, just a parsed copy! |
|
#1
|
|||
|
|||
DIV instead of TABLE is still a bit new to me...
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> 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: 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: So my question of course is... How do I put a percentage width in place that calculates based on the remaining space available? |
#2
|
|||
|
|||
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.
|
#3
|
||||
|
||||
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 |
#4
|
|||
|
|||
Quote:
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. |
#5
|
|||
|
|||
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> How would I change the code so I get the following instead? |
#6
|
|||
|
|||
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> |
Thread Tools | |
Display Modes | |
|
|
X vBulletin 3.8.12 by vBS Debug Information | |
---|---|
|
|
More Information | |
Template Usage:
Phrase Groups Available:
|
Included Files:
Hooks Called:
|