Re: [css-d] Two questions
On 06/05/2011 02:07 PM, Colin (Sandy) Pittendrigh wrote:
http://montana-riverboats.com/Uploads/isitpossible.jpg shows a small crop
from a large layered psd file I got from a designer.
1)
The image above shows the top-left corner of the proposed page's main
content display division, which shows a semi-internal border that looks
like a fuzzy drop-shadow with rounded corners. In a fixed-width layout I
could imagine making a background image that was
the size of the entire division, and then using that as the division's url
background.
But as a liquid layout, where all the top-level divisions are sized as a
percentage of the available view port, I don't see how that
(the above fuzzy drop shadow internal bordering) would be possible. It it
possible to make a fuzzy border like this in a liquid layout context?
How?
That essentially relates to the box-shadow CSS3 property. You might want
to look into the pitfalls and caveats of using that property, along with
the fact that it will not be greatly supported in older browsers, and
most of IE (I believe only starting in IE9 does it work).
Furthermore, you'd need to use the vendor specific properties for webkit
and mozilla browsers.
http://www.css3.info/preview/box-shadow/
generic --
box-shadow: {x offset} {y offset} {blur radius} {color}
-webkit-box-shadow: 0 0 3px #000;
-moz-box-shadow: 0 0 3px #000;
box-shadow: 0 0 3px #000;
In summary, it's possible to emulate that effect and this should scale
with a fluid layout. The downside is it will not be as widely
browser-compatible as using an image would be.
2)
Is it true that liquid layouts are the most portable device-wise? From large
high-res monitors to pads to smart phones?
Corollary: is it true that fixed-width layouts (perhaps a centered 780 pixel
wide wrapper division) are the least portable across
various devices?
Generally speaking, sure. Although you could just have separate styles
completely depending on the screen resolution of the device using @media
queries. Someone not too long ago posted a link in a thread here to this
A List Apart article that I found very entertaining and enlighening:
http://www.alistapart.com/articles/responsive-web-design/
...thank you
__
css-discuss [css-d@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] Two questions
On 06/05/2011 02:07 PM, Colin (Sandy) Pittendrigh wrote: http://montana-riverboats.com/Uploads/isitpossible.jpg shows a small crop from a large layered psd file I got from a designer. 1) It it possible to make a fuzzy border like this in a liquid layout context? Anything is possible. Or, is it? How? Slice and dice in Photoshop? 2) Is it true that liquid layouts are the most portable device-wise? From large high-res monitors to pads to smart phones? It depends on who you ask. This is one man's opinion about that... *http://dev.opera.com/articles/view/the-mobile-web-optimization-guide/* Corollary: is it true that fixed-width layouts (perhaps a centered 780 pixel wide wrapper division) are the least portable across various devices? As above... Best, ~d -- http://chelseacreekstudio.com/ http://chelseacreekstudio.com/fa/ __ css-discuss [css-d@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/
[css-d] Two questions
http://montana-riverboats.com/Uploads/isitpossible.jpg shows a small crop from a large layered psd file I got from a designer. 1) The image above shows the top-left corner of the proposed page's main content display division, which shows a semi-internal border that looks like a fuzzy drop-shadow with rounded corners. In a fixed-width layout I could imagine making a background image that was the size of the entire division, and then using that as the division's url background. But as a liquid layout, where all the top-level divisions are sized as a percentage of the available view port, I don't see how that (the above fuzzy drop shadow internal bordering) would be possible. It it possible to make a fuzzy border like this in a liquid layout context? How? 2) Is it true that liquid layouts are the most portable device-wise? From large high-res monitors to pads to smart phones? Corollary: is it true that fixed-width layouts (perhaps a centered 780 pixel wide wrapper division) are the least portable across various devices? ...thank you -- /* Colin (Sandy) Pittendrigh --oO0 Have code will travel */ __ css-discuss [css-d@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/
[css-d] two questions, including one _major_ problem with IE
Hi CSS gurus,
These aren't the only problems on the site, as you will see, but
there's a strange problem with the IE's that doesn't show up in other
browsers. In this site, the dots in the unordered list are showing up
at the bottom line rather than the top lines. This is happening in
all versions.
Here's the url: http://www.pierceartanddesign.com/testfiles/
Also, a quickie question, I'm including conditional comments like
this (leaving out the punctuation, arrows etc. so it will actually
show up)
if IE6
style type=text/css
div {width:10em;height:100%;}
style
[endif]
Do they go up in the CSS styles area, or down into the HTML section
after the body? Dumb question, but I'm trying to learn.
TTIA
;-Dave
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- 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-d] Two Questions?
Hello, Two questions: 1/ Is there anyway to remove the off-set that a form's legend sets in FF and Opera? (IE text is always off-set to left and never centralised?) 2. This is a simple question (on what remains for me a complex subject) How can I tell what is the true font size I'm getting?) Cascading does not always work? TIA Kind Regards David G) - __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- 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] Two Questions?
On 12/06/07, [EMAIL PROTECTED] [EMAIL PROTECTED] wrote: 2. This is a simple question (on what remains for me a complex subject) How can I tell what is the true font size I'm getting?) Cascading does not always work? Cascading should always work. Would you care to provide an example of where it doesn't? (You can find out what the computed font size is using Firebug's dom inspector, switching to the Style tab, and picking Computed Style from the menu on the right hand side of Firebug). -- David Dorward http://dorward.me.ukhttp://blog.dorward.me.uk __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- 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] Two Questions?
On Tue, 12 Jun 2007, David Dorward wrote: (You can find out what the computed font size is using Firebug's dom inspector, switching to the Style tab, and picking Computed Style from the menu on the right hand side of Firebug). Could you please explain it slower? :-) I have recently installed Firebug, but its user interface is confusing. For example, if I enable Firebug, then right-click on something, select Inspect Element, then I get a view with tabs Console, HTML, CSS, Script, DOM, Net. But where do I really see the style sheet rules being applied? I select HTML, I get (on the right) the tabs Style, Layout, DOM, but the Style tab contains just the style sheet rule(s), e.g. font-size: 200%. I don't see anything resembling Computed Style. -- Jukka Yucca Korpela, http://www.cs.tut.fi/~jkorpela/ __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- 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] Two Questions?
Hi, Jukka... If I'm not mistaken (being a fairly recent adopter of Firebug, myself), I believe that David wasn't using a technical term that you should look for when he mentioned Computed Style. He was simply referring to what Firebug would tell you is the resulting css after all the css rules that apply to an element are accounted for. Firebug is great at showing the css for a particular element, as well as settings an element has inherited from previous styles which affect the current element. Make sense? (And David, if I misunderstood you, don't hesitate to correct me!) Rick -Original Message- From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] On Behalf Of Jukka K. Korpela Sent: Tuesday, June 12, 2007 10:21 AM To: css-d@lists.css-discuss.org Subject: Re: [css-d] Two Questions? On Tue, 12 Jun 2007, David Dorward wrote: (You can find out what the computed font size is using Firebug's dom inspector, switching to the Style tab, and picking Computed Style from the menu on the right hand side of Firebug). Could you please explain it slower? :-) I have recently installed Firebug, but its user interface is confusing. For example, if I enable Firebug, then right-click on something, select Inspect Element, then I get a view with tabs Console, HTML, CSS, Script, DOM, Net. But where do I really see the style sheet rules being applied? I select HTML, I get (on the right) the tabs Style, Layout, DOM, but the Style tab contains just the style sheet rule(s), e.g. font-size: 200%. I don't see anything resembling Computed Style. -- Jukka Yucca Korpela, http://www.cs.tut.fi/~jkorpela/ __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- 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 IE7 information -- 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] Two Questions?
Computed font size in pixels can also be found by clicking on elements using the selector found in Information Display Element Information in the web developer toolbar for firefox. Hope that helps and I don't have the wrong end of the stick :-) James __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- 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] Two Questions?
Jukka K. Korpela wrote: On Tue, 12 Jun 2007, David Dorward wrote: (You can find out what the computed font size is using Firebug's dom inspector, switching to the Style tab, and picking Computed Style from the menu on the right hand side of Firebug). Could you please explain it slower? :-) I have recently installed Firebug, but its user interface is confusing. For example, if I enable Firebug, then right-click on something, select Inspect Element, then I get a view with tabs Console, HTML, CSS, Script, DOM, Net. But where do I really see the style sheet rules being applied? I select HTML, I get (on the right) the tabs Style, Layout, DOM, but the Style tab contains just the style sheet rule(s), e.g. font-size: 200%. I don't see anything resembling Computed Style. Jukka, Select HTML in the left pane. Select Style in the right pane. Click on the Options drop-down in the right pane and select Show Computed Style. Voila! You can also see the computed font size with the Web Developer toolbar, which is another completely separate extension. I use both in conjunction sometimes. http://chrispederick.com/work/web-developer/ Lori __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- 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] Two Questions?
On Tue, 12 Jun 2007 17:20:44 +0300 (EEST), Jukka K. Korpela wrote: On Tue, 12 Jun 2007, David Dorward wrote: (You can find out what the computed font size is using Firebug's dom inspector, switching to the Style tab, and picking Computed Style from the menu on the right hand side of Firebug). Could you please explain it slower? :-) I have recently installed Firebug, but its user interface is confusing. For example, if I enable Firebug, then right-click on something, select Inspect Element, then I get a view with tabs Console, HTML, CSS, Script, DOM, Net. But where do I really see the style sheet rules being applied? I select HTML, I get (on the right) the tabs Style, Layout, DOM, but the Style tab contains just the style sheet rule(s), e.g. font-size: 200%. I don't see anything resembling Computed Style. I agree with you, Jukka, Firebug has a bewildering array of tools crammed into that interface. FWIW I found it well worthwhile going through some of the short tutorials found on the Firebug site: http://getfirebug.com/ Use the Learn more links on that page to view the tutorials. I found them short and sweet. Cordially, David -- __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- 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] Two questions: Konqueror CSS and Two Column Layout
Delos Woodruff wrote: First, I'm looking for direction on how to make minor conditional CSS margin/padding adjustments for Konqueror. I don't use Konqueror and I've never done anything with conditional comments, Only IE does conditional comments. so I'm at a loss on what to try where to look for more information specific to Konqueror. http://www.google.com/search?q=Konqueror+CSS+hacks Brought up a bunch of links, don't know if any of them will be useful. http://www.google.com/search?q=Konqueror+CSS+compatibility The KDE Developer's Corner link claims full CSS 2.1 support in Konqueror 3.4, which was one minor release ago. The Wiki has a page of hacks, some of which apply to Konqueror: http://css-discuss.incutio.com/?page=CssHack Because there is an iframe involved, there is a chance that the best solution is not CSS related, so I won't spam the list with the direct link until the relevance can be sorted out. I'll be happy to provide the link off-list to any who wants to take a look at it. I can send you screen captures from Konqueror 3.5.5 if you're interested. -- David [EMAIL PROTECTED] authenticity, honesty, community __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- 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-d] Two questions: Konqueror CSS and Two Column Layout
First, I'm looking for direction on how to make minor conditional CSS margin/padding adjustments for Konqueror. I don't use Konqueror and I've never done anything with conditional comments, so I'm at a loss on what to try where to look for more information specific to Konqueror. Because there is an iframe involved, there is a chance that the best solution is not CSS related, so I won't spam the list with the direct link until the relevance can be sorted out. I'll be happy to provide the link off-list to any who wants to take a look at it. The second question is unrelated to the first, but definitely has a CSS solution. To show the main content on my pages, I currently have a right-floating div acting as a second column that I'd like to officially make a second column. I've tried to figure it out and tried to experiment with margins, but the results were not useful. The point of all this is so I can reorder the html for search engine optimization and get the (usually longer) second column to push the footer down. It's supposed to be a fairly fluid layout, so postion:absolute is not an option. The CSS is at www.artpatient.com/artp.css and an example page would be www.artpatient.com/sod.php. Aside from switching around the floating div's location in the html, what sort of margins and setup should I apply? Thanks! Delos __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- 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-d] Two questions
I'm trying to add a drop shadow effect to the body of my site and as simple as it should be I can't seem to get it to work. I've got the outer div with a background color set and then an inner div that is positioned a few pixels over, but it's not working for me. Any help here would be appreciated. Also I have a weird issue with the page in FF. When it loads there is extra spacing beneath the footer, but if you hover the mouse over the right side section nav the spacing goes away. Then if you mouse over the top nav, the spacing comes back. I'm clueless as to what is causing that problem. Thanks again for your help. The page can be found at this URL: http://www.epiphanize.com/ __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Two questions
Jonathan Carter wrote: Also I have a weird issue with the page in FF. When it loads there is extra spacing beneath the footer, but if you hover the mouse over the right side section nav the spacing goes away. Then if you mouse over the top nav, the spacing comes back. I'm clueless as to what is causing that problem. Also, if I kick the font size up one notch in FF, the bottom article mentioned in the Weekly Features section overlaps the line that says News view all. Going up another notch has the News view all line completely above the bottom article. Going up another notch has the Search box and it's stuff covering part of the title, the date info on the right side overlapping the last couple of words in the Bridging the gap line, and the site is basically useless. See screen grab at: http://www.clanjones.org/EpiphanizeScreenCapture.jpg -- David [EMAIL PROTECTED] authenticity, honesty, community __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
