Skip to main content
Showoff1973
Participating Frequently
May 22, 2018 2:05 PM UTC
Answered

Altering CSS

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 is closed to new replies. Start a new post to keep the conversation going.
Nancy OShea
Nancy OSheaCorrect answer
Community Expert
May 25, 2018 4:55 PM UTC

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

Nancy O'Shea— Product User & Community Expert
View reply

11 replies

Jon Fritz
Community Expert
Jon FritzCommunity Expert
Community Expert
May 22, 2018 2:13 PM UTC

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.

Translate
Showoff1973Author
Participating Frequently
May 22, 2018 4:02 PM UTC

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.

Translate
Nancy OShea
Community Expert
Nancy OSheaCommunity Expert
Community Expert
May 22, 2018 4:55 PM UTC

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?

Translate
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