CSS Flexible Round Corners in html element

I am a Freeway 4 pro user. I downloaded and dug into
the the CSS example by thebigerns “CSS Indestructible BWD flexible round corners” located at:

http://www.thebigerns.com/freeway/BWD_indestructible-boxes/

I am unclear how the TOP RIGHT style is applied to the content and/or CSS item. Not sure how or where it is controlled in the freeway document.

Can anyone please give me a little guidance as to how the 4 border elements are applied in freeway?

Does anyone know where there a similar tutorial online on this border subject?

Also any special guidelines for creating the border gifs would be helpful as well.

Thanks again,

Anthony Leyrer
Orlando, FL
email@hidden


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

The class style “.container” is applied to the elements which specify the graphic position as top right. Is that what you mean?

Todd

On Mar 7, 2008, at 9:45 AM, Anthony Leyrer wrote:

I am unclear how the TOP RIGHT style is applied to the content and/or CSS item. Not sure how or where it is controlled in the freeway document.

Todd,
Yes I think so, but how does this work

In the file I downloaded there is no style applied to the
container html item. toprow, item1, item 2a and bottomrow do show styles applied for the 3 other border sides when I select the items and content.

I’m still confused as to How and where is the style TOPRIGHT border applied?

Thanks for your help.

Anthony


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

If we’re talking about the same thing (I hope we are) then select the “container” style and click the Extended button and you’ll see the background-position attribute in the window that opens. All this does is tell the browser to place this image in the upper-right corner of the box.

Let me know if that helps.

Todd

On Mar 7, 2008, at 12:23 PM, Anthony Leyrer wrote:

Yes I think so, but how does this work

In the file I downloaded there is no style applied to the

container html item. toprow, item1, item 2a and bottomrow do show styles applied for the 3 other border sides when I select the items and content.

I’m still confused as to How and where is the style TOPRIGHT border applied?

Let me explain this another way for anyone else who may be interested.

A large rounded box graphic was created in PS and essentially split into 4 sections to create this effect; 1 large piece that fits in the top-left and 3 smaller corner pieces for the top-right, bottom-left and bottom-right corners.

The “.desc” style contains the large top-left piece which serves as the main graphic for the entire box.
The “.link” style (applied to text) contains the bottom-left corner piece.
The “.link em” style contains the bottom-right corner piece.
The “.container” style (applied to the actual boxes themselves) contains the top-right corner piece.

The small corner pieces lay on top of the larger graphic (the .desc style) applied to the elements (boxes). As the box grows the corners simply “slide” over the larger one creating the illusion of a stretching box.

Todd

On Mar 7, 2008, at 12:23 PM, Anthony Leyrer wrote:

Yes I think so, but how does this work

In the file I downloaded there is no style applied to the

container html item. toprow, item1, item 2a and bottomrow do show styles applied for the 3 other border sides when I select the items and content.

I’m still confused as to How and where is the style TOPRIGHT border applied?

I assume we have the same copy of the example FW file otherwise this
could be confusing.

Todd


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Todd,

I am reviewing the example found on the bigerns site here

www.thebigerns.com/freeway/BWD_indestructible-boxes/

Is this what you are also looking at?

The container has nothing styled nor extended div applied to it as far as I can see.

None of the other html items highlight top right either.

My apologies for my lack of understanding. I grasped the photoshop construction and how it assembles. I just don’t see how top right is connected to the html item.

Thank you again for your help


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

If I could chime in here briefly :slight_smile:

It seems Anthony that you are looking for some point-and-click application of a style. What you may be overlooking is that CSS styles can apply to HTML structures without being “applied” in a classic sense.

Freeway lets us create CSS styles and selectively apply them with a few mouse clicks. But CSS styles can also tell browsers which html structures they apply to by the way they are named. Because this method lies outside of the Freeway way of doing things, it may not be obvious without some study of CSS.

In that ancient example, you see styles like “btmright a” and “topleft em”. These are styles that are applied by the browser and not by Freeway. The browser looks for anchor tags (a) in objects that I’ve applied the “btmright” style to with Freeway, and for emphasis tags (em) in items that are styled “topleft” in Freeway. This is a CSS method for adding styles when certain conditions are met. Because I defined those styles in Freeway in the tag field of the style editor, Freeway is forced to publish those styles even though they are not applied. When the browser gets whiff of them, it completes the task and applies them when those conditions are met - ems in .topleft and anchors in .btmright.

You may want to look further into CSS and Selector types to learn how you may target specific html structures. Most Freeway styles are added as class selectors to items you target with a mouse, but you can also target specific tags and elements of your resulting html code by using style naming conventions.

On Fri, Mar 7, 2008 at 4:35 PM, Anthony Leyrer wrote:

Todd,

I am reviewing the example found on the bigerns site here

www.thebigerns.com/freeway/BWD_indestructible-boxes/

Is this what you are also looking at?

The container has nothing styled nor extended div applied to it as far as I can see.

None of the other html items highlight top right either.

My apologies for my lack of understanding. I grasped the photoshop construction and how it assembles. I just don’t see how top right is connected to the html item.

Thank you again for your help


Ernie Simpson – Freeway 4 Pro User – http://www.thebigerns.com/freeway/

On 10 Mar. 2008, 7:21 pm, The Big Erns wrote:

If I could chime in here briefly :slight_smile:

:open_mouth:

Hey look who it is! Nice to see you around, Ernie!


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Yes, I’ve noticed it also. Very happy to see Ernie is back.
Iwo

Am 10.03.2008 um 20:28 schrieb Joe Muscara:

On 10 Mar. 2008, 7:21 pm, The Big Erns wrote:

If I could chime in here briefly :slight_smile:

:open_mouth:

Hey look who it is! Nice to see you around, Ernie!


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Da man is back in town! :slight_smile:

k


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options