Board index PBase HTML and Style Sheets No hover hyperlink in <h4>

HTML and Style Sheets

No hover hyperlink in <h4>

Customize your galleries.
azicit
 
Posts: 81

No hover hyperlink in <h4>

Post Tue Feb 03, 2009 10:50 pm


Finaly figured out how to change font in my Nav Bars but now the hyperIink hpver color change does not work

When I pull out the <h4> its fine but then my font goes back to default

The wierd thing is thats it working in firefox but not IE



Here is the HTML

<CENTER>
<BR>
<BR>
<img src="http://www.pbase.com/azicit/image/108811240/large.jpg">
</CENTER>
<center>
<table CELLPADDING="18">
<TD>SLIDESHOW(slideshowlandscape, delay=6, loop=yes, random=yes, size=medium)</TD>
<TD><img src="http://www.pbase.com/image/108811415/medium.jpg">
<BR><BR>

<TD></TR></TBODY></TABLE></center>


<center>
<table width="70%" cellspacing=0 cellpadding=0 border=0>
<td width="20%" align="center" bgcolor="#00000"><a href="http://www.azicit.com"><h4>
AZICIT.com</a></h4> </td>

<td width="20%" align="center" bgcolor="#000000">

<a href="mailto:suzanne@azicit.com"><h4>Contact</a></h4>

</td>

<td width="20%" align="center" bgcolor="#000000"><a href="http://www.pbase.com/azicit/guestbook"><h4>Guestbook</a></h4></td>
<td width="20%" align="center" bgcolor="#000000"><a href="http://www.azicit.blogspot.com/"><h4>Blog</a></h4>
</td>
</table>
</center>











**********************************************
css
a { color: <getvar color11>;
text-decoration: none;
}
a:active { color: <getvar color3>; font-weight: ; }
a:link { color: <getvar color24>; font-weight: ;}
a:visited { color: <getvar color24>; font-weight: ;}
a:hover { color: <getvar color11>; font-weight: ;}

a.thumbnail,
a.thumbnail:link,
a.thumbnail:visited,
a.thumbnail:active
{
border: <getvar color11> 2px solid;
margin-bottom: -45px;
padding-top: 5px;
width: 182px;
display: block;
background-color: <getvar color5>;
height: 200px;
}

a.thumbnail:hover
{
border: <getvar color24> 1px solid;
margin-bottom: -45px;
padding-top: 5px;
width: 182px;
display: block;
background-color: <getvar color14>;
height:200px;
}
td.thumbnail
{
height: 220px;
}


body{ text-align: left align;
margin-bottom: 15px;
margin-top: 0px;
background: <getvar color17>;
}

div,th,tr,table,font,li,ul,form,
blockquote,p,b,i,h1,h2,h3,h5,h4,font, center {
border: 0px;
color: <getvar color24>;
font: 12px verdana, Tahoma, Helvetica, sans-serif;
}
font {
margin-left: 4px;
margin-right: 4px;
width: 160px;
display: block;
color: <getvar color13>;
font: 12px Verdana, Tahoma, Helvetica, sans-serif;
letter-spacing: 0px;
}
h1, h2 {
border: <getvar color11> 2px solid;
border-left: 1px none;
border-right: 1px none;
border-top: 1px none;
margin-bottom: 1em;
margin-left: -10px;
margin-right: 0px;
padding: 20px;
width: 98%;
display: block;
background: <getvar color22>;
color: <getvar color13>;
font-size: 20px;
font-weight: ;
letter-spacing: 4px;
text-align: center;
height: 21px;
position: relative;
filter:
progid:DXImageTransform.Microsoft.gradient(gradientType=1,enabled='true',startColorstr
='#373737',endColorstr='#524b37');
}


h2:first-letter
{
color: <getvar color11>;
font-weight: bold;
font-size: 22pt;
}

h3 {
border-bottom: <getvar color11> 2px solid;
border-left: 1px none;
border-right: 1px none;
border-top: <getvar color11> 2px solid;
padding: 2px;
width: 800%;
display: block;
background: <getvar color15>;
color: <getvar color16>;
font-size: 22px;
font-weight: normal;
letter-spacing: 10px;
height: 18px;
text-align: center;
}

h4
{
letter-spacing: 10px;
height: 12px;
font-family: Bradley Hand itc;
}





h5 {
padding-left: 2px;
width: 150px;
display: block;
color: <getvar color16>;
font-size: 12px;
font-weight: ;
}

img{
border: <getvar color17> 1px none;
}
img.thumbnail {
border: <getvar color17> 1px solid;
margin: 0px;
padding: 0px;
background: <getvar color18>;
vertical-align: middle;
}input {
border: <getvar color17> 1px solid;
}
table.thumbnail {
width: 10%;
}
td {
border: 1px none;
background: none;
border-collapse: collapse;
empty-cells: show;
}
td.message_body {
border-bottom: <getvar color17> 1px solid;
border-left: 1px none;
border-right: 1px none;
border-top: 1px none;
display: block;
background: <getvar color19>;
}
td.message_body {
border-bottom: 1px solid <getvar color17>;
}

.caption {
color: <getvar color17>;
font-size: 10px Verdana, Tahoma, Helvetica, sans-serif;
font-style: italic;
}
.display {
border: <getvar color17> 2px solid;
margin-top: 1em;
background: <getvar color17>;
}
.lid{
background: transparent;
color: <getvar color13>;
font: 12px Verdana, Tahoma, Helvetica, sans-serif;
text-decoration: none;
}
.message_body {
margin: 5px 5px 10px;
color: <getvar color24>;
font: 12px Verdana, Tahoma, Helvetica, sans-serif;
}

.sb{
background: transparent;
color: <getvar color17>;
font: 12px Verdana, Tahoma, Helvetica, sans-serif;
text-decoration: none;
}

#commentlist .from
{
color: <getvar color3> 2px solid;
background-color: transparent;
}


BODY { margin-top: 0px; top: 0px; }
BODY TABLE A IMG { display: inline; }
HR { position: relative; }

dang
 
Posts: 3780

Re: No hover hyperlink in <h4>

Post Wed Feb 04, 2009 2:21 am


Finaly figured out how to change font in my Nav Bars but now the hyperIink hpver color change does not work
When I pull out the <h4> its fine but then my font goes back to default
The wierd thing is thats it working in firefox but not IE


I'm not understanding, sorry. When you remove the <h4> from where? Currently you're showing it in both your html & CSS. I'm not sure why you'd need it in the html...

As a general rule, you can add links to the html as below. When done this way, they inherit the pages colors:
Code: Select all
<center><TABLE height=12 cellSpacing=1 cellPadding=1 width="50%" border=0>
  <TBODY>
  <TR>
    <TD><A href="http://www.pbase.com/" target=_self>Pbase</A></TD>
    <TD><A href="http://www.pbase.com/galleries" target=_self>galleries</A></TD>
    <TD><A href="http://form.pbase.com/" target=_self>forum</A></TD>
    <TD><A href="http://search.pbase.com/search" target=_self>search</A></TD>
    <TD><A href="http://www.pbase.com/help" target=_self>help</A></TD>
    <TD><A href="http://www.pbase.com/login"
  target=_self>login</A></TD></TR></TBODY></TABLE></center>


As far as IE looking different, it's pretty typical. IE isn't standardized with other browsers and can be a pain. The best you can do most times is find a compromise which looks close, if not exact.
Last edited by dang on Wed Feb 04, 2009 2:38 am, edited 1 time in total.

azicit
 
Posts: 81

Re: No hover hyperlink in <h4>

Post Wed Feb 04, 2009 2:34 am


Thanks for the response

I was trying to get the Font in the Nav BArs to be Bradley Hand itc - the ONLY way I could get it to work was to change a heading in css then refernce that heading in HTML.
<h4>

if I take out the <h4> from the html the text reverts back to the default

am I making sense?

Now it works...but the hyperlinks arent changing color on Hover

I know I've really trashed the css and html to make this work but I ran out of ideas

I want a nicely centered navbar in Bradley font that expands as the window increases width and stays centered with the hyperlink hover working


p.s. apreeciate all your responses I had read these forums over and over and you sre so helpfull

Somewhere I found a really great iamge page that sowed all the code and where it applied on the pbase pages...not the one on the first page of the forums it was much more extensive? I cant find it..do you know the one I mean?

dang
 
Posts: 3780

Re: No hover hyperlink in <h4>

Post Wed Feb 04, 2009 2:42 am


Hi,
Not sure about the page you mean, sorry.
Let me think on it a bit, you still might can change the font without affecting the colors. But using the the h4 statement is going to cause problems. I'm thinking it's pretty simple, but I'll need to check through some of my coding to be sure. :wink:

EDIT:
You might try adding a "font type" declaration into the table code. I know you can change the color, and make it bold as such:
Code: Select all
<tbody>
<tr>
<td><a href="http://LINK URL.com/"><font color="black"><center><strong>LINK CLICK</strong></center></font>
</a>


A second thing to try might be changing the font type in the CSS h2 section. I'm pretty tired at the moment, & not thinking clear. I'll check back later on and see how you're doing with it. Until then, maybe someone else has a quick solution.

EDIT 2 - I did a quick check, and the page you're asking about might be one of these:
http://pbasewiki.srijith.net/css_bank
http://www.pbase.com/matiasasun/css_library
http://www.pbase.com/pinemikey/pinescsslibrary
http://www.pbase.com/thierry_malaval/mycss
:wink:

azicit
 
Posts: 81

Re: No hover hyperlink in <h4>

Post Wed Feb 04, 2009 3:04 pm


I need to change to font and have it act as a hyperlonk on hover

I cant find a way to change the font for this line only - if I change the H2 code it changes all the fonts for the page - That why I thought I got smart and created and H4
for the Nav Bar only....works but the hover color change doesn't work

I have tried HTML in line code to change the font family but it just wouldnt take

dang
 
Posts: 3780

Re: No hover hyperlink in <h4>

Post Wed Feb 04, 2009 7:05 pm


Hi Susanne,
As said before, using h4 in the html isn't valid coding. It's still a hyperlink on "roll over" since the small hand appears. To make the links font vary, and change color in all browsers, you'll need to make modifications in the CSS which are interpreted by both, or you could use "gif links" in a table, similar to this:

Code: Select all
<center><TABLE cellSpacing=2 cellPadding=2 width="60%" border=0>
  <TBODY>
  <TR>
    <TD><A title="Link 1" href="http://www.dangphoto.net" target=_blank><IMG
      src="http://www.pbase.com/dang/image/108870148.jpg"
      border=0></A></TD>
    <TD><A title=Link2 href="http://www.dangphoto.net" target=_blank><IMG
      src="http://www.pbase.com/dang/image/108870148.jpg"
      border=0></A></TD>
    <TD><A title=Link3 href="http://www.dangphoto.net" target=_blank><IMG
      src="http://www.pbase.com/dang/image/108870148.jpg"
      border=0></A></TD>
    <TD><A title=Link4 href="http://www.dangphoto.net" target=_blank><IMG
      src="http://www.pbase.com/dang/image/108870148.jpg"
      border=0></A></TD>
    <TD><A title=Link4 href="http://www.dangphoto.net" target=_blank><IMG
      src="http://www.pbase.com/dang/image/108870148.jpg"
      border=0></A></TD></TR></TBODY></TABLE></center>


This would allow you to use any font/size/color for the links... but hover is still a hand.

Maybe someone else can offer something simple which I'm over looking, sometimes it's the easy things I miss.

alangrant
 
Posts: 861

Re: No hover hyperlink in <h4>

Post Wed Feb 04, 2009 7:47 pm


When you say the "Nav Bar", I guess you are talking about the line above the thumbnails with AZICIT, Contact, Guestbook, Blog, right? As far as I can see it already does what you want - when I hover over one of those words the colour changes from white to a darker shade. I tried this in both IE7 and Firefox. Which version of IE are you using? Version 6 is sometimes a bit quirkier than 7 and may not be worth worrying about if your page works the way you want it in version 7 and in other browsers.
Alan
Travel Photos - http://www.pbase.com/alangrant
Balkanology: Explore Southeast Europe - http://www.balkanology.com/

dang
 
Posts: 3780

Re: No hover hyperlink in <h4>

Post Wed Feb 04, 2009 10:05 pm


alangrant wrote:When you say the "Nav Bar", I guess you are talking about the line above the thumbnails with AZICIT, Contact, Guestbook, Blog, right? As far as I can see it already does what you want - when I hover over one of those words the colour changes from white to a darker shade. I tried this in both IE7 and Firefox. Which version of IE are you using? Version 6 is sometimes a bit quirkier than 7 and may not be worth worrying about if your page works the way you want it in version 7 and in other browsers.


Alan, I'm assuming that's whats meant. I'm using IE version 7 and it's not changing for me, though I haven't updated in some time. Validation shows 24 CSS errors, so the code could use a bit of tidying. Another thing is the DX Transform statement doesn't seem to be doing anything in IE, so I'm not sure it's needed.

azicit
 
Posts: 81

Re: No hover hyperlink in <h4>

Post Fri Feb 06, 2009 5:08 am


Thanks to both of you for your efforts....I gave up. Due to the type font I wanted not being universally available on all machines I opted to solve the problem with Images.

I dont get the rollover but what the heck...the effect is what I wanted and I dont have issues with font availability

Appreciate your assistance

dang
 
Posts: 3780

Re: No hover hyperlink in <h4>

Post Fri Feb 06, 2009 7:09 am


Great,
I think you've done the right thing in using images instead, as you've said, the font isn't a problem. It is possible to add a rollover affect, but you'd need to design a total page using CSS/html including additional images. The coding can get complicated though, depending on the effect you wanted. As is, I think you've done a great job, it looks nice and clean.


Board index PBase HTML and Style Sheets No hover hyperlink in <h4>

Who is online

Users browsing this forum: No registered users and 2 guests