Re: [css-d] navigation link a different colour when page is active
Duncan Hill wrote: > > > (bonus for whoever tells me why the four panels are rendered differently > between surprising browsers, Firefox and IE7/8 versus all the rest! > > Duncan > /Anything/ to relieve the boredom of all this. But, what four panels do you mean? Best, ~d -- desktop http://chelseacreekstudio.com/ __ 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/
[css-d] :: float drop :: ***was:*** navigation link a different colour when page is active
Duncan Hill wrote: > >> /Anything/ to relieve the boredom of all this. But, what four panels >> do you mean? >> >> Best, >> ~d > Hi David, > > I am seeing size issues on the four panels on the two pages > http://redlemonarts.com/_dev/textbeast/home2.html (menu: Buy Now) > http://redlemonarts.com/_dev/textbeast/faq.html(menu: F.A.Q.) > > they are set in %, but Firefox 3.6.8 on both Win XP and Linux Mint 9 > along with IE 7/8 are producing a different box sizing that is causing > the last of the panels to drop (float:left;) > Opera 10.60, Chrome 6.0.472.14 (dev), and Safari 5 (7533.16) --All on > WinXP, are getting it as I would prefer. > > Using Firebug, it would appear to be the border value that is throwing > things around. > > Appreciate any ideas from you. > > Best wishes > > Duncan > -- desktop http://chelseacreekstudio.com/ __ 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] navigation link a different colour when page is active
--- On Tue, 8/3/10, Duncan Hill wrote: > to add a little to MB's method, and maybe confound the SSI > doubters a > little bit. > The 'active' page can easily have its link disabled with no > more than CSS > by changing the cursor to a standard arrow so that the user > does not > expect any action, and the addition of the 'pointer-events' > property set > to none. > An entire item on the menu can be just as easily hidden by > using display: > none; Of course, that method doesn't help if you don't have CSS enabled or if, for example, you're using a screen reader. You could also use javascript to remove the 'href' attribute, but that suffers from the same sort of problem. Ideally, you'd remove the href element server-side so the *content* is accurate. There shouldn't be any case where this is difficult. Yes, if you're just including a single static chunk of HTML for your menu, this isn't possible, so it's better to either dynamically generate the menu, or have a separate static 'chunk' for each different state. If your menu has more than one level of navigation, you'll need to do this anyway. - Bobby __ 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] navigation link a different colour when page is active
On Tue, 03 Aug 2010 11:29:15 +0100, Bobby Jack wrote: > Of course, that method doesn't help if you don't have CSS enabled or if, > for example, you're using a screen reader. You could also use javascript > to remove the 'href' attribute, but that suffers from the same sort of > problem. > > Ideally, you'd remove the href element server-side so the *content* is > accurate. There shouldn't be any case where this is difficult. Yes, if > you're just including a single static chunk of HTML for your menu, this > isn't possible, so it's better to either dynamically generate the menu, > or have a separate static 'chunk' for each different state. If your menu > has more than one level of navigation, you'll need to do this anyway. > > - Bobby Agreed, without CSS it does not work and similarly doesn't take into account screen readers, however it seems much more probable that a 'normal' browser will have CSS enabled whereas JavaScript can more easily be disabled in many situations. The method works for relatively simple sites and handles SSI/PHP Includes, but it can soon become tiresome to write large sets of matching attributes to catch the correct pages. It will work with multi-level menus, but again can become complex on any but smallish sites. It is an easy and quite stable method for anyone who does not have the skills, or the need to start writing the dynamic scripts. The usual caveat applies that not all browsers respect the 'pointer-events' as yet. Best wishes Duncan -- Using Opera's revolutionary e-mail client: http://www.opera.com/mail/ __ 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/
[css-d] div won't overflow
List, I've got an page with an div with an scrollbar (it's an app mockup- that's why) with the overflow attribute: http://beta.vleeswijzer.nl/index.php?id=4 but it won't overflow. Anyone know why? __ 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] div won't overflow
On Tue, 03 Aug 2010 13:26:27 +0100, Thijs Hakkenberg wrote: > List, > > I've got an page with an div with an scrollbar (it's an app mockup- > that's why) > with the overflow attribute: > http://beta.vleeswijzer.nl/index.php?id=4 > but it won't overflow. > > Anyone know why? Line 38 of your iphone.css has a semi-colon missing, it is the declaration immediately before the overflow: auto; Duncan > __ __ 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] :: float drop :: ***was:*** navigation link a different colour when page is active
David Laakso wrote:
> Duncan Hill wrote:
>
>>> /Anything/ to relieve the boredom of all this. But, what four panels
>>> do you mean?
>>>
>>> Best,
>>> ~d
>>>
>> Hi David,
>>
>> I am seeing size issues on the four panels on the two pages
>> http://redlemonarts.com/_dev/textbeast/home2.html (menu: Buy Now)
>> http://redlemonarts.com/_dev/textbeast/faq.html(menu: F.A.Q.)
>>
>> they are set in %, but Firefox 3.6.8 on both Win XP and Linux Mint 9
>> along with IE 7/8 are producing a different box sizing that is causing
>> the last of the panels to drop (float:left;)
>> Opera 10.60, Chrome 6.0.472.14 (dev), and Safari 5 (7533.16) --All on
>> WinXP, are getting it as I would prefer.
>>
>> Using Firebug, it would appear to be the border value that is throwing
>> things around.
>>
>> Appreciate any ideas from you.
>>
>> Best wishes
>>
>> Duncan
>>
>>
Cursory checked [local only] in Opera, Camino, Safari, FF, SeaMonkey, IE
6/7/8. No Linux this end...
css
#wrapper{ border: 1px solid red !important; }
.pane {float: left; width:25%;}/*add selector*/
.subInfoPanel{
margin: 1% 4%;/*add*/
/*width:23%; delete*/
/*float:left; delete*/
/*width: 98%;delete*/
}
markup [same drill for each of the 4 blocks]
Simplify web forms ..
Lorem ipsum dolor sit amet consectetuer massa mollis ac natoque ut.
Aenean massa mauris vel pretium neque habitasse iaculis libero amet
eros. Orci amet condimentum Nullam mi sit et ut a Donec et. Quis lorem
nunc odio Nunc urna Cras Curabitur cursus accumsan gravida. Sit risus
volutpat lacinia leo dolor ac a pellentesque convallis amet. Ornare
pretium turpis.
subInfoPanel 1
Best,
~d
--
desktop
http://chelseacreekstudio.com/
__
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] :: float drop :: ***was:*** navigation link a different colour when page is active :: EC
Error correction: This should read... ~d -- http://chelseacreekstudio.com/ __ 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] navigation link a different colour when page is active
On 8/2/10 4:00 PM, Philip Taylor (Webmaster, Ret'd) wrote: > Ah : I see the article is entitled "Apache Tutorial: > Introduction to Server Side Includes" -- is the same > functionality available in all SSI processors, do > you know (for example, in IIS) ? > Pass. Cordially, David -- __ 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] :: float drop :: ***was:*** navigation link a different colour when page is active
On Tue, 03 Aug 2010 14:41:01 +0100, David Laakso
wrote:
>>> I am seeing size issues on the four panels on the two pages
>>> http://redlemonarts.com/_dev/textbeast/home2.html (menu: Buy Now)
>>> http://redlemonarts.com/_dev/textbeast/faq.html(menu:
>>> F.A.Q.)
>>>
>>> they are set in %, but Firefox 3.6.8 on both Win XP and Linux Mint 9
>>> along with IE 7/8 are producing a different box sizing that is causing
>>> the last of the panels to drop (float:left;)
>>> Opera 10.60, Chrome 6.0.472.14 (dev), and Safari 5 (7533.16) --All on
>>> WinXP, are getting it as I would prefer.
>>>
>>> Using Firebug, it would appear to be the border value that is throwing
>>> things around.
>>> Duncan
> Cursory checked [local only] in Opera, Camino, Safari, FF, SeaMonkey, IE
> 6/7/8. No Linux this end...
>
> css
>
> #wrapper{ border: 1px solid red !important; }
> .pane {float: left; width:25%;}/*add selector*/
> .subInfoPanel{
> margin: 1% 4%;/*add*/
> /*width:23%; delete*/
> /*float:left; delete*/
> /*width: 98%;delete*/
> }
>
> markup [same drill for each of the 4 blocks]
>
>
>
> Simplify web forms ..
> Lorem ipsum dolor sit amet consectetuer massa mollis ac natoque ut.
> Aenean massa mauris vel pretium neque habitasse iaculis libero amet
> eros. Orci amet condimentum Nullam mi sit et ut a Donec et. Quis lorem
> nunc odio Nunc urna Cras Curabitur cursus accumsan gravida. Sit risus
> volutpat lacinia leo dolor ac a pellentesque convallis amet. Ornare
> pretium turpis.
> subInfoPanel 1
>
>
>Best,
> ~d
Thanks David,
I applied your fixes to the faq page,
http://redlemonarts.com/_dev/textbeast/faq.html
(after checking I removed the red border again)
as an extra to satisfy my pedantic nature, I tried it without the
subInfoWrap div, works fine.
Windows browserland seems to be playing nicely (after I persuaded IE that
I really did want it to empty its cache)
I had run through the wrapper scenario as you have coded it now in terms
of html but I just didn't get the CSS accurate on the dimensions.
Nicely done, and thanks for the help.
There is another Opera specific query that I'll post separately as this
thread is already abused and misused by myself.
Best wishes
Duncan
__
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] :hover :schmover
-Original Message-
From: Tim Climis [mailto:tcli...@exchange.iu.edu]
Sent: Monday, August 02, 2010 9:54 PM
To: css-d@lists.css-discuss.org
Cc: Chip Meyer
Subject: Re: [css-d] :hover :schmover
On Monday, August 02, 2010 10:18:22 pm Chip Meyer wrote:
It took me a little bit, but once I figured it out, it was a real faceplam
moment.
Let's take a look at your selector:
#notecardGallery ul li:hover ul li
That's fine and dandy, as long as you don't mind massive amounts of hoverable
space.
Now, let's take a look at what I presume you changed your selector to:
#notecardGallery ul li img:hover ul li
Let's think about this for a minute. This selects the li in the ul, that's
*inside* your image tag. What's inside your image tag? for that matter, how
do you even put things in a self-closing tag? ;-)
With this insight, I think we can see why it didn't work in the anchor tag
either. In fact, in order to make this effect work, and still have valid HTML,
we have to change the markup a bit. (To make it work as written, we'd have to
use javascript, I think).
I'm thinking something like:
In the Womb of God
If I paint the same experience about which I write, the painting
follows the writing, which follows the experience. Except for this painting. I
had intended to paint God and me staring lovingly at each other in prayer.
First I painted myself. Then when I started to paint Gods face, I realized I
was painting myself in the womb of God. What a sense of intimacy, yet I still
yearned for more, and so wrote the following poem (January 6, 2009):
#notecardGallery a img.big {
display: none;
position: absolute;
top: 0px;
left: 76px;
font-weight: bold;
z-index: 1;
}
#notecardGallery a:hover img.big {
display: block;
}
---Tim
Thank you, Tim. Just exactly right.
I think I had glimpsed (but not wholly understood) the insight of descendant
vs. adjacent sibling selector. I think your solution is simpler anyway, but out
if curiosity, is it possible to group selectors to effect something like...
#notecardGallery ul li img:hover + (ul li)
wherein this would style a li that is inside a ul that is adjacent to an image
being hovered. The parentheses I know are not valid; just my attempt to
describe what I am thinking of. Make sense? Can it be done?
Thanks again for the fix.
Chip
__
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/
[css-d] CSS Issue?
Hello Group, Some weirdness I have going on a test page that using a jquery image rotator and CSS divs layout. The HTML code has been validated and passed. The CSS code has some errors in the styles applied to some scripts and that will be corrected during testing. I will be happy to spend the time during the day today to correct what css errors I can if required before any help can be given, just let me know. If I use the page as planned, the jquery rotator loses it's linking capabilities. If I remove/comment out the two divs directly after the div holding the image rotator, the linking capabilities are once again active. Here is the URL to the page with the divs removed and linking working: http://www.junglejims.com/MAY2010-06152010/cookingschool/indextest2.html Here is the URL to the page with the divs added and linking not working: http://www.junglejims.com/MAY2010-06152010/cookingschool/indextest3.html Looking for the fix or a solution to make the divs and the image rotator work together. -- Thanks! Jeff __ 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] div won't overflow
Thijs Hakkenberg wrote:
> List,
>
> I've got an page with an div with an scrollbar (it's an app mockup-
> that's why)
> with the overflow attribute:
> http://beta.vleeswijzer.nl/index.php?id=4
> but it won't overflow.
>
> Anyone know why?
Hello Thijs,
For me I can't see the problem. Since there is a scrollbar, then there
is indeed overflowing content within div#screen that is hidden until
you vertically scroll.
BTW, this style make make it all line up.
#screen {width:290px;}
--
Alan http://css-class.com/
Armies Cannot Stop An Idea Whose Time Has Come. - Victor Hugo
__
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] CSS Issue?
Am 03.08.2010 17:11, schrieb jdr...@fuse.net: > Hello Group, > > Some weirdness I have going on a test page that using a jquery image rotator > and CSS divs layout. The HTML code has been validated and passed. The CSS > code has some errors in the styles applied to some scripts and that will be > corrected during testing. I will be happy to spend the time during the day > today to correct what css errors I can if required before any help can be > given, just let me know. > > If I use the page as planned, the jquery rotator loses it's linking > capabilities. If I remove/comment out the two divs directly after the div > holding the image rotator, the linking capabilities are once again active. > > Here is the URL to the page with the divs removed and linking working: > > http://www.junglejims.com/MAY2010-06152010/cookingschool/indextest2.html > > Here is the URL to the page with the divs added and linking not working: > > http://www.junglejims.com/MAY2010-06152010/cookingschool/indextest3.html > > > Looking for the fix or a solution to make the divs and the image rotator work > together. > > > -- > Thanks! > > Jeff > __ > 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/ > div#main has "float: left;" The following div#company seems to cover (in z-order) then div#main (allthough its contents start below the div#main) and therefore the links in the div#main are visible, but not accessible. You can still access them with the Tab key though. Try to define "clear: both;" for div#company. Best regards Christian Kirchhoff *Editura GmbH & Co. KG* Tempelhofer Damm 2 · 12101 Berlin www.editura.de AG Berlin-Charlottenburg · HRA 43189 B · USt.Id. DE217180548 Geschäftsführer: Ralf Szymanski __ 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/
[css-d] Opera Box-Shadow
Opera box-shadow problem: related page: http://redlemonarts.com/_dev/textbeast/faq.html I've searched for bug reports on Opera for my problem and drawn a blank, so would appreciate confirmation. The page has a full width horizontal panel above four equal boxes arranged horizontally. All have box-shadow set. On first load, if the bottom of the four boxes is visible, the box-shadow is 'soft' and blends to the background. Resize the viewport so that the page can scroll the bottom of the boxes out of sight, then scroll back up to reveal the bottom edge. The box-shadow now shows a hard edge. The blend is restored by either a page refresh or by any resize of the viewport. It seems to be a minor bug, I just want to make sure I am not the only one to see it. I only have Opera 10.60 on my systems (Win XP and Linux Mint 9) so I don't know if this relates to earlier versions as well. I haven't seen the effect in any of the other box-shadow capable browsers. Thanks Duncan __ 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] Opera Box-Shadow
Duncan Hill wrote: > Opera box-shadow problem: > > related page: > http://redlemonarts.com/_dev/textbeast/faq.html > > > I only have Opera 10.60 on my systems (Win XP and Linux Mint 9) so I don't > know if this relates to earlier versions as well. > > > Duncan > I do not see any particular problem with the box-shadow on this end in Mac OS X 10.4.11 Opera/10.6 Note: I always run this browser at minimum font-size 32px. The footer info that is each of the four boxes vertically overlaps the content. Best, ~d -- http://chelseacreekstudio.com/ __ 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] Opera Box-Shadow
On Tue, 03 Aug 2010 22:44:47 +0100, David Laakso wrote: > Duncan Hill wrote: >> Opera box-shadow problem: >> >> related page: >> http://redlemonarts.com/_dev/textbeast/faq.html >> >> >> I only have Opera 10.60 on my systems (Win XP and Linux Mint 9) so I >> don't >> know if this relates to earlier versions as well. >> >> >> Duncan >> > > > > > > I do not see any particular problem with the box-shadow on this end in > Mac OS X 10.4.11 Opera/10.6 > > > Note: I always run this browser at minimum font-size 32px. > The footer info that is each of the four boxes vertically overlaps the > content. > > Best, > ~d > Maybe this is just a Windows thing and I know it is relatively trivial, especially using a light color shading. It may be more obvious with a darker shadow, but is probably not worth worrying too much over. I'll file a bug report and see if anything happens. I tested up to 24px just to prevent boredom for you. Fixed now :D (I hope) Best wishes Duncan __ 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] IE8 float bug/s?
On Mon, Aug 2, 2010 at 6:03 PM, Zoran Zorkic wrote:
> Hi!
> I got stuck on floats in IE8. I have 2 floating spans inside a div, but IE8
> renders them all over the place. I've but some color on the elements to make
> them stand out.
>
> Any idea why?
>
> I put the sample here: http://lemur.dreamhosters.com/cssd/
>
> Thanks!
>
>
> Ahh the fun of floats in IE.
The issue was that the 2 spans were being shown below the images in each
list because it turned the area the image was being displayed in into a
block-level element since the images were declared before the spans. It's
really an easy fix. Here are a few changes I made to your stylesheet:
#stuffList IMG
{
height: 3em;
float:left; /* so that the image floats and doesn't take the whole space of
the div */
display:inline; /* if we don't add this it causes some fun issues in IE6 */
}
#stuffList span.code, #stuffList span.time
{
float:right;
display:inline; /* just throw in the fix for IE6 here again */
clear:right;
text-align:right;
font-weight:bold;
background:red;
}
Hope this helps,
Alex Mitchell
http://gumware.com
__
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] Opera Box-Shadow
On Tue, Aug 3, 2010 at 3:29 PM, Duncan Hill wrote: > On Tue, 03 Aug 2010 22:44:47 +0100, David Laakso > wrote: > > > Duncan Hill wrote: > >> Opera box-shadow problem: > >> > >> related page: > >> http://redlemonarts.com/_dev/textbeast/faq.html > >> > >> > >> I only have Opera 10.60 on my systems (Win XP and Linux Mint 9) so I > >> don't > >> know if this relates to earlier versions as well. > >> > >> > >> Duncan > >> > > > > > > > > > > > > I do not see any particular problem with the box-shadow on this end in > > Mac OS X 10.4.11 Opera/10.6 > > > > > > Note: I always run this browser at minimum font-size 32px. > > The footer info that is each of the four boxes vertically overlaps the > > content. > > > > Best, > > ~d > > > Maybe this is just a Windows thing and I know it is relatively trivial, > especially using a light color shading. > It may be more obvious with a darker shadow, but is probably not worth > worrying too much over. > I'll file a bug report and see if anything happens. > > > I tested up to 24px just to prevent boredom for you. > Fixed now :D (I hope) > > Best wishes > > Duncan > > Just for more info: I just tested this in Opera 10.6 on Vista SP2 and I didn't notice any differences in the shadows. Alex Mitchell http://gumware.com __ 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] print stylesheet
On Tue, Aug 3, 2010 at 4:57 PM, Alex Mitchell wrote: > > > Gabriele, >> Thanks for the compliment! I actually can't take credit for the design - >> the >> client created it. She had originally created the entire website in Flash >> (and she is a newbie to Flash), but it wasn't working correctly. After she >> consulted with me, we came up with this solution. >> >> On the banner the lettering "Stone Theater" is white ( >> http://elizabethfarley.web.officelive.com/StoneTheater/media/banner.gif), >> so >> printing on a white background renders the lettering nearly invisible. >> Rather than print on a black background and make the user waste ink, I >> want >> to substitute an alternate banner ( >> >> http://elizabethfarley.web.officelive.com/StoneTheater/media/banner-print.gif >> ) >> Is this possible using css? >> >> Also, you might have misunderstood my second question - I wanted the URL >> to >> show up (ie: >> http://elizabethfarley.web.officelive.com/StoneTheater/index.html) to >> show >> up at the bottom of the page. Wondered if anyone could point me to the >> right direction for the coding >> >> Thanks for the help! >> -- >> Elizabeth Farley > > > Just fixing an error in the image url from saving the page in firefox. > > > Stone Theater > Fine Art Museum Sculptures, Bas-reliefs, and Large-Scale > Photography > > > > Hope this helps, > Alex Mitchell > http://gumware.com > __ 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] print stylesheet
Gabriele,
> Thanks for the compliment! I actually can't take credit for the design -
> the
> client created it. She had originally created the entire website in Flash
> (and she is a newbie to Flash), but it wasn't working correctly. After she
> consulted with me, we came up with this solution.
>
> On the banner the lettering "Stone Theater" is white (
> http://elizabethfarley.web.officelive.com/StoneTheater/media/banner.gif),
> so
> printing on a white background renders the lettering nearly invisible.
> Rather than print on a black background and make the user waste ink, I want
> to substitute an alternate banner (
>
> http://elizabethfarley.web.officelive.com/StoneTheater/media/banner-print.gif
> )
> Is this possible using css?
>
> Also, you might have misunderstood my second question - I wanted the URL to
> show up (ie:
> http://elizabethfarley.web.officelive.com/StoneTheater/index.html) to show
> up at the bottom of the page. Wondered if anyone could point me to the
> right direction for the coding
>
> Thanks for the help!
> --
> Elizabeth Farley
Alright, there is a way to do this in CSS, and it is actually more SEO
friendly as well. Instead of using an where your and should
be, set a background image on the #banner.
Example:
Stone Theater
Fine Art Museum Sculptures, Bas-reliefs, and Large-Scale
Photography
Screen CSS:
#banner {
height:90px;
width:100%;
overflow:hidden; /* just so that you cant actually see the text even if
somebody is using a ridiculously large screen resolution */
background:url(media/banner2.gif) top center no-repeat; }
#banner h1, #banner h2{
text-indent:-5000px; }
Print CSS:
#banner {
height:90px;
width:100%;
overflow:hidden; /* just so that you cant actually see the text even if
somebody is using a ridiculously large screen resolution */
background:url(media/print-banner2.gif) top center no-repeat; }
#banner h1, #banner h2{
text-indent:-5000px; }
Doing it this way allows you to set a different background image for each
stylesheet. Or you can even use plain text in one and not on the other. It's
a pretty common technique to use custom fonts in logos and such without
losing the SEO benefits of having the proper heading tags.
*disclaimer*
you might have to play with it a little bit for it to work right, but this
should give you a general idea of how it works.
Hope this helps,
Alex Mitchell
http://gumware.com
__
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] Opera Box-Shadow
Duncan Hill wrote: > > > I tested up to 24px just to prevent boredom for you. > Fixed now :D (I hope) > > Best wishes > > Duncan > Thanks. We're looking good :-) . Way to go, Duncan. Best, Helen Keller Tuscumbia, Alabama -- http://chelseacreekstudio.com/ __ 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] print stylesheet
On Tue, Aug 3, 2010 at 4:57 PM, Alex Mitchell wrote:
>
>
> Gabriele,
>> Thanks for the compliment! I actually can't take credit for the design -
>> the
>> client created it. She had originally created the entire website in Flash
>> (and she is a newbie to Flash), but it wasn't working correctly. After she
>> consulted with me, we came up with this solution.
>>
>> On the banner the lettering "Stone Theater" is white (
>> http://elizabethfarley.web.officelive.com/StoneTheater/media/banner.gif),
>> so
>> printing on a white background renders the lettering nearly invisible.
>> Rather than print on a black background and make the user waste ink, I
>> want
>> to substitute an alternate banner (
>>
>> http://elizabethfarley.web.officelive.com/StoneTheater/media/banner-print.gif
>> )
>> Is this possible using css?
>>
>> Also, you might have misunderstood my second question - I wanted the URL
>> to
>> show up (ie:
>> http://elizabethfarley.web.officelive.com/StoneTheater/index.html) to
>> show
>> up at the bottom of the page. Wondered if anyone could point me to the
>> right direction for the coding
>>
>> Thanks for the help!
>> --
>> Elizabeth Farley
>
>
> Alright, there is a way to do this in CSS, and it is actually more SEO
> friendly as well. Instead of using an where your and should
> be, set a background image on the #banner.
>
> Example:
>
>
>
> Stone Theater
> Fine Art Museum Sculptures, Bas-reliefs, and Large-Scale
> Photography
>
>
>
> Screen CSS:
>
> #banner {
> height:90px;
> width:100%;
> overflow:hidden; /* just so that you cant actually see the text even if
> somebody is using a ridiculously large screen resolution */
> background:url(media/banner2.gif) top center no-repeat; }
> #banner h1, #banner h2{
> text-indent:-5000px; }
>
>
> Print CSS:
>
> #banner {
> height:90px;
> width:100%;
> overflow:hidden; /* just so that you cant actually see the text even if
> somebody is using a ridiculously large screen resolution */
> background:url(media/print-banner2.gif) top center no-repeat; }
> #banner h1, #banner h2{
> text-indent:-5000px; }
>
> Doing it this way allows you to set a different background image for each
> stylesheet. Or you can even use plain text in one and not on the other. It's
> a pretty common technique to use custom fonts in logos and such without
> losing the SEO benefits of having the proper heading tags.
>
> *disclaimer*
> you might have to play with it a little bit for it to work right, but this
> should give you a general idea of how it works.
>
> Hope this helps,
> Alex Mitchell
> http://gumware.com
>
Oh wow, that's an interesting technique - I was worried about SEO (which I
still have to work on) with all the graphics/flash - I can see what you are
proposing.
Having made and uploaded the changes (with a little tweak...) If I use the
FF web developer toolbar and "Display CCS by media type" I can see it
working. But if I go to print preview, it's not the same
And IE won't show a banner at all in print preview...
hmm...
--
Elizabeth Farley
__
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] print stylesheet
On Tue, Aug 3, 2010 at 5:39 PM, Elizabeth Farley wrote: > > Oh wow, that's an interesting technique - I was worried about SEO (which I > still have to work on) with all the graphics/flash - I can see what you are > proposing. > Having made and uploaded the changes (with a little tweak...) If I use the > FF web developer toolbar and "Display CCS by media type" I can see it > working. But if I go to print preview, it's not the same > And IE won't show a banner at all in print preview... > hmm... > -- > Elizabeth Farley > By default, in firefox 3.6.6 at least, background images and colors are not printed. It is an option you can enable in the print preview screen, however. Bummer, that's an issue I didn't think about. I'll contemplate this overnight and see if I can come up with any other solutions. Best of luck, Alex Mitchell http://gumware.com __ 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/
