Highlighted

DW Starter Template - Basic - Multi column - issue with links

New Here ,
Jan 09, 2018

Copy link to clipboard

Copied

It's been a while since I put a website together, so I hope I'm explaining this well.  I found the code below in the DW Starter Template called Basic - Single Page css coding.

ul li a {

  color: #FFFFFF;

  text-decoration: none;

}

ul li:hover a {

  color: #2C9AB7;

In the template I'm using, however, (called Basic - Multi column), I am not finding the code for links.  If you select the Basic - Multi column template from Starter Templates, you can access the file called multiColumnTemplate.css.  In "Live" view, you can drag your cursor over the menu items, and as you hover, the text turns from white to gray.  I assumed the code was already prepared for linking since this is a template.  However, when selecting one of the menu items in the gray bar called secondary header in order to assign a link, the default "hover" from white to gray breaks and the text becomes blue and underlined like old school HTML links.  It's like there's no css coding for the a, hover, etc.  Or at least I can't find it.  Can anyone tell me if I'm missing something?  Or tell me what code I should insert to make these links work right?  Also, when I say I'm assigning the link in the Properties Box, all I'm doing is highlighting one of the menu items and selecting an .html file from my site folder.  So once the link is assigned there, the menu item (in the gray secondary header bar) turns blue and underlined. Any input appreciated!

PS-Here are some of the areas where I'm looking for the anchor coding:

.secondary_header {

  width: 100%;

  padding-top: 20px;

  padding-bottom: 20px;

  background-color: #B3B3B3;

  clear: left;

}

.container .secondary_header ul {

  margin-top: 0%;

  margin-right: auto;

  margin-bottom: 0px;

  margin-left: auto;

  padding-top: 0px;

  padding-right: 0px;

  padding-bottom: 15px;

  padding-left: 0px;

  width: 100%;

}

.secondary_header ul li {

  list-style: none;

  float: left;

  margin-right: auto;

  margin-top: 0px;

  font-family: "Source Sans Pro";

  font-weight: normal;

  color: #FFFFFF;

  letter-spacing: 1px;

  margin-left: auto;

  text-align: center;

  width: 16%;

  transition: all 0.3s linear;

}

.secondary_header ul li:hover {

  color: #717070;

  cursor: pointer;

Adobe Community Professional
Correct answer by Nancy OShea | Adobe Community Professional

I'm not thrilled with the CSS code in this multi-column Template.  You have my permission to use another one.

Anyway, add some links to your menu.  You can use temporary # if you like.

<nav class="secondary_header" id="menu">

      <ul>

      <li><a href="#">ABOUT</a></li>

        <li><a href="#">WORK</a></li>

        <li><a href="#">PORTFOLIO</a></li>

        <li><a href="#">SERVICES</a></li>

        <li><a href="#">CLIENTS</a></li>

        <li><a href="#">CONTACT</a></li>

      </ul>

    </nav>

Now that we have anchors to target, we can add these selectors to the CSS code.

.secondary_header ul li {

    list-style: none;

    float: left;

    margin-right: auto;

    margin-top: 0px;

    font-family: "Source Sans Pro";

    font-weight: normal;

    color: #FFFFFF;

    letter-spacing: 1px;

    margin-left: auto;

    text-align: center;

    width: 16%;

    transition: all 0.3s linear;

}

.secondary_header ul li:hover {

    color: #717070;

    cursor: pointer;

}

.secondary_header a {

    color: #FFF;

    text-decoration:none;

}

.secondary_header a:hover, a:active, a:focus {

    color: #717070;

}

TOPICS
Create menus in Dreamweaver, Dreamweaver | Mac OS issues, Learn Dreamweaver

Views

779

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more

DW Starter Template - Basic - Multi column - issue with links

New Here ,
Jan 09, 2018

Copy link to clipboard

Copied

It's been a while since I put a website together, so I hope I'm explaining this well.  I found the code below in the DW Starter Template called Basic - Single Page css coding.

ul li a {

  color: #FFFFFF;

  text-decoration: none;

}

ul li:hover a {

  color: #2C9AB7;

In the template I'm using, however, (called Basic - Multi column), I am not finding the code for links.  If you select the Basic - Multi column template from Starter Templates, you can access the file called multiColumnTemplate.css.  In "Live" view, you can drag your cursor over the menu items, and as you hover, the text turns from white to gray.  I assumed the code was already prepared for linking since this is a template.  However, when selecting one of the menu items in the gray bar called secondary header in order to assign a link, the default "hover" from white to gray breaks and the text becomes blue and underlined like old school HTML links.  It's like there's no css coding for the a, hover, etc.  Or at least I can't find it.  Can anyone tell me if I'm missing something?  Or tell me what code I should insert to make these links work right?  Also, when I say I'm assigning the link in the Properties Box, all I'm doing is highlighting one of the menu items and selecting an .html file from my site folder.  So once the link is assigned there, the menu item (in the gray secondary header bar) turns blue and underlined. Any input appreciated!

PS-Here are some of the areas where I'm looking for the anchor coding:

.secondary_header {

  width: 100%;

  padding-top: 20px;

  padding-bottom: 20px;

  background-color: #B3B3B3;

  clear: left;

}

.container .secondary_header ul {

  margin-top: 0%;

  margin-right: auto;

  margin-bottom: 0px;

  margin-left: auto;

  padding-top: 0px;

  padding-right: 0px;

  padding-bottom: 15px;

  padding-left: 0px;

  width: 100%;

}

.secondary_header ul li {

  list-style: none;

  float: left;

  margin-right: auto;

  margin-top: 0px;

  font-family: "Source Sans Pro";

  font-weight: normal;

  color: #FFFFFF;

  letter-spacing: 1px;

  margin-left: auto;

  text-align: center;

  width: 16%;

  transition: all 0.3s linear;

}

.secondary_header ul li:hover {

  color: #717070;

  cursor: pointer;

Adobe Community Professional
Correct answer by Nancy OShea | Adobe Community Professional

I'm not thrilled with the CSS code in this multi-column Template.  You have my permission to use another one.

Anyway, add some links to your menu.  You can use temporary # if you like.

<nav class="secondary_header" id="menu">

      <ul>

      <li><a href="#">ABOUT</a></li>

        <li><a href="#">WORK</a></li>

        <li><a href="#">PORTFOLIO</a></li>

        <li><a href="#">SERVICES</a></li>

        <li><a href="#">CLIENTS</a></li>

        <li><a href="#">CONTACT</a></li>

      </ul>

    </nav>

Now that we have anchors to target, we can add these selectors to the CSS code.

.secondary_header ul li {

    list-style: none;

    float: left;

    margin-right: auto;

    margin-top: 0px;

    font-family: "Source Sans Pro";

    font-weight: normal;

    color: #FFFFFF;

    letter-spacing: 1px;

    margin-left: auto;

    text-align: center;

    width: 16%;

    transition: all 0.3s linear;

}

.secondary_header ul li:hover {

    color: #717070;

    cursor: pointer;

}

.secondary_header a {

    color: #FFF;

    text-decoration:none;

}

.secondary_header a:hover, a:active, a:focus {

    color: #717070;

}

TOPICS
Create menus in Dreamweaver, Dreamweaver | Mac OS issues, Learn Dreamweaver

Views

780

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Jan 09, 2018 0
Adobe Community Professional ,
Jan 09, 2018

Copy link to clipboard

Copied

This is the HTML code.  Since your template contains no links yet, there are no anchors to target.

<nav class="secondary_header" id="menu">

      <ul>

        <li>ABOUT</li>

        <li>WORK</li>

        <li>PORTFOLIO</li>

        <li>SERVICES</li>

        <li>CLIENTS</li>

        <li>CONTACT</li>

      </ul>

    </nav>

Nancy O'Shea, ACP
Alt-Web Design & Publishing

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jan 09, 2018 0
New Here ,
Jan 09, 2018

Copy link to clipboard

Copied

Hi,

My issue wasn't with targeting/adding anchors to the menu items.  My issue was with the anchors turning blue and underlined once I assigned the <a> tag through the Properties Box.  The problem is that the external .css file doesn't seem to have the code necessary for my links to have a style.

I found a work-around. I will go ahead and share in case someone else is looking to avoid blue, underlined links when assigning an anchor (in the Properties box via Window>Properties) to one of the menu items in the secondary header bar.  The user can specify CSS settings for links in Page Properties by selecting Links (CSS).  A <style> tag (see below) is added in the HTML template once you specify your choices for links.  I would prefer that the multiColumnTemplate.css file contain the code for anchors/links because everything else in this template is user ready.   I think most people prefer the code to be in the .css file, not in the HTML template.  That's the answer I'd really like--how to get the external .css file to have the code  instead of having to add it internally or inline. 

Thanks!

<style type="text/css">

a:link {

    color: #FFFFFF;

    text-decoration: none;

}

a:visited {

    text-decoration: none;

    color: #FFFFFF;

}

a:hover {

    text-decoration: none;

    color: #686767;

}

a:active {

    text-decoration: none;

    color: #FFFFFF;

}

</style>

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jan 09, 2018 0
Adobe Community Professional ,
Jan 09, 2018

Copy link to clipboard

Copied

I'm not thrilled with the CSS code in this multi-column Template.  You have my permission to use another one.

Anyway, add some links to your menu.  You can use temporary # if you like.

<nav class="secondary_header" id="menu">

      <ul>

      <li><a href="#">ABOUT</a></li>

        <li><a href="#">WORK</a></li>

        <li><a href="#">PORTFOLIO</a></li>

        <li><a href="#">SERVICES</a></li>

        <li><a href="#">CLIENTS</a></li>

        <li><a href="#">CONTACT</a></li>

      </ul>

    </nav>

Now that we have anchors to target, we can add these selectors to the CSS code.

.secondary_header ul li {

    list-style: none;

    float: left;

    margin-right: auto;

    margin-top: 0px;

    font-family: "Source Sans Pro";

    font-weight: normal;

    color: #FFFFFF;

    letter-spacing: 1px;

    margin-left: auto;

    text-align: center;

    width: 16%;

    transition: all 0.3s linear;

}

.secondary_header ul li:hover {

    color: #717070;

    cursor: pointer;

}

.secondary_header a {

    color: #FFF;

    text-decoration:none;

}

.secondary_header a:hover, a:active, a:focus {

    color: #717070;

}

Nancy O'Shea, ACP
Alt-Web Design & Publishing

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jan 09, 2018 1
New Here ,
Jan 11, 2018

Copy link to clipboard

Copied

Yes!  That's what I needed.  Thanks!!!

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jan 11, 2018 0