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  2424 
TheCornjerker <ad****@gmail.c omwrote:
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_rounde d_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=f unction(){
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.c omwrote:
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 be
right. How are these corners made ?
Here is the part of the css for the footer
http://www.blogger.com/profile/12345910
/* Footer
|
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 that border is rounded
so when I set my panels border stile to none, the panel appear to have
the rounded border (that comes from the forms background image.
This looks really nice, but the problem is that my forms can not be
resizable then, since...
|
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 tricks for gridview because
I want to use the sorting.
|
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 not use the "standard" rounded corner method of sliced images for the corners (since that would only allow a certain color to match)
I tried using a corner-rounding js tool from http://openrico.org, but it failed miserably (in both IE and Opera)
...
|
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 bottom graphic, but all
I want to have in my DIV is a TreeView coontrol.
Can anyone send some code.
PWS
|
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 I wanted to make the corners
a bit rounded (otherwise it will look like an old legacy app). Is this
possible in wpf? The reason I wanted to use a polygon was because I will
bind an adorner to each point so the user can drag the corners around to...
|
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, people are often confused as to whether an ONU can Work As a Router. In this blog post, we’ll explore What is ONU, What Is Router, ONU & Router’s main usage, and What is the difference between ONU and Router. Let’s take a closer look !
Part I. Meaning of...
|
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 effortlessly switch the default language on Windows 10 without reinstalling. I'll walk you through it.
First, let's disable language synchronization. With a Microsoft account, language settings sync across devices. To prevent any complications,...
| | |
by: Hystou |
last post by:
Overview:
Windows 11 and 10 have less user interface control over operating system update behaviour than previous versions of Windows. In Windows 11 and 10, there is no way to turn off the Windows Update option using the Control Panel or Settings app; it automatically checks for updates and installs any it finds, whether you like it or not. For most users, this new feature is actually very convenient. If you want to control the update process,...
|
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 protocol has its own unique characteristics and advantages, but as a user who is planning to build a smart home system, I am a bit confused by the choice of these technologies. I'm particularly interested in Zigbee because I've heard it does some...
|
by: isladogs |
last post by:
The next Access Europe User Group meeting will be on Wednesday 1 May 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM).
In this session, we are pleased to welcome a new presenter, Adolph Dupré who will be discussing some powerful techniques for using class modules.
He will explain when you may want to use classes instead of User Defined Types (UDT). For example, to manage the data in unbound forms.
Adolph will...
|
by: conductexam |
last post by:
I have .net C# application in which I am extracting data from word file and save it in database particularly. To store word all data as it is I am converting the whole word file firstly in HTML and then checking html paragraph one by one.
At the time of converting from word file to html my equations which are in the word document file was convert into image.
Globals.ThisAddIn.Application.ActiveDocument.Select();...
|
by: TSSRALBI |
last post by:
Hello
I'm a network technician in training and I need your help.
I am currently learning how to create and manage the different types of VPNs and I have a question about LAN-to-LAN VPNs.
The last exercise I practiced was to create a LAN-to-LAN VPN between two Pfsense firewalls, by using IPSEC protocols.
I succeeded, with both firewalls in the same network. But I'm wondering if it's possible to do the same thing, with 2 Pfsense firewalls...
|
by: muto222 |
last post by:
How can i add a mobile payment intergratation into php mysql website.
| | |
by: bsmnconsultancy |
last post by:
In today's digital era, a well-designed website is crucial for businesses looking to succeed. Whether you're a small business owner or a large corporation in Toronto, having a strong online presence can significantly impact your brand's success. BSMN Consultancy, a leader in Website Development in Toronto offers valuable insights into creating effective websites that not only look great but also perform exceptionally well. In this comprehensive...
| |
