How do you get 2 different link colors on the same page in DW CS4

Hi
After creating a white link called “white link test” in a blue background, I need to create a blue link called “blue link test” in a white background. How do I accomplish this task In DW CS4? I would greatly appreciate any feedback. Thank you
<style type="text/css">
<!--
#apDiv1 {
                position:absolute;
                width:117px;
                height:47px;
                z-index:1;
                background-color: #0000FF;
                left: 6px;
                top: 103px;
a:link {
                color: #FFF;
-->
</style>
</head>
<body>
<div id="apDiv1"><a href="file:///C|/wamp/www/laserzone/public_html/add_maintenance.php">white link test</a></div>
<p> </p>
<p>blue link test</p>
</body>
</html>

Nothing has changed. A stylesheet is still a stylesheet.  And pseudo-classes are still pseudo-classes.
You need to define a set of link states (link, visted, hover, active) for each ID or class name required.
Let's say you want to have red  links in your #header and white links in your #footer.
CSS:
#header  a {text-decoration:none}
#header a:link {color:red} /**unvisited**/
#header a:visited  {color:gray} /**visited**/
#header a:hover, /**on mouse over**/
#header a:active, /**on  click**/
#header a:focus {text-decoration:underline}
#footer a  {text-decoration:none}
#footer a:link {color:white}
#footer a:visited  {color:yellow}
#footer a:hover,
#footer a:active,
#footer a:focus  {text-decoration:underline}
HTML:
<div id="header">
<a  href="some-link.html">Link in the header</a> |
<a  href="some-link.html">Link in the header</a> |
<a  href="some-link.html">Link in the header</a> |
</div>
<div  id="footer">
<a href="some-link.html">Footer  link</a> |
<a href="some-link.html">Footer  link</a> |
<a href="some-link.html">Footer  link</a> |
</div>
For more on CSS pseudo classes:
http://www.w3schools.com/css/css_pseudo_classes.asp
Nancy O.
Alt-Web  Design & Publishing
Web | Graphics | Print | Media  Specialists
http://alt-web.com/
http://twitter.com/altweb
http://alt-web.blogspot.com

Similar Messages

  • How do you get your site to appear the same in all web browsers?

    There are some things that show up differently in Safari than they do in IE and Firefox, how do I get everything to jive the same? I think it is in the code which I am not an expert on.  My website was a template that I purchased online and most of the code was already built in.  I have some of my links in Safari showing white when you rollover them but when I look in IE and Firefox they're not there.  Can anyone offer any suggestions on how to fix this?
    Thanks

    Actually what you are learning here is to create a stylesheet for all of your web pages. Including all of your styles inline in the page's code is very cumbersome.
    Each of your pages needs code that refers to your stylesheet:
    <style type="text/css" media="all">
    @import url("../../css/content.css");
    </style>
    <style type="text/css" media="print">
    @import url("../../css/content_print.css");
    </style>
    This assumes that your stylesheets (in my case, one for print, one for browsers) are located in a folder called /css which is a habit I have for neatness.
    One thing that Dreamweaver does very well is keeps track of your styles and helps you edit styles to suit. I'm using CS3 which doesn't really allow you to look at the result of rollovers from within the application, but I keep Firefox handy for previewing. Problem is, once you create a style for a "visited" link, you can no longer see the result of the style for unvisited links in your browser unless you clear your browsers cache. Dreamweaver CS3 always shows links in their unvisited state.
    There is other code I use to make Microsoft's non-compliant browsers do the right thing, though rollovers, visited, and such all tend to work the same in all browsers, save the most antediluvian.
    <!--[if IE 5]>
    <style type="text/css">
    /* IE 5 does not use the standard box model, so the column widths are overidden to render the page correctly. */
    #outerWrapper #contentWrapper #leftColumn1 {
      width: 185px;
    </style>
    <![endif]-->
    <!--[if IE]>
    <style type="text/css">
    /* The proprietary zoom property gives IE the hasLayout property which addresses several bugs. */
    #outerWrapper #contentWrapper, #outerWrapper #contentWrapper #content {
      zoom: 1;
    </style>
    <![endif]-->
    The above code handles issues with Microsoft's intransigence pretty well, and my sites tend to look really uniform. But in the case of menus, I often have to write a completely different stylesheet to wrestle with Internet Exploder:
    This is stylesheet reference for my menus:
    <style type="text/css" media="all">
    @import url("../css/menu/menu.css");
    </style>
    <!--[if lte IE 6]>
    <style type="text/css" media="all">
    @import url("../css/menu/menu_ie.css");
    </style>
    <![endif]-->
    Then I craft the changes for Internet Exploiter 6 in a separate stylesheet.
    This should give you an idea of how powerful an external stylesheet can be. You can use "if" statements to handle the differences between the Microsoft non-compliant browsers and the more modern and compliant browsers, like Safari, Firefox and Opera.
    You can see the result in any browser at http://www.readingsbykaren.com

  • How do I make dreamweaver links open on the same page?

    Hi all,
    I've created a site that has div tags for Header, navbar, main content, and footer. I am using a sprybar menu and I want the content of the hyperlink to display in the main content area. I know this was previously accomplished with frames and I could select the target as the main frame, but I hear that is bad practice or is becoming more obsolete with CSS. I have some intermediate knowledge with CSS. Does anyone know how I can accomplish this? I am using Dreamweaver 6

    One page websites aren't really a good idea as far as search engine optimization goes. It's better to have multiple pages with the same design that your menu moves to when clicked.
    That being said, you could do what you're talking about using javascript to change the display css of content <div> tags where, to start, there is a general info <div> and when one of the menu items is clicked, that <div> has its display property set to none, while another has it's display:none changed to display:block (so it appears). Each link would turn off all of the containers that aren't specific to the link itself, while turning on that one container that is.
    I use a script like this normally...
    <!doctype html>
    <html lang="en-us">
    <head>
    <meta charset="utf-8">
    <title>Quick, Little Show/Hide Script</title>
    <style>
    #one, #two {
        display:none;
    </style>
    <script type="text/javascript">
        function turnoff(id)
        {document.getElementById(id).style.display = 'none';}
        function turnon(id)
        {document.getElementById(id).style.display = 'block';}
    </script>
    </head>
    <body>
    <div id="one">some text</div>
    <div id="two">some other text</div>
    <div id="three">yet more text</div>
    <a href="#" onclick="turnoff('two'); turnoff('three'); turnon('one');">One</a> | <a href="#" onclick="turnoff('one'); turnoff('three'); turnon('two');">Two</a> | <a href="#" onclick="turnoff('one'); turnoff('two'); turnon('three');">Three</a>
    </body>
    </html>
    In the above example, divs one and two are turned off by default in the css. Div three shows when the page is loaded. The javascript tells a chosen id to change its display css to block or none depending on the function called in the onclick of a link. The link for "One" uses turnon('one') and turnoff('two') and turnoff('three') so, when it's clicked, two and three are set to display:none and one is set to display:block no matter what they were at to begin with.

  • How do create different link attributes on the same page

    I am using CSS links for my menu. The links are white, large and bold, but I want an email link to be a different color, font and smaller in size. How can I do this?

    Yow 400 somthing views and no one to help this guy...wow you people are mean....
    Ok just use a class for the email link....
    put a span around that email link
    <span class="class_name"><a>email link</a></span>
    then in the css place the class
    .class_name{
    color:red;
    If this doesnt work then that means the class needs to be more specific example
    span .class_name{
    color:red;

  • When you delete an app from your homescreen it is still in the cloud, does that mean you still have the app, and how do you get it back on to the home screen

    When you delete an app from your homescreen it is still in the cloud, does that mean you still have the app, and how do you get it back on to the home screen. new to ipad so do not know much. Anybody know.p

    As long as the app remains in the store then you can re-download it via the Purchased tab in the App Store app, or via the Purchased Link under Quick Links on the right-hand side of the iTunes store home page on your computer's iTunes : re-downloading.
    Similarly ibooks can be re-downloaded, and depending upon what country that you are in then music, films and tv shows may also be re-downloadable (if they remain available in the store).

  • How do i get my itunes to be the same on my laptop, ipod touch and ipad???? ive sync'd them all, but each is still different, please help

    how do i get my itunes to be the same on my laptop, ipod touch and ipad???? ive sync'd them all, but each is still different, please help

    Syning with iTunes is completely separate from iCloud, except that if you have elected to sync calendars and contacts with iCloud you cannot sync them with iTunes.
    What iTunes media are you having problems syncing to your iPhone?

  • How do you get PSE12 to stop opening the keyword menu at the top of the screen

    How do you get PSE12 to stop opening the keyword menu at the top of the screen when you want to isolate tagged photos?????????????
    it takes up 1/4 of the screen. This is so stupid. PSE10 had it done right, just a click box and boom all the photos tagged would be there!
    This makes NO sense the way it is done now.
    How do you turn it off, please . I am ready to send this back to amazon and go back to 10.

    Ceslaus1234 wrote:
    I'm sorry but what difference does it make if I post here or in Elements Village?
    None,
    But giving the link is easier for me than typing a new answer...
    Sorry for being so lazy .

  • How do I get an SVG file to the same color profile as my illustrator file (U.S. Web Coated (SWOP) v2 and what would be the correct color profile for printing on a shirt?

    How do I get an SVG file to the same color profile as my illustrator file (U.S. Web Coated (SWOP) v2 and what would be the correct color profile for printing on a shirt?
    Thank you.

    dadanas wrote:
    Hi Simcah, I have a similar problem. Have you found out any solution?
    thanks, dan
    You need to ask the printing service provider. Dealing with color totally depends on the printing process involved and of course the machines used.

  • How do you get iWeb not to reload my entire page?

    How do you get iWeb not to reload my entire page content when clocking on internal links? Sometimes I just want to change one picture from one page to the next and want the remaining aspects of the site to stay as is so that your web browser essentially only loads one image and keeps the other stuff. I have seen this on basically all pro websites. THANKS!
    Joel

    What version of iWeb are you using? Also what system?  What are you using to upload the site files to the server?
    OT

  • How can you get audio for  books on the kindle

    how can you get audio for  books on the kindle

    The audio inputs on Macs are line level inputs and not mic inputs.  You need a mic with a built in preamp (battery powered) or more conveniently a USB mic or bluetooth headset.

  • How can you get an applet to obey the CSS z-index attribute?

    How can you get an applet to obey the CSS z-index attribute?
    I have a DHMTL page with a panel that I want to slide back and forth. But another part of the requirement is to have the panel look like it is sliding under another panel.
    The problem is that an applet is on the panel that slides. When the sliding panel move under the stationary panel the applet does not go under the stationary panel, but the reset of the sliding panel does render looking like it is sliding under.
    See below.
    - ~~~~~~~~~~~~~~~~~~~~~~~~ ^^^^^^^^^^^^^^^^^^^^^^^^^^^ -
    - ~                      ~ ^                         ^ -
    - ~                      ~ ^                         ^ -
    - ~           #############***************           ^ -
    - ~           #            ^             *           ^ -
    - ~           #            ^             *           ^ -
    - ~           #            ^             *           ^ -
    - ~           #            ^             *           ^ -
    - ~           #            ^             *           ^ -
    - ~           #            ^             *           ^ -
    - ~           #            ^             *           ^ -
    - ~           #            ^             *           ^ -
    - ~           #            ^             *           ^ -
    - ~           #            ^             *           ^ -
    - ~           #            ^             *           ^ -
    - ~           #############^**************           ^ -
    - ~                      ~ ^                         ^ -
    - ~                      ~ ^                         ^ -
    - ~                      ~ ^                         ^ -
    - ~~~~~~~~~~~~~~~~~~~~~~~~ ^^^^^^^^^^^^^^^^^^^^^^^^^^^ -
    ~ has a z-index of 1
    # and * have a z-index 2
    # shows above ~ and below ^
    ^ has a z-index of 3What I am getting with the applet on the panel with a z-index of 2 is the following
    - ~~~~~~~~~~~~~~~~~~~~~~~~ ^^^^^^^^^^^^^^^^^^^^^^^^^^^ -
    - ~                      ~ ^                         ^ -
    - ~                      ~ ^                         ^ -
    - ~           #############***************           ^ -
    - ~           #            ^             *           ^ -
    - ~           #  @@@@@@@@@@@@@@@@@@@@    *           ^ -
    - ~           #  @                  @    *           ^ -
    - ~           #  @                  @    *           ^ -
    - ~           #  @                  @    *           ^ -
    - ~           #  @                  @    *           ^ -
    - ~           #  @                  @    *           ^ -
    - ~           #  @                  @    *           ^ -
    - ~           #  @@@@@@@@@@@@@@@@@@@@    *           ^ -
    - ~           #            ^             *           ^ -
    - ~           #            ^             *           ^ -
    - ~           #############^**************           ^ -
    - ~                      ~ ^                         ^ -
    - ~                      ~ ^                         ^ -
    - ~                      ~ ^                         ^ -
    - ~~~~~~~~~~~~~~~~~~~~~~~~ ^^^^^^^^^^^^^^^^^^^^^^^^^^^ -
    --------------------------------------------------------Where @ is the applet. Notice how the applet is on top of the ^ but the panel under it, ^, is under like it should be. All the panels are 1x1 tables with a border. So how can I get the applet on the drawing shown with # and * to follow the rendering of the z-index of 2?

    Hi,
    I have the same problem, and don't know how to solve it, So, i had tried to put my applet in a div tag wih z-index=0, but it still hide my other Dhtml divs with bigger Z-index (z-index =1000)
    Have you any idea to solve this.
    Thanks
    Hakim

  • How do you get your iphone out of the connect to itunes screen?

    How do you get your iphone out of the connect to itunes screen?

    What error message is it displaying? Check this Apple support document for information on specific error messages when restoring the iPhone. http://support.apple.com/kb/ts1275

  • How do you get old emails back from the cloud storage

    how do you get old emails back from the cloud storage

    How did you get them into cloud storage?

  • How do you make a link open on a new page (typically the target="_blank" command) in MUSE?

    how do you make a link open on a new page (typically the target="_blank" command) in MUSE?

    Newer version does not have the same interface.  I'm stuck trying to understand how to add a "blank" target to a hyperlink...  See how your screenshot has a dropdown associated with the "Hyperlink" object?  Mine doesn't...

  • With the new io5 on safari how do you get back to top of the page quickly

    With the new io5 on safari how do you get back to top of the page quickly?

    Same way as before - click on the top. But the area to click seems to be slightly lower ... aim for the touch of the grey and black instead of the black.

Maybe you are looking for

  • The application manager has downloaded Ps and Ai, now it is stopped on "waiting to install".

    How do I get it to procede with the installation?

  • Backup strategy in FRA

    Hi Experts, BANNER Oracle Database 11g Enterprise Edition Release 11.1.0.6.0 - 64bit Production PL/SQL Release 11.1.0.6.0 - Production CORE     11.1.0.6.0     Production TNS for HPUX: Version 11.1.0.6.0 - Production NLSRTL Version 11.1.0.6.0 - Produc

  • Dirty printing hp

    hi, we using the HP color printer -HP LJ 300-400 M351-M451 6 and it prints pretty messy. It shows blue lines and the edge has black and blue lines. we tried to self clean and the test paper was clean. Do you have any clue? Thank you

  • Export slideshow video - does it work?

    Just installed LR3.  My first and second attempts at exporting a slideshow video failed - the result includes a proper audio track, but the transitions between photos are jerky and pixellated and jump back and forth between photos and the background

  • Problems with Images in Firefox

    The problem is difficult to describe. As i wrote in my other posts, i wrote an HTTP (streaming) chatserver with NIO. In Firefox i'm having problems to display images in the messages view. If i post more than one picture to the chat, not all pictures