adding custom css

  • 0
  • 1
  • Problem
  • Updated 5 years ago
Merged

This conversation has been merged. Please reference the main conversation: HTML Help! Can you help me troubleshoot my code (or 3rd party software)?

So i'm attempting to add several external CSS files to my website. After a fustrating battle with the navigation menu, I finally got it working, however it only seems to load the CSS half of the time I load the page in mozilla but refuses to work in Chrome. I also am currently attempting a battle with an active button link to a form, which it doesn't seem to want to read my link the CSS file at all. my css for the navigation menu:

#nav {
    list-style:none;
    font-weight:bold;
    margin-bottom:10px;
    float:center;
    width:100%;
    }
  #nav li {
    float:left;
    margin-right:10px;
    position:relative;
    width: 145px;
    border-style: double;
    border-width: 10px;
    border-color: #590400;
    }
  #nav a {
    display:block;
    padding:5px;
    color:#fff;
    background:#a80800;
    text-decoration:none;
    text-align: center;
    }
  #nav a:hover {
    color:#fff;
    background:#025568;
    text-decoration:underline;
    }

/*--- DROPDOWN ---*/
#nav ul {
    background:#fff;
    background:rgba(255,255,255,0);
    list-style:none;
    position:absolute;
    left:-9999px;
}
#nav ul li {
    padding-top:1px;
    float:none;
    border-style: solid;
}
#nav ul a {
    white-space:nowrap;
}
#nav li:hover ul {
    left:0;
}
#nav li:hover a {
    background:#025568;
    text-decoration:underline;
}
#nav li:hover ul a {
    text-decoration:none;
}
#nav li:hover ul li a:hover{
    background: #025568;
    background: linear-gradient(top, #590500 0%, #CA1A11 100%);
    background: -moz-linear-gradient(top, #590500 0%, #CA1A11 100%);
    background: -webkit-linear-gradient(top, #590500 0%, #CA1A11 100%);
}


and the html code for that menu:

<link type="text/css" rel="stylesheet" href="files\CSS\navmenu.css" />

<ul id="nav">
    <li>
        <a href="index.html">Home</a>
    </li>

    <li>
        <a href="about-us.html">About Us</a>
   
    </li>
    <li>
        <a href="#">Teachers</a>

        <ul>
            <li><a href="#">Instrumental</a></li>
            <li><a href="#">Vocal</a></li>
            <li><a href="#">Strings</a></li>
        </ul>

    </li>
    <li>
        <a href="#">Our Products</a>
        <ul>
            <li><a href="#">In-Store</a></li>
            <li><a href="#">Teachers</a></li>
            <li><a href="#">Churches</a></li>
        </ul>
    </li>
    <li>
        <a href="#">Contact</a>
    </li>
</ul>


I also have the CSS file in the <head> tag as well, hoping that'll work, but alas I get nothing. Another trouble i'm having is that that navigating with this menu in other pages (i.e. the about-us page to the home page) will bring it to an homestead error page. I'm wondering if this has to do with it not being my main page site?


and here is my css for the email button:


.emailbutton {
    -moz-box-shadow:inset -2px -1px 2px 0px #fce2c1;
    -webkit-box-shadow:inset -2px -1px 2px 0px #fce2c1;
    box-shadow:inset -2px -1px 2px 0px #fce2c1;
    background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #e6823a), color-stop(1, #853700) );
    background:-moz-linear-gradient( center top, #e6823a 5%, #853700 100% );
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#e6823a', endColorstr='#853700');
    background-color:#e6823a;
    -webkit-border-top-left-radius:6px;
    -moz-border-radius-topleft:6px;
    border-top-left-radius:6px;
    -webkit-border-top-right-radius:6px;
    -moz-border-radius-topright:6px;
    border-top-right-radius:6px;
    -webkit-border-bottom-right-radius:6px;
    -moz-border-radius-bottomright:6px;
    border-bottom-right-radius:6px;
    -webkit-border-bottom-left-radius:6px;
    -moz-border-radius-bottomleft:6px;
    border-bottom-left-radius:6px;
    text-indent:0;
    border:1px solid #a84600;
    display:inline-block;
    color:#ffffff;
    font-family:Arial;
    font-size:24px;
    font-weight:bold;
    font-style:normal;
    height:100px;
    line-height:100px;
    width:150px;
    text-decoration:none;
    text-align:center;
    text-shadow:1px 1px 2px #99765e;
}
.emailbutton:hover {
    background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #853700), color-stop(1, #e6823a) );
    background:-moz-linear-gradient( center top, #853700 5%, #e6823a 100% );
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#853700', endColorstr='#e6823a');
    background-color:#853700;
}.emailbutton:active {
    position:relative;
    top:1px;
 }

with the html being:

<link type="text/css" rel="stylesheet" href="files\CSS\emailbuttoncss.css" / >

<a href="#" class="emailbutton">Email Us</a>



any help would be greatly appreciated.

Thank you.
Photo of Bradly0690

Bradly0690

  • 102 Points 100 badge 2x thumb

Posted 5 years ago

  • 0
  • 1

There are no replies.

This conversation is no longer open for comments or replies.