Re: [css-d] scrollbar position
At 12:29 PM +0200 6/20/09, bruce.som...@web.de wrote: David Laakso wrote There is hope from Sweden. http://www.456bereastreet.com/lab/transparent-custom-corners-borders-v2/ In my mail system, clicking on that link copies it to the URL-field with the trailing gt-sign, and thus leads to Oops! Something went wrong. You may have followed a broken link or mistyped something. ... Oddly enough, it doesn't copy the leading lt-sign. What is the purpose of the lt- and gt-signs? It's either listed or implied in an older RFC http://www.ietf.org/rfc/rfc2396.txt to identify a URL, so that even if it is reay long and wraps multiple times in your email client, the client can still determine that this is all one URL. It is also recommended by the W3C: W3C recommendation: wrappers for URIs in plain text Submitted by Phil Mocek (not verified) on Thu, 2006-08-17 23:28. quoted from http://www.w3.org/Addressing/URL/5.1_Wrappers.html: URIs, including URLs, will ideally be transmitted though protocols which accept them and data formats which define a context for them. However, in practice nowadays there are many occasions when URLs are included in plain ASCII non-marked-up text such as electronic mail and usenet news messages. In this case, it is convenient to have a separate wrapper syntax to define delimiters which will enable the human or automated reader to recognize that the URI is a URI. The recommendation is that the angle brackets (less than and greater than signs) of the ASCII set be used for this purpose. These wrappers do not form part of the URL, are not mandatory, and should not be used in contexts (such as SGML parameters, HTTP requests, etc) in which delimiters are already specified. Not all clients support it, but I find it great mysef. -Ed -- Edward F Spodick, Information Technology Manager Hong Kong University of Science Technology Library lbspo...@ust.hk tel:852-2358-6743 fax:852-2358-1043 __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] scrollbar position
David Laakso wrote There is hope from Sweden. http://www.456bereastreet.com/lab/transparent-custom-corners-borders-v2/ ~d In my mail system, clicking on that link copies it to the URL-field with the trailing gt-sign, and thus leads to Oops! Something went wrong. You may have followed a broken link or mistyped something. ... Oddly enough, it doesn't copy the leading lt-sign. What is the purpose of the lt- and gt-signs? Thanks Bruce __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] scrollbar position
On 20/06/2009, at 1:01 PM, MEM wrote: I will now try to change the px to em, so that the boxes can grow with the browser text size, and also, try to put inside this box, 3 divs, and put the Bear in mind that while you may want your text to be set in a relative unit (like ems) for this technique you need to leave the margins and padding on the various divs in pixels as the image that makes up the background doesn't scale. Any time you spend learning to use firebug will pay off. It is great for showing the structure of the HTML and you can alter the CSS and get direct feedback. Cheers, Tim __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] scrollbar position
if the avant-garde were my bag, I'd look into the simple, satisfying, and far less frustrating solution that CSS3 offers [1]. Granted, as of this writing, the browser support for that module is weak. Nevertheless, it allows one to concentrate, all the more, on important matters: putting up an easy to read, easy to use CSS driven site. [1] http://www.css3.info/preview/rounded-border/ I've google it, found a lot of different techniques: http://www.cssjuice.com/25-rounded-corners-techniques-with-css/ http://www.smileycat.com/miaow/archives/44.php No CSS3 solution for this Im afraid, since this is not only a rounded corner request, is a rounded corner with glow border effect request (I hate this designer), and I believe not even gecko supports the border-image css3 property. The possible less worst solution that I may thinking of would be putting this technique: http://www.cantinho.org/pt/cantinho-site/rounded_gradient_boxes_v3.html 1) On a more logical html tag structure (putting the content tag between the top tag and the bottom tag). 2) Correct the left corner borders so that they could appear rounded. Could you help me on this, or its better that I go to the nested div technique? http://www.cantinho.org/pt/cantinho-site/outra_tecnica.html I need your help to decide, once I do, I will not look back! (ok only a little sometimes once in a while ) Thanks a lot for your time, Márcio __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] scrollbar position
No CSS3 solution for this I’m afraid, since this is not only a rounded corner request, is a “rounded corner with glow border effect request” (I hate this designer), and I believe not even gecko supports the border-image css3 property. Márcio There is hope from Sweden. http://www.456bereastreet.com/lab/transparent-custom-corners-borders-v2/ ~d __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] scrollbar position
MEM wrote:
Can I please have your help on this:
http://www.cantinho.org/pt/cantinho-site/outra_tecnica.html
I'm unable to move the scrollbar up. I want the scrollbar to be inside the
parent div and with some margin on top and bottom... No success.
I'm newbie on CSS. Any help would be greatly appreciated.
The css is inside, and has been validated.
Kind Regards,
Márcio
Eeeks! Try?
css
#scrool_content { overflow-y: scroll;overflow-x: hidden!important;
padding: 20px 0;}
br.both {clear:both;}
html
div id=scrool_content
h2Rounded Box Bottom/h2
p.../p
/div
br class=both /
/div/div/div
/div !-- Fim caixa_bottom --
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] scrollbar position
On 18/06/2009, at 12:19 PM, MEM wrote:
Hello,
I’m trying to work with boxes having rounded corners and gradient
borders.
I’m using a 1 image technique to accomplish that.
Some boxes will eventually need some scrollbars. But I’m having a
hard time
figuring out, how can we properly position the scrollbar so that I
can have
equal top and bottom margins?
I was hoping that playing the margins of the wrapper div will do the
trick.
But no success. :(
Please have a look here: (The css is inside and has been validated).
http://www.cantinho.org/pt/cantinho-site/
rounded_gradient_boxes_v3.html
Hi Marcio - I would avoid using percentages for margins in this case
if you want to control where the scrollbar sits. See below:
.dialog .wrapper {
margin-right: 32px; /* changed from 3% */
margin-top: 0; /* changed from 3% */
max-height: 400px;
overflow: auto;
position: static;
}
You need to set padding on .dialog .content. e.g.
.dialog .content {
padding: 32px 0 0 12px;
}
I *highly* recommend that you familiarise yourself with firebug. It is
perfect for these types of situations. Here is what I did when looking
at your problem:
1. 'inspect' the elements. This puts an outline around an elements so
you can see where it fits in the structure.
2. Select the element you want to modify in the left hand column.
3. Edit the CSS in the right hand column.
This way you can see exactly what is happening and exactly what impact
your changes are having immediately. You can even use the arrow keys
to nudge values up and down until things look right. Obviously this is
only changing thing temporarily so the next step is to..
4. Copy the changed CSS values and paste into your file.
Cheers, Tim
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] scrollbar position
Thanks Tim and David, The reason I'm having all this bunch of divs, is because I want to have borders with gradient and rounded corners, using the so called 1 image technique. I don't understand what all does divs do, because I see only the code but no explanations about the whys. 1) If you can point me the name of this technique (so I can study) or suggest a better one to accomplish this kind of effect, I will more than glad to learn about it. Why the second one - http://www.cantinho.org/pt/cantinho-site/outra_tecnica.html - , despite all the divs? Because the first one as some problems on the bottom left and top left corners. I don't know why, but I get no rounded top left corner, and rounded bottom left corner on the first one: http://www.cantinho.org/pt/cantinho-site/rounded_gradient_boxes_v3.html - 2) it's easy for any CSS guru to point out a solution for this absent left side rounded corners? I also found hard to understand this div hierarchy: The div responsible for the top border, comes After the content div ? I found that weird: div class=dialog div class=content div class=t/div !-- Your content goes here -- pHere is a very simple example dialog./p /div div class=bdiv/div/div /div I've tried to do change that to a more logical approach, putting the top div Before the content div like this: div class=dialog div class=t/div div class=content !-- Your content goes here -- pHere is a very simple example dialog./p /div div class=bdiv/div/div /div No success. 3) Would be possible to allow this more logical HTML structure approach ? @David 4) Should I take your Eeeks! as a disapproval of the divs structure? It's consensual that the first approach is a better one? I'm sorry for all this questions. I hope they arrive easy to answer... :s Kind Regards, Márcio __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] scrollbar position
MEM wrote: Thanks Tim and David, The reason I'm having all this bunch of divs, is because I want to have borders with gradient and rounded corners, using the so called 1 image technique. I don't understand what all does divs do, because I see only the code but no explanations about the whys. 1) If you can point me the name of this technique (so I can study) or suggest a better one to accomplish this kind of effect, I will more than glad to learn about it. I have no problem with what you want. And only wish that I could help you accomplish it. Many have tried. Google will bring up hundreds of pages, of those who have gone before you, using the search string: CSS rounded-corners. But, as for myself, if the avant-garde were my bag, I'd look into the simple, satisfying, and far less frustrating solution that CSS3 offers [1]. Granted, as of this writing, the browser support for that module is weak. Nevertheless, it allows one to concentrate, all the more, on important matters: putting up an easy to read, easy to use CSS driven site. [1] http://www.css3.info/preview/rounded-border/ __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
