RootsWeb.com Mailing Lists
Total: 2/2
    1. [FreeHelp] Simplifying multiple link styles
    2. Barry Carlson
    3. Recently I came across some styles for links. They were in a similar format to those found in stylesheet associated with Patricia Geary's excellent templates. The reason I looked at the styles was to see why those targetting hyperlinks interfered with those in the Rootsweb banners. The explanation is rather simple, the "a" styles are generic, i.e. they will affect any link on the page irrespective of whether it has an "id" or a "class". Fixing the problem is also easy, just place the styles inside your pages #container, #wrapper or whatever other named div you have your pages content enclosed in. I'll give an example in a moment, but in the meantime have a look at the styles and then find beneath them the same styles simplified. a:link { font-weight: bold; color: #640E0E; background: transparent; text-decoration: none; } a:visited{ font-weight: bold; color: #640E0E; background: transparent; padding: 0px; text-decoration: none; } a:hover { font-weight: bold; text-decoration : none; background: #E2DEDE; color: #000000; } a:active { font-weight: bold; text-decoration: none; background: #E2DEDE; color: #000000; } Yes, the styles above become:- a { font-weight:bold; text-decoration:none; } a:link, a:visited { color: #640E0E; background: transparent; } a:visited { padding: 0px; } a:hover, a:active { background: #E2DEDE; color: #000000; } - and if they are used in a page hosted by http://www.rootsweb.ancestry.com or http://freepages.ancestry.rootsweb.com, then you can use the provided page container id, #userContentFP, to limit your styles to your work only. Or if you always place your page content within another div, then use the id of that div. The choice is yours. div#userContentFP a { font-weight:bold; text-decoration:none; } div#userContentFP a:link, div#userContentFP a:visited { color: #640E0E; background: transparent; } div#userContentFP a:visited { padding: 0px; } div#userContentFP a:hover, div#userContentFP a:active { background: #E2DEDE; color: #000000; } So there you have it, a simplification of styles and a method to ensure they target just your work. Barry

    11/16/2010 09:14:12
    1. Re: [FreeHelp] Simplifying multiple link styles
    2. Barry Carlson
    3. The comments I made yesterday regarding the use of the Rootsweb id #userContentFP to isolate your work from banner styles when your page is hosted on a Rootsweb server, need to be amplified to avoid confusion. When your page is has been loaded to the RW server, it will be served in the following manner:- <body> <div id="RootsBanner-SearchWrapper"> <!-- Rootsweb top banner --> </div> <div id="userContent"> <!-- your page contents go here --> </div> <div id="fp_ftr"> <!-- Freepages bottom banner --> </div> </body> Now Pat Geary has pointed out (thanks Pat) that if you were to include the div#userContentFP to isolate your link styles from the RW banners, then your page link styles wouldn't work locally. Very true, and the simplest method of fixing that is to ensure that you place the contents of your page, i.e. that between the <body> and </body> tags in a container div and give it an id. So the usual #container, #wrapper ids will do the trick, and just prefix your generic link styles with, e.g. - div#wrapper a {} div#wrapper a:link () div#wrapper a:visited () div#wrapper a:hover () div#wrapper a:active () etc.. and don't forget the LoVe HAte order for the pseudo classes. There is an alternative method (to isolate the styles), but I'll leave that for another time. Barry

    11/17/2010 04:44:48