Putting a div box in the header, floating right of the title

[Alan Vende]

Forum URL: psychic-psyghtings.proboards.com

Is it possible to put a div box in the header floating right, on the same "line" as the logo/forum title? When I try to do it, it goes underneath/to the right of it. I want the background around it and it only on one line, but I can't seem to do it.

I wanted to use a div box so I can style it in the CSS area.

This is the closest I could get:

 

With this code for the div box:

<div id="wrapper">
<header>
<div id="banner-container" role="banner">
<h2 id="banner">
$[forum.title]
</h2>
<div class="radio-box">
<table width="30%" style="background: #FFFFFF; border: 5px solid #007ABE; padding: 0.5em 0.3em; text-align:center; color: #00137F; font-size: 9pt;"
cellpadding="0" cellspacing="0" align="center">
<tbody>
<tr>
    <td><br /><strong>
Home of Psychic Psyghtings Radio<br />
<br />
</strong></td>
  </tr>
  </tbody>
</table>
</div>
</div>
Thanks for any help that you can give!

[Nscalerr]

I did a bit of a play around on my test forum and I think I have come up with what you want. Let me know if it is not.
You will have to set the colours to what you want, as I had to set them this way, so I could see them on my test forum.

<div id="banner-container">
<table id="banner" style="border: 1px solid #ff0000; padding: 0.5em 0.3em; text-align:center; color: #ffffff; font-size: 9pt;"
cellpadding="0" cellspacing="0" align="center">
<tr>
<td><br /><strong>
Home of Psychic Psyghtings Radio<br />
<br />
</strong></td>
</tr>
</table>
</div>

[Alan Vende]

That worked for the most part, Nscalerr, but for some reason, when I put it in, it went like the screenshot below:



I tried to change it in my Stylesheet with:

#radio-banner {
width: 10px;
height: 10px;
}
But that didn't seem to change anything; it said like it did in the screenshot above.

Thanks for your help!

[Alan Vende]

I figured out how to change the height and width... I put it too small to register. I changed it and this is what I have now:



I'm just not sure why the purple went over to the right. I wanted it behind it; I wanted the div box to be on top of the purple gradient background.

Thanks so much!

[Nscalerr]

Odd because it worked ok in my test forum. Where did you place it in the wrapper. The code below is how I have it on my test forum.

Link to my test forum, so you can see it in action. partworkstest.proboards.com/



<div id="banner-container" role="banner">
<h2 id="banner">
$[forum.title]
</h2>

<div id="banner-container">
<table id="banner" style="border: 1px solid #ff0000; padding: 0.5em 0.3em; text-align:center; color: #ffffff; font-size: 9pt;" cellpadding="0" cellspacing="0" align="center">
<tr><td><br /><strong>
Home of Psychic Psyghtings Radio<br />
<br /></strong></td></tr>
</table>
</div>

[Alan Vende]

This is how I have it, which I thought is exactly how you have it:


<div id="wrapper">
<header>
<div id="banner-container" role="banner">
<h2 id="banner">
$[forum.title]
</h2>
<div id="banner-container">
<table id="radio-banner" style="border: 1px solid #000000; text-align:center; color: #000000; font-size: 9pt;"
cellpadding="0" cellspacing="0" align="center">
<tr>
<td><strong>
Home of Psychic Psyghtings Radio
</strong></td>
</tr>
</table>
</div>
</div>


This is the picture of what I have now:



I put a few things into the Stylesheet to make it look the way it does in the way of where it's positioned, but that's it.

[Nscalerr]

Think I have it this time Alan Vende


<div id="banner-container" role="banner">
<h2 id="banner">
$[forum.title]&nbsp;&nbsp;&nbsp;<span id="radio-banner">Home of Psychic Psyghtings Radio</span>
</h2>
</div>
Now for the CSS.


#radio-banner {
border: 1px solid #ff0000;
text-align: center;
color: #ffffff;
font-size: 9pt;
}

[Nscalerr]

I added padding: 5px; to the css to make it look better.

[Alan Vende]

I don't know what's going on, but the purple background, the gradient I put on the original header, isn't behind the box; it's to the left of it. I want to have it behind it. That's my only problem now -- it's showing on there, just not in the right place

Thanks so much, Nscalerr!

[Nscalerr]

Very weird, as it is working on my test forum. Maybe Kami or one of the others can come up with an answer. Good luck.

[Alan Vende]

I'm not sure. It's the same thing as in the screenshots -- the background is the same as in the screenshots. I'm not sure why it's not working. Thanks for your help, Nscalerr!

[Nscalerr]

Adding in a screenshot, so that others can see how it appears on my test forum.

[Alan Vende]

That's, eventually, what I want to happen on mine. I'm not sure why it's putting my header gradient to the left.



Above is what it is showing as of 8:06pm EST

[Nscalerr]

Do you have a link, so I could see it happening ?

[Alan Vende]

I do, but I'm working on my test themes. Hold on and I will make it the default, if I can.