...

View Full Version : Making a rectangle with curly edges, possible?



ConfusedOfLife
10-30-2002, 06:48 AM
How can I make a rectangle with curly edges like the one in htmlarea ( you can download it in www.interactivetools.com ), if you press the image button to insert an image into your htmlarea, you'll see a beautiful alert box that has some rectangles in it with curly edges!

zoobie
10-30-2002, 06:54 PM
As you can see, nobody's going to download a whole program to see what you're talking about.

Take a screenshot of it and post it here.

If it's in a program, it probably is a image and can't be reproduced in browsers.

jkd
10-30-2002, 08:11 PM
.curly {
border: 2px solid black;
-moz-border-radius: 25px;
}

...........

<div class="curly">blabla</div>


NS6+ (Gecko) only.

Bosko
10-30-2002, 09:49 PM
You can also set the radius level for each corner/edge individually:
-moz-border-radius-bottomleft
-moz-border-radius-bottomright
-moz-border-radius-topleft
-moz-border-radius-topright

zoobie
10-31-2002, 03:28 AM
I sit corrected for the 1% of NS6 users. :)

Mhtml
10-31-2002, 07:24 AM
Oh my, that just isn't right...not right at all.

ConfusedOfLife
10-31-2002, 08:29 PM
Thanx my dear super moderator, it's just great! Thanx to you too Bosko and also zoobie, but I really suggest you to download that program! ( I really really do )

ConfusedOfLife
11-02-2002, 12:34 AM
Hey! last night that I saw your answer I was so happy that I went right to bed and didn't test your code! today when I tested that I saw that it doesn't work! I'm using WinXP with IE6, so, if my browser doesn't support it, why could I see it in that program?!

joh6nn
11-02-2002, 03:51 AM
i downloaded this, clicked on the insert image icon, and didn't get a rounded box. the only thing i saw rounded at all, was in this screenshot that i've uploaded. if this is what you're talking about, then the corners are rounded because they're using pictures. if that's not what you're talking about, then i can only assume that this has to do with MS trying to make XP pretty.

Mr J
11-02-2002, 04:44 PM
It must be part of that programs graphics then

joh6nn
11-02-2002, 11:35 PM
it's not a program; it's proprietary MS html and javascript. the idea, is that it's a script, that replaces textareas, the upside being that the script allows you to use rich text formatting. it's using what i'm pretty sure are modal windows as dialog boxes ( didn't bother examining the code too much ), but for me, on win98, they're rectangular. no rounded corners. so, unless Confused is talking about the graphic i uploaded, the rounded corners he's seeing, are because of XP

ConfusedOfLife
11-03-2002, 09:41 PM
Well, sorry, I know that I had to send the pic from the begining! but well, now I'm gonna do that. And what you send isn't what I'm talking about, when you press the insert image button, you see two fileds at the bottom of the page asking for Layout and Spacing, the curly rectangle around them, I mean the <fieldset> is my question and also I tried the fieldset alone and I didn't see any curly edge, so, it's not because of XP!

PS: And I did bother myself examining the code and you're right, they're modal windows for dialog boxes, but I still don't know how the whole script works! I think it's a cool script, at least for me!

I uploaded the screen shot in here (http://irandiba.net/confusedoflife/SS/curly!.jpg)

redhead
11-03-2002, 09:56 PM
i might have misread. but from what i see that is an XP dialogue box?

for a start... thats not html or css, if you wanted to use html or css to do that you would need images (if you wanted it to work in more than moz, that is)

:thumbsup:

ConfusedOfLife
11-03-2002, 10:21 PM
You did misread, I'm not talking about the whole rectangle of the alert box, but those two little ones inside of the box, look at the direction of those red arrows!

Mr J
11-04-2002, 12:27 AM
Hows this ....

Note, my browser is IE5.5



<HTML xmlns:v = "urn:schemas-microsoft-com:vml">
<style>
v\:* {BEHAVIOR: url(#default#VML)}
</style>

<HEAD>
<TITLE>Document Title</TITLE>
</HEAD>
<BODY>
<v:roundrect style="position:relative;left:250px;top:0px;width:200px;height:200px" arcsize="0.027" fillcolor="#f0ece0" strokecolor="#cccccc" strokeweight="1px">
<div style="position:relative;left:20;top:50">
Horizontal:
<div style="position:relative;left:70;top:-20;width:100;height:25;background-color:#ffffff;border:1 solid #bbd4ff"></div>
Vertical:
<div style="position:relative;left:70;top:-20;width:100;height:25;background-color:#ffffff;border:1 solid #bbd4ff"></div>
</div>
</v:roundrect>
</BODY></HTML>



This post has not rendered correctly and will not edit.
See my next post

Mr J
11-04-2002, 12:34 AM
The above has not rendered correctly.

See the attached zip file

krycek
11-04-2002, 03:40 PM
um... of of interest, I tried that code on my browser (IE6, WinXP) and it worked fine...

...but what is all that v:roundrect stuff? :confused:

I recognise it as XHTML, which I am starting to use, but I am not quite sure what you did.

::] krycek [::

EDIT: Also, if someone could point me to a good site that explains to advanced HTML/DHTML/JavaScript people how to start using XHTML, that would be brilliant :) Cheers!

jkd
11-04-2002, 05:54 PM
Originally posted by krycek
um... of of interest, I tried that code on my browser (IE6, WinXP) and it worked fine...

...but what is all that v:roundrect stuff? :confused:

It is VML. And generally not worth your time, since there is a standardized alternative called SVG that works in more than one browser.

redhead
11-04-2002, 06:02 PM
Originally posted by ConfusedOfLife
You did misread, I'm not talking about the whole rectangle of the alert box, but those two little ones inside of the box, that is what i was refering to also, sorry! surely its an inbuilt windows thing though... you can acheive it easily using images if your using a similar effect on a web page... its quite a common effect methinks.

ConfusedOfLife
11-04-2002, 10:38 PM
Well, it seems that you did it MR J! I'm very tired now that I can't parse! your code, I had a glance at that and the syntax wasn't familiar!! It wouldn't be bad if you somehow explain it too! thanx in advance!

Dear Redhead, I didn't say that it's a special effect for you, but it is for me, coz I couldn't make such thing with code and using images is a different thing I think! Also it SHOULD be a built in effect coz we just work with objects and I don't think that a scripter ever writes an OS! ( It's the definition of script I think )

Mr J
11-05-2002, 08:36 AM
I have a small section on my site that outlines the basics.

www.huntingground.freeserve.co.uk/webplus/vshapes.htm

and a page I am in the process of creating

www.huntingground.freeserve.co.uk/style/butmaker.htm

should be up later today.


JKD

Could you post a link to info on "SVG"

I'd like to take a look at an alternative

jkd
11-05-2002, 12:50 PM
http://www.w3.org/TR/SVG/

krycek
11-06-2002, 01:47 PM
SVG looks extremely interesting... but also quite involved. Out of interest, what browsers currently support it?

::] krycek [::

jkd
11-06-2002, 05:00 PM
The Adobe SVG plugin implements it in IE and NS4.

Amaya has a basic, native implementation, as does special builds of Mozilla.

brothercake
11-06-2002, 06:44 PM
But IE has native support for VML ... well in a standard install it does, anyway. So if you did use VML to do this you'd capture about 75% of users.

You could use SVG for the benefit of those who have SVG capable browsers

You could even do it in flash!


... or you could do it in images. The original dialogue box you mentioned is a Win XP thing - you could create something similair with VB, but of course it won't work on the web.


Personally, if it was me, i'd do it with images. If you'd really rather do it with vector graphics then - ideally both VML and SVG can be combined for the most cross-browser solution - but practically - VML is far more useful, the ways things are right now.

jkd
11-06-2002, 07:48 PM
I'd rather be able to reach 99% of Internet surfers on any OS than restrict myself to IE on Windows with maybe 70% who actually have VML installed or are willing to install the addition.

Mr J
11-07-2002, 12:21 AM
Unless I have misunderstood from what I have read on the net SVG is not yet establish as only IE6 is capable of rendering it, unless you have the plugin for adobe.

Non of the examples shown on any of the SVG sites I visited would show on my IE5.5 browser

:(
:confused:
:mad:

jkd
11-07-2002, 02:58 AM
Originally posted by Mr J
Unless I have misunderstood from what I have read on the net SVG is not yet establish as only IE6 is capable of rendering it, unless you have the plugin for adobe.


Only Mozilla and Amaya have native rendering ability. Otherwise, the Adobe SVG Plugin works for IE4+/Win, NS4/Win, and IE5/Mac

ConfusedOfLife
11-07-2002, 09:20 AM
Big appologies to RedHead!

Now that I'm testing the code in win98 I see no curly edge! But the thing is that I even couldn't write a field with curly edges that works in XP, even though I knew fieldset and legend! Now it's a link that makes it with normal css :

http://www.codingforums.com/showthread.php?s=&postid=44889#post44889

Pooh
11-07-2002, 11:31 AM
Vml works for me..........Ie 5 and up. What is that more than 90 percent of the browsers.

http://www.codingforums.com/showthread.php?s=&threadid=6588



<HTML xmlns:v="urn:schemas-microsoft-com:vml">

<style>

v\:* {behavior:url(#default#VML);}
</style>
<body>
<v:roundrect style="width:150pt;height:50pt" fillcolor="aqua"> </v:roundrect>

</body>

brothercake
11-07-2002, 02:04 PM
Originally posted by jkd
I'd rather be able to reach 99% of Internet surfers on any OS than restrict myself to IE on Windows with maybe 70% who actually have VML installed or are willing to install the addition.

The important thing is that most people already have native VML support, whereas most people do not have the SVG plugin.

My attitude is generally to avoid using plugins, because you end up losing a proportion of visitors to people who don't want to (or can't) download and install a plugin.

I think it's a basic commercial reality that your first priority is supporting the majority platform, however much you personally hate it.

Mr J
11-07-2002, 02:57 PM
YES .... in order for it to render you have to include


xmlns:v="urn:schemas-microsoft-com:vml


in the opening HTML tag

and

<style>
v\:* {behavior:url(#default#VML);}
</style>

landon11
11-07-2002, 03:50 PM
I have NT service pack 6 and IE 6 but when I try to open a file with the previously posted vml I get this error:

GDI + Window: explorer.exe - Application Error

The instruction at "0x0361bb30" referenced memory at "0x0361bb30". The memory could not be "read".

I cannot view it or open it in Visual Interdev. It also causes me to have to restore my Active Desktop.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum