...

View Full Version : 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
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.

koyama
07-10-2007, 12:13 AM
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
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
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:

twodayslate
07-10-2007, 06:39 PM
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.

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
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.

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 (http://www.roundedcornr.com/) made is way easier! Looks fine in FF

inVINCEable
07-12-2007, 03:50 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 (http://www.roundedcornr.com/) 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

inVINCEable
07-13-2007, 09:12 AM
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

twodayslate
07-13-2007, 03:43 PM
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.

twodayslate
07-15-2007, 06:20 PM
Just found this
http://www.cssplay.co.uk/menu/bubbles



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum