Back to basics - hover active visited links in a div

Hello all,

It seems I keep revisiting this issue -- and I could check my notes, but in any case since this is for a specific website I figured I'd ask it again.  Maybe this time it will sink in....

I need to modify links in a div to be the correct color, decoration (no underline, etc.)

Here is a link to a redirect to the development site:  Link to redirect page

The page is a work in progress.  I am matching, as well as I can the current live site (fyi I am updating a joomla 1.5 site to a responsive bootstrap 3.1.5 site)

Here's my specific question for you...

On the right side of the page are some H1 and paragraph links that need to reasonably match the same content on the live site page:  Live site to match

I've tried doing some css but it's not working.  Here's what I've done, obviously not very well...

h1, div.componentheading {
    color: #3F7DFF;
    font-family: TallFilmsExpandedObliqueRegular,arial;
    font-size: 32px;
    font-weight: 100;
    line-height: 30px;
    margin: 0;
    padding: 0;
}

div.componentheading h1 a:link a:visited a:hover a:active {
color: #3F7DFF;
}

Open in new window

There will be one or two other areas on the page where I will need your help.  But this is the main thing right now.

Thanks!

Rowby
LVL 9
Rowby GorenAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Dave BaldwinFixer of ProblemsCommented:
This file is emtpy, no content, no CSS.
<link rel="stylesheet" href="/templates/hasonrevised/css/fonts/fonts.css" type="text/css" />
0
meb_santosoCommented:
You need to separate each tag definition, i.e. div.componentheading h1 a:link,
div.componentheading h1 a:visited,
div.componentheading h1 a:hover,
div.componentheading h1 a:active {
color: #3F7DFF;
}

I havent checked your site for actual practic3, but what you have in your CSS snippet above must be corrected, more or less like what i write
0
COBOLdinosaurCommented:
This has to be wrong:

div.componentheading h1 a:link a:visited a:hover a:active {
color: #3F7DFF;
}

It says apply to a:active that is child of a:hover that is child of a:visited that is a child of a:link that is child of ...

I think you want a list of elements which requires commas:

div.componentheading, h1, a:link, a:visited, a:hover, a:active {
color: #3F7DFF;
}

Cd&
0
Determine the Perfect Price for Your IT Services

Do you wonder if your IT business is truly profitable or if you should raise your prices? Learn how to calculate your overhead burden with our free interactive tool and use it to determine the right price for your IT services. Download your free eBook now!

Rowby GorenAuthor Commented:
Hi Dave

I fixed that empty fonts.css file.    Not sure how this will affect the page, but wil; take a  look shortly.

And Cd& and  meb_santoso -- will also be checking out your solutions too....

Will be back in about 30  min...

Rowby
0
Rowby GorenAuthor Commented:
Hi and Thanks,

Well I was able to use Cd& single line suggestion to fix the color and get rid of the underline decorations.   I may switch back to meb_santoso multi line solution because I will be matching the different color(s) to match the live site's color change during hovering etc.

Live site to match

Link to redirect of development site: dev site link
One final issue. I seem to have lost the link to the web fonts in the font folder.  The h1 and H3 fonts appear to be showing as arial on my local browser.
@font-face {
  font-family: 'TallFilmsFineObliqueRegular';
  src: url('fonts/Tall_Films_Fine_Oblique.eot');
  src: local('Tall Films Fine Oblique Regular'), local('TallFilmsFineOblique'), url('fonts/Tall_Films_Fine_Oblique.ttf') format('truetype'), url('fonts/Tall_Films_Fine_Oblique.svg#TallFilmsFineOblique') format('svg');
}

@font-face {
  font-family: 'TallFilmsExpandedRegular';
  src: url('fonts/Tall_Films_Expanded.eot');
  src: local('Tall Films Expanded Regular'), local('TallFilmsExpanded'), url('fonts/Tall_Films_Expanded.ttf') format('truetype'), url('fonts/Tall_Films_Expanded.svg#TallFilmsExpanded') format('svg');
}

@font-face {
  font-family: 'TallFilmsExpandedObliqueRegular';
  src: url('fonts/Tall_Films_Expanded_Oblique.eot');
  src: local('TallFilmsExpandedObliqueRegular,arialRegular'), local('TallFilmsExpandedOblique'), url('fonts/Tall_Films_Expanded_Oblique.ttf') format('truetype'), url('fonts/Tall_Films_Expanded_Oblique.svg#TallFilmsExpandedOblique') format('svg');
}

h1, div.componentheading {
    color: #3F7DFF;
    font-family: TallFilmsExpandedObliqueRegular,arial;
    font-size: 32px;
    font-weight: 80;
    line-height: 30px;
    margin: 0;
    padding: 0;
}

h3 {
    color: #000000;
    font-family: Colaborate-ThinRegular,arial;
    font-size: 20px;
    font-weight: 80;
    letter-spacing: -0.5px;
    margin: 0;
    padding: 0;
}



body {
color: #363636;
    font-family: Segoe UI,sans-serif;
    font-size: 12px;
    line-height: 20px;
    text-align: left;
  
}

h1, div.componentheading {
    color: #3F7DFF;
    font-family: TallFilmsExpandedObliqueRegular,arial;
    font-size: 32px;
    font-weight: 100;
    line-height: 30px;
    margin: 0;
    padding: 0;
}

div.componentheading, h1, a:link, a:visited, a:hover, a:active {
color: #3F7DFF;
text-decoration:none;

}

Open in new window


Any suggestions to fix that, and then I will hopefully close this question and do some point splitting...

Rowby
0
Dave BaldwinFixer of ProblemsCommented:
'TallFilmsExpanded' is not included in any of the CSS files on the 'dev' site.  It simply isn't there.  I don't know where you got that code above from.
0
Rowby GorenAuthor Commented:
Hi Dave,

It's in the custom.css file,in this folder: /templates/hasonrevised/css


Open in new window

@font-face {
  font-family: 'TallFilmsFineObliqueRegular';
  src: url('fonts/Tall_Films_Fine_Oblique.eot');
  src: local('Tall Films Fine Oblique Regular'), local('TallFilmsFineOblique'), url('fonts/Tall_Films_Fine_Oblique.ttf') format('truetype'), url('fonts/Tall_Films_Fine_Oblique.svg#TallFilmsFineOblique') format('svg');
}

@font-face {
  font-family: 'TallFilmsExpandedRegular';
  src: url('fonts/Tall_Films_Expanded.eot');
  src: local('Tall Films Expanded Regular'), local('TallFilmsExpanded'), url('fonts/Tall_Films_Expanded.ttf') format('truetype'), url('fonts/Tall_Films_Expanded.svg#TallFilmsExpanded') format('svg');
}

@font-face {
  font-family: 'TallFilmsExpandedObliqueRegular';
  src: url('fonts/Tall_Films_Expanded_Oblique.eot');
  src: local('TallFilmsExpandedObliqueRegular,arialRegular'), local('TallFilmsExpandedOblique'), url('fonts/Tall_Films_Expanded_Oblique.ttf') format('truetype'), url('fonts/Tall_Films_Expanded_Oblique.svg#TallFilmsExpandedOblique') format('svg');
}

h1, div.componentheading {
    color: #3F7DFF;
    font-family: TallFilmsExpandedObliqueRegular,arial;
    font-size: 32px;
    font-weight: 80;
    line-height: 30px;
    margin: 0;
    padding: 0;
}

h3 {
    color: #000000;
    font-family: Colaborate-ThinRegular,arial;
    font-size: 20px;
    font-weight: 80;
    letter-spacing: -0.5px;
    margin: 0;
    padding: 0;
}



body {
color: #363636;
    font-family: Segoe UI,sans-serif;
    font-size: 12px;
    line-height: 20px;
    text-align: left;
 
}

h1, div.componentheading {
    color: #3F7DFF;
    font-family: TallFilmsExpandedObliqueRegular,arial;
    font-size: 32px;
    font-weight: 100;
    line-height: 30px;
    margin: 0;
    padding: 0;
}

div.componentheading, h1, a:link, a:visited, a:hover, a:active {
color: #3F7DFF;
text-decoration:none;

}
div.moduletable_bigMenu li a {
    color: #0096FF;
    text-decoration: none;
}
div.moduletable_bigMenu a {
    color: #0096FF;
    display: block;
    margin-top: 3px;
    text-decoration: none;
}
div.moduletable_bigMenu li {
    font-family: TallFilmsExpandedObliqueRegular,arial;
    font-size: 28px;
    list-style-type: none;
}
0
Dave BaldwinFixer of ProblemsCommented:
I'm pretty sure this part...

src: local('TallFilmsExpandedObliqueRegular,arialRegular')

is wrong since it has 'arial' in the middle of it.

And you have "h1, div.componentheading {" in there twice which is undesireable.
0
Rowby GorenAuthor Commented:
Hi Dave,

I made these changes.  Still doesn't appear (at least on my computer) to pull in those web fonts....  
@font-face {
  font-family: 'TallFilmsFineObliqueRegular';
  src: url('fonts/Tall_Films_Fine_Oblique.eot');
  src: local('Tall Films Fine Oblique Regular'), local('TallFilmsFineOblique'), url('fonts/Tall_Films_Fine_Oblique.ttf') format('truetype'), url('fonts/Tall_Films_Fine_Oblique.svg#TallFilmsFineOblique') format('svg');
}

@font-face {
  font-family: 'TallFilmsExpandedRegular';
  src: url('fonts/Tall_Films_Expanded.eot');
  src: local('Tall Films Expanded Regular'), local('TallFilmsExpanded'), url('fonts/Tall_Films_Expanded.ttf') format('truetype'), url('fonts/Tall_Films_Expanded.svg#TallFilmsExpanded') format('svg');
}

@font-face {
  font-family: 'TallFilmsExpandedObliqueRegular';
  src: url('fonts/Tall_Films_Expanded_Oblique.eot');
  src: local('TallFilmsExpandedObliqueRegular'), local('TallFilmsExpandedOblique'), url('fonts/Tall_Films_Expanded_Oblique.ttf') format('truetype'), url('fonts/Tall_Films_Expanded_Oblique.svg#TallFilmsExpandedOblique') format('svg');
}



h3 {
    color: #000000;
    font-family: Colaborate-ThinRegular,arial;
    font-size: 20px;
    font-weight: 80;
    letter-spacing: -0.5px;
    margin: 0;
    padding: 0;
}



body {
color: #363636;
    font-family: Segoe UI,sans-serif;
    font-size: 12px;
    line-height: 20px;
    text-align: left;
  
}

h1, div.componentheading {
    color: #3F7DFF;
    font-family: TallFilmsExpandedObliqueRegular,arial;
    font-size: 32px;
    font-weight: 100;
    line-height: 30px;
    margin: 0;
    padding: 0;
}

div.componentheading, h1, a:link, a:visited, a:hover, a:active {
color: #3F7DFF;
text-decoration:none;

}
div.moduletable_bigMenu li a {
    color: #0096FF;
    text-decoration: none;
}
div.moduletable_bigMenu a {
    color: #0096FF;
    display: block;
    margin-top: 3px;
    text-decoration: none;
}
div.moduletable_bigMenu li {
    font-family: TallFilmsExpandedObliqueRegular,arial;
    font-size: 28px;
    list-style-type: none;
}

Open in new window


Perhaps the link to the fonts folder needs to be more specific????
0
Dave BaldwinFixer of ProblemsCommented:
Do you have a 'fonts' directory in the 'dev' folders?  I see '404 file not found' for two of your font files and for 'bootstrap.css'.
0
Rowby GorenAuthor Commented:
Hi Dave,

I will check it all first thing in a.m.  I'm getting sleepy here! :)

Thanks Dave and everyone for their help so far!

Dopey,  I mean, Rowby
0
Rowby GorenAuthor Commented:
Hi Dave,

I corrected the missing bootstrap.css file

I checked the source of the page for fonts folder(s) and I think they are okay now.  

But could you double check and if a 404 error please provide the link so I can make sure I caught it.

Thanks

Rowby
0
Dave BaldwinFixer of ProblemsCommented:
Here are the headers from your page.  You can see that the fonts are returning 404's.
rowby-headers.txt
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
Rowby GorenAuthor Commented:
Thanks Dave.

I will fix those a little later today.  (The usual first of the week "emergencies" prevail!)

Rowby
0
Rowby GorenAuthor Commented:
Hi Dave

I uploaded the 3 css files and there should be no more 404 errors for the 3 stylesheets.

So now I am thinking that even though the stylesheets are there, they are not "pointing" correctly to the uploaded fonts.

Based on the stylesheets, can you tell where, physically those webfonts should be located?  Then hopefully an upload of the fonts into the correct folder will fix the "Arial" showing instead of the webfonts....

Thanks!

Rowby
0
Rowby GorenAuthor Commented:
Success!

I uploaded the fonts to the correct fonts folder and now they are showing.

I will be closing this question within an hour or so.

There are some font alignment issues, but I should be able to at least handle THAT myself.

Thanks, all!

Rowby
0
Rowby GorenAuthor Commented:
Thanks all!

Rowby
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
CSS

From novice to tech pro — start learning today.