I've been looking into what method I should use to show rounded corners
(and I've found a lot). My question is why does Google seems to mostly
use the table method with an image in each corner. Granted they do use
a transparent gif so they don't need multiple colored gifs, but I
thought most developers shun the table rounded corner method.
Any thoughts why? Is it easier to maintain or have a higher browser
support?
Thanks.
8  2399 
TheCornjerker <ad****@gmail.comwrote:
I've been looking into what method I should use to show rounded corners
(and I've found a lot).
i answer by a question, could you, please, give the web pages where you
get tuto on rounded corners ?
here are mines :
Nifty Corners :
<http://webdesign.html.it/articoli/leggi/528/more-nifty-corners/1/>
Transparent custom corners and borders :
< http://www.456bereastreet.com/archiv...custom_corners
_and_borders/>
Scalable rounded edges :
<http://acjs.net/weblog/2004/11/23/scalable_rounded_edges/>
what kind of you plan tu use ?
i think the nifty seems to be the easiest to implement, example 1 :
<http://html.it/articoli/esempi/articoli_pro/nifty2/nifty1js.html>
i plan to use this solution if it works with three levels of nifty
corners embricated.
I like niftycube as well, but it seems to break down with 100% height
divs. See below in IE 6.0.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<style>
html, body {
margin:0;
padding:0px 0px 10px 0px;
overflow:hidden;
height:100%;
}
body {
background-color:#fff;
display:block;
}
div#main {
display:block;
margin:50px 0px 0px 0px;
}
div#nav {
display:block;
float:left;
margin:0px 10px 0px 10px;
width:200px;
background-color:#99ccff;
height:100%;
}
</style>
<script type="text/javascript" src="niftycube.js"></script>
<script type="text/javascript">
window.onload=function(){
Nifty("div#nav","big");
}
</script>
</head>
<body>
<div id=main>
<div id=nav>
<table>
<tr>
<td>Line 1</td>
</tr>
<tr>
<td>Line 2</td>
</tr>
</table>
</div>
</div>
</body>
</html>
TheCornjerker wrote:
I've been looking into what method I should use to show rounded corners
(and I've found a lot). My question is why does Google seems to mostly
use the table method with an image in each corner. Granted they do use
a transparent gif so they don't need multiple colored gifs, but I
thought most developers shun the table rounded corner method.
One method I used several years ago is at http://www.cwdjr.net/geometric/cornertest.html . It uses only CSS and
no script. One makes use of the z-index so you can use a single whole
circle for each corner rather than having to slice and dice circles to
make four different corner images. It does not use tables, but it does
use absolute positioning which may not be convenient for some. Yes,
many methods have been used. Use the one you find most easy to use so
long as it validates and does not increase the byte size of the page
too much for a large page that is beginning to become slow loading.
TheCornjerker wrote:
I've been looking into what method I should use to show rounded corners
(and I've found a lot). My question is why does Google seems to mostly
use the table method with an image in each corner. Granted they do use
a transparent gif so they don't need multiple colored gifs, but I
thought most developers shun the table rounded corner method.
Any thoughts why? Is it easier to maintain or have a higher browser
support?
Thanks.
HTML, by design, has always been weak in layout. Trivial feats of alignment are
virtually impossible. The only alignment tool with any power is the <table>.
Tables were heavily abused and misused, the misuse encouraged by imaging slicing
tools such as Dreamweaver. Tables were used to create presentations which were
in no way tabular, which does seem wrong.
The pendulum of fashion has now swung the other way, shunning tables for
alternate forms which are often worse, such as deeply nested divs coupled with
overly complex styles.
The fundamental problem is that HTML lacks the ability to compose new structures
while CSS is unable to present the most basic layouts and stylings. The amount
of work required to make rounded corners is vastly out of proportion with the
value of their visual impact.
It seems that someone at Google decided that the easiest route was to use a
table with images in the corners. It is out of fashion, but it is strictly not
worse than the alternatives.
TheCornjerker <ad****@gmail.comwrote:
I like niftycube as well, but it seems to break down with 100% height
divs. See below in IE 6.0.
thanks for that point because i don't have a way to verify (i'm running
a Mac OS X box)
Douglas Crockford wrote:
The fundamental problem is that HTML lacks the ability to compose new structures
while CSS is unable to present the most basic layouts and stylings. The amount
of work required to make rounded corners is vastly out of proportion with the
value of their visual impact.
Agreed, the work is definitely out of proportion.
That said, I sure with browsers all had IE behaviors. As someone who
came from a Netscape background and was dragged kicking and screaming
into IE, I have to admit that javascript-based behaviors are very handy
for extending HTML/CSS.
For example, I created a behavior class for rounding, based on Nifty
Corners. (This code has been lost in a disk crash, unforunately, so
please don't ask :-) It was nice, because combined with other classes,
it made things quite easy and readable. For example, something like
this could be written:
<div class="blue rounded top"></div>
I've searched, but can't find anything equivalent to behaviors in other
browsers. Is there?
Thanks! Kev
cwdjrxyz wrote:
TheCornjerker wrote:
I've been looking into what method I should use to show rounded corners
(and I've found a lot). My question is why does Google seems to mostly
use the table method with an image in each corner. Granted they do use
a transparent gif so they don't need multiple colored gifs, but I
thought most developers shun the table rounded corner method.
One method I used several years ago is at
http://www.cwdjr.net/geometric/cornertest.html . It uses only CSS and
no script. One makes use of the z-index so you can use a single whole
circle for each corner rather than having to slice and dice circles to
make four different corner images. It does not use tables, but it does
use absolute positioning which may not be convenient for some. Yes,
many methods have been used. Use the one you find most easy to use so
long as it validates and does not increase the byte size of the page
too much for a large page that is beginning to become slow loading.
I updated this page to a form using javascript. The first script allows
you to select where on the page the text box is displayed, the radius
of the rounded corners, etc. You can also select to center the text box
with respect to screen width or height. In case of height, centering is
in respect to full screen display. There is no telling how many tool
bars a browser may be set to display in other than full screen mode.
Play around with these values to see what can be done. A second,
longer script does the dirty work. It remains the same, so it could be
used as an external script to avoid clutter.
I think I also can do this without an image. I might try that sometime
when I have more time.
By the way, the circle gif color need not be the same as the background
color for the text box. In that case you get fancy corners of another
color.
cwdjrxyz wrote:
cwdjrxyz wrote:
TheCornjerker wrote:
I've been looking into what method I should use to show rounded corners
(and I've found a lot). My question is why does Google seems to mostly
use the table method with an image in each corner. Granted they do use
a transparent gif so they don't need multiple colored gifs, but I
thought most developers shun the table rounded corner method.
One method I used several years ago is at
http://www.cwdjr.net/geometric/cornertest.html . It uses only CSS and
no script. One makes use of the z-index so you can use a single whole
circle for each corner rather than having to slice and dice circles to
make four different corner images. It does not use tables, but it does
use absolute positioning which may not be convenient for some. Yes,
many methods have been used. Use the one you find most easy to use so
long as it validates and does not increase the byte size of the page
too much for a large page that is beginning to become slow loading.
I updated this page to a form using javascript. The first script allows
you to select where on the page the text box is displayed, the radius
of the rounded corners, etc. You can also select to center the text box
with respect to screen width or height. In case of height, centering is
in respect to full screen display. There is no telling how many tool
bars a browser may be set to display in other than full screen mode.
Play around with these values to see what can be done. A second,
longer script does the dirty work. It remains the same, so it could be
used as an external script to avoid clutter.
I think I also can do this without an image. I might try that sometime
when I have more time.
By the way, the circle gif color need not be the same as the background
color for the text box. In that case you get fancy corners of another
color.
A URL for the scripted page might help! http://www.cwdjr.net/geometric/cornersnew.html . This thread has been closed and replies have been disabled. Please start a new discussion. Similar topics
by: Mel |
last post by:
how can i have a rounded edge button in my forms using CSS ?
thanks
Mel
|
by: meltedown |
last post by:
I noticed that the footer menu on the bottom with rounded corners only
uses one image of a rounded corner:img/round15_bot.gif
This one image seems to be used for all four corners, but that can't...
|
by: Konrad |
last post by:
Hi
This is maybe simple question but
how to render DataGrid and Tables
with rounded corners?
Thanks
Konrad
|
by: Dino Buljubasic |
last post by:
Hi,
I have several panels that holds bunch of controls with information on
my forms. My form has background image property set to an image that
has borders defining where my panel comes and...
|
by: Schraalhans Keukenmeester |
last post by:
I want to achieve the following:
A small image in each of the corners of a box, like below:
+-------------------------------+
| +
| +
| +
| +
| +
| +
|
by: Cindy Lee |
last post by:
Is there anyway to put rounded corners on the grid views? When I bring it
up in the brower I need to have rounded corners. There are some tricks I
can do to regular html tables, but is there any...
|
by: kidelectric |
last post by:
The issue I am having is that I would like to be able to drag-and-drop div elements that have rounded corners.* Since these elements will be dynamically created (including background color), I could...
|
by: PWS |
last post by:
I am despertely trying get a DIV to look like a box with rounded
corners.
I can find load of examples this where the first line of text has the
top graphic and the last line of text has the...
|
by: moondaddy |
last post by:
I need to be able to make polygons with rounded corners. This will be to
draw group outlines around shapes in a diagramming tool in wpf. all angles
in the polygon will be 90 degrees, but somehow...
|
by: Charles Arthur |
last post by:
How do i turn on java script on a villaon, callus and itel keypad mobile phone
|
by: ryjfgjl |
last post by:
In our work, we often receive Excel tables with data in the same format. If we want to analyze these data, it can be difficult to analyze them because the data is spread across multiple Excel files...
|
by: nemocccc |
last post by:
hello, everyone, I want to develop a software for my android phone for daily needs, any suggestions?
|
by: marktang |
last post by:
ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However,...
|
by: Hystou |
last post by:
Most computers default to English, but sometimes we require a different language, especially when relocating. Forgot to request a specific language before your computer shipped? No problem! You can...
|
by: Oralloy |
last post by:
Hello folks,
I am unable to find appropriate documentation on the type promotion of bit-fields when using the generalised comparison operator "<=>".
The problem is that using the GNU compilers,...
|
by: jinu1996 |
last post by:
In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven...
|
by: tracyyun |
last post by:
Dear forum friends,
With the development of smart home technology, a variety of wireless communication protocols have appeared on the market, such as Zigbee, Z-Wave, Wi-Fi, Bluetooth, etc. Each...
|
by: agi2029 |
last post by:
Let's talk about the concept of autonomous AI software engineers and no-code agents. These AIs are designed to manage the entire lifecycle of a software development project—planning, coding, testing,...
| |
