Page 1 of 1

Issues with CSS Rounded Corners

Posted: Sun Aug 10, 2008 3:11 pm
by LiveFree
Hello,

I've been following the tutorial at: http://www.webcredible.co.uk/user-frien ... ders.shtml On how to create a border with curved corners. I followed the 'final product' code exactly, but instead of getting the example they provided as 'what it should look like', I instead get the 2nd example (in the tutorial, the 2nd example is the one that shows both the corners and the straight sections not smoothly connected).

My code looks just like theirs:

Code: Select all

 
<div class="t">
    <div class="b">
    <div class="l">
    <div class="r">
    <div class="bl">
    <div class="br">
    <div class="tl">
    <div class="tr">
        COOL BEANS!
    </div>
    </div>
    </div>
    </div>
    </div>
    </div>
    </div>
    </div>
 
And my css

Code: Select all

.t {background: url(dot.gif) 0 0 repeat-x; width: 20em}
.b {background: url(dot.gif) 0 100% repeat-x}
.l {background: url(dot.gif) 0 0 repeat-y}
.r {background: url(dot.gif) 100% 0 repeat-y}
.bl {background: url(bl.gif) 0 100% no-repeat}
.br {background: url(br.gif) 100% 100% no-repeat}
.tl {background: url(tl.gif) 0 0 no-repeat}
.tr {background: url(tr.gif) 100% 0 no-repeat; padding:10px} 
 
Any someone has experience with creating curved corners, any and all help would be greatly appreciated.

Thank you

Re: Issues with CSS Rounded Corners

Posted: Sun Aug 10, 2008 3:26 pm
by onion2k
I realise this doesn't answer your question ... but 8 nested divs just for a graphical effect? That's horrible. I would give up on having rounded corners rather than use that.

Re: Issues with CSS Rounded Corners

Posted: Sun Aug 10, 2008 4:15 pm
by jayshields

Code: Select all

.t {background: url(dot.gif) 0 0 repeat-x; width: 20em; border: 0}
.b {background: url(dot.gif) 0 100% repeat-x}
.l {background: url(dot.gif) 0 0 repeat-y}
.r {background: url(dot.gif) 100% 0 repeat-y}
.bl {background: url(bl.gif) 0 100% no-repeat}
.br {background: url(br.gif) 100% 100% no-repeat}
.tl {background: url(tl.gif) 0 0 no-repeat}
.tr {background: url(tr.gif) 100% 0 no-repeat; padding:10px}
Maybe.

Re: Issues with CSS Rounded Corners

Posted: Mon Aug 11, 2008 2:49 am
by matthijs
Rounded corners should not be that difficult.

First thing: is the box fixed-width, fixed-height, flex-width, flex-height?
Depending on the answer you need one or more elements to put your images on. Fixed-width and fixed-height is the simplest: you only need one element and image and one css code line. Fully flexible box would need at most 4 elements.

Second: what elements are there already? Most often, you already have 2 in place. The the element for the box (probably a div) and something in it (a p, a h2?). First use those elements to put the background images behind.

Third: is the rounded box not complete? Only then start thinking about adding another element.

Re: Issues with CSS Rounded Corners

Posted: Mon Aug 11, 2008 4:31 am
by idevlin

Re: Issues with CSS Rounded Corners

Posted: Mon Aug 11, 2008 4:48 pm
by kaszu
To achieve same effect as described in first tutorial (except using only 1 sprite image) i use:

Code: Select all

<div class="somebox"><span class="lt"><!-- --></span><span class="rt"><!-- --></span>
  CONTENT HERE...
<span class="lb"><!-- --></span><span class="rb"><!-- --></div>
and CSS

Code: Select all

.somebox {
    display: relative; /* Without position relatively spans won't be at the corners of the box */
    border: 1px solid COLOR_HERE;
}
.somebox .lt, .somebox .rt, .somebox .lb, .somebox .rb {
    background: url(...image file with all 4 corner sprites inside...) left top no-repeat;  /* Background image */
    position: absolute; /* We position all corners absolute, so that they go to the corners */
    display: block; /* If you will use divs, not needed ofcourse */
    width: ...px; /* Width of the sprite image */
    height: ...px; /* Height of the sprite image */
}
/* Position all elements and their backgrounds */
.somebox .rt { left: -1px; top: -1px; } /* -1 because we have border */
.somebox .rt { background-position: right top; right: -1px; top: -1px; }
.somebox .rb { background-position: right bottom; right: -1px; bottom: -1px; }
.somebox .lb { background-position: left bottom; left: -1px; bottom: -1px; }
}
Maybe there was something specific for IE too, don't remember and unfortunately can't check at the moment.
Note: this of course doesn't work with semi transparent gifs and transparent PNGs

management

Posted: Thu Aug 14, 2008 3:28 pm
by lailaigogo
Verizon or AT&T. Instead of reflexion the accommodation doomed scheme, Blizzard erizon/AT&T and Minute Filmmaker Lineage2 adena to get their raw guys (the ones who actually do the creation and not this schmo who has a even in management at refined) and get their routers to graduation conversation to themselves the most underspent way realistic.