Creating a quote box, similar to a round box....

I attempting to create a re-usable quote box like on this website right at the top, pownce.com


I would prefer not to use an image, and I swear I have seen a tutorial or some variation of how to do this. I know there are several that are with rounded boxes, but I would like to create something like this, no rounded boxes involved.

Thank you for ANY help.

:)

If i've got it right what you mean, couldn't you just style the <blockquote> tag?

If i've got it right what you mean, couldn't you just style the <blockquote> tag?


You have to look at the link I posted, pownce.com :thumbsup:

It's right at the top, I can't find any examples that show how to do it.

I attempting to create a re-usable quote box like on this website right at the top, pownce.com
Now maybe you can explain what a quote box is? On that page at the top right all I see is a login form?

Now maybe you can explain what a quote box is? On that page at the top right all I see is a login form?



Ah! I apologize, I got the wrong URL. Here we go http://pownce.com/download/

:)

P.S. It's at the very top, the header, I swear I once saw a tutorial for it.

http://cssplay.co.uk/boxes/curves.html
or do you want this? http://pownce.com/img/snowbud/header-back.gif

http://cssplay.co.uk/boxes/curves.html
or do you want this? http://pownce.com/img/snowbud/header-back.gif


Ah the second one! Yes, and again I swear I have seen it somewhere, a tutorial. O well hopefulyl someone knows where I can find it. 1 hour of searching for variations of rounded boxes has got me tired :eek:

So you want this (http://pownce.com/img/snowbud/header-back.gif) but with rounded corners? Or are the straight corners fine?


I would suggest to make your rounded corners then add a div under it and at the little arrow thing.

the easiest way would just to place a triangle img the same color as your background and the bottom of your header.

So you want this (http://pownce.com/img/snowbud/header-back.gif) but with rounded corners? Or are the straight corners fine?


I would suggest to make your rounded corners then add a div under it and at the little arrow thing.


Hm, I see. Although they will need to be repeated several times on a page, so I would rather not make it multiple parts, but rather one object I can place with css.

Rounded, or straight, at the moment I really am impartial I just am trying to find something like this that is one element that is scalable, one piece, etc., just like the round corner boxes you see all over.

Thanks.

http://twodayslate.com/test/test2.php

Sorta captured the effect with one of my old layouts.

edit://
http://twodayslate.com/test/inVINCEable.php There, all done! This (http://www.roundedcornr.com/) made is way easier! Looks fine in FF

http://twodayslate.com/test/test2.php

Sorta captured the effect with one of my old layouts.

edit://
http://twodayslate.com/test/inVINCEable.php There, all done! This (http://www.roundedcornr.com/) made is way easier! Looks fine in FF


Whoa, thank ya :)

Yep, i think ill give you some rep !

No problem, glad I can help.

sure helped me out... thanks

Sorry I am back, but I would like to replicate this on my own, what exactly did you do? by the page loading it looks like it loads the rounded box first, and then places the little quote thingy... is that positioned with CSS... or what? I'm trying to make this as re-usable as possible and will be implemented several times on each page and I would prefer it not to have to be absolutely positioned :P

Take a look at the code.
All I did was copy and paste the generated code from here (http://www.roundedcornr.com/). I then put a div under the box and used margins to position the arrow. Finally I wrapped it all in a div.


<div id="container">

<div id="box">All that other code</div>

<div id="arrow">the arrow</div>

</div>For the arrow I used an image for time sake, I would recomend a background image.

Just found this
http://www.cssplay.co.uk/menu/bubbles