Re: [css-d] navigation link a different colour when page is active
You will need to add a class somewhere that you can anchor any unique styles to. - Tim (Please forgive any typos caused by huge fingers on a teeny phone keybard.) On Aug 2, 2010, at 8:01 AM, Shortie Designs shortiedesi...@gmail.com wrote: Sorry - my original email was unclear - Im trying to make the current page in the navigation bar appear active - so when you are on the page - the name of it will appear in different colour font in the navigation bar - this way the user knows they they are on the 'home' or 'about us' page. Cheers Sofia Woods -Original Message- From: Philip Taylor (Webmaster, Ret'd) [mailto:p.tay...@rhul.ac.uk] Sent: Monday, 2 August 2010 6:19 PM To: Chris F.A. Johnson Cc: Shortie Designs; css-d@lists.css-discuss.org Subject: Re: [css-d] navigation link a different colour when page is active Chris F.A. Johnson wrote: Why do you want a link to the current page? Remove theA tags and style it differently. Whilst I cannot answer for the original enquirer, the most common reasons for wanting to link to the current page are : For consistency (all pages have a consistent set of links) Because a Library file, SSI or similar is used to insert a fixed set of link. In neither case can your suggestion be followed as-is. Philip Taylor __ 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-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
Shortie Designs wrote: I'm trying to keep the current page navigation link a different colour to the rest of the navigation link - this way users will know what page they are on. Sofia This is one way to do it. http://chelseacreekstudio.com/ca/cssd/8.html 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] print stylesheet
Congrats for the website! It's beatiful. ^.^/
Coming to your question, at the moment there are no straight solutions
to your problem. To change the background, simply specify a white
background color on your print stylesheet:
head
link rel=stylesheet href=print.css type=text/css media=print /
/head
body {
background: #fff;
color: #000;
}
You can even get rid of unwanted elements:
#navigation {display: none;}
Footer is more problematic. In CSS for print you cannot use absolute
positioning to put your footer at the very bottom of your page. More
precisely, some browsers accept it but with unexpected results. So the
best thing you can do is using a fallback solution, like specifying a
certain amount of padding and margins to push the footer bottomside.
Of course you need to perform some calculations on each page. HTH ^^
Gabriele Romanato
http://www.css-zibaldone.com
http://www.css-zibaldone.com/test/ (English)
http://www.css-zibaldone.com/articles/ (English)
http://onwebdev.blogspot.com/ (English)
__
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 1:19 AM, Philip Taylor (Webmaster, Ret'd) wrote: Chris F.A. Johnson wrote: Why do you want a link to the current page? Remove theA tags and style it differently. Whilst I cannot answer for the original enquirer, the most common reasons for wanting to link to the current page are : For consistency (all pages have a consistent set of links) Because a Library file, SSI or similar is used to insert a fixed set of link. In neither case can your suggestion be followed as-is. David Laakso has given an excellent solution. But I respectfully disagree that SSI cannot be used. Here is a demo I made for a student who wants to do that very thing. I hope it helps: http://webwiz.robinshosting.com/temp/jaime/ (Links lead to other example pages.) 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] navigation link a different colour when page is active
Shortie Designs said: I'm trying to keep the current page navigation link a different colour to the rest of the navigation link - this way users will know what page they are on. Ie: if the user is on the 'ABOUT US' page - then the About US link in the navigation bar is a different colour. I don't want to use JavaScript. The best way if using a dynamic web page is to use an id on the current page link in the navigation. If it's a static web site you could use a combination of an id on the body tag and the links and target those with unique descendant selectors. For example these HTML snippets: body id=markets lia id=nav-markets href=markets.htmlmarkets/a/li lia id=nav-products href=products.htmlproducts/a/li could be targeted with these selectors: #markets #nav-markets, #products #nav-products I'd use id rather than class as a target inside the navigation should be unique on the page. Even if you have several pages with the same body id value, this doesn't matter as only one page is loaded at a time. This allows several pages to be current under a navigation link, like part 2 of an article and so on. I use this technique on quickly made mockups and similar. /MB __ 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] fluid layout - vertical
How can I tweak this website so that the bottom part of the site would be better visible on a widescreen laptop? The main area is a flash file and I suppose I can make it smaller, but are there other ideas for solutions? I have looked at Maxdesign's article on liquid layouts ( http://www.maxdesign.com.au/articles/liquid/), but my concern is height, not width... http://elizabethfarley.web.officelive.com/StoneTheater/index.html Thanks so much, -- 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/
[css-d] fluid layout - vertical
How can I tweak this website so that the bottom part of the site would be better visible on a widescreen laptop? The main area is a flash file and I suppose I can make it smaller, but are there other ideas for solutions? I have looked at Maxdesign's article on liquid layouts ( http://www.maxdesign.com.au/articles/liquid/), but my concern is height, not width... http://elizabethfarley.web.officelive.com/StoneTheater/index.html Thanks so much, -- 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] navigation link a different colour when page is active
Intrigued :-) What handles the #IF/#ELSE/#ENDIFs ? ** Phil. David Hucklesby wrote: David Laakso has given an excellent solution. But I respectfully disagree that SSI cannot be used. Here is a demo I made for a student who wants to do that very thing. I hope it helps: http://webwiz.robinshosting.com/temp/jaime/ __ 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] fluid layout - vertical
Elizabeth Farley wrote:
How can I tweak this website so that the bottom part of the site would be
better visible on a widescreen laptop?
http://elizabethfarley.web.officelive.com/StoneTheater/index.html
Thanks so much,
I suppose that depends on what you mean by better visible.
Personally, I'd think /think/ white-space. Open it vertically --
widescreen, or not...
#wrapper {border:1px solid red;padding-top:50px;}
#navBar {border:1px solid red;margin-bottom:50px;}
#mainArea {border:1px solid red;margin-bottom:50px;}
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] fluid layout - vertical
On Mon, Aug 2, 2010 at 12:25 PM, David Laakso
da...@chelseacreekstudio.comwrote:
Elizabeth Farley wrote:
How can I tweak this website so that the bottom part of the site would be
better visible on a widescreen laptop?
http://elizabethfarley.web.officelive.com/StoneTheater/index.html
Thanks so much,
I suppose that depends on what you mean by better visible.
Personally, I'd think /think/ white-space. Open it vertically --
widescreen, or not...
#wrapper {border:1px solid red;padding-top:50px;}
#navBar {border:1px solid red;margin-bottom:50px;}
#mainArea {border:1px solid red;margin-bottom:50px;}
Best,
~d
--
http://chelseacreekstudio.com/
David,
I see what you are saying - spread out the elements on a vertical line, but
can I manipulate the css (ie using a percentage like you would on widths) to
make it fluid based on the height of the screen? So that the taller the
screen the more spread out the elements and the shorter the screen the
closer the elements (no scrolling vertically or horizontally)?
Is there a way to do that? Should I be spending more time googling this
concept? Sorry if I am asking a question with an obvious answer
--
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] fluid layout - vertical
Elizabeth Farley wrote:
Elizabeth Farley wrote:
How can I tweak this website so that the bottom part of the site would be
better visible on a widescreen laptop?
http://elizabethfarley.web.officelive.com/StoneTheater/index.html
Thanks so much,
I suppose that depends on what you mean by better visible.
Personally, I'd think /think/ white-space. Open it vertically --
widescreen, or not...
#wrapper {border:1px solid red;padding-top:50px;}
#navBar {border:1px solid red;margin-bottom:50px;}
#mainArea {border:1px solid red;margin-bottom:50px;}
Best,
~d
--
http://chelseacreekstudio.com/
David,
I see what you are saying - spread out the elements on a vertical line, but
can I manipulate the css (ie using a percentage like you would on widths) to
make it fluid based on the height of the screen? So that the taller the
screen the more spread out the elements and the shorter the screen the
closer the elements (no scrolling vertically or horizontally)?
Is there a way to do that? Should I be spending more time googling this
concept? Sorry if I am asking a question with an obvious answer
I am not sure that /percent/ will work for creating vertical spacing of
horizontal gutters. Nevertheless, and either way, yes -- it is possible
-- to manipulate height [ and width ] depending on user screen width
[dpi], and or media, using CSS3 media queries [1]. I do not see any
big deal in that media queries is /not/ supported in IE 6/7/8 [but your
client may]: It is promised for the forthcoming IE 9. For wide-screen
see the final example [2] at max-width 1300.
Best,
~d
w3c media queries
[1] http://www.w3.org/TR/css3-mediaqueries/
responsive web design
[2] http://www.alistapart.com/articles/responsive-web-design/
--
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 Mon, 2 Aug 2010, Philip Taylor (Webmaster, Ret'd) wrote: Chris F.A. Johnson wrote: Why do you want a link to the current page? Remove theA tags and style it differently. Whilst I cannot answer for the original enquirer, the most common reasons for wanting to link to the current page are : For consistency (all pages have a consistent set of links) I like the consistency of all links leading away from the current page. Links to the current page can be confusing. Because a Library file, SSI or similar is used to insert a fixed set of link. When I want to use the same file fro links on many pages, I use SSI to run a script that removes the link to the current page. In neither case can your suggestion be followed as-is. -- Chris F.A. Johnson, http://cfajohnson.com Author: Pro Bash Programming: Scripting the GNU/Linux Shell (2009, Apress) Shell Scripting Recipes: A Problem-Solution Approach (2005, Apress) __ 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
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) ? ** Phil. David Hucklesby wrote: On 8/2/10 12:26 PM, Philip Taylor (Webmaster, Ret'd) wrote: Intrigued :-) What handles the #IF/#ELSE/#ENDIFs ? ** Phil. Hi Phil, SSI handles the logic. Check the article linked to from the home page. 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] navigation link a different colour when page is active
missed an extra link with my earlier reply http://www.w3.org/TR/SVG/interact.html#PointerEventsProperty 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] navigation link a different colour when page is active
On Mon, 02 Aug 2010 19:42:34 +0100, MB digital.disc...@gmail.com wrote: Shortie Designs said: I'm trying to keep the current page navigation link a different colour to the rest of the navigation link - this way users will know what page they are on. Ie: if the user is on the 'ABOUT US' page - then the About US link in the navigation bar is a different colour. I don't want to use JavaScript. The best way if using a dynamic web page is to use an id on the current page link in the navigation. If it's a static web site you could use a combination of an id on the body tag and the links and target those with unique descendant selectors. For example these HTML snippets: body id=markets lia id=nav-markets href=markets.htmlmarkets/a/li lia id=nav-products href=products.htmlproducts/a/li could be targeted with these selectors: #markets #nav-markets, #products #nav-products 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; Both examples can be seen on my 'very much work in progress' at http://redlemonarts.com/_dev/textbeast/index.html the relevant css is in http://redlemonarts.com/_dev/textbeast/css/navbuttons.css (line 62) (bonus for whoever tells me why the four panels are rendered differently between surprising browsers, Firefox and IE7/8 versus all the rest! 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/
[css-d] :hover :schmover
What I'm Trying to Do Have a list within which each item consists of a thumbnail image and some descriptive text wrapping around it. When a user hovers the thumbnail, a larger image pops up. What's Not Working The larger image pops up when the user hovers over any part of the list item, which includes the descriptive text. This is more than a little obtrusive. I know that the page is working as it is currently coded to, but I have been unable to change to what I want (see above). What I Have Tried - Applying :hover to the thumbnail img rather than the li - Wrapping the image in various stuff (e.g. a, p, div) and applying the :hover to those tags - Applying a dedicated class .hoverTrigger:hover to the thumbnail img Below, you will find links to the markup and css. My main priority is to achieve the desired effect, but I am also curious about why my above solutions did not work, which I think is a corollary of Which elements can you apply :hover to, and in which browsers? Please note that only the top list item is set up to work right now. And, of course, if you notice any other foolishness on my pages, I bask in criticism. Markup http://www.calibercommunicationsllc.com/hidden/Clarence/notecards.html CSS http://www.calibercommunicationsllc.com/hidden/Clarence/Clarence-Heller.css Thanks much, 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] IE8 float bug/s?
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! __ 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] fluid layout - vertical
On Aug 3, 2010, at 5:11 AM, Elizabeth Farley wrote: but can I manipulate the css (ie using a percentage like you would on widths) to make it fluid based on the height of the screen? So that the taller the screen the more spread out the elements and the shorter the screen the closer the elements (no scrolling vertically or horizontally)? That wouldn't work at all :-). percentage values for _vertical_ padding/margin are computed based on the width of the element. In other words, the wider the screen, the taller the vertical padding would be (assuming the width of the elements is adjusted depending on the screen width. see http://www.w3.org/TR/CSS21/box.html#propdef-padding Philippe --- Philippe Wittenbergh http://l-c-n.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] :hover :schmover
On Monday, August 02, 2010 10:18:22 pm Chip Meyer wrote:
What I'm Trying to Do
Have a list within which each item consists of a thumbnail image and some
descriptive text wrapping around it. When a user hovers the thumbnail, a
larger image pops up.
What's Not Working
The larger image pops up when the user hovers over any part of the list
item, which includes the descriptive text. This is more than a little
obtrusive. I know that the page is working as it is currently coded to, but
I have been unable to change to what I want (see above).
What I Have Tried
- Applying :hover to the thumbnail img rather than the li
- Wrapping the image in various stuff (e.g. a, p, div) and applying
the :hover to those tags
- Applying a dedicated class .hoverTrigger:hover to the thumbnail img
Below, you will find links to the markup and css.
My main priority is to achieve the desired effect, but I am also curious
about why my above solutions did not work, which I think is a corollary of
Which elements can you apply :hover to, and in which browsers?
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:
LI
A
IMG src=./Clarence Heller - Everyday Sacred_files/Womb of
God.JPG
alt=Womb of God width=66 height=51
IMG class=big src=./Clarence Heller - Everyday
Sacred_files/Womb
of God.JPG alt=Womb of God width=490 height=383
/A
In the Womb of GodBR
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 God’s 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):
/li
#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
__
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 Mon, Aug 2, 2010 at 8:22 AM, Gabriele Romanato
gabriele.roman...@gmail.com wrote:
Congrats for the website! It's beatiful. ^.^/
Coming to your question, at the moment there are no straight solutions to
your problem. To change the background, simply specify a white background
color on your print stylesheet:
head
link rel=stylesheet href=print.css type=text/css media=print /
/head
body {
background: #fff;
color: #000;
}
You can even get rid of unwanted elements:
#navigation {display: none;}
Footer is more problematic. In CSS for print you cannot use absolute
positioning to put your footer at the very bottom of your page. More
precisely, some browsers accept it but with unexpected results. So the best
thing you can do is using a fallback solution, like specifying a certain
amount of padding and margins to push the footer bottomside. Of course you
need to perform some calculations on each page. HTH ^^
Gabriele Romanato
http://www.css-zibaldone.com
http://www.css-zibaldone.com/test/ (English)
http://www.css-zibaldone.com/articles/ (English)
http://onwebdev.blogspot.com/ (English)
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
__
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/
