Customizing SMF > SMF Coding Discussion

Echoing a code left to right in columns

<< < (3/8) > >>

Liam_michael:

--- Quote from: Antechinus on April 07, 2012, 02:43:17 AM ---Ok, I get it now. I'd still do that with css myself. Using tables for layout is very old school and not good practice, so I'd mark it up as a big unordered list. Then you just do the same trick with the <li> bits: set 'em 50% wide and float: left;. Instant two blocks per row for as long as you want to keep stacking them up. :)

I'll write out the markup and basic css for you a bit later. It's a piece of cake once you know how. Hell of a lot easier than templating this bloody software from scratch anyway. :D

--- End quote ---

Thanks, I always learned to work with tables, still haven't adjusted to lists and divs. Regardless, could you do it using tables too?

I would like to continue with that theme.

Antechinus:
Welllllllllllllllllllllllllllllllllllllllllllllllll......................................................no. :D

Honestly, that code is horrible. Really. There is oodles of inline css, and it is formatted in the most long-winded and ridiculously redundant fashion possible. If you do it another way it will run faster and be much easier to customise. For instance, by changing one value in the css you will be able to change the number of blocks on each row, without going anywhere near the template. It will still call all the standard theme classes, so it should drop straight into your existing theme without causing problems. Trust me on this. I know presentation. :)

I'll give you an example, starting with the main div. At the moment you have this:


--- Code: ---<div style="padding-top: 1em; padding-right: 1em; padding-bottom: 1em; padding-left: 1em; font-size: 0.9em; line-height: 15px; border-top-style: solid; border-right-style: solid; border-bottom-style: solid; border-left-style: solid; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-color: #ADADAD; border-right-color: #ADADAD; border-bottom-color: #ADADAD; border-left-color: #ADADAD;
--- End code ---

You are running over four times as much css as you need to do the job. The following is quite sufficient to deal with the padding and the borders.


--- Code: ---padding: 1em; border: 1px solid #ADADAD;
--- End code ---

See the difference? Which one would you prefer to deal with if you decide to make changes to your theme? Now do you understand why I want to rewrite it? ;D

By the way, declaring font-size in em and line-height in px is generally not good practice, because IE wont scale any of the font properties that are declared in px. It's better to match the line height units to the font units. This will look the same, or near enough:


--- Code: ---font-size: 0.9em; line-height: 1.3em;
--- End code ---

Then there's stuff like  this:


--- Code: --- border-image: initial;
--- End code ---

It doesn't do anything, because its not a valid declaration. "initial" is not a valid value for any of the CSS3 border-image properties. Furthermore, even if you do wish to use border images you would still have to include the vendor-specific prefixes if you want it to work in most browsers, because at the moment only Chrome supports the basic w3 syntax. No current version of IE supports it at all, with or without prefixing.

I'll whip this into shape just for a bit of light entertainment, then you can try it out and see if it does what it says on the tin.

Liam_michael:
Thanks eh.

Antechinus:
Just been looking at it again this morning, and out of all the inline styles declared for that first div, this is all you need:


--- Code: ---.main_div
{
margin: 0 0 1em 0px;
padding: 1em;
font: 0.9em/1.3em "Arial", "Helvetica", sans-serif;
background: #ECEDF3;
color: #000;
border: 1px solid #ADADAD;
border-radius:5px;
orphans: 2;
widows: 2;
}

--- End code ---

That's it. Nothing else required, and the last two are only in case someone prints the page anyway.

IchBin™:
Liam_michael,

In order to make a column to your specification you need some type of counter. This can be done a few ways, but I'll show one way.

First is to create a counter variable and then to check the value of it. If the value divided by the count of columns you want has a remainder of 0, then you create a new column. Here's a quick code mock-up since it's kind of hard to explain.


--- Code: ---$number_of_columns = 2;
$counter = 0;

echo '
<table>';

foreach ($membergroup as $mem) {
// loop through your $mem stuff and create your rows
echo '
<tr>
<td> Do stuff for first column</td>
<td> Do stuff for second column</td>';
if ($counter % $number_of_rows == 0) {
// if the counter divided by number of rows has a remainder of 0 end current row and add another row.
echo '
</tr>
<tr>';
}
// Add 1 to the counter
$counter++;
}
--- End code ---

Navigation

[0] Message Index

[#] Next page

[*] Previous page