Re: [css-d] Sliding Faux Columns with Rounded Corners (one last question...)
Hello all, I guess there is no super solution to use sliding faux columns and rounded corners at same time but here is my documented Advantages and Disadvantage's of each method I tried (with a Question about method 3 so I'll mention that one 1st)... Ran into an issue for a fixed layout I made (link to it is provided in paragraph after this one)... The clearing div in IE doesn't seem to be working. The background-images for #body2 and #body1, are instead being 'pushed over' into the right #sidebar area. The clearing div is in proper place I think, so not sure why #body2 doesnt seem to think it is containing the floats within it. Method3: Uses a Fixed Layout to achieve a compromise... 'Non-Sliding' Faux Columns with Rounded Corners A. Advantage: Transparent Corners so background can be a gradient B. Advantage: Doesn't add that extra padding to the right side, so in my case i can use that extra space to make my bottom borders on the sidebar navigation extend all the way to the right. C. Disadvantage: Is a fixed width so does not scale to user selected font-size Example: http://arihoj.freehostia.com/rsfc/rsfc_fixed.html Method1: Uses padding to place background images A. Advantage: Uses padding to push the images in a way that they can bleed-though (transparent, so can have gradient background behind them), B. Advantage: Is sliding so faux columns adapt to user adaptable width (for example by making browser font-size bigger) C. Disadvantage: but may not want that extra padding space on the sides of the content areas Example: http://arihoj.freehostia.com/rsfc/rsfc.html http://arihoj.freehostia.com/rsfc/rsfc.html Method2: Negative margins used to place background images A. Advantage: No padding on the sides like previous example, notice how the bottom borders on #sidebar extend all the way to the right B. Advantage: Is sliding so faux columns adapt to user adaptable width (for example by making browser font-size bigger) C. Disadvantage: The corner images cannot be transparent/[no gradient background can be used]) as you can see they need to be replaced with images with corners whose transparent area is replaced with the background color on the page behind it. Example: http://arihoj.freehostia.com/rsfc/rsfc_negMargins.html Anyway hope someone found the examples I made useful, Didnt see too many examples on the web for making Sliding Faux Columns with Rounded Corners Arian __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Sliding Faux Columns with Rounded Corners
Arian Hojat wrote:
Hey Franky,
yeh i was looking at my favorate liquid corner tutorial that i had saved on
my computer long time ago, and lone behold it is the website you sent.
The 2nd link i posted in my 1st email is based on that kinda with the
negative margins... but I cannot add margins like that tutorial suggests to
let the rounded corners bleed through because the layout kinda breaks.
For example add, margin:0px 21px; to
#containerTop1 and #containerBottom1 on
http://arihoj.freehostia.com/rsfc/rsfc_negMargins.html
notice it bleeds through, but the background-image moved so you have to
adjust #body1
Then try to make #body1, match that with margin:0px 21px;. and it doesnt
work out.
On 9/20/06, Arian Hojat [EMAIL PROTECTED] wrote:
Hey franky,
When you say I guess all problems will melt if you make two distinct
corners constructions: 1 for the left box, 1 for the right box..
If i do that though, I lose the faux columns. So I have to set that
repeating middle image on the parent of those 2 left/right floats or it wont
know how far to repeat it.
Sorry your website is being blocked at my work :), i guess cause it has
the word 'home.' in it. I will check out later or ask them to unblock it. I
have a feeling it is a rounded corner method, but doesnt take into account
making Faux Columns.
Arian
Hi Arian,
Yes, now I see what you mean: I didn't see it before, while in IE the
faux-column middle.gif doesn't appear in the right position, and in FF
this image doesn't appear at all.
So you want the content and the sidebar equal height. Then my solution
to separate these containers and give them each their own corners ...
cannor work indeed.
The {margin: 0 21px;} is the right basic operation, and I found with
some margin playing left and right in rest of the corner-div's and
content-div's it can be done. Position Is Everything! Working model in
FF and Opera is ready. :-)
But nothing to show yet: now searching for solutions to get the IE bugs
sleeping... ;-)
but in this time zone I've to dream about beautiful corners first
(and then a working day).
So keep hoping: to be continued!
francky
PS: Can you get the home sites already? If not, I can post my
testpage-link to the list, and send you the page and css in an off-list
mail with attachment.
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Sliding Faux Columns with Rounded Corners
Method3: Uses a Fixed Layout to achieve a compromise... 'Non-Sliding' Faux Columns with Rounded Corners A. Advantage: Transparent Corners so background can be a gradient B. Advantage: Doesn't add that extra padding to the right side, so in my case i can use that extra space to make my bottom borders on the sidebar navigation extend all the way to the right. C. Disadvantage: Is a fixed width so does not scale to user selected font-size Example: http://arihoj.freehostia.com/rsfc/rsfc_fixed.html Method1: Uses padding to place background images A. Advantage: Uses padding to push the images in a way that they can bleed-though (transparent, so can have gradient background behind them), B. Advantage: Is sliding so faux columns adapt to user adaptable width (for example by making browser font-size bigger) C. Disadvantage: but may not want that extra padding space on the sides of the content areas Example: http://arihoj.freehostia.com/rsfc/rsfc.html http://arihoj.freehostia.com/rsfc/rsfc.html Method2: Negative margins used to place background images A. Advantage: No padding on the sides like previous example, notice how the bottom borders on #sidebar extend all the way to the right B. Advantage: Is sliding so faux columns adapt to user adaptable width (for example by making browser font-size bigger) C. Disadvantage: The corner images cannot be transparent/[no gradient background can be used]) as you can see they need to be replaced with images with corners whose transparent area is replaced with the background color on the page behind it. Example: http://arihoj.freehostia.com/rsfc/rsfc_negMargins.html Hey franky, Dont worry about sending the website, I can and have already viewed it many times at home and have the files saved on my desktop. I am already very familiar with that negative margins method used for corners (that exact website you sent is the way I actually do rounded corners on normal sites)... Doing clean-looking rounded corners with faux columns is pretty tricky as I am sure you can see now. I was just curious when I posted this thread if there was a way to do it without the extra padding on sides in Method1. Although I probably will still use Method 1 or 2, as that padding in Method1 isnt totally annoying if you set px margins instead of em margins for the middle content area's gutter and dont use borders like i use on the right sidebar (plus having the rounded corners smaller than 21px should make this padding less noticable); For some reason if need to get rid of that padding for a cleaner look (for example so the bottom borders on the sidebar look like http://labs.adobe.com/technologies/flash9as3preview/), I can use Method2 as long as I dont set a gradient background. The fixed width method 'Method3' I posted is another compromise but it doesnt 'slide' to %widths like the other 2 methods. This is my main issue now, as I am just curious why its messing up as the code changed very little from Method2; and in that method the floats cleared properly and worked in IE. I might try it for a few days and see if I can get that fixed Method#3 working in IE. If not, I guess ill can always repost a new thread about a float clearing problem to the list since I think i've explored the Sliding Faux Column thing all I can and it seems like cant get past those small disadvantages for the other Methods. if I mention the word 'method' one more time in this post, i think i am going to blow a fuse lol, Good night, Arian Hojat __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Sliding Faux Columns with Rounded Corners
Doesn't look good in IE, all the text is in a dark charcoal background. Graham Cook ph: 0419 316 815 web: www.uaoz.com email: [EMAIL PROTECTED] -Original Message- From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] On Behalf Of Arian Hojat Sent: Wednesday, 20 September 2006 5:15 PM To: css-d@lists.css-discuss.org Subject: [css-d] Sliding Faux Columns with Rounded Corners Hello Everyone, I spent the night tonight trying to make Sliding Faux Columns but with rounded edges at top and bottom of the columns. Also I wanted it so the layout can lay on top of a gradient background where the gradient will 'bleed through' the transparent areas of the rounded corners. This is what I came up with. http://arihoj.freehostia.com/rsfc/rsfc.html I thought it was decent for a 1st time effort. Its supposed to be a mockup of one of Adobe's layout... http://labs.adobe.com/technologies/flash9as3preview/ Had a question though... Id like to make it so I dont use padding to achieve the background-image layout, at least in the middle #body3 area where my content is. For example, look at how the bottom borders of the list in the right sidebar dont extend all the way to the right. It is because padding is used on its parent to push the background-images into place without them overlapping and hiding each other. My 1st idea was to get rid of the left and right padding of 21px in the #body2 rule, and somehow configure rest of layout to also not use padding... But seems like it ruins the layout. Another idea is maybe move all the top and bottom areas to a 'negative margin' rounded corner method, so no padding is necessary anywhere, I think id prefer this method... But as you can see it doesn't bleed through the corner images anymore. http://arihoj.freehostia.com/rsfc/rsfc_negMargins.html Any ideas? Thanks in advance, Arian __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/ __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Sliding Faux Columns with Rounded Corners
I figured out that little side-problem Graham mentioned... When clearing my floats, the empty clearing div in IE shouldnt have a height of 0px like how I set, otherwise the floats and background images behind them screw up. Back to the real problem again with the padding :) On 9/20/06, Arian Hojat [EMAIL PROTECTED] wrote: guess I can also duplicate it in IE(6), by selecting the text with my mouse, and that text seems to make the background-image behind it go invisible heh. quite unusual. __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Sliding Faux Columns with Rounded Corners
Arian Hojat wrote: Hello Everyone, I spent the night tonight trying to make Sliding Faux Columns but with rounded edges at top and bottom of the columns. Also I wanted it so the layout can lay on top of a gradient background where the gradient will 'bleed through' the transparent areas of the rounded corners. This is what I came up with. http://arihoj.freehostia.com/rsfc/rsfc.html I thought it was decent for a 1st time effort. Its supposed to be a mockup of one of Adobe's layout... http://labs.adobe.com/technologies/flash9as3preview/ Had a question though... Id like to make it so I dont use padding to achieve the background-image layout, at least in the middle #body3 area where my content is. For example, look at how the bottom borders of the list in the right sidebar dont extend all the way to the right. It is because padding is used on its parent to push the background-images into place without them overlapping and hiding each other. My 1st idea was to get rid of the left and right padding of 21px in the #body2 rule, and somehow configure rest of layout to also not use padding... But seems like it ruins the layout. Another idea is maybe move all the top and bottom areas to a 'negative margin' rounded corner method, so no padding is necessary anywhere, I think id prefer this method... But as you can see it doesn't bleed through the corner images anymore. http://arihoj.freehostia.com/rsfc/rsfc_negMargins.html Any ideas? Thanks in advance, Arian Hi Arian, Now the corners construction (top and bottom) consists of 3 parts: the middle part has the right corner of the left box and the left corner of the right box. Then if something is arranged in another way in the 2 content boxes, the images have to be adapted: the middle image is serving 2 containers! I guess all problems will melt if you make two distinct corners constructions: 1 for the left box, 1 for the right box. Then you can do with the boxes whatever you want, and the corners wil stick to the box in question. This can be realized with only 2 images (1 for the left box corners together, and 1 for the right box corners together). In the css you can use almost the same styles for the left and right box: just give an extra class or id to get the right background corners. A small example suite is here http://home.tiscali.nl/developerscorner/liquidcorners/more-rounded-corners_step1.htm. Everything is liquid and adaptable! :-) For the background of the method and for more Xamples you can read: article and playgarden Liquid Round Corners http://home.tiscali.nl/developerscorner/liquidcorners/liquidcorners.htm. Greetings, francky __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Sliding Faux Columns with Rounded Corners
Hey Franky, yeh i was looking at my favorate liquid corner tutorial that i had saved on my computer long time ago, and lone behold it is the website you sent. The 2nd link i posted in my 1st email is based on that kinda with the negative margins... but I cannot add margins like that tutorial suggests to let the rounded corners bleed through because the layout kinda breaks. For example add, margin:0px 21px; to #containerTop1 and #containerBottom1 on http://arihoj.freehostia.com/rsfc/rsfc_negMargins.html notice it bleeds through, but the background-image moved so you have to adjust #body1 Then try to make #body1, match that with margin:0px 21px;. and it doesnt work out. On 9/20/06, Arian Hojat [EMAIL PROTECTED] wrote: Hey franky, When you say I guess all problems will melt if you make two distinct corners constructions: 1 for the left box, 1 for the right box.. If i do that though, I lose the faux columns. So I have to set that repeating middle image on the parent of those 2 left/right floats or it wont know how far to repeat it. Sorry your website is being blocked at my work :), i guess cause it has the word 'home.' in it. I will check out later or ask them to unblock it. I have a feeling it is a rounded corner method, but doesnt take into account making Faux Columns. Arian On 9/20/06, francky [EMAIL PROTECTED] wrote: Arian Hojat wrote: Hello Everyone, I spent the night tonight trying to make Sliding Faux Columns but with rounded edges at top and bottom of the columns. Also I wanted it so the layout can lay on top of a gradient background where the gradient will 'bleed through' the transparent areas of the rounded corners. This is what I came up with. http://arihoj.freehostia.com/rsfc/rsfc.html I thought it was decent for a 1st time effort. Its supposed to be a mockup of one of Adobe's layout... http://labs.adobe.com/technologies/flash9as3preview/ Had a question though... Id like to make it so I dont use padding to achieve the background-image layout, at least in the middle #body3 area where my content is. For example, look at how the bottom borders of the list in the right sidebar dont extend all the way to the right. It is because padding is used on its parent to push the background-images into place without them overlapping and hiding each other. My 1st idea was to get rid of the left and right padding of 21px in the #body2 rule, and somehow configure rest of layout to also not use padding... But seems like it ruins the layout. Another idea is maybe move all the top and bottom areas to a 'negative margin' rounded corner method, so no padding is necessary anywhere, I think id prefer this method... But as you can see it doesn't bleed through the corner images anymore. http://arihoj.freehostia.com/rsfc/rsfc_negMargins.html Any ideas? Thanks in advance, Arian Hi Arian, Now the corners construction (top and bottom) consists of 3 parts: the middle part has the right corner of the left box and the left corner of the right box. Then if something is arranged in another way in the 2 content boxes, the images have to be adapted: the middle image is serving 2 containers! I guess all problems will melt if you make two distinct corners constructions: 1 for the left box, 1 for the right box. Then you can do with the boxes whatever you want, and the corners wil stick to the box in question. This can be realized with only 2 images (1 for the left box corners together, and 1 for the right box corners together). In the css you can use almost the same styles for the left and right box: just give an extra class or id to get the right background corners. A small example suite is here http://home.tiscali.nl/developerscorner/liquidcorners/more-rounded-corners_step1.htm . Everything is liquid and adaptable! :-) For the background of the method and for more Xamples you can read: article and playgarden Liquid Round Corners http://home.tiscali.nl/developerscorner/liquidcorners/liquidcorners.htm . Greetings, francky __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
