How do they do it? (Rounded corners, that is.)

J

Jeff Bowman

Andy said:
In the code we see this:
<span class="corner-bottom"><span class="corner-left"></span></span>

In the CSS (I've not looked) there will be background-image rules to
show a single corner image in each of these spans.
Click to expand...

Hi Andy, thanks for your reply.

As the markup below shows, I've included the <span> tags, but with still no
satisfactory results.

Are you able to tell why theirs is working and mine isn't?

http://groups.yahoo.com/

Thanks.


-------------------------------------------------------------------------------

<html>
<head>
<title>Rounded Corners</title>
<style>
/* Container with Rounded Corner Border */
.ygrp-container-border {
border:1px solid #7b9ebd;
width:auto;
margin:0 0 5px 0;
padding:0;
}

#ygrp-home .corner-top {
background-image:url(http://us.i1.yimg.com/us.yimg.com/i/yg/img/ui/cr_y_gry_ne.gif);
}

#ygrp-home .corner-top .corner-left {
background-image:url(http://us.i1.yimg.com/us.yimg.com/i/yg/img/ui/cr_y_gry_nw.gif);
}

#ygrp-home .corner-bottom {
background-image:url(http://us.i1.yimg.com/us.yimg.com/i/yg/img/ui/cr_y_gry_se.gif);
}

#ygrp-home .corner-bottom .corner-left {
background-image:url(http://us.i1.yimg.com/us.yimg.com/i/yg/img/ui/cr_y_gry_sw.gif);
}
</style>
</head>
<body>
<div class="ygrp-container-border" id="ygrp-home">
<span class="corner-top"><span class="corner-left"></span></span>
Rounded Corners?
<span class="corner-bottom"><span class="corner-left"></span></span>
</div>
</body>
</html>
 
J

Jeff Bowman

Dirk said:
only for mozilla browsers, but another good solution:
look at the css of the site http://erweiterungen.de/
Click to expand...

Hi Dirk, the Mozilla-only aspect kills it for me, unfortunately.

Looking at the markup below, are you able to tell why theirs is working and mine
isn't?

http://groups.yahoo.com/

Thanks.


-------------------------------------------------------------------------------

<html>
<head>
<title>Rounded Corners</title>
<style>
/* Container with Rounded Corner Border */
.ygrp-container-border {
border:1px solid #7b9ebd;
width:auto;
margin:0 0 5px 0;
padding:0;
}

#ygrp-home .corner-top {
background-image:url(http://us.i1.yimg.com/us.yimg.com/i/yg/img/ui/cr_y_gry_ne.gif);
}

#ygrp-home .corner-top .corner-left {
background-image:url(http://us.i1.yimg.com/us.yimg.com/i/yg/img/ui/cr_y_gry_nw.gif);
}

#ygrp-home .corner-bottom {
background-image:url(http://us.i1.yimg.com/us.yimg.com/i/yg/img/ui/cr_y_gry_se.gif);
}

#ygrp-home .corner-bottom .corner-left {
background-image:url(http://us.i1.yimg.com/us.yimg.com/i/yg/img/ui/cr_y_gry_sw.gif);
}
</style>
</head>
<body>
<div class="ygrp-container-border" id="ygrp-home">
<span class="corner-top"><span class="corner-left"></span></span>
Rounded Corners?
<span class="corner-bottom"><span class="corner-left"></span></span>
</div>
</body>
</html>
 
J

Jeff Bowman

Jeff said:
I guess I must still be pretty new to CSS--for the life of me I can't figure
out how they managed get these corners to show as rounded:

http://groups.yahoo.com/

Can anyone spot it?

Thanks.
Click to expand...

OK, got it--it was the positioning.

I did what any good programmer should be able to do--I started with a working
model and eliminated elements until I found what I needed. That always works a
lot better than coming at it from the other side and trying to build it from
scratch :)

Here's the working result:


---------------------------------------------------------------------------

<html>
<head>
<title>Rounded Corners</title>
<style>
/* Container with Rounded Corner Border */
.container-border {
border:1px solid #7b9ebd;
width:400;
margin:10px;
padding:0;
border-color:#7b9ebd;
background-color:#fff;
}

/* START static corners*/
.corner-top, .corner-bottom, .corner-left
{
position:relative;
display:block;
line-height:0;
font-size:0;
height:3px;
margin:0;
}
.corner-top {
background:transparent url(cr_m_lblue_ne.gif) no-repeat top right;
width:auto;
top:-1px;
right:-1px;
}
.corner-top .corner-left {
background:transparent url(cr_m_lblue_nw.gif) no-repeat top left;
width:3px;
left:-2px;
}
.corner-bottom {
background:transparent url(cr_m_lblue_se.gif) no-repeat bottom right;
clear:both;
width:auto;
bottom:-1px;
right:-1px;
}
.corner-bottom .corner-left {
background:transparent url(cr_m_lblue_sw.gif) no-repeat bottom left;
width:3px;
left:-2px;
}
/* END static corners/containers */
</style>
</head>
<body>
<div class="container-border">
<span class="corner-top"><span class="corner-left"></span></span>
<div style="text-align:center;">Rounded Corners</div>
<span class="corner-bottom"><span class="corner-left"></span></span>
</div>
</body>
</html>
 
G

Greg Schmidt

Hi Andy, thanks for your reply.

As the markup below shows, I've included the <span> tags, but with still no
satisfactory results.

Are you able to tell why theirs is working and mine isn't?

http://groups.yahoo.com/

Thanks.
Click to expand...

I can't be bothered to paste your code into a page and try it, and all
you say about the problem is "no satisfactory results", so I can only
guess as to what the problem is. I'm quite sure that many other
regulars here feel the same. Much better to give us a URL that
demonstrates the problem.

Anyway, my guess is that the image you want in the top right is in the
top left, with the top left image immediately next to it, and something
similar for the bottom, because you haven't bothered to set any of the
positioning values.
 
N

n|ck

Jeff said:
See the Bottom Left section? This means I'll have to slice a special image for
each rounded-corner DIV I want on the site.
Click to expand...

Yes, that's how Yahoo does it (in a previous post, I gave you a link to an image
they used for the top-right corner).
 
J

Jeff Bowman

n|ck said:
Yes, that's how Yahoo does it (in a previous post, I gave you a link to an
image they used for the top-right corner).
Click to expand...

Actually--pardon my impudence here--it doesn't look like it. Through proper
methods of debugging (I'm a programmer, I should've done this from the start!) I
was able to narrow it down and figure out what makes it tick. It's the image
display and positioning, which I found in a different stylesheet.

Here's the solution, below.

Thanks for having a look.


---------------------------------------------------------------------------

<html>
<head>
<title>Rounded Corners</title>
<style>
/* Container with Rounded Corner Border */
.container-border {
border:1px solid #7b9ebd;
width:400;
margin:10px;
padding:0;
border-color:#7b9ebd;
background-color:#fff;
}

/* START static corners*/
.corner-top, .corner-bottom, .corner-left
{
position:relative;
display:block;
line-height:0;
font-size:0;
height:3px;
margin:0;
}
.corner-top {
background:transparent url(cr_m_lblue_ne.gif) no-repeat top right;
width:auto;
top:-1px;
right:-1px;
}
.corner-top .corner-left {
background:transparent url(cr_m_lblue_nw.gif) no-repeat top left;
width:3px;
left:-2px;
}
.corner-bottom {
background:transparent url(cr_m_lblue_se.gif) no-repeat bottom right;
clear:both;
width:auto;
bottom:-1px;
right:-1px;
}
.corner-bottom .corner-left {
background:transparent url(cr_m_lblue_sw.gif) no-repeat bottom left;
width:3px;
left:-2px;
}
/* END static corners/containers */
</style>
</head>
<body>
<div class="container-border">
<span class="corner-top"><span class="corner-left"></span></span>
<div style="text-align:center;">Rounded Corners</div>
<span class="corner-bottom"><span class="corner-left"></span></span>
</div>
</body>
</html>
 
J

Jeff Bowman

Greg said:
I can't be bothered to paste your code into a page and try it, and all
you say about the problem is "no satisfactory results", so I can only
guess as to what the problem is. I'm quite sure that many other
regulars here feel the same. Much better to give us a URL that
demonstrates the problem.
Click to expand...

Pardon the lack of detail. I'll keep this in mind for the future.


you haven't bothered to set any of the
positioning values.
Click to expand...

Bingo! Earlier this afternoon I got my head screwed on straight and used proper
debugging techniques (start with a clean slate and work up, not the other way
'round) and I figured it out. Once I got on the right track it didn't take me
long to find the display and positioning (properties? correct nomenclature?) in
a different stylesheet.

Here's the working markup, below.

Thanks for having a look.


---------------------------------------------------------------------------

<html>
<head>
<title>Rounded Corners</title>
<style>
/* Container with Rounded Corner Border */
.container-border {
border:1px solid #7b9ebd;
width:400;
margin:10px;
padding:0;
border-color:#7b9ebd;
background-color:#fff;
}

/* START static corners*/
.corner-top, .corner-bottom, .corner-left
{
position:relative;
display:block;
line-height:0;
font-size:0;
height:3px;
margin:0;
}
.corner-top {
background:transparent url(cr_m_lblue_ne.gif) no-repeat top right;
width:auto;
top:-1px;
right:-1px;
}
.corner-top .corner-left {
background:transparent url(cr_m_lblue_nw.gif) no-repeat top left;
width:3px;
left:-2px;
}
.corner-bottom {
background:transparent url(cr_m_lblue_se.gif) no-repeat bottom right;
clear:both;
width:auto;
bottom:-1px;
right:-1px;
}
.corner-bottom .corner-left {
background:transparent url(cr_m_lblue_sw.gif) no-repeat bottom left;
width:3px;
left:-2px;
}
/* END static corners/containers */
</style>
</head>
<body>
<div class="container-border">
<span class="corner-top"><span class="corner-left"></span></span>
<div style="text-align:center;">Rounded Corners</div>
<span class="corner-bottom"><span class="corner-left"></span></span>
</div>
</body>
</html>
 
N

n|ck

Jeff said:
n|ck wrote:



Actually--pardon my impudence here--it doesn't look like it. Through proper
methods of debugging (I'm a programmer, I should've done this from the start!) I
was able to narrow it down and figure out what makes it tick. It's the image
display and positioning, which I found in a different stylesheet.
Click to expand...

Yes, but they're still image slices and they're still displayed as background
images (answering your question two posts ago).
 
J

Jeff Bowman

n|ck said:
Yes, but they're still image slices and they're still displayed as background
images (answering your question two posts ago).
Click to expand...

Oh, now I see what's happened--a misunderstanding, probably my fault for not
explaining in detail. Pardon.

When I rejected the tip for which you sent a link--no offense please--it was
because the DIV's width is constrained by the width of the bottom-left image,
not because it uses background images.

What I meant was with that particular technique, a custom image has to be made
for /every single instance/ of the rounded-corner DIV, and not simply four
corner images that can be reused anywhere on the site. When I saw that "It
therefore needs to be as wide as you expect your given 'article' to be," red
flags went up all over the place. That one sentence was all it took.

Being a programmer, I'm always all about reuse of code. I live and breathe it
:)

Thanks.
 
H

humbads

Jeff said:
I guess I must still be pretty new to CSS--for the life of me I can't figure
out how they managed get these corners to show as rounded:
Click to expand...
http://groups.yahoo.com/>
Can anyone spot it?
Click to expand...

I don't understand why you make it so complicated. If you're going to
use CSS, just use the moz-border-radius property and have it only work
for mozilla browsers. You can experiement with it here:

HTML and CSS Table Border Style Wizard
http://www.somacon.com/p141.php

Or, if you want to do the old-school hack, just make a table and fix
the heights and widths and set the background images of the border
cells. Something like this:

<table>
<tr><td height="4" width="4" background="top_left_4x4.gif"></td><td ...
<tr><td width="4" background="vertical_bar_4x1.gif"><td ...
<tr><td height="4" width="4" background="bottom_left_4x4.gif"></td><td
....
</table>
 
J

Jeff Bowman

humbads said:
I don't understand why you make it so complicated.
Click to expand...

I'm trying to learn how to do table-less layout. It's a longer road than I'd
anticipated, but I'm not complaining.


If you're going to
use CSS, just use the moz-border-radius property and have it only work
for mozilla browsers.
Click to expand...

IE users are my biggest audience, and I don't want to leave them out.


HTML and CSS Table Border Style Wizard
http://www.somacon.com/p141.php
Click to expand...

Say, that's pretty slick! I'll add it to my Tips & Tricks collection.


Thanks.
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Similar Threads

How do I open PLINK with R studio 0
Rounded Corners: FireFox vs. IE 5
help reg rounded corners 1
Newbee. The best way to have rounded corners in CSS 3
rounded corners without images 13
CSS and rounded corners 2
DIV with rounded Corners (CSS) AND full height 2
A website that I couldn't make a screenshot of it nor save any page from. 1

Members online

Total: 38 (members: 2, guests: 36)
Robots: 454

Forum statistics

Threads
473,770
Messages
2,569,584
Members
45,075
Latest member
MakersCBDBloodSupport

Latest Threads

Top