1

Topic: Split the Announcement bar?

I'd like to split the announcement bar so that it shows up on the left, and an identical box with seperate content appears on the right. Basically, visually divide the announcement bar in half (with a vertical split in the middle).

I've tried using tables in header.php, but the pun class seems to mess the entire thing up -- does anyone have any ideas on how to split the bar?

Saab92x.com
Over 2300 users and 265,000 posts, running PunBB for 3 years

Re: Split the Announcement bar?

I'm no expert at style sheets, but I believe you would do that by adding a new div for the right box and then setting the boxes to float left and right respectively.

"Programming is like sex: one mistake and you have to support it for the rest of your life."

3

Re: Split the Announcement bar?

I gave that a shot using div style="float: left;", etc, but the boxes ended up overlaid over the top of the forum list box below. Any CSS experts have any insight that might help?

Saab92x.com
Over 2300 users and 265,000 posts, running PunBB for 3 years

Re: Split the Announcement bar?

I'm no expert but...

<div style="float:left; width: 50%">Hi 1</div><div style="float:left; width: 50%">Hi 2</div>
<div class="clearer"></div>

5

Re: Split the Announcement bar?

Connorhd wins, thanks guys!

Saab92x.com
Over 2300 users and 265,000 posts, running PunBB for 3 years

6 (edited by fidel 2005-05-22 07:27)

Re: Split the Announcement bar?

Actually, there may be a better way to deal with that problem without adding the non-semantic, meaningless div to clear the floats.

Give the parent element an "overflow: auto". This forces the parent to expand to contain its floated child elements.

There is of course one thing to watch out for (isn't there always something to watch out for with every css fix)! Setting overflow to auto also affects horizontal overflow. So you need to make sure that the width of your floated child elements never add up to more than the parent's width or they will overflow horizontally and break the layout. You especially need to keep an eye on that in older IE which incorrectly calculates the width of an element to include padding and thus makes your elements wider than they should be (ie, you may need to employ one of the various ?box model hack? techniques out there to selectively pass corrected widths to IE).

But anyway, that?s the way to do it if you want to keep your xhtml semantic and free of meaningless markup.

Re: Split the Announcement bar?

but to do that wouldn't you either have to edit the punbb source or add a meaningless container div for the 2 divs i suggested?

8

Re: Split the Announcement bar?

Don't know haven't seen the xhtml for an announcement bar. I assumed it was something like:

<div id=announcement-bar">
    <div id="left-split">left side<div>
    <div id="right-split">right side<div>
<div>

in which case announcement-bar would get the overflow: auto and a width value. left-split/right-split would need width whose total was less than announcement-bar's width. All of that happens in the css, then you're already editing some bit of the source code to get the left/right divs in there right (because you are adding them).

Even if the announcement bar is not a container now, it would be more semantically meaningful to add that division (the announcement bar is a structural content division) than it would be to add an empty div that functions only as presentation hack?

Like I said this "may be" another way to deal with the guillotine affect here. Every situation is different.

Re: Split the Announcement bar?

i prefer my solution for the simple fact its easier tongue it requires no edits of any files

10

Re: Split the Announcement bar?

fidel wrote:

Actually, there may be a better way to deal with that problem without adding the non-semantic, meaningless div to clear the floats.

Give the parent element an "overflow: auto". This forces the parent to expand to contain its floated child elements.

There is of course one thing to watch out for (isn't there always something to watch out for with every css fix)! Setting overflow to auto also affects horizontal overflow. So you need to make sure that the width of your floated child elements never add up to more than the parent's width or they will overflow horizontally and break the layout. You especially need to keep an eye on that in older IE which incorrectly calculates the width of an element to include padding and thus makes your elements wider than they should be (ie, you may need to employ one of the various ?box model hack? techniques out there to selectively pass corrected widths to IE).

But anyway, that?s the way to do it if you want to keep your xhtml semantic and free of meaningless markup.

Actually, overflow:hidden works better than overflow:auto, less side effects. It doesn't work in Opera versions less than 8 though unless you give it width 100% but that can screw things up elsewhere because the elements with width 100% will be wider than the elements with auto width by the width of the borders. If you want to support IE5Mac you have to feed it display:inline-table contained in the normal hack. You should never feed any of this to IE Win which doesn't need it anyway.

I did some extensive testing of this method as an alternative to using clearer divs for PunBB 1.3 and it really is quite flakey. The only way to get it to work perfectly cross browser was to start adding extra wrapper divs and that created as much non essential markup as using clearer divs.

11 (edited by fidel 2005-05-22 19:33)

Re: Split the Announcement bar?

well... I haven't checked it completely cross browser yet but it does work IE 5.5, IE6 & Firefox (EDIT: just checked Opera 7 & NS7) PC with no extranious markup at all, like so:

Step 1.
open header.php and Find:

        <div class="inbox">
            <div><?php echo $pun_config['o_announcement_message'] ?></div>
        </div>

as you can see the "announcement bar" already has a parent element it just isn't named for some reason. So you need to give that element an id like so:

        <div class="inbox">
            <div id="announce-bar"><?php echo $pun_config['o_announcement_message'] ?></div>
        </div>

Step 2.
open the css file for your forum's style and at the bottom add these three rules:

#announce-bar {
    width: 100%;
    overflow: auto;
}
#announce-left {
    float: left;
    width: 49%;
}
#announce-right{
    float: right;
    width: 50%;
}

Step 3.
In Administration > Options > Announcement message enter:

<div id="announce-left">this is left</div>
<div id="announce-right">this is right</div>

substituting your messages where appropriate, of course.

That will give you an announcement bar with left/right divisions that is still 100% semantic with no inline style declarations to muddy it up, and no meaningless divs used to hack the presentation into place.