Syntax Help

[me1000]

Im pretty much a noob when it comes to CSS,

 

but anyway, can someone show me how to write this in the correct syntax?

 

Thanks,

 

.sub_nav {
color: #FFFFFF;
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
font-size: 14;
font-weight: bold;
}
a.sub_nav:link {
color: #FFFFFF;
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
}
a.sub_nav:visited{
color: #FFFFFF;
}
a.sub_nav:hover {
color: #FF0000;
background-color : white;
opacity: 0.25;
}
a.sub_nav:active {
color: #237cc4;
}

 

and the page uses this to show it...

 

<a href="http://www.link1.com/"><div class="sub_nav">link 1</div></a>

 

Thanks

 

 

edit: oh BTW is this right,

 

a.sub_nav:hover {
color: #FF0000;
background-color : white;
opacity: 0.25;
}

 

I want the background to be translucent, but not the text!

 

 

[me1000]

I figured it out...

 

not exactly what i want though,

 

to get the desired effect, I removed the Div tags,

and added the class inside the <a> tag

 

<a class="subnav" href="http://www.google.com/">LINK 1</a>

 

now what I really would like to do, is set the dif tags outside all the links in the table

 

<tr><div class="subnav" >
    <td><a href="index.php"><b>Home</b></a></td>
    <td><a href="index.php?page_id=2"><b>CONTACT US</b></a></td>
    <td><a href="index.php?page_id=49"><b>GUESTBOOK</b></a></td>
    <td><a href="index.php?page_id=3"><b>LINK TO US</b></a></td>
    <td><a href="index.php?page_id=5"><b>NEWS/UPDATES</b></a></td>
</div> </tr>

 

Then I can set it so that if its not a link do something, if it is a link do what i have it set to...

 

ill keep playing, cuz i know there is a way,

but feel free to tell me how I will be checking back here as I get frustrated lol

[lando]

I'm not completely sure what you mean by

now what I really would like to do, is set the dif tags outside all the links in the table

 

In your first post you had a div inside of an anchor.  Although you have removed it you I would still like to point out the mistake.  A div is a block element and an anchor is an inline element.  You can not have a block element inside of an inline element.  This might help you out in the future

 

Something else you might consider doing, to make your html cleaner, is remove the bold from each anchor.  You already have font-weight: bold; in your style sheet, this does the same thing and is better to use.

[me1000]

My style sheet is the same as before, but I want to be able to add one DIV tag to the whole group of cells, instead of adding them one by one, that way i can apply different styles to them. since some are links and some are not!

[wildteen88]

Apply the style to the table cell instead rather than the div/anchor. Give each table cell a different class name.

[lando]

Good point wildteen88, I didn't even notice that he had a div nested inside a tr...which you can't do either.

 

This is what it needs to look like:

 

<tr class="subnav">
    <td><a href="index.php"><b>Home</a></td>
    <td><a href="index.php?page_id=2">CONTACT US</a></td>
    <td><a href="index.php?page_id=49">GUESTBOOK</a></td>
    <td><a href="index.php?page_id=3">LINK TO US</a></td>
    <td><a href="index.php?page_id=5">NEWS/UPDATES</a></td>
</tr>

 

tr.sub_nav td a,
tr.sub_nav td a:visited {
color: #FFF;
font: bold 14px Verdana, Geneva, Arial, Helvetica, sans-serif;
}
tr.sub_nav td a:hover {
color: #FF0000;
background-color : #FFF;
}
tr.sub_nav td a:active {
color: #237cc4;
}

 

I am not extremely familiar with opacity and such. You might want to check out Quirksmode to see what limitations there are and the proper syntax.

[me1000]

ok thanks, That all works great, but Im having trouble with the opacity,

 

this is what im using right now,

 

tr.subnav td a:hover {
     color: #FFF;
background-color : #CCC;
        filter:alpha(opacity=1);   /* IF IE because IE sucks, and everyone hates it! and I hate M$*/
        -moz-opacity: .1;           /* if older mozilla or not not CSS3 */
        opacity: .1;                   /* if Newer browser */

 

it works great for the background trouble is it makes the text translucent as well. so you can't even read it, because the text is White, and the background color is white too, and the same transparent settings are being applied to the text and the background, the text needs to be white in order to stand out from the background,

 

does anyone know of a way to apply a transparency to just the background and not both the text and background?

 

 

 

Thanks for the help,

 

[lando]

tr.subnav td {
background-color : #CCC;
        filter:alpha(opacity=1);   /* IF IE because IE sucks, and everyone hates it! and I hate M$*/
        -moz-opacity: .1;           /* if older mozilla or not not CSS3 */
        opacity: .1;                   /* if Newer browser */
}

[me1000]

That makes it so that the text rollover is the same color as the default rollover. it needs to be white!

 

 

[lando]

Okay, well your question was how to make the background transparent without making the text transparent.  What I gave you does that...you still need to adjust the color codes.

[me1000]

Thanks for your help,

but like I said Im pretty much a noob when it comes to CSS,

i dont know how to fix the text...

???

 

[lando]

Okay.  To change the text color you will need to change the numbers (hexidecimal) after color: below.

 

For example: #FFF or #FFFFFF is white, #000 or #00000 is black.  Photoshop is a great tool for this, but there are hundreds of other tools on the internet to generate hexidecimal colors.

 

tr.sub_nav td a,
tr.sub_nav td a:visited {
color: #FFF;
font: bold 14px Verdana, Geneva, Arial, Helvetica, sans-serif;
}
tr.sub_nav td a:hover {
color: #FF0000;
background-color : #FFF;
}
tr.sub_nav td a:active {
color: #237cc4;
}