Those cute right-aligned promoboxes 1

[Rydel]

Here is the URL:

http://www.pravapis.org/art_benyehuda2.asp

I am trying to make a CSS definition for a nice little right-aligned promobox with fixed width that I could place anywhere on the page.

So far I've made a solution which makes some sort of "promobox", but has two flaws:
- I can only place it in between paragraphs, because it's with <p> tag
- If I add padding definition, somehow all other paragraphs become unwrapped and each paragraph turns into a loooooong single line.

Also, please note, that I only looked at it in IE 5.5. I wonder how it looks in other browsers.

Here is the code:

<style>
p.promobox
{
 float: right;
 background-color: #e9e9e9;
 width: 150 pt;
 border-top-style: solid;
 border-top-color: #c0c0ff;
 border-top-width: 1px;
 border-bottom-style: solid;
 border-bottom-color: #c0c0ff;
 border-bottom-width: 1px;
 font-family: Arial, Helvetica, sans-serif;
 font-size: 10pt;
 font-weight: bold;
}
</style>

And here you can see how it looks:

http://www.pravapis.org/art_benyehuda2.asp

Any help is greatly appreciated! If you are to busy to give a detailed answer, may be you could give me URL with similar promoboxes.



---

http://www.geocities.com/rydel23/

---

 

[Boomerang]

Hi Rydel,

Can't you just make a style like:

<style>
.promobox
{
.......
}

and add it to a <div> like:

<div class=&quot;promobox&quot;>

Maybe that will work,
Erik






<!-- My sport: Boomerang throwing !!
This year I will participate at the World Championships in Germany. (

http://www.boomerang2002.com)

!! Many Happy Returns !! -->

 

[BobbaFet]

Or also you try Boomerangs solution with a <span> BobbaFet

Everyone has a right to my opinion.
E-mail me at caswegkamp@hotmail.com

http://cwcon.50megs.com/

 

[Rydel]

I've tried that before, and it didn't work. The problem was that then the rest of the paragraph that followed <span></span> block somehow &quot;forgot&quot; its style definition and was displayed in default font family and font size. But now I tried again, and it (miraculously) worked. Thanks.

But the second problem remains -
If I add some padding, e.g.

padding-top: 5%;
 padding-bottom: 5%;
 padding-left: 5%;
 padding-right: 5%;

All the other paragraphs become unwrapped, all becoming single long lines.
---

http://www.geocities.com/rydel23/

---

 

[Boomerang]

Hi Rydel,

Set the padding in px instead of % and it will work for <div> as well as <span>

padding-top: 5px;
padding-bottom: 5px;
padding-left: 5px;
padding-right: 5px;

Hope this helps,
Erik
<!-- My sport: Boomerang throwing !!
This year I will participate at the World Championships in Germany. (

http://www.boomerang2002.com)

!! Many Happy Returns !! -->

 

[Rydel]

worked perfectly well, boomerang. thanks a lot! ---

http://www.geocities.com/rydel23/

---