Skip to main content
S
Showoff1973
Participating Frequently
May 22, 2018
Answered

Altering CSS

  • May 22, 2018
  • 1 reply
  • 1071 views

I've been running my own site for a few years and I've been hoping to someday add new coding to "spruce it up," so to speak. I've been finding and following tutorials on a few things, and I've been successful in some. But one that is perplexing me is adding drop down menus to my site.

I followed a tutorial and actually made one by creating the property code on the same html page. But when I try to add that code to my CSS, it goes crazy. The menu doesn't keep the same spacing, and when I roll over the buttons, the drop down parts show up at the top of the screen. I'm thinking there's a conflict with the established code, but for the life of me, I can't find it.

Any help is appreciated.

This topic has been closed for replies.
Correct answer Nancy OShea

I feel like I'm being impossible, but do I put this code in the html or the css? And does it matter where?


Includes go inside your parent HTML document.  See tutorial below.

Alt-Web Design & Publishing: Server-Side Includes with PHP

1 reply

Jon Fritz
Community Expert
Jon FritzCommunity Expert
Community Expert
May 22, 2018

Could you post a link to your work in progress so we can take a look?

Without seeing the actual code you're working with, it's pretty much impossible to help aside from giving vague generalizations.

S
Showoff1973Author
Participating Frequently
May 22, 2018

Understandable.

Here's the code I'm using now and wanting to change:

___________________________________

* {

    margin: 0;

    padding: 0;

}

body {

    background: #000000 url(images/img01.gif) repeat-x;

    font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;

    font-size: 13px;

    color: #999999;

}

h1, h2, h3 {

}

h1 {

    font-size: 3em;

}

h2 {

    letter-spacing: -1px;

    font-size: 2em;

}

h3 {

    font-size: 1em;

}

p, ul, ol {

    margin-top: 1.8em;

    line-height: 180%;

}

ul, ol {

    margin-left: 3em;

}

blockquote {

    margin-left: 3em;

    margin-right: 3em;

}

a {

    color: #CCCCCC;

}

a:hover {

    text-decoration: none;

    color: #FFFFFF;

}

hr {

    display: none;

}

/* Header */

#header {

    width: 960px;

    height: 316px;

    margin: 0 auto;

    background: url(images/TMAnewLogoSmaller.jpg);

}

#header h1, #header h2 {

    float: left;

    margin: 0;

    text-transform: uppercase;

    color: #FFFFFF;

}

#header h1 {

    padding: 30px 0 0 20px;

    font-size: 3em;

}

#header h2 {

    padding: 47px 0 0 8px;

    font-size: 1.8em;

    font-style: italic;

}

#header a {

    text-decoration: none;

    color: #FFFFFF;

}

/* Menu */

#menu {

    width: 960px;

    height: 100px;

    margin: 0 auto;

    background: url(images/BGImage4.jpg);

}

#menu ul {

    margin: 0;

    padding: 0;

    list-style: none;

    line-height: normal;

}

#menu li {

    float: left;

    padding: 12px 10px 0 20px;

}

#menu a {

    text-decoration: none;

    letter-spacing: -1px;

    font-size: 1.2em;

    font-weight: bold;

}

#menu a:hover {

    text-decoration: underline;

}

/* Page */

#page {

    width: 920px;

    margin: 0 auto;

    padding: 30px 20px 20px 20px;

    background: url(images/img04.jpg) no-repeat;

}

/* Content */

#content {

    float: left;

    width: 605px;

}

.post {

    margin-bottom: 40px;

}

.post .title {

    border-bottom: 1px solid #454545;

}

.post .title a {

    text-decoration: none;

}

.post .entry {

    padding: 0 20px;

}

.post .meta {

    height: 20px;

    padding: 15px 20px;

    background: url(images/img05.gif) no-repeat;

    line-height: normal;

}

.post .meta a {

    text-decoration: none;

    font-weight: bold;

}

.post .meta a:hover {

    text-decoration: underline;

}

.post .meta .byline {

    float: left;

}

.post .meta .comments {

    float: right;

}

/* Sidebar */

#sidebar {

    float: right;

    width: 295px;

}

#sidebar ul {

    margin: 0;

    padding: 0;

    list-style: none;

}

#sidebar li {

}

#sidebar li ul {

    padding: 0 0 20px 20px;

    list-style: square inside;

}

#sidebar h2 {

    height: 50px;

    padding: 13px 20px 0 20px;

    background: url(images/img06.gif) no-repeat;

    font-size: 1.6em;

}

/* Search */

#search {

    padding: 20px;

    text-align: center;

}

#search input {

    margin-bottom: 10px;

    padding: 3px 5px;

    background: #1F1F1F url(images/img06.gif) no-repeat center center;

    border: 1px solid #454545;

    font: bold 1.2em "Trebuchet MS", Arial, Helvetica, sans-serif;

    color: #FFFFFF;

}

#search #s {

    width: 80%;

    background: #1F1F1F;

}

/* Calendar */

#calendar {

    padding-bottom: 20px;

}

#calendar table, #calendar caption {

    width: 80%;

    margin: 0 auto;

    text-align: center;

}

#calendar caption {

    text-transform: uppercase;

    letter-spacing: .25em;

    font-weight: bold;

}

#calendar thead th {

    background: #333333;

}

#calendar tbody td {

    background: #111111;

}

#calendar a {

    text-decoration: none;

    font-weight: bold;

}

#calendar a:hover {

    text-decoration: underline;

}

/* Footer */

#footer {

    width: 960px;

    margin: 0 auto;

    padding: 20px 0;

    background: url(images/img07.gif) no-repeat;

}

#footer p {

    margin: 0;

    line-height: normal;

    text-align: center;

}

_____________________________________________________

And here is what I'm trying to add to the MENU section:

_____________________________________________________

/* Menu */

       

        ul#navmenu, ul.sub1, ul.sub2 {

            list-style-type: none;

            font-size: 9pt;

        }

       

        ul#navmenu li {           

            width: 125px;

            text-align: center;

            position: center;

            float: left;

            margin-right: 10px;

        }

       

        ul#navmenu a {

            text-decoration: none;

            display: block;

            width: 150px;

            height: 30px;

            line-height: 40px;

            background-color: #1D5A73;

            border: 1px solid #CCC;

            border-radius: 5px;

        }

       

        ul#navmenu .sub1 li {

        }

       

        ul#navmenu .sub1 a {

            margin-top: 5px;

        }

       

        ul#navmenu .sub2 a {

            margin-left: 10px;

        }

       

        ul#navmenu li:hover > a {

            background-color: #CFC;           

        }

       

        ul#navmenu li:hover a:hover {

            background-color: #FF0;

        }

       

        ul#navmenu ul.sub1 {

            display: none;

            position: absolute;

            top: 26px;

            left: 0px;

        }

       

        ul#navmenu ul.sub2 {

            display: none;

            position: absolute;

            top: 0px;

            left: 126px;

        }

       

        ul#navmenu li:hover .sub1 {

            display: block;

        }

       

        ul#navmenu .sub1 li:hover .sub2 {

            display: block;

        }

       

        .darrow {

            font-size: 11pt;

            position: absolute;

            top: 5px;

            right: 4px;

        }

       

        .rarrow {

            font-size: 13pt;

            position: absolute;

            top: 6px;

            right: 4px;

        }

________________________________________________________________

Like I mentioned, I thought simply replacing the MENU section would work, but it's causing major glitches.

Nancy OShea
Community Expert
Nancy OSheaCommunity Expert
Community Expert
May 22, 2018

Without seeing the related HTML, it's hard to comment about any of this.  Can you please put your page online and post the URL?

Nancy O'Shea— Product User & Community Expert
Terms & ConditionsAccessibility statement
Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices