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

inVINCEable · 07-09-2007, 10:06 PM

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.

Jutlander · 07-09-2007, 11:30 PM

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

inVINCEable · 07-09-2007, 11:38 PM

Quote:

Originally Posted by Jutlander

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

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

koyama · 07-10-2007, 12:13 AM

Quote:

Originally Posted by inVINCEable

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?

inVINCEable · 07-10-2007, 04:26 AM

Quote:

Originally Posted by koyama

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/

inVINCEable · 07-10-2007, 04:27 AM

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

twodayslate · 07-10-2007, 04:46 AM

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

inVINCEable · 07-10-2007, 07:05 AM

Quote:

Originally Posted by twodayslate

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

twodayslate · 07-10-2007, 06:39 PM

So you want this 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.

srule_ · 07-10-2007, 06:56 PM

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

inVINCEable · 07-11-2007, 01:21 AM

Quote:

Originally Posted by twodayslate

So you want this 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.

twodayslate · 07-11-2007, 03:20 AM

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 made is way easier! Looks fine in FF

inVINCEable · 07-12-2007, 03:50 AM

Quote:

Originally Posted by twodayslate

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 made is way easier! Looks fine in FF

Whoa, thank ya

Yep, i think ill give you some rep !

twodayslate · 07-12-2007, 04:54 AM

No problem, glad I can help.

isshin · 07-12-2007, 08:37 AM

sure helped me out... thanks